Css4-text

From HTML5 Chinese Interest Group Wiki
Jump to: navigation, search

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>标记)回到源码点的。

从小假名到普通假名的映射定义于小假名映射

若指定了多个值,及需要应用多个转换,则应用转换的顺序如下:

  1. capitalize’、‘uppercase’和‘lowercase’。
  2. full-width’。
  3. 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处理在解析阶段之后才会进行,所以其不可能恢复这些字符的样式。因此,下面指定的一些行为会收到这些限制条件的影响,并可能会由用户代理决定。

除制表符(U+0009)、换行符(U+000A)、空格(U+0020)和双向格式化字符(U+020x)之外的控制字符(Unicode类Cc)应当显示为不可见的零宽度字符。用户代理可能会用可见字符替代他们。(但是,要注意的是,这通常会造成它们被显示为缺失字形。)

问题: 换行标志的行为是什么?是否影响加入?我们是否可以只是复制某些零宽度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’,则空白字符将被认为是可折叠的,并且通过折叠下面的步骤进行处理:
    1. 移除紧邻换行符之前或之后的所有空格和制表符。
    2. 如果‘text-space-collapse’没有被设为‘preserve-breaks’,则换行符将按照换行转换规则为显示而进行转换。
    3. 将每个制表符转化为一个空格(U+0020)。
    4. 移除所有紧邻可折叠空格之后的空格——即使在内联边界的外部。但是,如果移除该空格会消除文本中的一个断行机会,该机会被认为仍然存在。
    5. 移除紧邻设置为‘consume-before’的元素之前的任意可折叠空格。这些被移除的空白不表示文本中的断行机会。
    6. 移除紧邻设置为‘consume-after’的元素之后的任意可折叠空格。这些被移除的空白不表示文本中的断行机会。
  • 如果‘text-space-collapse’被设为‘preserve’,则一系列没有被元素边界阻断的空白被认为是一系列未阻断空白。但是,断行机会存在于该序列的结尾处。
  • 如果‘text-space-collapse’被设为‘discard’,则每个空白序列中的第一个空白字符都被转化为一个零宽度非联合(U+200C)并以此序列中的剩余部分。

之后,显示整个块。布局内联、考虑双向重排并按照‘text-wrap’属性指定换行。

