CSS 文本装饰模块第 3 级

1. 引言

本小节为非规范性内容。

本模块涵盖文本装饰，即在根据字体和排版规则排版后对文本的字形进行装饰。 (参见 [CSS-TEXT-3] 和 [CSS-FONTS-3]。) 这些特性不仅传统上用于纯装饰目的，还用于某些情况下的强调、尊称以及指示编辑更改，例如插入、删除和拼写错误。

CSS 级别 1 和 2 仅定义了适合西方排版传统的非常基本的 线条装饰（下划线、上划线和删除线）。本模块的第 3 级增加了改变这些装饰的颜色、样式、位置和连续性的能力，还引入了 强调标记（传统上用于东亚排版）和 阴影（这在第 2 级中被提议但随后被推迟）。

1.1. 模块交互

本模块替代并扩展了在 [CSS2] 第 16 章中定义的文本装饰特性。

1.2. 值定义

本规范遵循 CSS 属性定义规范，该规范来自 [CSS2]，使用 值定义语法，该语法来自 [CSS-VALUES-3]。未在本规范中定义的值类型在 CSS 值和单位 [CSS-VALUES-3] 中定义。与其他 CSS 模块的组合可能会扩展这些值类型的定义。

除了其定义中列出的特定属性值外，本规范中定义的所有属性还接受 CSS 广泛关键字作为其属性值。为提高可读性，这些内容未被重复明确列出。

1.3. 术语

术语 字符、字母 和 内容语言 在本规范中的含义定义于 [CSS-TEXT-3]。本规范中使用的其他术语和概念定义于 [CSS2] 和 [CSS-WRITING-MODES-4]。

2. 线条装饰：下划线、上划线和删除线

以下属性描述添加到元素内容上的线装饰。 当在线内框上指定或传播到行内框时， 该框 就会成为该装饰的装饰 框， 将装饰应用于其所有片段。 然后，该装饰还会进一步传播到任何分割该行内内容的流内块级框 （参见CSS2.1 第 9.2.1.1 节）。 当在建立行内格式化上下文的块 容器上指定或传播到该块容器时， 装饰会传播到一个匿名行内框， 该行内框包裹块容器的所有流内行内级 子级。 当在ruby 容器上指定或传播到该容器时， 装饰仅传播到ruby 基础。 对于所有其他框类型， 装饰会传播到所有流内子级。

请注意，文本装饰不会传播到任何流外后代， 也不会传播到原子行内级后代（例如行内块和行内表格）的内容。 它们也不会传播到行内框的行内子级， 尽管装饰会应用于这些框。

下划线、上划线和删除线仅绘制在非替换行内框上， 并跨越所有文本绘制（包括空白、字母间距和单词间距）， 但行首和行尾的间距（空白、字母间距和单词间距）除外。原子行内级框（例如图像和行内块）不会被装饰。 装饰框的外边距、边框和内边距始终会被跳过， 但后代行内框的外边距、边框和内边距则不会被跳过。

请注意，CSS 2.1 要求始终跳过外边距、边框和内边距。 在本级别中，默认仅跳过装饰框的外边距、边框和内边距。 将来 CSS2.1 可能会更新以匹配这一新的默认行为。 此外，预计第 4 级将提供对是否装饰行首/行尾空格的控制， 并将默认应用于 HTML ins 和 del 元素。

UA 可以在下划线和上划线会穿过字形墨迹的地方中断这些线条， 并可在字形轮廓两侧留出一定距离； 此行为在本级别中不可控制， 但将在第 4 级中进一步定义。 不过，删除线必须保持连续。

跳过字形墨水

当用户代理在字形边界处中断下划线或上划线时， 该边界处的线条形状应遵循字形的形状。

