CSS 文本装饰模块 4 级

1. 引言

本小节为非规范性内容。

本模块涵盖文本装饰，即在根据字体和排版规则排版后，对文本字形进行装饰。 （参见 [CSS-TEXT-3] 和 [CSS-FONTS-3]。） 这些特性通常不仅用于纯粹的装饰目的，在某些情况下还用于表示强调、敬语，以及标示编辑更改（如插入、删除和拼写错误）。

CSS Level 1 和 Level 2 仅定义了非常基础的线条装饰（下划线、上划线和删除线）， 主要适用于西方排版传统。 本模块的 Level 3 增加了更改这些装饰的颜色、样式、位置和连续性的能力， 还引入了着重号（传统上用于东亚排版）， 以及阴影（原本在 Level 2 中提议后推迟实现）。 Level 4 则为这些装饰提供了更多控制选项。

1.1. 模块交互

本模块替代并扩展了 [CSS-TEXT-DECOR-3] 中定义的文本装饰特性。

本模块中的所有属性 都可以应用于 ::first-line 和 ::first-letter 伪元素。

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 要求始终跳过外边距、边框和内边距。 在 Level 3 及以后，默认情况下 只跳过 装饰盒的外边距、边框和内边距。 未来 CSS2.1 可能会更新以匹配这一新默认值。

相对定位后代元素会使应用于其上的所有文本装饰随文本一起移动； 但不会影响装饰在该行上初始位置的计算。 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 属性

该属性是 text-decoration 简写属性的子属性， 用于指定元素添加哪些线条装饰。 除 text-decoration-line 之外的值会使元素生成相应的文本装饰，并按上文描述进行应用和传播。

注意： 除非希望线条的颜色、样式和粗细由更低层的层叠声明设置， 否则建议使用 text-decoration 简写，而不是该长属性。

各值含义如下：

none

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

underline

每行文本下方有一条下划线。

overline

每行文本上方有一条上划线（即下划线的对侧）。

line-through

每行文本中间有一道删除线。

blink

文本会闪烁（在可见与不可见之间交替）。 合规的用户代理可以不让文本闪烁。 注意，不让文本闪烁是达成 WAI-UAAG 检查点 3.3 的一种方式。 此值已废弃，建议使用动画 [CSS3-ANIMATIONS] 实现。

spelling-error

该值表示用户代理用于高亮拼写错误的文本装饰类型。 其外观由 UA 定义，可能与平台相关。通常渲染为红色波浪线下划线。

grammar-error

该值表示用户代理用于高亮语法错误的文本装饰类型。 其外观由 UA 定义，可能与平台相关。通常渲染为绿色波浪线下划线。

注意： 在 垂直书写模式下，text-underline-position 可以导致下划线和上划线切换位置。 这使下划线位置能自动根据语言偏好调整。

由于 spelling-error 和 grammar-error 装饰完全由 UA 定义， UA 可以 忽略 text-decoration 的其他子属性， 以及通常影响线条装饰外观的其他属性 （如 text-underline-position、color、stroke 或 fill） 在渲染这些装饰时。 但如果采纳这些属性能在 UA 选定的渲染下有意义且可行， UA 应当 将其作为默认样式的修饰应用。

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

该属性是 text-decoration 简写属性的子属性， 用于设置元素上 text-decoration-line 所指定的下划线、上划线和删除线的绘制样式， 并影响所有从该元素起始的装饰，即使后代盒指定了不同样式也无效。

各值的含义与 border-style 属性 [CSS-BACKGROUNDS-3] 相同。wavy 表示波浪线。

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

该属性是 text-decoration 简写属性的子属性， 用于设置元素上 text-decoration-line 所指定的下划线、上划线和删除线的颜色， 并影响所有从该元素起始的装饰，即使后代盒指定了不同颜色也无效。

2.4. 文本装饰线粗细：text-decoration-thickness 属性

该属性是 text-decoration 简写属性的子属性， 用于设置元素上 text-decoration-line 所指定的下划线、上划线和删除线的笔画粗细， 并影响所有从该元素起始的装饰，即使后代盒指定了不同粗细也无效。

