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 Values & Units [CSS-VALUES-3] 中定义。与其他 CSS 模块的组合可能会扩展这些值类型的定义。

除了定义中列出的属性特定值外，本规范中定义的所有属性也都接受 CSS 全局关键字 作为其属性值。为了可读性，未明确重复列出。

1.3. 术语

本规范中使用的术语 字符（character）、字母（letter） 和 内容语言（content language） 的定义见 [CSS-TEXT-3]。本规范中使用的其他术语和概念见 [CSS2] 和 [CSS-WRITING-MODES-4]。

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

以下属性描述了添加到元素内容的线条装饰。当在 行内框（inline box） 上指定或传播到该框时，该 框 成为该装饰的 装饰框（decorating box），将装饰应用于其所有 片段（fragments）。然后，该装饰会进一步传播到任何拆分该行内元素的 流内（in-flow） 块级（block-level） 框（参见 CSS2.1 第 9.2.1.1 节）。当在建立 行内格式化上下文（inline formatting context） 的 块容器（block container） 上指定或传播到该容器时，装饰会传播到包装所有 流内 行内级（inline-level） 子元素的 匿名（anonymous） 行内框。当在 ruby 容器 上指定或传播到该容器时，装饰仅传播到 ruby 基框。对于所有其他框类型，装饰会传播到所有流内子元素。

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

下划线、上划线和删除线仅为 非替换（non-replaced） 行内框 绘制，并绘制在所有文本（包括空白、字母间距和单词间距）之上，但行首和行尾的间距（空白、字母间距和单词间距）除外。原子行内元素（Atomic inlines）（如图像和行内块）不进行装饰。装饰框 的外边距、边框和内边距总是被跳过，但后代 行内框 的外边距、边框和内边距不会被跳过。

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

用户代理（UA）可以在下划线和上划线穿过字形墨迹及字形轮廓两侧一定距离处中断它们；此行为在本级别中不可控制，但将在第 4 级中进一步定义。然而，删除线必须保持连续。

跳过字形墨迹

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

请注意，本规范故意未规定“遵循字形形状”的具体方法，以便 UA 可以采取适当措施处理美学和性能考量。例如，出于性能原因，UA 可以在低于特定尺寸阈值时假设线条末端为方形；或者使用梯形末端来近似曲线，特别是在较细的线条装饰上。在美学考量方面，UA 还可以考虑当字形边界仅与部分线条粗细相交或倾斜接近水平时会发生什么——精确地遵循曲线可能会导致排版上尴尬的断续下划线。是否在字形的封闭区域内显示线条是另一个考量。

隐藏碗形区域内的下划线部分会使字体看起来更整洁，而外部下划线的弯曲末端通过紧贴其外轮廓，暗示了下划线穿过字母的连续性。

相对定位一个后代会将其上应用的所有文本装饰与该后代的文本一起移动；它不会影响装饰在该行上的初始位置的计算。visibility 属性、text-shadow、滤镜和其他图形转换同样会影响应用到该框的所有文本装饰——包括从祖先框传播来的装饰——并且不会影响它们初始位置或厚度的计算。（在绘制在原子行内元素上或穿过非替换行内框的外边距/边框/内边距的线条装饰情况下，它们类似地与受影响的原子行内元素/非替换行内框关联，而不是与 装饰框 关联。）

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-color 和 text-decoration-style 值的 text-decoration 声明与 CSS 第 1 级和第 2 级向后兼容。

:link {
  color: blue;
  text-decoration: underline;
  text-decoration: navy dotted underline; /* Ignored in CSS1/CSS2 UAs */
}

注： 该简写属性特意省略了 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

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

注： 建议默认下划线位置靠近字母基线，除非这会穿过下标（或其他降低的）文本或覆盖诸如汉字或藏文等亚洲文字的字形，对于这些字形，字母下划线太高：在这种情况下，将下划线向下移动或与 em 框边缘对齐（如 under 所述）可能更合适。

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

under

下划线位于元素文本内容的 下方（under）。在这种情况下，下划线通常不会穿过降部（descenders）。（这有时被称为“会计”下划线。）如果在垂直 排版模式 中偏好特定侧面，则此值可与 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。）

线条装饰的确切位置和厚度在本级别中由 UA 定义。但是，对于下划线和上划线，UA 必须在每一行上使用来自单个 装饰框 的装饰，使用单一的厚度和位置。

对比

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

请注意，由于线条装饰可以跨越具有不同字体大小和垂直对齐方式的元素，因此线条装饰的最佳位置并不一定是 装饰框 所决定的理想位置。例如，如果元素包含字体大小明显更大的文本，则定位到小字体的上划线将有效地变成删除线。即使对于下划线，如果文本没有与字母基线对齐（例如，在垂直排版样式中，文本默认按其中心基线对齐 [CSS-WRITING-MODES-4]），下划线也会穿过较大字体的后代文本。因此，UA 对后代内容的考量将产生更好的排版。

由于垂直文本的中心基线对齐，小垂直文本上的左侧下划线会穿过具有较大字体大小的子元素的文本。下划线不允许断开，但将其位置进一步调整到左侧可以适当地容纳所有被下划线的文本。

UA 必须调整线条位置以匹配使用除 baseline [CSS2] 之外的 vertical-align 值或者通过 font-variant-position [CSS-FONTS-3] 下标/上标化的 装饰框 的移动指标，但不得为了响应如此设置样式的 装饰框 的后代而调整线条位置或厚度。这允许上标和下标被适当地装饰（下划线、删除线等），但防止它们扭曲或破坏其祖先上的此类装饰的定位。

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