请注意，本规范故意不规定“遵循字形”形状的特定方法，以便用户代理可以采取适当的措施来处理美学和性能考虑。 例如，用户代理可以出于性能原因，假设在某个大小阈值以下的线条末端为方形； 或使用梯形末端近似曲线，尤其是在较细的线条装饰上。 在美学考虑方面，用户代理可能还会考虑当字形边界仅与线条厚度的一部分相交或与接近水平的线条倾斜时会发生什么——精确跟随曲线 可能导致排版上不协调的下划线残留物。 是否在字形的封闭区域内显示线条是另一个考虑因素。

隐藏字母内部的下划线部分使字体看起来更干净，同时外部的下划线曲线末端通过拥抱字母的外轮廓来暗示下划线的连续性。

相对定位后代将与后代文本一起移动应用于它的所有文本装饰；这不会影响该行上装饰初始位置的计算。 可见性属性、文本阴影、 过滤器和其他图形变换也会影响应用于该框的所有文本装饰——包括从祖先框传播的装饰——并且不会影响其初始位置或厚度的计算。 （在绘制于原子行内或跨越未替换行内框的边距/边框/内边距的线条装饰的情况下， 它们类似地与受影响的原子行内/未替换行内框相关联，而不是与 装饰框 相关联。）

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>
            

注意：线条装饰通过框树传播，而不是通过继承，因此在对具有 display: contents 的元素指定时，对后代没有影响。

2.1. 文本装饰线条：text-decoration-line 属性

指定是否向元素添加线条装饰（如果有的话）。 值的含义如下：

none

既不产生也不抑制文本装饰。

underline

每行文本都有下划线。

overline

每行文本上方有一条线（即，与下划线相对）。

line-through

每行文本中间有一条线。

blink

文本闪烁（在可见和不可见之间切换）。 合格的用户代理可以简单地不闪烁文本。 请注意，不闪烁文本是一种满足 WAI-UAAG 检查点 3.3 的技术。 该值在动画 [CSS-ANIMATIONS-1] 中被 弃用。

注意：在 垂直书写模式中，text-underline-position 可能会导致下划线和 上划线交换位置。这允许下划线的位置自动依据特定语言的偏好。

2.2. 文本装饰样式：text-decoration-style 属性

该属性指定应用于元素的文本装饰线条（如下划线、上划线和删除线）的样式。值的含义与border-style 属性相同 [CSS-BACKGROUNDS-3]。wavy 表示波浪线。

文本装饰的样式在所有来源于给定元素的装饰上必须保持相同，即使子元素的样式有所不同。

2.3. 文本装饰颜色：text-decoration-color 属性

此属性指定通过text-decoration-line 在元素上设置的文本装饰（下划线、 上划线和删除线）的颜色。

源自给定元素的所有文本装饰的颜色必须保持相同， 即使后代框指定了不同的颜色。

2.4. 文本装饰简写：text-decoration 属性

该属性是设置text-decoration-line、text-decoration-color 和text-decoration-style的简写形式。 缺省值将被设置为其初始值。

注意： 一个text-decoration声明如果省略了 text-decoration-color和text-decoration-style的值 在CSS级别1和2中是向后兼容的。

:link {
  color: blue;
  text-decoration: underline;
  text-decoration: navy dotted underline; /* 在 CSS1/CSS2 用户代理中被忽略 */
}

注意： 该简写故意省略了text-underline-position属性， 这是一个依赖于语言/书写系统的设置，自动跟随内容，因此可以独立于（未继承的）text-decoration简写的样式设置进行级联和继承。

2.5. 文本下划线位置：text-underline-position 属性

该属性设置元素上指定的下划线的位置。 （它不影响由祖先元素指定的下划线。） 如果单独指定left或right，则隐含auto。

:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: under right; }
:root:lang(zh), [lang|=zh] { text-underline-position: under left; }

值具有以下含义：

auto

用户代理可以使用任何算法来确定下划线的位置；但必须放置在字母基线或其下方。