各值含义如下：

auto

UA 自动选择合适的文本装饰线粗细；见下文。

from-font

若 第一个可用字体有首选下划线宽度相关度量， 则使用该宽度，否则与 auto 行为一致。

<length>

指定文本装饰线的粗细为固定长度。 UA 必须将实际值下限限定为一个设备像素。

注意： 长度值继承为固定值，不随字体缩放。

<percentage>

指定文本装饰线的粗细为 1em 的百分比。 UA 必须将实际值下限限定为一个设备像素。

注意： 百分比值继承为相对值，因此会随字体变化而缩放。

2.4.1. 文本装饰线自动粗细

某些字体格式（如 OpenType）可提供关于线条装饰适当粗细的信息。 UA 应在选择 auto 粗细时， 在适当情况下优先采用字体提供的信息。

2.5. 线条装饰的位置与粗细确定

本节内容摘自 Text Decoration Level 3 的早期草稿。 仍处于评审阶段，需要与 text-underline-offset 和 text-decoration-thickness 集成。

由于线条装饰可能跨越具有不同字体大小和垂直对齐方式的元素，最优的装饰线位置不一定是由 装饰盒 理想位置决定的。 实际上，它是根据每一行上由该 装饰盒 装饰的所有文本（即 被考虑文本）来计算的。 但是，由于 text-decoration-skip 被跳过的 装饰盒 后代、 text-decoration-skip: ink 的后代内联元素， 以及不参与 装饰盒 内联格式化上下文的任何后代，都不计入 被考虑文本 范围。

然后，线条装饰位置按每一行分别计算如下 （将 over 位置的下划线视为 over 线， 将 under 位置的上划线视为 under 线）：

over 线

以 over EM-box 的最高边缘 对齐 被考虑文本 的装饰线。

字母型下划线

字母型下划线位置通过获取每个 被考虑文本 区段与字母基线的理想偏移，然后取平均值，再用最低的字母基线实际定位。 （若主基线非字母型，不同 baseline 对齐的盒可能基线不同。） 为防止上标和下标影响位置，非初始值 vertical-align 的内联元素视为拥有与父元素一致的下划线理想位置。

非字母型 under 线

以 under EM-box 的最低边缘 对齐 被考虑文本 的装饰线。

删除线

删除线的定位方式本质上与字母型下划线类似，但遇到后代有不同 font-size 时会重新计算位置。 （这样能确保文本在字体大小变化时依然能“被划掉”。） 对于每个具有相同 font-size 的 被考虑文本 区段， 从其字体度量平均计算理想位置。 为防止上标和下标影响位置，非初始值 vertical-align 的内联元素视为拥有与父元素一致的下划线理想位置。 各被修饰片段的线条在其理想位置绘制。

为简化起见，删除线应在每个元素的首选/平均位置绘制。 这可能导致跳变现象，但似乎没有一种方法能在所有情况下都正确，且所有尝试都过于复杂。 若元素有不同 font-size 但无 被考虑文本，删除线应取何位置？

CSS 未定义线条装饰的粗细。 在确定文本装饰线粗细时，UA 可以考虑后代的字体大小、字重和字形，以提供合适的平均粗细。

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

该属性是同时设置 text-decoration-line、text-decoration-thickness、text-decoration-style 和 text-decoration-color 的简写属性。 省略的值会被设为各自的初始值。

:link {
  color: blue;
  text-decoration: underline;
  text-decoration: navy dotted underline; /* 在 CSS1/CSS2 UA 被忽略 */
}

注意： 该简写属性特意省略了 text-underline-position 属性， 因其为与语言/书写系统相关的内容设置，需独立于（非继承的）text-decoration 简写属性进行层叠与继承。

2.7. 下划线位置：text-underline-position 属性

该属性不是 text-decoration 简写属性的子属性， 用于设置下划线相对于文本的位置， 并定义其零点，以便后续通过 text-underline-offset 调整。 它影响所有从该元素起始的装饰，即使后代盒指定不同位置也无效。 不影响祖先元素指定的下划线。

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