某些字体格式（如 OpenType）可以提供有关线条装饰适当位置的信息。UA 应在适当的地方使用字体中的此类信息（如下划线厚度或适当的字母下划线位置）。

注： 通常，OpenType 字体指标给出了 字母 下划线的位置；在某些情况下（特别是在 CJK 字体中），它给出了 under left 下划线的位置。（在这种情况下，字体的下划线指标通常接触 em 框的底部边缘）。UA 可以但不需要纠正不正确的字体指标。

3. 强调标记

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

应用于日文文本的重音强调（为清晰起见以蓝色显示）

text-emphasis 简写属性及其 text-emphasis-style 和 text-emphasis-color 长期属性可用于将此类标记应用于文本。独立继承的 text-emphasis-position 属性允许设置强调标记相对于文本的位置。

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

此属性将强调标记应用于元素的文本。值的含义如下：

none（无）

无强调标记。

filled

形状填充为纯色。

开启

形状为空心。

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 字体，它是专门为强调标记设计的。

标记为每个 排版字符单元（typographic character unit） 绘制一次。然而，强调标记不会为以下情况绘制：

• 单词分隔符 或属于 Unicode 分隔符类 (Z*) 的其他 字符。（但请注意，强调标记确实为与任何组合字符组合的空格绘制。）
• 标点符号——具体而言，任何属于 Unicode P* 常规类别 且不通过 NFKD 规范化 [UAX15] 为以下符号的 字符

  #	U+0023	数字符号（NUMBER SIGN）
  %	U+0025	百分号（PERCENT SIGN）
  ‰	U+2030	千分号
  ‱	U+2031	万分号
  ٪	U+066A	阿拉伯百分号
  ؉	U+0609	阿拉伯千分号
  ؊	U+060A	阿拉伯万分号
  &	U+0026	和号
  ⁊	U+204A	提洛文 et 符号
  @	U+0040	商业 at 符号（COMMERCIAL AT）
  §	U+00A7	章节符号（SECTION SIGN）
  ¶	U+00B6	段落符号（PILCROW SIGN）
  ⁋	U+204B	反转分段符
  ⁓	U+2053	波浪破折号
  〽️	U+303D	部件替换标记

• 属于控制代码和未分配字符 (Cc, Cf, Cn) 的 Unicode 类别的字符。

注： 对标记哪些字符的控制将在第 4 级中添加。（标点符号列表也可能进一步完善，特别是针对非 CJK 标点符号。）

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

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

注： currentcolor 关键字计算为自身，并解析为继承执行后 color 的值。这意味着默认情况下，text-emphasis-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

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

强调标记的绘制方式完全就像每个字符都分配了该标记作为其注音（ruby）注释文本，ruby 位置由 text-emphasis-position 给出，ruby 对齐方式为居中。请注意，如果该位置会与下划线或上划线装饰发生冲突，则可以调整该位置。

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

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

首选强调标记和 ruby 位置

语言	首选位置		图示
	水平	垂直
日语	在	right
韩文
Mongolian
中文	under	right

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

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

ruby { text-emphasis: none; }

em { text-emphasis: dot; } /* Set text-emphasis for <em> elements */
em rt { display: none; }   /* Hide ruby inside <em> elements */

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

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

阴影效果按从前到后的顺序应用：第一个阴影在最上面。因此，阴影可能会相互覆盖，但它们永远不会覆盖文本本身。阴影必须绘制在元素边框和/或背景（如果存在）与元素文本和文本装饰之间的堆叠层级中。UA 应避免在属于相同堆叠层级和堆叠上下文的相邻元素中将文本阴影绘制在文本上方。（这意味着阴影的确切堆叠层级可能取决于元素是否具有边框或背景：因此，文本阴影的确切堆叠行为由 UA 定义。）是否给定阴影层独立地为每个字形或装饰产生阴影，或者文本和/或装饰被展平后再产生阴影，这一点未定义。

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

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

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

5. 绘制文本装饰

5.1. 文本装饰的绘制顺序

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

• 阴影 (text-shadow)
• 下划线 (text-decoration)
• 上划线 (text-decoration)
• text
• 强调标记 (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 开发人员可以自由忽略或更改。

/* typical styling of 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;
}

/* disable inheritance of text-emphasis marks to ruby text:
  emphasis marks should only apply to base text */
rt { text-emphasis: none; }

/* set language-appropriate default emphasis mark position */
:root:lang(zh), [lang|=zh] { text-emphasis-position: under right; }
[lang|=ja], [lang|=ko]     { text-emphasis-position: over right; }

/* set language-appropriate default underline position */
: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 is chosen (implied) above instead of under
   due to content-compatibility concerns */

如果您发现任何问题、建议添加的内容或更正，请发送信息至 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）
• 清理了“计算值”行以匹配新约定。

提供了一份 评论处理意见 (Disposition of Comments)。

自 2013年8月候选推荐 以来的变化

重大变化包括

• 将 text-decoration-skip 推迟到第 4 级以允许重大更改。在正文中定义了行为默认值。（问题 1, 问题 22, 问题 26）
• 指定删除线不受墨迹跳过功能的影响。（问题 24）
• 建议当跳过墨迹时，线条末端应符合字形形状。（问题 30）
• 更新了书写模式敏感条件以取决于 排版模式，以说明在 writing-mode 属性中添加了 sideways-lr 和 sideways-rl 值。标记 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 外侧。这包括 自动隐藏的 和空的 ruby 注释框。

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