注意： 建议默认下划线位置应接近字母基线， 除非这将穿过下标（或其他下移的）文本 或在汉字或藏文等字形中绘制，因为字母下划线过高： 在这种情况下，将下划线向下移动 或根据under中描述的内容对齐到em框的边缘可能更合适。

典型的“字母”下划线位于字母基线的稍下方

under

下划线位于元素文本内容下方。 在这种情况下，下划线通常不会穿过降部。 （这有时被称为“会计”下划线。） 此值可以与left或right结合使用，如果在垂直排版模式中偏好某一侧。

text-underline-position: under

由于text-underline-position继承，并且未被text-decoration简写重置，以下示例将文档切换为使用under下划线，这对于具有长而复杂降部的书写系统可能更为合适。它通常也对使用许多下标的数学或化学文本有用。

:root { text-underline-position: under; }

注意： under值并不保证下划线不会与字形发生冲突， 因为某些字体的降部或变音符号 可能会扩展到字体的下降指标下方。

left

在垂直排版模式中，下划线与under对齐，只是它始终与文本的左边缘对齐。 如果这导致下划线在文本的“上方”绘制，则上划线也切换到侧面并在“下方”绘制。

right

在垂直排版模式中，下划线与under对齐，只是它始终与文本的右边缘对齐。 如果这导致下划线在文本的“上方”绘制，则上划线也切换到侧面并在“下方”绘制。

left	right

在垂直排版模式中，text-underline-position值left和right允许将下划线放在文本的任一侧。（在横向排版模式中，两者的值都被视为auto。）

下划线的确切位置和厚度在此级别中由用户代理定义。 但是，对于下划线和上划线 用户代理必须在每行上使用统一的厚度和位置 来装饰来自单个decorating box的装饰。

vs.

正确和不正确的渲染 <u>A<sup>B</sup><big>C</big>D</u>

注意，由于下划线装饰可以跨越具有不同字体大小和垂直对齐的元素， 因此线装饰的最佳位置不一定是由decorating box规定的理想位置。 例如，位于小字体下方的上划线 如果元素包含更大字体大小的文本，则实际上将变为横穿。 即使是下划线，如果文本未对齐到字母基线 （例如，在垂直排版样式中， 文本默认按其中央基线对齐[CSS-WRITING-MODES-4]） 下划线将穿过更大字体的后代文本。 用户代理对后代内容的考虑将因此导致更好的排版。

由于垂直文本的中央基线对齐，小垂直文本的左侧下划线将穿过较大字体大小的子文本底部。 下划线不允许断裂，但将其位置进一步向左调整 可以妥善容纳所有下划线文本。

UA 必须调整行的位置， 以匹配通过除baseline [CSS2] 之外的 vertical-align 值发生偏移的装饰框的偏移度量， 或通过font-variant-position [CSS-FONTS-3] 设置为下标/上标的装饰框的偏移度量， 但不得因装饰框中具有此类样式的后代而调整行的位置或粗细。 这样可以使上标和下标得到正确的装饰 （下划线、删除线等）， 同时防止它们扭曲或破坏其祖先上这些装饰的位置。

对上标文本应用的下划线示例与应用于包含上标的文本的下划线示例

一些字体格式（例如OpenType）可以提供有关线装饰适当位置的信息。 用户代理应在适当情况下使用此类信息 （例如下划线厚度， 或适当的字母下划线位置） 从字体中获取。

注意： 通常，OpenType字体指标给出字母下划线的位置； 在某些情况下（尤其是在CJK字体中）， 它给出左下划线的位置。 （在这种情况下，字体的下划线指标通常 接触到em框的底边）。 用户代理可以但不需要纠正不正确的字体指标。

3. 强调标记

东亚文档传统上在每个字形旁边使用小符号来强调一段文本。例如：

在日文文本中应用的重音强调（为了清晰，显示为蓝色）

text-emphasis简写，以及其text-emphasis-style和text-emphasis-color长属性，可用于将这些标记应用于文本。text-emphasis-position属性，它单独继承，允许设置强调标记相对于文本的位置。