若单独指定 left 或 right，则隐含 auto。 各值含义如下：

auto

UA 可以采用任意算法确定下划线位置，但下划线必须位于字母基线或其下方。

注意： 建议默认的下划线位置靠近字母基线，除非此位置会穿过下标（或其他降低的文本）或与亚洲文字（如汉字或藏文）字形冲突， 此时可将下划线下移或对齐 em 框边缘（如 under 所述）更合适。

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

from-font

若 第一个可用字体 有首选下划线偏移度量，则用该值，否则同 auto。

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。）

2.8. 下划线偏移：text-underline-offset 属性

该属性不是 text-decoration 简写属性的子属性， 用于设置下划线相对于其零点的偏移量。 正值表示远离文本，负值表示靠近文本。 它影响所有从该元素起始的装饰，即使后代盒指定不同位置也无效。 不影响祖先元素指定的下划线。

各值含义如下：

auto

UA 自动选择合适的下划线偏移。

但若 text-underline-position 的计算值为 from-font 且 UA 能从字体中提取合适度量，则该偏移为零。

<length>

以固定长度指定下划线偏移。

注意： 长度值继承为固定值，不随字体缩放。

<percentage>

以 1em 的百分比指定下划线偏移。

注意： 百分比值继承为相对值，因此会随字体变化而缩放。

当 text-decoration-line 属性值为 spelling-error 或 grammar-error 时， UA 可以忽略 text-underline-position 的值。

2.8.1. 下划线偏移原点（零点）

零点 取决于 text-underline-position 的值，详见下表。

下划线对齐于指定位置的外侧（其粗细仅向正方向扩展）。

为适应后代内容而自动调整的位置会被保留； text-underline-offset 的值是在此基础上的额外偏移。

2.8.2. 使用字体度量自动定位

某些字体格式（如 OpenType）可提供线条装饰适当位置的信息。 UA 应在选择 auto 偏移时优先采用字体度量信息， 并且当 from-font 用于 text-underline-position 时必须采用此信息。

注意： 通常，OpenType 字体度量给出的是 alphabetic 下划线的位置； 某些情况下（尤其是 CJK 字体）， 给出的是 under left 下划线的位置。 （此时字体下划线度量通常贴合 em 框底边。） UA 可以但不要求修正不准确的字体度量。

2.9. 文本装饰线一致性

线条装饰的确切位置和粗细取决于上述 text-underline-position、text-underline-offset 和 text-decoration-thickness 的取值， 其他情况由 UA 自行定义。 但对于下划线和上划线，UA 必须在每一行上为同一个装饰盒派生的装饰线使用统一的粗细和位置。

vs.

对 <u>A<sup>B</sup><big>C</big>D</u> 的正确与错误渲染方式

注意，线条装饰可能跨越具有不同字体大小和垂直对齐方式的元素，最优的装饰线位置不一定是由装饰盒理想位置决定。 例如，若上划线靠小号字体定位，若该元素包含大号字体文本，实际会变为删除线。 即便是下划线，若文本未对齐字母基线 （如垂直排版默认对齐中央基线 [CSS-WRITING-MODES-4]）， 下划线也会穿过较大字号的后代文本。 UA 考虑后代内容能获得更好的排版效果。

由于垂直文本采用中央基线对齐， 小号竖排文本的左侧下划线会穿过大号子元素文本。 下划线不得断开，但进一步左移可妥善包容所有被下划线装饰的文本。

UA 必须 调整线条位置以匹配通过 vertical-align（非 baseline [CSS2]）或通过 font-variant-position [CSS-FONTS-3] 上标/下标变换而偏移的装饰盒的度量， 但不得因装饰盒后代采用上述方式而调整线条位置或粗细 （即使 UA 可以为如上文所述仅字号不同的后代而调整位置）。 这保证了上标/下标文本可正常装饰（有下划线、删除线等）， 但不会影响祖先装饰线的位置或断裂。

仅为上标 st 添加下划线 vs. 为包含上标的文本整体添加下划线的示例

