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 元素。

用户代理 可以 在字形边界处中断下划线和上划线，其中线会穿过字形墨水，并在字形轮廓的两侧保持一定距离； 这种行为在本级别中不可控，但将在第 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 属性

该属性指定在元素上设置的文本装饰（下划线、上划线和删除线）的颜色。

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

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]） 下划线将穿过更大字体的后代文本。 用户代理对后代内容的考虑将因此导致更好的排版。

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

用户代理必须调整线位置 以匹配decorating boxes在使用其他vertical-align值时所发生的位移，而不是必须根据带有此样式的decorating box的后代调整线位置或厚度。 这使得上标和下标能够正确装饰（下划线、划掉等） 但防止它们扭曲或破坏此类装饰在其祖先上的定位。

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

一些字体格式（例如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>中指定多个字符。用户代理可以截断或忽略由多个字形簇组成的字符串。

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

标记应使用元素的字体设置绘制，并缩小50%。 然而，由于并非所有字体都有所有这些字形，并且某些字体在这些代码点中使用不适当的强调标记大小，用户代理可以选择使用已知适合强调标记的字体，或者由用户代理合成标记。 在垂直排版模式中，标记必须保持直立：与CJK字符一样，它们不会旋转以匹配书写模式。 在垂直书写模式的水平排版模式中，标记的方向在此级别中未定义（但如果出现明确的用例，可能会在未来的级别中定义）。

注意： 一个适合强调标记的好字体示例是Adobe的开源Kenten Generic OpenType Font，该字体专为强调标记而设计。

标记会在每个排版字符单元上绘制一次。 但是，强调标记不会绘制在：

• 词分隔符或属于Unicode分隔符类（Z*）的其他字符。（但请注意，强调标记会在与任何组合字符组合的空格上绘制。）
• 标点符号——具体来说，属于Unicode P* 字符的字符，并且不NFKD标准化[UAX15]为以下任何符号：

  #	U+0023	数字符号
  %	U+0025	百分比符号
  ‰	U+2030	千分符号
  ‱	U+2031	每一万符号
  ٪	U+066A	阿拉伯百分比符号
  ؉	U+0609	阿拉伯-印度千分符号
  ؊	U+060A	阿拉伯-印度每一万符号
  &	U+0026	和号
  ⁊	U+204A	提罗尼亚符号
  @	U+0040	商业符号
  §	U+00A7	节符号
  ¶	U+00B6	段落符号
  ⁋	U+204B	反向段落符号
  ⁓	U+2053	摆动短横线
  〽️	U+303D	部分交替标记

• 属于控制字符和未分配字符的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）
• 修复文本下划线位置规则的样例不一致。 （问题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)