3.1. 强调标记样式：text-emphasis-style 属性

此属性将着重号应用于元素的文本。 各值具有以下含义：

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 '﹆'。

<string>

显示给定字符串作为着重号。 作者不应在 <string> 中指定超过一个字符。 UA 可以截断或忽略由多个字素簇组成的字符串。

如果指定了形状关键字，但既未指定filled也未 指定open， 则假定为 filled。如果 仅指定 filled 或 open， 则形状关键字在水平排版模式中的计算值为circle，在 垂直排版模式中的计算值为sesame。

着重号应使用元素的字体设置进行绘制， 并额外启用ruby 特性， 且尺寸缩小 50%。 然而，由于并非所有字体都具有这些字形， 且某些字体中这些码点的字形尺寸不适合作为着重号， UA 可以选择使用已知适合着重号的字体， 或者改由 UA 合成着重号。 着重号在垂直排版模式中必须保持直立： 与 CJK 字符一样，它们不会旋转以匹配书写模式。 垂直书写模式的水平排版模式中 着重号的方向在本级别中未定义 （但如果将来出现明确的用例，则可能在未来级别中定义）。

注：一种适合着重号的字体示例是 Adobe 的开源 Kenten Generic OpenType Font， 它是专门为着重号设计的。

每个排版字符单元绘制一次着重号。 但是，以下内容不会绘制着重号：

• 单词分隔符或其他 属于 Unicode 分隔符类别（Z*）的字符。 （但请注意，对于与任何组合字符结合的空格， 会绘制着重号。）
• 标点——具体而言， 任何属于 Unicode P* 一般类别且 经 NFKD 规范化 [UAX15] 后 不会成为以下任何符号的字符：

  #	U+0023	NUMBER SIGN
  %	U+0025	PERCENT SIGN
  ‰	U+2030	PER MILLE SIGN
  ‱	U+2031	PER TEN THOUSAND SIGN
  ٪	U+066A	ARABIC PERCENT SIGN
  ؉	U+0609	ARABIC-INDIC PER MILLE SIGN
  ؊	U+060A	ARABIC-INDIC PER TEN THOUSAND SIGN
  &	U+0026	AMPERSAND
  ⁊	U+204A	TIRONIAN SIGN ET
  @	U+0040	COMMERCIAL AT
  §	U+00A7	SECTION SIGN
  ¶	U+00B6	PILCROW SIGN
  ⁋	U+204B	REVERSED PILCROW SIGN
  ⁓	U+2053	SWUNG DASH
  〽️	U+303D	PART ALTERNATION MARK

• 属于 Unicode 控制代码和未分配字符类别 （Cc、Cf、Cn）的字符。

注：对哪些字符添加着重号的控制将在第 4 级中加入。 （标点列表也可能进一步细化， 尤其是非 CJK 标点。）

3.2. 强调标记颜色：text-emphasis-color 属性

该属性指定强调标记的前景颜色。

注意：currentcolor关键字计算为自身，并在执行继承后解析为color的值。这意味着默认情况下text-emphasis-color与文本color匹配，即使color在元素之间变化。

3.3. 强调标记简写：text-emphasis 属性

该属性是设置text-emphasis-style和text-emphasis-color的简写。省略的值将设置为其初始值。

注意text-emphasis-position在此简写中未被重置。这是因为通常形状和颜色会变化，但位置对于文档中某种语言而言是一致的。因此位置应独立继承。

3.4. 强调标记位置：text-emphasis-position 属性

该属性描述强调标记的绘制位置。如果[ right | left ]被省略，则默认为right。这些值具有以下含义：

over

在水平排版模式中，绘制标记在文本上方。

under

在水平排版模式中，绘制标记在文本下方。

right

在垂直排版模式中，绘制标记在文本的右侧。

left

在垂直排版模式中，绘制标记在文本的左侧。