2.10. 文本装饰线连续性：text-decoration-skip 简写及其子属性

CSSWG 决议将跳过功能拆分为各自独立属性 （如 text-decoration-skip-ink）， 以改善层叠行为。 参见讨论和决议。 本节为粗略草稿，尚未经过 CSSWG 评审。

text-decoration-skip 及其子属性 （text-decoration-skip-self、text-decoration-skip-box、text-decoration-skip-inset、text-decoration-skip-spaces、text-decoration-skip-ink） 控制装饰线因自身或祖先为装饰盒时的中断行为。 none 会将所有子属性设为 none， auto 则将所有子属性设为初始值。

这样的 none 定义是否兼容 Web？ 是否还需增加 ink 值以兼容 Web？

注意，这些属性会继承，后代元素可有不同设置。

HTML 默认 UA 样式表增加如下内容：

ins, del { text-decoration-skip: none; }

当 text-decoration-line 属性值为 spelling-error 或 grammar-error 时， UA 可忽略这些属性中的任意一项或全部。

2.10.1. 跳过空白：text-decoration-skip-self 属性

CSSWG 决议将 text-decoration-skip 拆分为子属性， 但该值集尚未经 CSSWG 评审。

该属性指定祖先绘制的文本装饰线是否会传播到本元素或跨越本元素绘制。 各值含义如下：

none

不跳过：祖先装饰盒的装饰线会按需传播到或跨越该盒。

objects

若本元素为原子内联（如图片或 inline-block），则跳过本元素（其整个外边距盒）。

2.10.2. 跳过空白：text-decoration-skip-box 属性

CSSWG 决议将 text-decoration-skip 拆分为子属性， 但该值集尚未经 CSSWG 评审。

该属性指定作用于本元素的文本装饰线要跳过盒区域的哪些部分。 仅控制祖先绘制的文本装饰线。 各值含义如下：

none

不跳过：祖先装饰盒的装饰线会从外边距边到外边距边绘制。

all

在绘制祖先装饰盒的文本装饰线时， 跳过该盒本身的外边距、边框和内边距区域，只在内容区绘制装饰线。

该值仅对祖先施加的装饰线有效； 装饰盒 永远不会绘制在自己盒装饰上。

2.10.3. 内嵌边缘：text-decoration-skip-inset 属性

CSSWG 决议将 text-decoration-skip 拆分为子属性， 但该值集尚未经 CSSWG 评审。

该属性指定作用于本元素的文本装饰线要跳过盒区域的哪些部分。 它控制该元素自身绘制的所有文本装饰线， 但不控制祖先绘制的任何文本装饰线。 各值含义如下：

none

不跳过：文本装饰线从盒边到盒边绘制。

auto

UA 必须将线条的起止点从 装饰盒 内容边缘向内缩进一点， 例如两个并列下划线元素不会看起来像一条连续下划线。 缩进量由用户代理决定（如半个线条厚度），但不能为零。 （在中文中尤为重要，下划线是一种标点形式。）

text-decoration-skip-inset: auto 用于 <u>石井</u><u>艾俐俐</u>

该属性或许应为独立属性而非 text-decoration-skip 组的一部分。 另见 Issue 4557，关于显式控制线条长度。

2.10.4. 跳过空白：text-decoration-skip-spaces 属性

初始值是否应为 none 以兼容 Web？ 如果不是，至少应在 UA 默认样式表中为 INS 和 DEL 指定 none。 另见 Issue 4653。

该属性指定文本装饰是否跳过空白字符。 它控制本元素绘制的所有文本装饰线， 也控制祖先绘制的所有文本装饰线。 各值含义如下：

none

空白符不会被跳过，将与其他字符一样被装饰。

all

跳过所有 空白符， 以及任何相邻的 letter-spacing 或 word-spacing。

start

跳过所有 空白符， 以及任何相邻的 letter-spacing 或 word-spacing， 当这些位于行首时。

end

跳过所有 空白符， 以及任何相邻的 letter-spacing 或 word-spacing， 当这些位于行尾时。