在布局每一行时,

  1. 移除在该行开始处的一系列可折叠空白。
  2. 将每个制表符显示为一个水平移位,即将下一个个字符的起始边缘移至下一个制表符结束。制表符结束位于从块起始内容边缘使用块的字体渲染的空格(U+0020)的宽度的几倍。倍数由‘[[#tab-size0|]]’属性给出。
  3. 移除一系列在行尾的可折叠空白。
  4. 如果在行尾的空白或制表符是不可折叠的,但其‘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

设‘text-space-collapse’为‘collapse’,
设‘text-wrap’为‘normal’。

pre

设‘text-space-collapse’为‘preserve’,
设‘text-wrap’为‘none’。

nowrap

设‘text-space-collapse’为‘collapse’,
设‘text-wrap’为‘none’。

pre-wrap

设‘text-space-collapse’为‘preserve’,
设‘text-wrap’为‘normal’。

pre-line

设‘text-space-collapse’为‘preserve-breaks’,
设‘text-wrap’为‘normal’。

下列信息表总结了‘white-space’属性属性不同值的行为:

新行 空白和制表符 文字换行
normal 折叠 折叠 换行
pre 保留 保留 不换行
nowrap 折叠 折叠 不换行
pre-wrap 保留 保留 换行
pre-line 保留 折叠 换行

斷行與詞邊界

在大多数书写系统中,如果没有断字符,在断行符仅会出现在单词边界处。许多书写系统使用空格或标点明确的分隔单词,可以根据这些字符确定断行机会。但诸如泰语、老挝语和高棉语的脚本不会使用空格或标点分隔单词。虽然零宽度空格(U+200B)可以在脚本中用作明确的单词定界符,但这种做法不常见。因此,需要一个词法资源来正确的确定这些文本中的截断点。

在一下其他书写系统(包括中文、日文、彝语及可能的韩语)中,断行机会基于字符边界,而不是单词边界。在这些系统中,断行可以发生在除了某些字符组合之间外的任意位置。另外,在这些限制严格性的程度上可以随排版样式而变。

CSS没有完全的定义断行机会将会出现在哪里,但提供了某些控件来区分常见变换。

对于断行约定的更多信息,可以在差查阅针对日语的【JLREQ】【JIS4051】、针对中文的【ZHMARK】,以及针对所有Unicode脚本的【UAX14】

问题: 我们非常欢迎适当的引用此处的指引。

问题: 没有字典的断行信息:泰语

浮动和绝对定位的元素不会出现断行机会。替代元素的断行行为等价于拉丁字符。

问题: 我们不确定本节是否能够很好的处理东南亚脚本。另外,我们欢迎提供关于在没有字典的情况下东南亚脚本是否截断的指引。

严格断行:‘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

断行可能会发生在单词中的任意两个字符之间。不适用断字符。此选项主要用于那些大部分使用CJK字符的文本的情况,这要求文字更好地平均分布于各行。

keep-all

断行可能只发生在分字符及其他明确分隔机会出。否则次选项等价于‘normal’。此选项主要用于那些使用分字符创建额外断行机会的情况,例如韩语。

如果诸如阿拉伯语的塑性脚本因‘break-all’而允许在单词之间的阻断,则这些字符必须像其没有被阻断那样塑性。

斷字

断字允许控制单词的分隔,以改善段落的布局。CSS3文本没有定义断字的确切规则,但其定义了六个属性及一个@规则来影响断字。

可以使用‘hyphens’属性控制是否应用断字。

对于下列编码人员控件,用户代理不需要为了满足CSS文本等级4而支持它们:

尽管如此,我们大力鼓励用户代理优化其断行实现,以选中好的阻断点和适当的断字点。

这些控件是可选的,因为对于低端的断字实现,它们不够重要;对于高端的分段实现(例如Teχ),它们不够有效。

在计算‘min-content’固有尺寸时不会考虑断字机会。

断字控制:‘hyphens’属性

名称: hyphens
取值: none | manual | auto0
初始: manual
适用于: 所有元素
继承:
百分比: (不适用)
媒介: 视觉
计算值: 特定值
动画: -

该属性控制是否允许断字在一行之内创建更多的阻断机会。其值的意义如下:

none

单词不会在断行处阻断,即使单词中的字符被认为是断行点。

manual

若单词中的字符被认为是断行机会,则单词仅在断行处阻断。

示例:

在Unicode中,U+00AD是一个有条件的“自动连字符”、U+2010是一个明确的连字符。Unicode标准附录14描述了Unicode断行中的自动连字符规则【UAX14】

示例:

在HTML中,­表示自动连字符,其被认为是一个断行机会。ex&shy;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

行可能会在允许的阻断点被阻断,其阻断点由换行规则确定。必须遵守定义自【UAX14】中WJ、ZW和GL换行类的换行行为。

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> &#8226; <date>April 7, 2005</date> &#8226; <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

该值的行为与‘inherit’类似,但对‘start’和‘end’关键字的计算将参考其父亲的‘direction’值,且返回的计算值是‘left’或‘right’。

start end

指定‘start’对齐第一行以及紧邻强制换行之后的行;‘end’对齐剩余的不受‘text-align-last’影响的行。

一个文本块是行盒子的堆栈。在‘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

对齐主要延长草书,其使用kashida或其他书法延长法。该值可能会用于保持CSS3文本的一致性。(不支持草书延长的用户代理必须任务该值无效。)

在两端对齐文本时,用户代理获取行内容的结尾到行盒子的边缘之间的剩余空间,并将这些空间分配到期内容之间,使得内容恰好完全填充该行盒子。如果‘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’(可兩邊對齊)或固定長度,然而 CSS3 可以讓網頁作者指定兩邊對齊時文字的間隔範圍。另外 ‘word-spacing’ 屬性變得可以用百分比值設定,這可以讓網頁作者加倍或取消詞間間隔Note.png

範例十二

在下面的例子裡,詞間的間距會變成一半,但是若兩邊對齊需要,會擴張到原來的間隔長度。

p { word-spacing: -50% 0%; }

在 ‘word-spacing’ 與 ‘letter-spacing’ 裡代表最佳、最小、最大間隔的 <spacing-limit>的定義為

<spacing-limit> = [ normal | <length> | <percentage> ]{1,3}

若網頁作者設了三個值,則這些值照順序代表最佳、最小與最大間隔。若僅設兩個值,則第一個值同時代表最佳與最小間隔,而第二個值代表最大間隔。若僅設有一個值,則此值代表最佳、最小與最大間隔。這些值得解讀方法如下:

normal

用來指定當前字體與/或使用者代理定義的常規最佳/最小/最大間隔。參見下面

<length>

用來指定常規最佳間隔「以外」的額外間隔。值可是負的,不過有可能會有實作相關的極限。

<percentage>

以受影響的字符寬度的百比比率指定額外的間隔。僅在 ‘word-spacing’ 上合法。負值不合法Bug.png

在沒有兩邊對齊的情況下使用者代理會使用最佳間隔。兩邊對齊的過程可改變間隔而讓間隔不最佳間隔(參見上面的 ‘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 || punctuationIdea.png
初始: normal
适用于: 块容器
继承:
百分比: N/A
媒介: 视觉
计算值: 特定值
动画: {{{9}}}

此属性用一组基于字符类别的规则来控制同一个行内格式化上下文(inline formatting context)内同一行里相邻字符的间距。这样的间距会增添到受影响的字形之间,也会从字形间减去。取值定义如下:

normal

指定基准行为,等价于 ‘space-start allow-end trim-adjacent’。

none

关闭全部 text-spacing 特性。所有全角字符都排版为全宽字形。

ideograph-alpha

ideographsnon-ideographic letters 的 run 之间增添 1/4em 的额外间距。判定此行为的一种常用算法在 [JLREG] 中有详细说明

ideograph-numeric

ideographsnon-ideographic numerals 字形的 run 之间增添 1/4em 的额外间距。判定此行为的一种常用算法在 [JLREG] 中有详细说明

punctuation

按照特定于语言的排版规则所要求,围绕标点增添额外的不换行间距。在本等级中,若元素的内容语言是法语,就在 French typographic guidelines 要求的位置插入 narrow no-break space (U+202F) 和 no-break space (U+00A0),否则这一取值不起作用。不过未来的规范可能会为其他语言增加自动间距行为。

space-start

在每个行首将 fullwidth opening punctuation 排版为全宽字形(留白)。

trim-start

在每个行首将 fullwidth opening punctuation 排版为半宽字形(取齐)。

allow-end

如果在两端对齐之前它放不下,就在每个行末将 fullwidth closing punctuation 排版为半宽字形(取齐),否则将该标点排版为全宽字形。

space-end

在每个行末将 fullwidth closing punctuation 排版为全宽字形(留白)。

trim-end

在每个行末将 fullwidth closing punctuation 排版为半宽字形(取齐)。

space-adjacent

将不在行首的 fullwidth opening punctuation 排版为全宽字形(留白),将不在行末的 fullwidth closing punctuation 排版为全宽字形(留白)。

trim-adjacent

挤压标点字形的间距,如下文所述

no-compress

两端对齐不可压缩 text-spacing。(若未指定此值,两端对齐过程可减小自动间距,除非该间距在行首或行末。)[JLREG] 的 3.8 Line Adjustment 有为日文提供的一份压缩规则范例。

此属性与 ‘word-spacing’ 及 ‘letter-spacing’ 属性累加。即 ‘letter-spacing’ 贡献的间距量(若有)累加至 ‘text-spacing’ 产生的间距。‘word-spacing’ 同理。

在元素边界,字符间引入的额外间距量由包含该边界的最内侧元素决定且在该元素内部渲染。若额外间距应用至某一个字形,则间距由包含该字形的最内侧元素决定。

注:‘normal’、‘none’、‘trim-start’、‘trim-end’ 和 ‘space-end’ 之外的取值面临风险,可能会被移出这一等级的 CSS。目前在此定义它们有助于为此特性进行全面的设计。

对此属性的支持是可选的。强烈推荐想要支持 CJK 排版的 UA 支持此属性。

議題十六:有要求增加一个使句号后空白加倍的属性。

全角标点挤压

典型全角字符的字形和标准汉字(例如「水」U+6C34)的 advance 一致。

文字間隔用的字符類別

在處理本屬性的時候使用以下定義:

議題十七:要仔細檢驗類別與 Unicode 代碼點。

方塊文字

包含下面所有字符:
  • 所有在範圍 U+3041 到 U+30FF 裡除了 Unicode 標點 [P*] 以外的字符。
  • CJK 筆劃(U+31C0 到 U+31EF)。
  • 片假名語音擴展(U+31F0 至 U+31FF)。
  • 所有屬於 Unicode 漢文字(Han)屬性的字符 [UAX24]

非方塊字母

Unicode 字母類別 [L*] 與標記類別 [M*] 裡,不滿足任何以下條件的字符:

非方塊數字

Unicode 數字-十進位數字類別 [Nd],不滿足任何以下條件的字符:

全形開標點

包含所有屬於 CJK 符號與標點區塊(U+3000–U+303F CJK Symbols and Punctuation)或是被 [UAX11] 歸為東亞全形(F)的所有開標點字符(Unicode [Ps] 類別),也包含左單引號(「‘」,U+2018 LEFT SINGLE QUOTATION MARK)與左雙引號(「“」,U+201C LEFT DOUBLE QUOTATION MARK)。被縮減的字距是左半邊(橫排)或上半邊(豎排)。

全形閉標點

包含所有屬於 CJK 符號與標點區塊(U+3000–U+303F CJK Symbols and Punctuation)或是被 [UAX11] 歸為東亞全形(F)的所有閉標點字符(Unicode [Pe] 類別),也包含右單引號(「’」,U+2019 RIGHT SINGLE QUOTATION MARK)與右雙引號(「”」,U+201D RIGHT DOUBLE QUOTATION MARK)。被縮減的字距是右半邊(橫排)或下半邊(豎排)。

全形中間點

包含中間點(「·」,U+00B7 MIDDLE DOT)、斷字點(「‧」,U+2027 HYPHENATION POINT)、和片假名中間點(「・」,U+30FB KATAKANA MIDDLE DOT)。也可能包含全形冒分號與/或全形句逗點(請看下面)。

全形冒分號

包含全形冒號(「:」,U+FF1A FULLWIDTH COLON)和全形分號(「;」,U+FF1B FULLWIDTH SEMICOLON)。

全形句逗點

包含頓號(「、」,U+3001 IDEOGRAPHIC COMMA)、句號(「。」,U+3002 IDEOGRAPHIC FULL STOP)、全形逗號(「,」,U+FF0C FULLWIDTH COMMA)、全形句號(「.」,U+FF0E FULLWIDTH FULL STOP)。

全形冒分號與全形句逗點會被視為全形閉標點還是全形中間點取決於標點畫在字形盒的哪個地方。若標點至中,則使用者代理應該將該標點視中間點。若標點畫在其中一邊(橫排文字的左邊,豎排文字的上邊)且另一半因此為空白,則使用者代理應該將該標點視為閉標點並以閉標點的方式剪裁。

使用者代理必須將全形冒分號全形句逗點分為全形閉標點或是全形中間點。使用者代理可使用語言相關的慣例與書寫模式(橫排或豎排)與/或字型資訊決定分類方法。使用者代理可以適度的將更多字符加到任何類別。

注:以下不具有規範性的表格整理了分類全形冒分號語句逗點的語言慣例資料:
冒分號 句逗號
簡體中文(橫排)
簡體中文(豎排)
繁體中文 中間點 中間點
韓文 中間點
日文 中間點
筆者注意到至少在中文字型方面,未遵守這個標準慣例的字型很多。

兩端效果

两端效果控制一行参照块中的其他行进行锁紧(‘text-indent’)以及内容将如何对齐至一行开始和结束边缘(‘hanging-punctuation’,参见‘text-spacing’)。

示例:

日语拥有三种通用的起始边缘排版方案,它们的区别是对开括号的处理。

opening-brackets-at-line-head.png
图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

悬挂一个元素的第一个格式化的行起始处的开括号或引号。其适用于所有Unicode分类Ps、Pf、Pi中的字符。

last

悬挂一个元素的最后一个格式化的行结尾处的闭括号或引号。其适用于所有Unicode分类Pe、Pf、Pi中的字符。

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; }

hanging-punctuation-allow-end.png

p { hanging-punctuation: force-end; }

hanging-punctuation-force-end.png

allow-end’中第一行结尾处的标点没有悬挂,这是因为其在不悬挂时恰好合适。但如果使用了‘force-end’,则其强制悬挂。两端对齐在进行测量时不计算悬挂的标点。因此拉伸该行。

文字裝飾

行装饰:下划线、上划线和删除线

下列属性描述了施加在元素内容上的行装饰。在将这些属性指定或传递到内联盒子上时,这些装饰将影响该元素所产生的所有盒子,进一步的传递到分隔内联的所有在流的块级盒子(参见CSS2.1第9.2.1.1节)。在将这些属性指定或传递到一个ruby盒子上时,这些装饰将进一步的传递到基ruby。在将这些属性指定或传递到一个创建内联格式化上下文的块容器上时,这些装饰将传递到一个包含块容器内所有在流内联级孩子的匿名内联元素上。对于所有其他元素,这些装饰将传递到所有在流孩子上。

值得注意的是,文本装饰不会传递到流外后期上,也不会传递到这些内联块和内联表格的原子内联级后裔的内容上。

默认的,下划线、上划线和删除线仅适用于文本(包括空白、字间距和词间距):跳过外边距、边框和内边框。没有包含文本的元素,例如图片,同样不会进行装饰。‘text-decoration-skip’属性可以被用于改变该行为,例如允许内联替代元素拥有下划线或者要求跳过空格。

为了确定文本装饰线条的位置和厚度,用户代理可以参考其后裔的字号和显性基线,但对于一个给出的元素装饰,必须在所有行盒子中使用相同的位置和厚度。样式的颜色样式必须保留在所有给定元素应用的装饰,即使后裔元素拥有不同的颜色或线条样式值。

问题: 一种情况是,我们愿意支持在保持相同的位置和厚度的情况下改变后裔的颜色和/或样式。

示例:

下图展示了下划线的平均值:

underline-averaging.gif

在三个下划线文本片段中,下划线根据文本由小至大递增而持续降低和加厚。

相对定位的后裔沿着这些后裔的文本移动所有文本装饰效果;这不会影响对该行上装饰的初始位置的计算。文本装饰作为文本的一部分进行绘制,‘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>仍然拥有下划线,因为它是能够传递下划线的在流块。文本的最后一行是紫红色的,但其下面的下划线仍然是匿名内联元素中的蓝色。

underline-example.png

此图展示了上面的例子中所涉及的盒子。环绕的淡绿色线条表示匿名内联元素,其环绕段落元素的内联内容,环绕的蓝色线条表示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

略过空白:包括常规空白(U+0020)、制表符(U+0009)以及不间断空格(U+00A0)、表意空格(U+3000)、所有固定宽度空格(U+2000至U+200A、U+202F和U+205F)、以及相邻的字母间隔或单词间隔。

ink

略过字符绘制处:中断装饰线,以显示文本装饰件将穿过该字形的文本。用户代理可能还会在该字形轮廓的两侧额外的略过一段距离。

edges

用户代理应当将装饰线的起始、结束位置放置于较所装饰元素的内容边缘更靠内的位置,使得诸如两个紧密相邻的元素的下划线不会显示为一条下划线。(这在中文里很重要,对于中文,下划线是一种标点符号。)

问题: 我们是否需要一个略过外边距和内边距的值。

注意,该属性支持继承,其后裔元素可以拥有不同的值。

文本下划线位置:‘text-underline-position’属性

名称: text-underline-position
取值: auto | alphabetic | below left | below right
初始: auto
适用于: 所有元素
继承:
百分比: (不适用)
媒介: 视觉
计算值: 特定值
动画: -

该属性设置指定在相同元素上的下划线的位置:其不影响指定在其祖先元素上的下划线。其值的意义如下:

auto

用户代理可能会使用任意算法确定下划线的位置。

我们建议使用‘alphabetic’,除非其穿过下标(或被降低的)文本或者其影响亚洲脚本中的字符(例如汉语或藏语,对它们来说字母下划线太高了):在这种情况下,校准到‘below left’所描述的em盒子边缘更为合适。

alphabetic

下划线的定位与字母基线相关。在这种情况下,下划线很可能会穿过某些下行字符。

below left

下划线的定位与元素内容盒子的下边缘相关。在这种情况下,下划线通常不会穿过下行字符。(有时被称为“accounting”下划线。)如果下划线影响了拥有更低内容边缘的后裔,则用户代理应当将下划线移动到更低的下划线内容盒子边缘。用户代理可能会在进行这项调节时忽略‘vertical-align’属性为长度百分比、‘top’或‘bottom’的元素。(值得注意的是,根据‘text-decoration-skip’而不受下划线影响的图片不会影响下划线的位置。)

below right

在水平排版模式下,该值等价于‘below left’。在纵向排版模式下,下划线与‘below left’对齐,但其对齐到文本的右边缘。如果这将造成下划线被绘制在文本的“上”侧,则上划线还是会在另一侧,即绘制在“下”方。

在某些情况下(例如OpenType),字体格式可以提供关于下划线恰当位置的信息。通常这些信息给出‘alphabetic’下划线的位置;在某些情况下(特别是中日韩字体),其给出‘below left’下划线位置。(在此情况下,字体的下划线度量通常涉及em盒子的下边缘)。我们鼓励用户代理尽可能在适当的情况下使用字体中的信息(例如下划线厚度或适当的字母对齐)。

重点标志

东亚文档传统上使用在每个字形旁边的小符号强调该文本。

例如:

text-emphasis-ja.gif

图4:适用于日语文本的重音强调(使用清晰的蓝色显示)


重点标志样式:‘text-emphasis-style’属性

名称: text-emphasis-style
取值: none | [ [ filled | open ] | | [ dot | circle | double-circle | triangle | sesame ] ] | <字符串>
初始: none
适用于: 所有元素
继承:
百分比: (不适用)
媒介: 视觉
计算值: none’、一对表示形状和填充的关键字、或字符串
动画: -

该属性为元素中的文本设置重点符号。其值的意义如下:

none

没有重点符号。

filled

形状是实心的。

open

形状是空心的。

dot

显示小型圆形符号。实心圆点使用U+2022“”,空心圆点使用U+25E6“”。

circle

显示大型圆形符号。实心圆形使用U+25CF“”,空心圆形使用U+25CB“”。

double-circle

显示同心圆符号。实心同心圆使用U+25C9“”,空心同心圆使用U+25CE“”。

triangle

显示三角形符号。实心三角形使用U+25B2“”,空心三角形使用U+25B3“”。

sesame

显示芝麻符号。实心芝麻使用U+FE45“”,空心芝麻使用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,只绘制强调符号。

text-emphasis-ruby.png
强调符号应用于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’。下面告知性的表格概述了中文和日语的首选强调符号位置。

语言 首选符号位置 图示
水平 垂直
日语 above right text-emphasis-ja.gif text-emphasis-v.gif
中文 below right text-emphasis-zh.gif

重点标志跳跃:‘text-emphasis-skip’属性

问题: 本节在头脑风暴下。

名称: text-emphasis-skip
取值: spaces | | punctuation | | symbols | | narrow
初始: spaces
适用于: 所有元素
继承:
百分比: (不适用)
媒介: 视觉
计算值: 特定值
动画: -

该属性描述将绘制那些字符符号。其值意义如下:

spaces

略过分字符或者属于Unicode分隔符类(Z*)的字符。(但需要注意,强调符号会绘制在与任意结合字符结合的空白处。)

punctuation

略过标点。在此定义中,标点包括属于Unicode类Pc、Pd、Ps、Pe、Pi或Pf的字符。还包括Unicode分类为Po且Unicode数据库【UAX44】的Sentence_Break属性【UAX29】为ATerm、Close、SContinue或STerm的字符。

symbols

跳过符号。在此定义中,符号包括属于Unicode类S*的字符。还包括Unicode分类为Po且没有在上面的‘punctuation’中定义的字符。

narrow

跳过Unicode数据库【UAX44】的East_Asian_Width属性【UAX11】为F(全角)或W(加粗)的字符。

不论该属性为何值,属于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伪元素。

規範符合

附錄 A:致謝

附錄 B:參考資料

附錄 C:更動

附錄 D:預設 UA 樣式表

附錄 E:文字與間隔

附錄 F:小假名的映射

附錄 G:文字處理的操作順序

附錄 H:屬性一覽表

附錄 J:與國際化的相關性