强调标记的绘制方式就像每个字符被分配作为其注音文本的标记一样，注音位置由text-emphasis-position指定，注音对齐为居中。请注意，如果强调标记与下划线或上划线装饰发生冲突，则该位置可能会进行调整。

强调标记对行高的影响与注音文本相同。

注意，强调标记的首选位置取决于语言。例如，在日语中，首选位置为over right。而在中文中，首选位置为under right。以下信息表总结了中文和日语的首选强调标记位置：

首选强调标记和注音位置

语言	首选位置		插图
	水平	垂直
日语	over	right
韩语
蒙古语
中文	under	right

如果强调标记应用于与注音在相同位置绘制的字符，则强调标记放置在注音的外侧。这包括自动隐藏和空注音注释。

应用于4个字符的强调标记，其中2个字符也有注音

ruby { text-emphasis: none; }

em { text-emphasis: dot; } /* 设置<em>元素的文本强调 */
em rt { display: none; }   /* 隐藏<em>元素中的注音 */

4. 文字阴影：text-shadow 属性

此属性接受一个以逗号分隔的阴影效果列表，应用于元素的文本。值的解释方式与box-shadow [CSS-BACKGROUNDS-3]相同。（但请注意，不允许使用扩展值和inset关键字。）每一层阴影将元素的文本和所有文本装饰组合在一起。

阴影效果按前后顺序应用：第一个阴影在最上层。阴影可能会相互覆盖，但从不覆盖文本本身。阴影必须在元素的边框和/或背景（如果存在）与元素的文本和文本装饰之间的堆叠级别绘制。用户代理（UAs）应避免在相同堆叠级别和堆叠上下文的相邻元素的文本上绘制文本阴影。（这可能意味着阴影的确切堆叠级别取决于元素是否具有边框或背景：因此，文本阴影的确切堆叠行为由用户代理定义。）是否阴影层对每个字形或装饰独立绘制，或者文本和/或装饰是扁平化后再进行阴影处理是未定义的。

与box-shadow不同，文本阴影不会被裁剪到阴影形状，并且如果文本是部分透明的，阴影可能会显示出来。与box-shadow一样，文本阴影不影响布局，并且不会触发滚动或增加可滚动溢出区域的大小。

注意：此处定义的阴影绘制顺序与1998年CSS2 推荐标准中的定义相反。

text-shadow属性适用于::first-line和::first-letter伪元素。

5. 绘制文本装饰

5.1. 文本装饰的绘制顺序

与[CSS2]一样，文本装饰会立即绘制在装饰的文本上方/下方，顺序如下（最底层优先）：

• 阴影（text-shadow）
• 下划线（text-decoration）
• 上划线（text-decoration）
• 文本
• 强调标记（text-emphasis）
• 删除线（text-decoration）

当线装饰绘制在盒装饰或原子行内元素上时，它们绘制在非定位内容之上，且位于任何定位子元素之下（在CSS2.1附录E中的第8层下方）。

5.2. 文本装饰的溢出

溢出一个盒子的文本装饰被视为墨水溢出：它们不会扩展到可滚动溢出区域中。[css-overflow-3]

附录A：致谢

本规范的制定离不开以下人员的帮助： Ayman Aldahleh, Bert Bos, Tantek Çelik, Stephen Deach, John Daggett, Martin Dürst, Laurie Anna Edlund, Ben Errez, Yaniv Feinberg, Arye Gittelman, Ian Hickson, Martin Heijdra, Richard Ishida, Masayasu Ishikawa, Michael Jochimsen, Eric LeVine, Ambrose Li, Håkon Wium Lie, Chris Lilley, Ken Lunde, Nat McCully, Shinyu Murakami, Paul Nelson, Chris Pratley, Marcin Sawicki, Arnold Schrijver, Rahul Sonnad, Michel Suignard, Takao Suzuki, Frank Tang, Chris Thrasher, Etan Wexler, Chris Wilson, Masafumi Yabe 和 Steve Zilles。