就本属性而言， 空白符 是指任何具有 Unicode White_Space 属性的排版字符单元 [UAX44]（除了 U+202F 窄不换行空格）， 或任何词分隔符。

2.10.5. 跳过字形：text-decoration-skip-ink 属性

该属性控制当装饰线穿过字形时，上划线和下划线的绘制方式。 它影响所有从本元素起始的装饰，即使后代盒指定了不同样式也无效。

启用时，装饰线会在字形处跳断：即装饰线在本应穿过字形的地方中断，让文本形状显现出来。 UA 还必须在字形轮廓两侧稍作跳断。

跳过字形墨水

该属性仅适用于上划线和下划线；删除线始终为连续线。

auto

UA 可以 在装饰线穿过字形墨水及轮廓两侧一定距离时中断下划线和上划线。 UA 在决定是否对给定文本范围应用跳墨行为时，应当考虑文本书写系统（见下方备注）。

all

UA 必须 在装饰线穿过字形墨水及轮廓两侧一定距离时中断下划线和上划线。

none

UA 必须 绘制连续的下划线和上划线，穿过字形时不出现中断。

2.10.6. 断开形状

当 UA 在字形边界处中断下划线或上划线时， 线条在该边界的形状应当跟随字形轮廓。

注意，本规范有意未强制规定“跟随字形轮廓”的具体方法， 以便 UA 可灵活兼顾美观与性能。 例如， UA 可在尺寸阈值以下采用方形线端以提升性能； 或对较细装饰线采用梯形线端以拟合曲线。 在美观方面， UA 还需考虑若字形边界只截断线条一部分厚度或与水平呈斜角时，是否严格跟曲线反而导致不自然的线端残影。 是否在字形封闭区域内显示线条也是一项考虑。

在字母内部隐藏下划线部分让排版更美观，而外部曲线端则暗示线条连续穿过字母，与轮廓贴合。

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 规范化后不是下表符号的字符：

  #	U+0023	号码标志
  %	U+0025	百分号
  ‰	U+2030	千分号
  ‱	U+2031	万分号
  ٪	U+066A	阿拉伯百分号
  ؉	U+0609	阿拉伯-印度千分号
  ؊	U+060A	阿拉伯-印度万分号
  &	U+0026	和号
  ⁊	U+204A	提洛尼安符号 ET
  @	U+0040	商业 at
  §	U+00A7	节号
  ¶	U+00B6	段落标记
  ⁋	U+204B	反向段落标记
  ⁓	U+2053	波浪连接号
  〽	U+303D	变换标记

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

注： 对于哪些字符被标记，Level 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

在竖排排版模式下绘制在文本左侧。

着重号的绘制方式与每个字符作为 ruby 注释文本，并以 text-emphasis-position 指定 ruby 位置且居中对齐时完全一致。 注意，如该位置与下划线或上划线冲突，位置可做调整。

着重号对行高的影响与 ruby 文本相同。

注意，不同语言的着重号首选位置不同。如日文首选 over right，中文则首选 under right。 下表总结了中日文的首选着重号位置：

中日文首选着重号和 ruby 位置

语言	首选位置		示意图
	横排	竖排
日文	over	right
韩文
蒙古文
中文	under	right

如对同时有 ruby 且在相同位置的字符应用着重号，着重号绘制在 ruby 之外。这包括 自动隐藏 和空的 ruby 注释。

4 个字符中有 ruby 的 2 个也加了着重号

ruby { text-emphasis: none; }

em { text-emphasis: dot; } /* 为 <em> 元素设置着重号 */
em rt { display: none; }   /* 隐藏 <em> 内的 ruby */

3.5. 着重号跳过：text-emphasis-skip 属性

本节处于头脑风暴阶段。 尽管不同出版物对行为有不同需求，但尚不确定是否确实需要此属性。

该属性描述哪些字符会绘制着重号。 各值含义如下：

spaces

跳过词分隔符或其他属于 Unicode 分隔符类别 (Z*) 的字符。 （但注意，与组合字符组合的空格会绘制着重号。）

