Warning:
This wiki has been archived and is now read-only.
Css4-text
Contents
介紹
模块之间的相互作用
此模块替代并扩展了【CSS21】 第16章中定义的文本级特性。
值
本规范遵照【CSS21】中的CSS属性定义惯例。本规范中没有定义的取值类型已在CSS等级2修正1【CSS21】中定义。其他CSS模块可能会扩展这些取值类型的定义:例如【CSS3COLOR】,与该模块结合,扩展了本规范中使用的<颜色>取值类型。
除了在各属性的定义中列出的特定的值,所有在本规范中定义的属性还接受inherit关键字作为其属性值。基于可读性原因,没有明确地重复。
术语
语素簇是指语言用户认定的一个字符或脚本的一个基本单元。在Unicode技术报告中详细描述的术语:文本边界【UAX29】。本规范中使用的是在【UAX29】中扩展的语素簇定义(而不是传统的语素簇定义)。用户代理可能会进一步地按照Unicode允许的方式定制该定义。在本规则中,不明确的术语字符被认为是语素簇的一个更友好的代名词。查看字符和属性了解如何确定字符的Unicode属性。
本规范中的字母是属于Unicode字母或数字通用类型之一的字符。【UAX44】
文字轉換
文字转换:‘text-transform’属性
名称: | text-transform |
取值: | none | [ [ capitalize | uppercase | lowercase ] | | full-width | | full-size-kana ] |
初始: | none |
适用于: | 所有元素 |
继承: | 是 |
百分比: | N/A |
媒介: | 视觉 |
计算值: | 特定值 |
动画: | - |
该属性转换文字的样式。其值拥有下列意义:
‘none
’
‘capitalize
’
‘uppercase
’
‘lowercase
’
‘full-width
’
‘full-size-kana
’
Unicode标准制定的字符指令的大小写映射规则可以在Unicode协会网站【UNICODE】上找到。用户代理必须使用Unicode字符的完整大小写映射,包括在默认大小写算法中定义的任意有条件的大小写规则。如果(且仅有)元素的内容语言(取决于文档语言的规则)已知,则必须同时遵守相应的语言特定的规则。其最低限度的包括(但不限于)Unicode的SpecialCasing.txt中的语言特定的规则。
示例:
例如,在土耳其语中,存在两个“i”,第一个有一个点——“İ”和“i”、第二种没有点——“I”和“ı”。因此通常“I”和“i”之间的大小写映射会被替换为对应有点/无点情况的不同的映射集,而这不存在与英语之中。这些映射必须只在当前语言已知为土耳其语或阿塞拜疆语时起作用;在其他语言中,通常需要映射“I”和“i”。因此,此规则有条件的定义于Unicode的SpecialCasing.txt文件之中。
用于‘capitalize
’的“单词”的定义是用户代理决定的;我们建议(但不要求)使用【UAX29】确定单词的边界。编码任意不应期待‘capitalize
’会遵循语言特定的首字母管理(例如在英语中跳过冠词)。
全角和半角形式的定义可以在Unicode协会网站【UAX11】上找到。到全角形式的映射定义自【UAX44】中分解映射(Decomposition_Mapping)中拥有<wide>或<narrow>标记的码点。对于<narrow>标记,其映射是从码点到分解(减去<narrow>标记)的;对于<wide>标记,其映射是从分解(减去<wide>标记)回到源码点的。
从小假名到普通假名的映射定义于小假名映射。
若指定了多个值,及需要应用多个转换,则应用转换的顺序如下:
- ‘
capitalize
’、‘uppercase
’和‘lowercase
’。 - ‘
full-width
’。 - ‘
full-size-kana
’
文字转换在空格处理之后进行,这意味着‘full-width
’转换将只处理U+0020空格到U+3000。
示例:
在下面的例子中,将转换日语缩写中的ASCII字符为对于的全角形式,这使得它们的布局和换行与表意字符相似:
abbr:lang(ja) { text-transform: full-width; }
问题: 全大写的字符有时会拥有特殊的排版考虑。例如:标点符号和数字可能会被调整为拥有更高的“中心”(参见OpenType中的大小写特性)。我们是否应该默认这样?
问题:
CSS可能会引入创建用于不常见的字符转换的自定义映射表的能力,例如与【CSS3LIST】‘@counter-style
’相似的‘@text-transform
’规则,此机制可能会被用于替代‘full-size-kana
’。
空白處理
文档的原文本中经常会包含一些不会影响最终显示的格式化信息:例如,为便于编辑而截断段落(行)或在源代码中插入诸如制表符和空的的空白。CSS空白处理允许编码人员控制对这些格式化信息的解释:在显示文档时保留或折叠它们。
在源文档中,可是使用回车(U+000D)、换行(U+000A)或一个组合(U+000D U+000A)或者其他机制(例如SGML RECORD-START及RECORD-END标记)分隔段落。如果文档语言没有指定分段规则,则文本中的每个换行(U+000A)、回车(U+000D)、CRLF序列(U+000D U+000A)都被认为是分段标志。(这个默认规则同样适用于产生的内容。)在CSS中,每个这样的分段标志都被认为是一个单独的换行符(U+000A)。
在CSS的空白处理中,空白字符仅为显示而解释:其不会影响潜在的文档数据。
值的注意的是,文档解析器可能不仅会格式化分段,还会根据标记规则折叠其他空白字符或其他处理后的空白。因为CSS处理在解析阶段之后才会进行,所以其不可能恢复这些字符的样式。因此,下面指定的一些行为会收到这些限制条件的影响,并可能会由用户代理决定。
问题: 换行标志的行为是什么?是否影响加入?我们是否可以只是复制某些零宽度Unicode字符的行为?
空白折叠:‘text-space-collapse’属性
问题: 本节仍在讨论,很可能在未来的草案中发生变化。
名称: | text-space-collapse |
取值: | collapse | discard | [ [ preserve | preserve-breaks ] && [ trim-inner | | consume-before | | consume-after ] |
初始: | collapse |
适用于: | 所有元素 |
继承: | 是 |
百分比: | N/A |
媒介: | 视觉 |
计算值: | 特定值 |
动画: | - |
问题: 需要一个属性名。
此属性声明是否和怎样折叠元素之内的空白。其值拥有如下意义,它们必须按照空白处理规则进行解释:
‘collapse
’
‘preserve
’
‘preserve-breaks
’
collapse
’一样折叠空白字符,但保留换行符为将之断行符。‘discard
’
‘trim-inner
’
‘‘consume-before’
‘consume-after
’
示例:
下列样式规则实现了MathML的空白处理:
@namespace m "http://www.w3.org/1998/Math/MathML";
m|* {
text-space-collapse: discard;
}
m|mi, m|mn, m|mo, m|ms, m|mtext {
text-space-collapse: trim-inner;
}
问题:
‘trim-inner
’、‘consume-before
’和‘consume-after
’被认为不能很好的工作,因为‘text-space-collapse
’是可继承的,这意味着插入一个<span>或<div>将会造成删除额外的空白。
制表符大小:‘tab-size’属性
名称: | tab-size |
取值: | <整数> | <长度> |
初始: | 8 |
适用于: | 块容器 |
继承: | 是 |
百分比: | 不适用 |
媒介: | 视觉 |
计算值: | 指定的值 |
动画: | - |
该属性确定了制表符(U+0009)在显示时的度量。整数表示度量单位是空白字符(U+0020)。不允许负整数。
空白处理规则
空白处理只影响空格(U+0020)、制表符(U+0009)和(正常化)换行符(U+00A0)。
对于每个拥有内联格式化内容的内联(包括匿名内联),空白字符的处理方式如下(忽略双向格式化字符):
- 如果‘
text-space-collapse
’被设为‘collapse
’、‘preserve-breaks
’,则空白字符将被认为是可折叠的,并且通过折叠下面的步骤进行处理:- 移除紧邻换行符之前或之后的所有空格和制表符。
- 如果‘
text-space-collapse
’没有被设为‘preserve-breaks
’,则换行符将按照换行转换规则为显示而进行转换。 - 将每个制表符转化为一个空格(U+0020)。
- 移除所有紧邻可折叠空格之后的空格——即使在内联边界的外部。但是,如果移除该空格会消除文本中的一个断行机会,该机会被认为仍然存在。
- 移除紧邻设置为‘
consume-before
’的元素之前的任意可折叠空格。这些被移除的空白不表示文本中的断行机会。 - 移除紧邻设置为‘
consume-after
’的元素之后的任意可折叠空格。这些被移除的空白不表示文本中的断行机会。
- 如果‘
text-space-collapse
’被设为‘preserve
’,则一系列没有被元素边界阻断的空白被认为是一系列未阻断空白。但是,断行机会存在于该序列的结尾处。 - 如果‘
text-space-collapse
’被设为‘discard
’,则每个空白序列中的第一个空白字符都被转化为一个零宽度非联合(U+200C)并以此序列中的剩余部分。
之后,显示整个块。布局内联、考虑双向重排并按照‘text-wrap
’属性指定换行。
在布局每一行时,
- 移除在该行开始处的一系列可折叠空白。
- 将每个制表符显示为一个水平移位,即将下一个个字符的起始边缘移至下一个制表符结束。制表符结束位于从块起始内容边缘使用块的字体渲染的空格(U+0020)的宽度的几倍。倍数由‘
[[#tab-size0|]]
’属性给出。 - 移除一系列在行尾的可折叠空白。
- 如果在行尾的空白或制表符是不可折叠的,但其‘
text-wrap
’被设为‘normal
’或‘avoid
’,则用户代理可能会直观地折叠其字符扩展宽度。
在空白处理步骤中没有被移除的空白被称为保留空白。
双向性空白折叠的实例
示例:
考虑下面的标记片段,特别注意空白(不同的背景和边框用于强调和标志):
<ltr>A <rtl> B </rtl> C</ltr>
<ltr>元素表示从左至右嵌入;<rtl>元素表示从右至左嵌入。如果‘text-space-collapse
’属性被设为‘collapse
’,则上文中的处理模型将产生下列结果:
- B之前的空白( )将与A之后的空白( )折叠。
- C之前的空白( )将与B之后的空白( )折叠。
最后将留下两个空白,一个在A之后处于从左至右嵌入等级,另一个在B之后处于从右至左嵌入等级。这之后按照Unicode双向算法排序,最后结果如下:
A BC
值得注意的是,两个空白均在A与B之间,没有在B与C之间。这能够最好地避免将空白放置于元素之外,而仅将其放置于开始和结束标记之内,并且在实际上依靠隐含的双向性而不是明显的嵌入等级。
换行转换规则
若换行符可折叠,则它们将根据其上下文在断行之前或之后被转换为空格(U+0020)或被移除。
值的注意的是,空白处理规则在执行此检查之前已经移除了换行符之后的制表符和空白。
- 如果紧邻换行符之前或之后的字符是零宽度空格字符(U+200B),则移除换行符。
- 否则,如果换行符之前及之后的字符的东亚宽度属性【UAX11】均为F、W或H(而不是A)之一,且均不是韩语,则移除换行符。
- 否则,将换行符转化为空格(U+0020)。
问题: 我们非常欢迎讨论其在实际工作中的意见,特别是使用泰语或其他脚本工作的人。
对空白折叠效果的详细总结
- 连续的空白将被折叠为一个单独的空格。
- 在两个汉语、日语或彝语字符之间的一系列换行符合其他空白将被折叠为空。
- 在一个包含换行符的空白序列之前或之后的零宽度空白将造成整个空白序列被折叠为一个零宽度空格。
空白和文字换行的速记属性:‘white-space’属性
名称: | white-space |
取值: | normal | pre | nowrap | pre-wrap | pre-line |
初始: | 没有为速记属性定义 |
适用于: | 所有元素 |
继承: | 是 |
百分比: | (不适用) |
媒介: | 视觉 |
计算值: | 查看独立属性 |
动画: | - |
‘white-space
’属性是‘text-space-collapse
’和‘text-wrap
’属性的速记形式。但不会出现所有组合。其值的意义如下:
‘normal
’
‘pre
’
‘nowrap
’
‘pre-wrap
’
‘pre-line
’
下列信息表总结了‘white-space
’属性属性不同值的行为:
新行 | 空白和制表符 | 文字换行 | |
---|---|---|---|
normal | 折叠 | 折叠 | 换行 |
pre | 保留 | 保留 | 不换行 |
nowrap | 折叠 | 折叠 | 不换行 |
pre-wrap | 保留 | 保留 | 换行 |
pre-line | 保留 | 折叠 | 换行 |
斷行與詞邊界
在大多数书写系统中,如果没有断字符,在断行符仅会出现在单词边界处。许多书写系统使用空格或标点明确的分隔单词,可以根据这些字符确定断行机会。但诸如泰语、老挝语和高棉语的脚本不会使用空格或标点分隔单词。虽然零宽度空格(U+200B)可以在脚本中用作明确的单词定界符,但这种做法不常见。因此,需要一个词法资源来正确的确定这些文本中的截断点。
在一下其他书写系统(包括中文、日文、彝语及可能的韩语)中,断行机会基于字符边界,而不是单词边界。在这些系统中,断行可以发生在除了某些字符组合之间外的任意位置。另外,在这些限制严格性的程度上可以随排版样式而变。
CSS没有完全的定义断行机会将会出现在哪里,但提供了某些控件来区分常见变换。
问题: 我们非常欢迎适当的引用此处的指引。
问题: 没有字典的断行信息:泰语。
浮动和绝对定位的元素不会出现断行机会。替代元素的断行行为等价于拉丁字符。
问题: 我们不确定本节是否能够很好的处理东南亚脚本。另外,我们欢迎提供关于在没有字典的情况下东南亚脚本是否截断的指引。
严格断行:‘line-break
’属性
名称: | line-break |
取值: | auto | loose | normal | strict |
初始: | auto |
适用于: | 所有元素 |
继承: | 是 |
百分比: | (不适用) |
媒介: | 视觉 |
计算值: | 特定值 |
动画: | - |
该属性为一个元素指定严格的断行规则:特别是断行与标点直接的相互作用。其值的意义如下:
‘auto
’
‘loose
’
‘normal
’
‘strict
’
CSS将隐含断行的规则按照严格程度分为三个等级。每个等级的规则集明确的效果由用户代理决定,并且应当遵守语言惯例。但本规范推荐如下:
- 下列阻断在‘
strict
’中禁止,在‘normal
’和‘loose
’中允许:- 在日语小假名之前的阻断。
- 在片假名-平假名长音标记之前的阻断:ー(U+30FC)。
- 下列阻断在‘
normal
’和‘strict
’中禁止,在‘loose
’中允许:- 在重复标记前的阻断:々(U+3005)、〻(U+303B)、ゝ(U+309D)、ゞ(U+309E)、ヽ(U+30FD)、ヾ(U+30FE)。
- 在某些不可分割字符之间的阻断:‥(U+2025)、…(U+2026)。
- 若语言已知为汉语或日语,则额外的:
- 某些居中标点符号之前的阻断::(U+003A)、;(U+003B)、・(U+30FB)、:(U+FF1A)、;(U+FF1B)、・(U+FF65)、!(U+0021)、?(U+003F)、‼(U+203C)、⁇(U+2047)、⁈(U+2048)、⁉(U+2049)、!(U+FF01)、?(U+FF1F)。
- 后缀之前的阻断:%(U+0025)、¢(U+00A2)、°(U+00B0)、‰(U+2030)、′(U+2032)、″(U+2033)、℃(U+2103)、%(U+FF05)、¢(U+FFE0)。
- 前缀之后的阻断:$(U+0024)、£(U+00A3)、¥(U+00A5)、€(U+20AC)、№(U+2116)、$(U+FF04)、£(U+FFE1)、¥(U+FFE5)。
在CSS3中,没有区分非CJK文本的严格程度等级:仅CJK码点受影响,除外这些文本被标记为汉语或日语,在这些情况下一些额外的常见码点受影响。但未来的CSS等级可能会增加影响非CJK文本的行为。
对本属性的支持是可选的。我们建议用户代理支持CJK排版,由其是才日本市场的用户代理。
CSSWG认为在本规范的未来版本中需要更精密地控制断行,以满足高端出版要求。
断词规则:‘word-break
’属性
名称: | word-break |
取值: | normal | keep-all | break-all |
初始: | normal |
适用于: | 所有元素 |
继承: | 是 |
百分比: | (不适用) |
媒介: | 视觉 |
计算值: | 特定值 |
动画: | - |
该属性指定单词内的断行机会。其值的意义如下:
‘normal
’
‘break-all
’
‘keep-all
’
如果诸如阿拉伯语的塑性脚本因‘break-all
’而允许在单词之间的阻断,则这些字符必须像其没有被阻断那样塑性。
斷字
断字允许控制单词的分隔,以改善段落的布局。CSS3文本没有定义断字的确切规则,但其定义了六个属性及一个@规则来影响断字。
可以使用‘hyphens
’属性控制是否应用断字。
对于下列编码人员控件,用户代理不需要为了满足CSS文本等级4而支持它们:
尽管如此,我们大力鼓励用户代理优化其断行实现,以选中好的阻断点和适当的断字点。
这些控件是可选的,因为对于低端的断字实现,它们不够重要;对于高端的分段实现(例如Teχ),它们不够有效。
在计算‘min-content
’固有尺寸时不会考虑断字机会。
断字控制:‘hyphens
’属性
名称: | hyphens |
取值: | none | manual | auto0 |
初始: | manual |
适用于: | 所有元素 |
继承: | 是 |
百分比: | (不适用) |
媒介: | 视觉 |
计算值: | 特定值 |
动画: | - |
该属性控制是否允许断字在一行之内创建更多的阻断机会。其值的意义如下:
‘none
’
‘manual
’
示例:
在HTML中,表示自动连字符,其被认为是一个断行机会。ex­ample
‘auto
’
正确的自动断字需要一个适用于被阻断文本所使用语言的断字资源。因此用户代理仅需要对编码人员已经指定语言(即,来自HTML的lang或XML的xml:lang)且该语言拥有断字资源的文本进行自动断字。
如果诸如阿拉伯语的塑性脚本允许在单词内阻断而造成断字,则这些字符必须仍然按照其没有被阻断时那样被塑性。
连字符:‘hyphenate-character
’属性
名称: | hyphenate-character |
取值: | auto | <字符串> |
初始: | auto |
适用于: | 所有元素 |
继承: | 是 |
百分比: | (不适用) |
媒介: | 视觉 |
计算值: | 特定值 |
动画: | - |
该属性指定将显示在被断字的单词中间的字符串。值‘auto
’表示用户代理应当自行找到适当的值,最好是来自同一来源的断字字典。如果指定了一个字符串,则其将显示在断字符前那一行的结尾处。
示例:
在拉丁文脚本总,连字符(U+2010)经常用于表示一个单词被分开。通常不需要显式的设置它。但也可以这样做:
article { hyphenate-character: "\2010" }
由自动的断字产生的连字符和由自动断字符产生的断字符都会依照‘hyphenate-character
’属性进行显示。
断字尺寸限制:‘hyphenate-limit-zone
’属性
名称: | hyphenate-limit-zone |
取值: | <百分比> | <长度> |
初始: | 0 |
适用于: | 块容器 |
继承: | 是 |
百分比: | 参照行盒子的宽度 |
媒介: | 视觉 |
计算值: | 特定值 |
动画: | - |
问题:
‘hyphenate-limit-zone
’是否是一个好名字?建议、意见?
该属性指定可能会在断字之前的行盒子中遗留的未填充空间(对齐之前)的最大跨度,这会引起使下一行中的部分单词回到当前行。
断字字符限制:‘hyphenate-limit-chars
’属性
名称: | hyphenate-limit-chars |
取值: | [ auto | <整数> ]{1,3} |
初始: | auto |
适用于: | 所有元素 |
继承: | 是 |
百分比: | (不适用) |
媒介: | 视觉 |
计算值: | 特定值 |
动画: | - |
该属性指定被断字的单词中字符的最小数量。如果单词没有在单词中/连字符之前/连字符之后遇到所需的最小字符串,则该单词禁止被断字。非空格组合标记(ISSUE Unicode类)和词内标点(Unicode类P*)不计入最小值。
问题: 非空格组合标记 - Unicode类
如果指定了三个值,则第一个值是单词中所有字符的最小数目、第二个值是断字点之前字符的最小数目、第三个值是断字点之后字符的最小数目。如果没有设置第三个值,则其与第二个值相同。如果没有设置第二个值,则其被设为‘auto
’。值‘auto
’意味着由用户代理选择适合当前布局的值。
除非用户代理能够取得更好的值,我们建议使‘auto
’表示前后个两个字符、总计5个字符。
示例:
在下面的例子中,被断字单词的最小字符数留给用户代理决定(这意味着其可能会根据语言、行的长度或其他因素而改变),但在断字点前后的最小字符串被设为3。
p { hyphenate-limit-chars: auto 3; }
断字行现在:‘hyphenate-limit-lines
’和‘hyphenate-limit-last
’属性
名称: | hyphenate-limit-lines |
取值: | no-limit | <整数> |
初始: | no-limit |
适用于: | 块容器 |
继承: | 是 |
百分比: | (不适用) |
媒介: | 视觉 |
计算值: | 特定值 |
动画: | - |
该属性指定在一个元素中连续的连字符连接的最大行数。值‘no-limit
’表示没有限制。
在某些情况下,用户代理可能不会使用指定的值。(参见‘overflow-wrap
’)其没有定义由类似于紧急中断所产生的断字是否会影响邻近的断字点。
名称: | hyphenate-limit-last |
取值: | none | always | column | page | spread |
初始: | none |
适用于: | 块容器 |
继承: | 是 |
百分比: | (不适用) |
媒介: | 视觉 |
计算值: | 特定值 |
动画: | - |
该属性指定在元素、列、页面和跨页结尾处的断字的行为。跨页是两个同时对读者可见的页面的集合。其值:
‘none
’
‘always
’
‘column
’
‘page
’
‘spread
’
示例:
p { hyphenate-limit-last: always }
div.chapter { hyphenate-limit-last: spread }
示例:
一个段落在设置了‘hyphenate-limit-last: none
’后会被格式化为:
This is just a
simple example
to show Antarc-
tica.
设置了‘hyphenate-limit-last: always
’会:
This is just a
simple example
to show
Antarctica.
换行
文本换行由‘text-wrap
’和‘overflow-wrap
’属性控制:
文本换行设置:‘text-wrap
’属性
名称: | text-wrap |
取值: | normal | none | avoid |
初始: | normal |
适用于: | 所有元素 |
继承: | 是 |
百分比: | (不适用) |
媒介: | 视觉 |
计算值: | 特定值 |
动画: | - |
该属性文本换行的模式。可接受的值:
‘normal
’
‘none
’
‘avoid
’
normal
’相同。无论‘text-wrap
’取值如何,都会在强制阻断处换行:对所有的值,必须遵守定义自【UAX14】中BK、CR、LF、CM NL和SG换行类的换行行为。
若‘text-wrap
’被设为‘normal
’或‘avoid
’,则允许在空格之外的其他标点处阻断的用户代理应当优先考虑断点。举例说明,如果在斜杠之后的阻断的优先级低于空格,则序列“check /etc”将不会在‘/’和‘e’之间阻断。用户代理可能会使用包含块的宽度、文本的语言和其他因素确定优先顺序。只要小心的避免这种不合适的阻断,我们建议在除空格之外的适当的标点处进行阻断,其会产生更多的外边距,特别是在狭窄的地方。
实例:在显示页脚时使用‘text-wrap: avoid
’
示例:
断点的优先级可以根据文本的预设分组设置。
规则如下:
footer { text-wrap: avoid; /* 继承到所有后裔 */ }
标记如下:
<footer>
<venue>27th Internationalization and Unicode Conference</venue>
• <date>April 7, 2005</date> •
<place>Berlin, Germany</place>
</footer>
在狭窄的窗口中,页脚将被阻断为:
27th Internationalization and Unicode Conference •
April 7, 2005 • Berlin, Germany
在更窄的窗口中:
27th Internationalization and Unicode
Conference • April 7, 2005 •
Berlin, Germany
而不会是:
27th Internationalization and Unicode Conference • April
7, 2005 • Berlin, Germany
紧急换行:‘overflow-wrap
’属性
对齐
文本对齐:‘text-align
’属性
名称: | text-align |
取值: | start end | match-parent | <字符串>? [ start | end | left | right | center | justify ] |
初始: | start |
适用于: | 块容器 |
继承: | 是 |
百分比: | (不适用) |
媒介: | 视觉 |
计算值: | 特定值(除match-parent外) |
动画: | - |
该属性描述一个块之内的内联内容,在不能完全填充一个行盒子时,将如何水平对齐。其值的意义如下:
‘start
’
‘end
’
‘left
’
left
’可能会对齐在行盒子的起始边缘。‘right
’
right
’可能会对齐在行盒子的结束边缘。‘center
’
‘justify
’
text-justify
’属性所指定的方法两端对齐。‘<string>
’
‘match-parent
’
‘start end
’
一个文本块是行盒子的堆栈。在‘start
’、‘end
’、‘left
’、‘right
’和‘center
’下,该属性指定每个行盒子中的内联级盒子将如何关于行盒子的起始和结束方向进行对齐:对齐与视窗或包含块无关。
在‘justify
’下,除了偏移文本的位置之外,用户代理可能会通过调整文本拉伸或压缩内联盒子。(查看‘text-justify
’、‘letter-spacing
’和‘word-spacing
’。)如果一个元素的空格被设备可折叠的,则用户代理不需为了对齐而调整文本,可能会视文本为没有扩展机制。如果用户代理选择调整文本,则其必须确认按照空白处理规则的要求。
表格列中基于字符的对齐
如果为一列中的多个单元格指定了对齐字符,则该列中每个这样的单元格的对齐字符都要沿着一个平行于列的轴排列,列中的其他文本相应的进行偏移。(注意,字符串必须要在每个单元格中都相同,但通常它们是相同的。)
如果对齐字符在文本中出现了超过一次,则使用第一个进行对齐。如果对齐字符没有在单元格中出现,则对齐时按照对齐字符出现在其内容的结尾处进行。
基于字符的对齐发生在计算单元格宽度之前,所以自动宽度计算可以为对齐保留足够的空间。目前没有定义参与对齐的跨列单元格是否在宽度计算之前进行。如果对单元格内容的宽度计算妨碍了整列的完全对齐,则对齐的结果不确定。
关键字值可能会与<字符串>值联合制定;如果没有给出关键字,其默认为‘right
’。该值用于:
- 基于字符的对象应用于并非表格单元格的盒子上。
- 文本(在非强制中断点)被换行
- 列过宽,字符对齐不能确定其对齐的字符内容的位置。在这种情况下,列中第一个单元格的指定了对齐字符的关键字对齐用于滑动对齐的字符内容,以在尽可能不改变列宽度的情况下匹配关键字对齐。对于‘
center
’,用户代理可能会使用其极端值、居中对齐周本身(在可能的范围内容)或其他可以在视觉上居中对齐内容的放(例如通过获得单元格内容的范围到任意一轴的加权平均值),来居中其对齐内容。 - 字符对齐的单元格跨越多个列。在这种情况下,关键字对齐值用于确定用哪个单元格的轴进行对齐:最左侧一列对应‘
left
’,最右侧一列对应‘right
’和‘center
’,最开始一列对应‘start
’,最结尾一列对应‘end
’。
示例:
下列样式表
TD { text-align: "." center }
将造成下列HTML表格中一列美元数组
<TABLE>
<COL width="40">
<TR> <TH>Long distance calls
<TR> <TD> $1.30
<TR> <TD> $2.50
<TR> <TD> $10.80
<TR> <TD> $111.01
<TR> <TD> $85.
<TR> <TD> N/A
<TR> <TD> $.05
<TR> <TD> $.06
</TABLE>
沿着小数点进行对齐。表格将会显示为:
+---------------------+
| Long distance calls |
+---------------------+
| $11.30 |
| $22.50 |
| $0.80 |
| $200567.01 |
| $85. |
| N/A |
| $.05 |
| $.06 |
+---------------------+
右对齐用于基于字符对齐的默认值,因为即使在自右向左的书写系统中,数字系统也几乎都是从左到右的,而基于字符的对齐主要用于数字对齐。
最后一行对齐:‘text-align-last
’属性
名称: | text-align-last |
取值: | auto | start | end | left | right | center | justify |
初始: | auto |
适用于: | 块容器 |
继承: | 是 |
百分比: | (不适用) |
媒介: | 视觉 |
计算值: | 特定值 |
动画: | - |
该属性描述块的最后一行或强制换行前的一行将如何对齐。如果该行同时还是块的第一行或强制换行后的一行,则除非‘text-align
’拥有两个关键字(即‘text-align
’指派了明确的首行对齐),‘text-align-last
’优先于‘text-align
’。
‘auto
’等价于‘text-align
’属性除‘justify
’之外的值,在那种情况下,若‘text-justify
’为‘distribute
’则为‘justify
’;否则为‘start
’。其他的值与‘text-align
’的意义相同。
对齐方法:‘text-justify
’属性
名称: | text-justify |
取值: | auto | none | inter-word | inter-ideograph | inter-cluster | distribute | kashida |
初始: | auto |
适用于: | 块容器及可能的内联元素 |
继承: | 是 |
百分比: | (不适用) |
媒介: | 视觉 |
计算值: | 特定值 |
动画: | - |
该属性选择在行的对齐被设为‘justify
’时(查看‘text-align
’)所使用的对齐方法,其主要控制哪些脚本字符在调整时需要被放在一起或者被分开。该属性适用于块容器,但用户代理可能会(但不必须)同时在内联元素上支持该属性。其值如下:
‘auto
’
一个可能的算法是根据段落的语言确定其行为:用户代理可以为语言选择指定的值,例如中日韩的‘inter-ideograph
’或英语的‘inter-word
’。另一种可能的算法是针对所有脚本的通用折中的对齐算法,即块脚本的‘inter-cluster
’方法拥有最高优先级。
‘none
’
该值在用户样式表中起到提高可读性和可访问性的作用。
‘inter-word
’
‘inter-ideograph
’
‘inter-cluster
’
‘distribute
’
‘kashida
’
在两端对齐文本时,用户代理获取行内容的结尾到行盒子的边缘之间的剩余空间,并将这些空间分配到期内容之间,使得内容恰好完全填充该行盒子。如果‘letter-spacing
’和‘word-spacing
’属性值允许,用户代理还可能会分配负空间,在行内放置较正常空间的情况下更多内容。精确的对齐算法由用户代理决定;然而CSS提供了一些通用指导,除‘auto
’外的所有对齐方法都应当遵守这些指导。
CSS定义扩展机会为文本中对齐算法可能会改变其空间的点。扩展机会的优先级由对齐方法定义。在一行中,扩展和压缩应当首先把目标确定为优先级最高的扩展机会;低优先级的扩展机会用于低优先级的调整。
扩展和压缩的限制由‘letter-spacing
’和‘word-spacing
’属性给出。如何将剩余的空间一次性的分配给所有满足限制条件的扩展机会,由用户代理决定。如果一行的内联内容不能拉伸到行盒子的全部宽度,则必须按照‘text-align-last
’属性进行对齐。(如果‘text-align-last
’为‘justify
’,那么必须在‘text-justify
’为‘distribute
’时使用‘center
’,否则使用‘start
’进行对齐。)
针对‘text-justify
’属性的每个值,扩展机会的优先顺序将在下面的表格中给出。由于对齐行为因书写系统而异,扩展机会也根据脚本类别而不同。在某个优先级上两个字母之间的扩展机会,至少其中之一属于在该优先级上的脚本类别,且不属于其他更高优先级的脚本类别。所有在相同优先级内的脚本必须被同等对待。分字符(空白)和其他符号、标点将依照下表区别对待:
‘inter-word ’
|
‘inter-ideograph ’
|
‘distribute ’
|
‘inter-cluster ’
|
‘kashida ’
|
‘auto ’
| |
---|---|---|---|---|---|---|
块 | 2 | 1 | 2 | 2 | 3 | 1* |
聚合 | 2 | 2 | 1 | 1 | 3 | 1* |
草书 | 2 | 2 | 2 | 2 | 1 | 2* |
离散 | 2 | 2 | 1 | 2 | 3 | 2* |
连续 | 从不 | 从不 | 从不 | 从不 | 从不 | 从不 |
空白 | 1 | 1 | 1 | 1 | 2 | 1* |
符号 | 2 | 1 | 1 | 1 | 3 | * |
- ‘
auto
’一列的定义是信息性的;其展示的优先顺序是对各对齐方法的折中。
空白分类表示扩展机会在分字符处。(参见‘word-spacing
’。)用户代理可能会在相同的优先级下对空白采取和其他扩展点不同的操作,但对其优先级的修改禁止影响其他优先级下的扩展点。举例说明,在日语‘inter-ideograph
’对齐(中日韩字符优先于拉丁字符)中,单词空间通常拥有较中日韩字符内间隔更高的优先级,同时用户代理可能会为此吧第一优先级分开。但是不允许用户代理将空白的优先级下降到与拉丁字符相同。
符号分类表示扩展机会在启用自动分隔点的任意Unicode符号(S*)和标点(P*)类中的字符处或之间。上面给出了这些点的默认对其优先级。然而,可能会基于排版惯例存在一下控制对其行为的附加规则。因此,用户代理可能会指派特定字符或引入额外的优先级来处理包括符号和表单的扩展机会。举例说明,通常在连续的破折号(U+2014)、水平线(U+2015)、省略号(U+2026)或两点符号(U+2025)字符之间不存在扩展机会【JLREQ】;因此用户代理可能会将这些字符指派给“从不”优先级。另一个例子是,某些全角标点字符被认为包含一个扩展机会(参见‘text-spacing
’)。用户代理可能会因此将这些字符的优先级指定为比表意字符之间的机会更高。
对于草书脚本的对齐,单词可能会通过Kashida或其他草书扩展过程进行拉伸。Kashida可能会应用于离散单元或连续文本,Kashida点的优先级由用户代理决定:举例说明,用户代理可能会在行的结尾应用多次。用户代理不应将kashida应用于不恰当的字体。相反的,它可能会依赖其他的对齐方法来拉伸或压缩阿拉伯语段(即,替换为倾斜形式或可选连字)。由于拉伸规则依赖于字体样式,用户代理应当尽可能的依赖字体,而不是基于字体决定的规则集插入Kashida。用户代理应当限制拉伸,因为在混合脚本的行中,一小段阿拉伯语不会被强制吸收过多的额外空间。如果用户代理不支持草书拉伸,则与连续脚本类似,不会在这些脚本的字符之间出现扩展点。
在任意方法下,用户代理都可能会启用或打断可选连字,或者使用诸如替代字形或字形压缩的字体特性,来帮助对齐文本。这些行为不受当前等级的CSS所控制。
问题:
添加‘text-justify
’使用TeX算法的例子。
示例:
日语布局需求的第3.8节行调整给出了文本格式化将如何两端对齐日语文本的规则集合的例子。其描述了‘text-justify
’属性为‘inter-ideograph
’且‘text-spacing
’属性不为‘no-compress
’时的规则。
其产生的效果与‘text-spacing
’的计算值不为‘trim-end
’或‘space-end
’的情况类似。如果用户代理想要阻止此行为,则应当忽略第3.8.3节中的规则B。
值得注意的是,该文档中描述的规则是针对于日语的。因此它们可能会造成对齐诸如英语的其他语言时产生并非最佳的结果。为了使该规则适应于其他脚本,用户代理可以采取例如忽略压缩半角空格的规则(第3.8.3节中的规则A)等方法。
間距
CSS 透過 ‘word-spacing
’ 與
‘letter-spacing
’ 屬性控制文字之間的間隔。在 CSS1 與 CSS2
中這個間隔只能是 ‘normal
’(可兩邊對齊)或固定長度,然而
word-spacing
’ 屬性變得可以用百分比值設定,這可以讓網頁作者加倍或取消詞間間隔在下面的例子裡,詞間的間距會變成一半,但是若兩邊對齊需要,會擴張到原來的間隔長度。
p { word-spacing: -50% 0%; }
在 ‘word-spacing
’ 與
‘letter-spacing
’ 裡代表最佳、最小、最大間隔的 <spacing-limit>的定義為
<spacing-limit> = [ normal | <length> | <percentage> ]{1,3}
若網頁作者設了三個值,則這些值照順序代表最佳、最小與最大間隔。若僅設兩個值,則第一個值同時代表最佳與最小間隔,而第二個值代表最大間隔。若僅設有一個值,則此值代表最佳、最小與最大間隔。這些值得解讀方法如下:
‘normal
’
‘<length>
’
‘<percentage>
’
word-spacing
’ 上合法。負值不合法。在沒有兩邊對齊的情況下使用者代理會使用最佳間隔。兩邊對齊的過程可改變間隔而讓間隔不最佳間隔(參見上面的 ‘text-justify
’ 屬性)但是必不可違反最小間隔限制而且應該避免超過最大間隔。
使用者代理將最小間隔當作嚴格拘束:若最大間隔小於最小間隔,則最大間隔的使用值設為最小間隔。最佳間隔同樣。若最大間隔小於最佳間隔,則最佳間隔的使用值設為最大間隔的使用值。
常規間隔:雖然 ‘normal
’ 間隔為 UA 定義,常規最小與最大間隔必須相對於最佳間隔,使得當最佳間隔改變時最小與最大限制也會隨著增大變小。這些限制也可根據行中文字的某些量度(例:塊的寬度除以子體大小)改變,因為在寬度比較大的情況下間隔限制可以比較嚴格。常規最佳/最小/最大間隔也可根據 ‘text-justify
’ 屬性的值、元素的語言或是其他因素改變。一對相連或草體字符間的常規間隔總是零。
詞間距 ― ‘word-spacing
’ 屬性
字間距 ― ‘letter-spacing
’ 屬性
字符类别间距 ― ‘text-spacing
’ 属性
名称: | text-spacing |
取值: | normal | none | [ trim-start | space-start ] || [ trim-end | space-end | allow-end ] || [ trim-adjacent | space-adjacent ] || no-compress || ideograph-alpha || ideograph-numeric || punctuation Error creating thumbnail: Unable to save thumbnail to destination
|
初始: | normal |
适用于: | 块容器 |
继承: | 是 |
百分比: | N/A |
媒介: | 视觉 |
计算值: | 特定值 |
动画: | {{{9}}} |
此属性用一组基于字符类别的规则来控制同一个行内格式化上下文(inline formatting context)内同一行里相邻字符的间距。这样的间距会增添到受影响的字形之间,也会从字形间减去。取值定义如下:
‘normal
’
space-start allow-end trim-adjacent
’。‘none
’
‘ideograph-alpha
’
‘ideograph-numeric
’
‘punctuation
’
‘space-start
’
‘trim-start
’
‘allow-end
’
‘space-end
’
‘trim-end
’
‘space-adjacent
’
‘trim-adjacent
’
‘no-compress
’
此属性与 ‘word-spacing
’ 及 ‘letter-spacing
’ 属性累加。即 ‘letter-spacing
’ 贡献的间距量(若有)累加至 ‘text-spacing
’ 产生的间距。‘word-spacing
’ 同理。
在元素边界,字符间引入的额外间距量由包含该边界的最内侧元素决定且在该元素内部渲染。若额外间距应用至某一个字形,则间距由包含该字形的最内侧元素决定。
normal
’、‘none
’、‘trim-start
’、‘trim-end
’ 和 ‘space-end
’ 之外的取值面临风险,可能会被移出这一等级的 CSS。目前在此定义它们有助于为此特性进行全面的设计。 对此属性的支持是可选的。强烈推荐想要支持 CJK 排版的 UA 支持此属性。
全角标点挤压
典型全角字符的字形和标准汉字(例如「水」U+6C34)的 advance 一致。
文字間隔用的字符類別
在處理本屬性的時候使用以下定義:
方塊文字
- 所有在範圍 U+3041 到 U+30FF 裡除了 Unicode 標點 [P*] 以外的字符。
- CJK 筆劃(U+31C0 到 U+31EF)。
- 片假名語音擴展(U+31F0 至 U+31FF)。
- 所有屬於 Unicode 漢文字(Han)屬性的字符 [UAX24]。
非方塊字母
- 是一個方塊文字。
- 被 [UAX11] 歸為東亞全形(F)。
- 在豎排中透過 ‘
text-orientation
’ 屬性或 ‘text-combine
’ 屬性為直立。
非方塊數字
- 被 [UAX11] 歸為東亞全形(F)。
- 在豎排中透過 ‘
text-orientation
’ 屬性或 ‘text-combine
’ 屬性為直立。
全形開標點
全形閉標點
全形中間點
全形冒分號
全形句逗點
全形冒分號與全形句逗點會被視為全形閉標點還是全形中間點取決於標點畫在字形盒的哪個地方。若標點至中,則使用者代理應該將該標點視中間點。若標點畫在其中一邊(橫排文字的左邊,豎排文字的上邊)且另一半因此為空白,則使用者代理應該將該標點視為閉標點並以閉標點的方式剪裁。
使用者代理必須將全形冒分號與全形句逗點分為全形閉標點或是全形中間點。使用者代理可使用語言相關的慣例與書寫模式(橫排或豎排)與/或字型資訊決定分類方法。使用者代理可以適度的將更多字符加到任何類別。
冒分號 | 句逗號 | |
---|---|---|
簡體中文(橫排) | 閉 | 閉 |
簡體中文(豎排) | 閉 | 閉 |
繁體中文 | 中間點 | 中間點 |
韓文 | 中間點 | 閉 |
日文 | 中間點 | 閉 |
兩端效果
两端效果控制一行参照块中的其他行进行锁紧(‘text-indent
’)以及内容将如何对齐至一行开始和结束边缘(‘hanging-punctuation
’,参见‘text-spacing
’)。
示例:
日语拥有三种通用的起始边缘排版方案,它们的区别是对开括号的处理。
图1:在行头处的开括号的位置【JLREQ】
假设用户代理样式表为:
p { margin: 1em 0; }
则CSS可以使用一下规则完成日语排版样式:
- 括号与缩进平齐,与其他行平齐(第一方案):
p { /* 平齐对齐 */ margin: 0; text-indent: 1em; text-spacing: trim-start; }
- 在所有的行上括号保持全角空格(第二方案):
p { /* 全角对齐 */ margin: 0; text-indent: 1em; text-spacing: normal; }
- 括号悬挂在缩进处,去其他行平齐(第三方案):
p { /* 悬挂对齐 */ margin: 0; text-indent: 1em; text-spacing: trim-start; hanging-punctuation: first; }
首行随进:‘text-indent
’属性
名称: | text-indent |
取值: | [ <长度> | <百分比> ] && [ hanging | | each-line ]? |
初始: | 0 |
适用于: | 块容器 |
继承: | 是 |
百分比: | 参照包含块的宽度 |
媒介: | 视觉 |
计算值: | 特定的百分比值或绝对长度 |
动画: | - |
该属性指定应用于块中内联内容的行的缩进。该缩进的效果是在行盒子的起始边缘应用外边距。除非另外使用‘hanging
’和/或‘each-line
’关键字进行指定,仅对一个元素的第一个格式化的行有效。举例说明,如果一个匿名块盒子的第一行是其父元素的第一个孩子,则仅有第一行有效。
其值的意义如下:
‘<长度>
’
‘<百分比>
’
‘each-line
’
‘hanging
’
示例:
如果没有浮动的自左至右文本设置了‘text-align
’为‘start
’、‘text-indent
’为‘5em
’,则文本的第一行将以一个5em的块开始:
Since CSS1 it has been possible
to indent the first line of a block
element using the 'text-indent'
property.
值得注意的是,由于‘text-indent
’属性是可继承的,在将其设置在一个块元素上时,它将一学年其后裔内联块元素。因此,最好在设置了‘display: inline-block
’的元素上指定‘text-indent: 0
’
标点处理:‘hanging-punctuation
’属性
名称: | hanging-punctuation |
取值: | none | [ first | | [ force-end | allow-end ] | | last ] |
初始: | none |
适用于: | 内联元素 |
继承: | 是 |
百分比: | 不适用 |
媒介: | 视觉 |
计算值: | 特定值 |
动画: | - |
该属性确定在文本中一行的开始或结尾处的标点符号(如果存在)是否可以放置于行盒子之外(或在缩进之内)。
值得注意的是,如果块容器没有足够的内边距,标点悬挂可以触发溢出。
其值的意义如下:
‘none
’
‘first
’
‘last
’
‘force-end
’
‘allow-end0
’
若要悬挂标点符号,在测量时,不考虑行的内容是否恰好合适、对齐或两端对齐。根据行的对齐,可以将符号放置于行盒子之外。最多只能有一个标点字符被悬挂于行的一个边缘之外。
悬挂的标点符号仍然在其内联盒子之内,且参与文本对齐:在确定行适合多少内容、为了两端对齐需要拉伸或压缩多少行的内容或者如何为了文本对齐在行盒子中定位内容时,没有计算该字符的前进宽度。
如果内联盒子的起始和结束的边框或内边距非零,则不允许悬挂。这将阻止一个可悬挂的标点符号进行悬挂:举例说明,一个在拥有结尾内边距的内联盒子结尾处的句号不能悬挂在一行的结尾边缘之外。
允许悬挂的句号和逗号包括:
U+002C | , | 逗号 |
U+002E | . | 句号 |
U+060C | ، | 阿拉伯语逗号 |
U+06D4 | ۔ | 阿拉伯语句号 |
U+3001 | 、 | 表意逗号 |
U+3002 | 。 | 表意句号 |
U+FF0C | , | 全角逗号 |
U+FF0E | . | 全角句号 |
U+FE50 | ﹐ | 小型逗号 |
U+FE51 | ﹑ | 小型表意逗号 |
U+FE52 | ﹒ | 小型句号 |
U+FF61 | 。 | 半角表意句号 |
U+FF64 | 、 | 半角表意逗号 |
用户代理可能会适当的添加其他字符。
问题: 是否应当允许添加其他字符?
CSS工作组希望用户代理在添加其他字符的时候通知工作组。
对这个属性的支持是可选的。我们鼓励支持中日韩排版的用户代理支持该属性,特别是在日本市场的。
示例:
‘allow-end
’和‘force-end
’是用于东亚的两种悬挂标点变种。
p {
hanging-punctuation: allow-end;
}
p {
hanging-punctuation: force-end;
}
‘allow-end
’中第一行结尾处的标点没有悬挂,这是因为其在不悬挂时恰好合适。但如果使用了‘force-end
’,则其强制悬挂。两端对齐在进行测量时不计算悬挂的标点。因此拉伸该行。
文字裝飾
行装饰:下划线、上划线和删除线
下列属性描述了施加在元素内容上的行装饰。在将这些属性指定或传递到内联盒子上时,这些装饰将影响该元素所产生的所有盒子,进一步的传递到分隔内联的所有在流的块级盒子(参见CSS2.1第9.2.1.1节)。在将这些属性指定或传递到一个ruby盒子上时,这些装饰将进一步的传递到基ruby。在将这些属性指定或传递到一个创建内联格式化上下文的块容器上时,这些装饰将传递到一个包含块容器内所有在流内联级孩子的匿名内联元素上。对于所有其他元素,这些装饰将传递到所有在流孩子上。
值得注意的是,文本装饰不会传递到流外后期上,也不会传递到这些内联块和内联表格的原子内联级后裔的内容上。
默认的,下划线、上划线和删除线仅适用于文本(包括空白、字间距和词间距):跳过外边距、边框和内边框。没有包含文本的元素,例如图片,同样不会进行装饰。‘text-decoration-skip
’属性可以被用于改变该行为,例如允许内联替代元素拥有下划线或者要求跳过空格。
为了确定文本装饰线条的位置和厚度,用户代理可以参考其后裔的字号和显性基线,但对于一个给出的元素装饰,必须在所有行盒子中使用相同的位置和厚度。样式的颜色和样式必须保留在所有给定元素应用的装饰,即使后裔元素拥有不同的颜色或线条样式值。
问题: 一种情况是,我们愿意支持在保持相同的位置和厚度的情况下改变后裔的颜色和/或样式。
示例:
下图展示了下划线的平均值:
在三个下划线文本片段中,下划线根据文本由小至大递增而持续降低和加厚。
相对定位的后裔沿着这些后裔的文本移动所有文本装饰效果;这不会影响对该行上装饰的初始位置的计算。文本装饰作为文本的一部分进行绘制,‘visibility
’属性、过滤器和其他图形转换同样会影响文本装饰,即使这些装饰是在其祖先元素上指定的。
问题:
是否包含‘text-shadow
’?text-fill呢?
示例:
对于下面的样式表:
blockquote { text-decoration: underline; color: blue; }
em { display: block; }
cite { color: fuchsia; }
和文档片段:
<blockquote>
<p>
<span>
Help, help!
<em> I am under a hat! </em>
<cite> —GwieF </cite>
</span>
</p>
</blockquote>
blockquote元素的下划线被传递至一个围绕span元素的匿名的内联元素,这使得文本“Help, help!”的颜色为蓝色,其下面是匿名内联的蓝色下划线,其颜色从blockquote元素获取。em块中的<em>text</em>
仍然拥有下划线,因为它是能够传递下划线的在流块。文本的最后一行是紫红色的,但其下面的下划线仍然是匿名内联元素中的蓝色。
此图展示了上面的例子中所涉及的盒子。环绕的淡绿色线条表示匿名内联元素,其环绕段落元素的内联内容,环绕的蓝色线条表示span元素,橙色线条表示块。
文本装饰线条:‘text-decoration-line
’属性
名称: | text-decoration-line |
取值: | none | [ underline | no-underline | replace-underline ] | | [ overline | no-overline | replace-overline ] | | [ line-through | no-line-through | replace-line-through ] | remove-all |
初始: | none |
适用于: | 所有元素 |
继承: | 否(but see prose) |
百分比: | (不适用) |
媒介: | 视觉 |
计算值: | 特定值 |
动画: | - |
指定行装饰(如果存在)将被添加到那些元素上。其值的意义如下:
‘none
’
‘underline
’
‘no-underline
’
‘replace-underline
’
‘overline
’
‘no-overline
’
‘replace-overline
’
‘line-through
’
‘no-line-through
’
‘replace-line-through
’
‘remove-all
’
文本装饰颜色:‘text-decoration-color
’属性
名称: | text-decoration-color |
取值: | <颜色> |
初始: | currentColor(当前颜色) |
适用于: | 所有元素 |
继承: | 否 |
百分比: | (不适用) |
媒介: | 视觉 |
计算值: | 计算颜色 |
动画: | - |
该属性定义由元素上‘text-decoration-line
’属性所设置的文本装饰的颜色(下划线、上划线和删除线)。
文本装饰样式:‘text-decoration-style
’属性
名称: | text-decoration-style |
取值: | solid | double | dotted | dashed | wavy |
初始: | solid |
适用于: | 所有元素 |
继承: | 否 |
百分比: | (不适用) |
媒介: | 视觉 |
计算值: | 特定值 |
动画: | - |
概述指定将绘制在特定元素上的文本修饰中线的样式。其值的意义与‘border-style
’属性相同【CSS3BG】。‘wavy
’表示波浪形。
文本装饰速记:‘text-decoration
’属性
名称: | text-decoration |
取值: | <text-decoration-line> | | <text-decoration-style> | | <text-decoration-color> | | blink |
初始: | none |
适用于: | 所有元素 |
继承: | 否 |
百分比: | (不适用) |
媒介: | 视觉 |
计算值: | 特定值 |
动画: | - |
该属性是在一个装饰上设置‘text-decoration-line
’、‘text-decoration-color
’和‘text-decoration-style
’的速记属性。缺省值是它们的初始值。省略‘text-decoration-color
’和‘text-decoration-style
’的‘text-decoration
’声明向后兼容CSS等级1和等级2。
如果指定了关键字‘blink
’,则文字将会闪烁(在可见和不可见之间交替)。符合要求的用户代理可能会根本不闪烁文本。注意,不进行文本闪烁是满足WAI-UAAG检测3.3的技术。
示例:
在下面的例子中,未访问链接将会在CSS1和CSS2用户代理中显示为蓝色实线下划线,在CSS3用户代理中显示为藏青色点线下划线。
:link {
color: blue;
text-decoration: underline;
text-decoration: navy dotted underline; /* 被CSS1/CSS2用户代理忽略 */
}
文本装饰线条连续性:‘text-decoration-skip
’属性
名称: | text-decoration-skip |
取值: | none | [ objects | | spaces | | ink | | edges ] |
初始: | objects |
适用于: | 所有元素 |
继承: | 是 |
百分比: | (不适用) |
媒介: | 视觉 |
计算值: | 特定值 |
动画: | - |
该属性指定了文本装饰的影响必须略过文档内容中的哪些部分。其控制在该元素及其祖先上绘制的所有文本装饰线。其值的意义如下:
‘none
’
‘objests
’
‘spaces
’
‘ink
’
‘edges
’
问题: 我们是否需要一个不略过外边距和内边距的值。
注意,该属性支持继承,其后裔元素可以拥有不同的值。
文本下划线位置:‘text-underline-position
’属性
名称: | text-underline-position |
取值: | auto | alphabetic | below left | below right |
初始: | auto |
适用于: | 所有元素 |
继承: | 是 |
百分比: | (不适用) |
媒介: | 视觉 |
计算值: | 特定值 |
动画: | - |
该属性设置指定在相同元素上的下划线的位置:其不影响指定在其祖先元素上的下划线。其值的意义如下:
‘auto
’
我们建议使用‘alphabetic
’,除非其穿过下标(或被降低的)文本或者其影响亚洲脚本中的字符(例如汉语或藏语,对它们来说字母下划线太高了):在这种情况下,校准到‘below left
’所描述的em盒子边缘更为合适。
‘alphabetic
’
‘below left
’
vertical-align
’属性为长度、百分比、‘top’或‘bottom’的元素。(值得注意的是,根据‘text-decoration-skip
’而不受下划线影响的图片不会影响下划线的位置。)‘below right
’
below left
’。在纵向排版模式下,下划线与‘below left
’对齐,但其对齐到文本的右边缘。如果这将造成下划线被绘制在文本的“上”侧,则上划线还是会在另一侧,即绘制在“下”方。在某些情况下(例如OpenType),字体格式可以提供关于下划线恰当位置的信息。通常这些信息给出‘alphabetic
’下划线的位置;在某些情况下(特别是中日韩字体),其给出‘below left
’下划线位置。(在此情况下,字体的下划线度量通常涉及em盒子的下边缘)。我们鼓励用户代理尽可能在适当的情况下使用字体中的信息(例如下划线厚度或适当的字母对齐)。
重点标志
东亚文档传统上使用在每个字形旁边的小符号强调该文本。
例如:
图4:适用于日语文本的重音强调(使用清晰的蓝色显示)
重点标志样式:‘text-emphasis-style
’属性
名称: | text-emphasis-style |
取值: | none | [ [ filled | open ] | | [ dot | circle | double-circle | triangle | sesame ] ] | <字符串> |
初始: | none |
适用于: | 所有元素 |
继承: | 是 |
百分比: | (不适用) |
媒介: | 视觉 |
计算值: | ‘none ’、一对表示形状和填充的关键字、或字符串
|
动画: | - |
该属性为元素中的文本设置重点符号。其值的意义如下:
‘none
’
‘filled
’
‘open
’
‘dot
’
•
”,空心圆点使用U+25E6“◦
”。‘circle
’
●
”,空心圆形使用U+25CB“○
”。‘double-circle
’
◉
”,空心同心圆使用U+25CE“◎
”。‘triangle
’
▲
”,空心三角形使用U+25B3“△
”。‘sesame
’
﹅
”,空心芝麻使用U+FE46“﹆
”。‘<字符串>
’
如果指定了形状关键字,但没有指定‘filled
’和‘open
’,则假定为‘filled
’。如果仅指定了‘filled
’或‘open
’,则形状关键字将在水平书写模式下计算为‘circle
’、在垂直书写模式下计算为‘sesame
’。
在绘制符号时,应当使用元素的字体,但字号被减小到50%。但是,不是所有字体都拥有所有这些字形,而且有些字体对在这些码位的强调符号使用的不恰当的字号。用户代理可能会选择使用被认为对强调符号来说更好的字体,或者该符号可能会被替换为用户代理所合成的。在垂直排版模式下,符号必须保持垂直:类似于中日韩字符,它们不会为了匹配书写模式而进行旋转。
示例:
对强调符号友好的字体的一个例子是Adobe的开源项目——Kenten Generic OpenType Font,其特为强调字符设计。
符号为每个字符绘制一次。但是,强调符号不会在下列字符处绘制:
- 分字符或者属于Unicode分隔符类(Z*)的字符。(但需要注意,强调符号会绘制在与任意结合字符结合的空白处。)
- 属于Unicode控制代码类和未指派字符类(Cc、Cf、Cn)的字符。
- ‘
text-emphasis-skip
’指定的字符。
如果强调符号将被绘制在与强调符号在相同位置存在ruby的字符上,则ruby应当被放在强调符号与基础文本之间。在这种情况下,确定指定元素的强调符号的位置时,应当按照所有字符都拥有ruby盒子且盒子拥有与元素中最高的ruby盒子相同的高度那样计算。如果用户代理不能再用一侧绘制强调符号和ruby,则用户代理可以隐藏ruby,只绘制强调符号。
强调符号应用于4个字符、ruby应用于其中2个。
为了的CSS等级可能会定义在强调符号和ruby共存时将如何控制文本。
重点标志颜色:‘text-emphasis-color
’属性
名称: | text-emphasis-color |
取值: | <颜色> |
初始: | currentColor(当前颜色) |
适用于: | 所有元素 |
继承: | 是 |
百分比: | (不适用) |
媒介: | 视觉 |
计算值: | 特定值 |
动画: | - |
该属性描述强调符号的前景色。
重点标志速记:‘text-emphasis
’属性
名称: | text-emphasis |
取值: | ‘<text-emphasis-style>’ | | ‘<text-emphasis-color>’ |
初始: | 查看各自属性 |
适用于: | 所有元素 |
继承: | 是 |
百分比: | (不适用) |
媒介: | 视觉 |
计算值: | 查看各自属性 |
动画: | - |
该属性是在一个声明中设置‘text-emphasis-style
’和‘text-emphasis-color
’的速记。缺省值使他们各自的默认值。
注意‘text-emphasis-position
’不在此速记属性中。这是因为贯穿整个文档的特定语言通常形状和颜色改变,但位置始终如一。因此位置应当独立继承。
重点标志位置:‘text-emphasis-position
’属性
名称: | text-emphasis-position |
取值: | [ above | below ] && [ right | left ] |
初始: | above right |
适用于: | 所有元素 |
继承: | 是 |
百分比: | (不适用) |
媒介: | 视觉 |
计算值: | 特定值 |
动画: | - |
该属性描述强调符号将绘制于何处。其值意义如下:
‘above
’
‘below
’
‘right
’
‘left
’
强调符号绘制的位置与分配给该符号的每个字符相关,其位置是ruby位置由‘text-emphasis-position
’给出、ruby对齐为居中的ruby注释文本位置。
强调符号对行高的影响与ruby文本相同。
语言 | 首选符号位置 | 图示 | ||
---|---|---|---|---|
水平 | 垂直 | |||
日语 | above | right | ||
中文 | below | right |
重点标志跳跃:‘text-emphasis-skip
’属性
问题: 本节在头脑风暴下。
名称: | text-emphasis-skip |
取值: | spaces | | punctuation | | symbols | | narrow |
初始: | spaces |
适用于: | 所有元素 |
继承: | 是 |
百分比: | (不适用) |
媒介: | 视觉 |
计算值: | 特定值 |
动画: | - |
该属性描述将绘制那些字符符号。其值意义如下:
‘spaces
’
‘punctuation
’
‘symbols
’
punctuation
’中定义的字符。‘narrow
’
不论该属性为何值,属于Unicode控制代码和未指定字符(Cc、Cf、Cn)类的字符都将被跳过。
问题: 此语法需要用户代理实现为空白绘制符号。是否存在这么做的用例?如果没有,我们是否应当修改该属于禁止在空白处绘制符号?
文本阴影:‘text-shadow
’属性
名称: | text-shadow |
取值: | none | [ <阴影>, ] * <阴影> |
初始: | none |
适用于: | 所有元素 |
继承: | 是 |
百分比: | (不适用) |
媒介: | 视觉 |
计算值: | 一个颜色加三个绝对<长度> |
动画: | - |
该属性接受一个逗号分隔的列表,其描述将要应用于该元素文本上的阴影效果。<阴影>与‘box-shadow
’属性中的定义相同,但不允许‘inset
’关键字。阴影适用于该元素中的所有文本以及其后裔文本。
阴影效果会由前至后应用:第一个阴影在最上面。阴影可能会因此相互重叠,但不会与文本本身重叠。绘制阴影时,其堆栈顶级必须在元素的边框和/或背景(如果存在)、元素的文本和文本装饰之间。用户代理应当避免将文本阴影绘制在属于相同堆栈等级和堆栈内容的邻近元素的文本之上。(这可能会意味着阴影的实际堆栈等级依赖于元素是否拥有边框或背景:因此文本阴影的实际堆栈行为依赖于用户代理。)
与‘box-shadow
’不同,文本阴影不会按照被遮挡的形状进行剪裁,并且如果文本是半透明的还会穿透文本。与‘box-shadow
’类似,文本阴影不影响布局,并且不引发卷动或扩展可滚动区域的大小。
此处定义的阴影绘画顺序与1998年CSS2推荐中的定义相反。
‘text-shadow
’属性同时适用于::first-line和::first-letter伪元素。