附录B：默认UA样式表

本附录为信息性内容，旨在帮助UA开发者实现默认样式表，但UA开发者可以自由忽略或更改。

/* HTML的典型样式 */
blink {
  text-decoration-line: blink;
}
s, strike, del {
  text-decoration: line-through;
}
u, ins, :link, :visited {
  text-decoration: underline;
}
abbr[title], acronym[title] {
  text-decoration: dotted underline;
}

/* 禁用文本强调标记对ruby文本的继承：
  强调标记仅应应用于基本文本 */
rt { text-emphasis: none; }

/* 设置适合语言的默认强调标记位置 */
:root:lang(zh), [lang|=zh] { text-emphasis-position: under right; }
[lang|=ja], [lang|=ko]     { text-emphasis-position: over right; }

/* 设置适合语言的默认下划线位置 */
:root:lang(ja), [lang|=ja],
:root:lang(mn), [lang|=mn],
:root:lang(ko), [lang|=ko] { text-underline-position: right; }
:root:lang(zh), [lang|=zh] { text-underline-position: left;  }
/* 由于内容兼容性问题，上述选择了auto（隐含），而不是under */

如果您发现任何问题、建议添加的内容或修正，请通过发送信息至 www-style@w3.org，并在主题行中注明 [css-text-decor]。

@keyframes blink {
  0% {
    visibility: hidden;
    animation-timing-function: step-end;
  }
  25%, 100% {
    visibility: visible;
  }
}
blink {
  animation: blink 1s infinite;
}

附录C：变更

自2019年8月候选建议书以来的更改

更改包括：

• 澄清text-shadow以阴影列表的方式进行动画，就像box-shadow一样。 （问题4375）
• 明确适用于文本的属性。 （问题5303）
• 小的编辑修正。

自2018年7月候选建议书以来的更改

更改包括：

• 明确了文本装饰溢出属于墨迹 溢出。 （议题 3272）
• 修复了示例 text-underline-position 规则中的不一致之处。 （议题 3441）
• 清理了“计算值”行以符合新的约定。

可用意见处理。

自2013年8月候选建议书以来的更改

重要更改包括：

• 将text-decoration-skip推迟到第4级，以允许重大更改。 在正文中定义行为默认值。 (问题1， 问题22， 问题26)
• 指定删除线不受墨水跳过特性的影响。 (问题24)
• 建议在跳过墨水时，行尾应符合字形形状。 (问题30)
• 更新受写作模式影响的条件，以依赖于排版模式，以考虑到sideways-lr和sideways-rl值的添加到writing-mode属性。 在sideways-lr和sideways-rl下，强调标记的方向被标记为未定义。 (问题10， 问题20)
• 将text-emphasis-position的[ right | left ]选项设置为可选，默认值为right。 (问题17)
• 使text-underline-position在仅指定left或right时，隐含为auto而不是under。 (问题18)
• 更改文本装饰以跳过开头和结尾的空格。 (问题6)
• 注意到ruby注释的位置可能会调整以避免与文本装饰冲突。 (问题21)
• 将text-shadow的初始值更改为currentColor。 (问题28)
• 修复text-shadow的“计算值”行中的错误。 (问题7)
• 修复text-shadow值的标准顺序以匹配实现。 (问题35)
• 定义强调标记相对于自动隐藏和空的ruby注释的定位。 (问题9)

  如果强调标记应用于与强调标记处于相同位置的字符上，则强调标记放置在ruby之外。 这包括自动隐藏和空的ruby注释。

• 使text-emphasis默认跳过标点符号。 (问题16)
• 添加规则，将ruby应用于强调标记的字体。 (问题13)
• 对text-emphasis-position和text-underline-position的默认UA规则进行了各种更正和改进。 (问题11， 问题12， 问题18， 问题19， 问题36)