punctuation

跳过标点符号。 本定义中的标点包括属于 Unicode P* 类别的字符，但不含下述 符号（见下文）。

symbols

跳过符号。 此定义中的符号包括所有属于 Unicode S* 通用类别的排版字符单元，以及 NFKD 归一化等价于 Unicode Po 类别下表字符的字符：

#	U+0023	号码标志
%	U+0025	百分号
‰	U+2030	千分号
‱	U+2031	万分号
٪	U+066A	阿拉伯百分号
؉	U+0609	阿拉伯-印度千分号
؊	U+060A	阿拉伯-印度万分号
&	U+0026	和号
⁊	U+204A	提洛尼安符号 ET
@	U+0040	商业 at
§	U+00A7	节号
¶	U+00B6	段落标记
⁋	U+204B	反向段落标记
⁓	U+2053	波浪连接号
〽️	U+303D	变换标记

narrow

跳过 Unicode 数据库 East_Asian_Width 属性 [UAX11] [UAX44] 不为 F（全角）或 W（宽）的字符。

属于 Unicode 控制码和未分配字符类别（Cc、Cf、Cn）的字符，无论本属性为何值，都会被跳过。

该语法要求 UA 实现可为空格绘制着重号。 是否有此用例？如果没有，是否应修改语法禁止为空格绘制着重号？

另见关于初始值的 讨论。

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

该属性接受以逗号分隔的阴影效果列表，应用于元素文本。 各值的解释与 box-shadow [CSS-BACKGROUNDS-3] 一致。 每一层阴影都会为元素文本及其所有文本装饰（合成后）加阴影。 阴影效果按从前到后绘制：第一个阴影在最上层。 阴影之间可相互覆盖。

与 box-shadow 不同， 扩展距离严格解释为从字形轮廓任何点外扩， 因此类似于模糊半径，会产生圆角而非尖角。 负扩展值无效。

是否应让圆角形状未定义？[Issue #7250]

外部文字阴影 （未指定 inset 关键字） 会为文本（包括任何文本描边 [FILL-STROKE-3]）加阴影，仿佛被裁剪并悬浮在画布上。 与 box-shadow 不同，外部文字阴影不会裁剪至被投影形状的范围，若文本有半透明效果则阴影可透出。

内部文字阴影 （指定 inset 关键字） 会为画布及任何文本描边 [FILL-STROKE-3] 加阴影，仿佛文本被裁剪并下沉于画布下方。 因此阴影仅绘制在描边的内边缘。

外部文字阴影 必须绘制在元素边框/背景（如有）与文本及文本装饰之间。 内部文字阴影必须覆盖文本及其装饰。 UA 应避免将文字阴影绘制在同一堆叠级别、同一堆叠上下文的相邻元素文本之上。 （这意味着阴影的具体堆叠级别可能取决于元素是否有边框或背景：阴影的具体堆叠行为由 UA 自行定义。）

与描边的堆叠关系？[Issue #7251]

如同 box-shadow，文字阴影不会影响布局，也不会触发滚动或增加可滚动溢出区域的大小。

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：变更记录

自 2020 年 5 月 6 日工作草案以来的变更

自2020 年 5 月 6 日工作草案以来的重大变更：

• 为 扩展距离和inset 添加到 text-shadow。 （Issue 6074，Issue 6971）
• 明确 text-decoration-skip-ink 仅影响自身起始的装饰。 （Issue 2817）
• 在“适用对象”行明确指出属性适用于文本。 （Issue 5303）

自 Level 3 以来的新增内容

自Level 3以来新增的特性：

• 为 spelling-error 和 grammar-error 增加到 text-decoration-line。
• 增加 text-decoration-thickness 和 text-underline-offset 属性。
• 为 from-font 增加到 text-underline-position。
• 草拟 text-decoration-skip 属性及其长属性。
• 草拟 text-emphasis-skip 属性。
• 为 扩展距离 和 inset 添加到 text-shadow。

6. 隐私与安全注意事项

本规范未引入新的隐私或安全注意事项。