text-emphasis-position

**text-emphasis-position** CSS 属性设置强调标记的绘制位置。类似于 ruby 文本，如果没有足够的空间容纳强调标记，则会增加行高。

试一试

语法

css
/* Initial value */
text-emphasis-position: over right;

/* Keywords value */
text-emphasis-position: over left;
text-emphasis-position: under right;
text-emphasis-position: under left;

text-emphasis-position: left over;
text-emphasis-position: right under;
text-emphasis-position: left under;

/* Global values */
text-emphasis-position: inherit;
text-emphasis-position: initial;
text-emphasis-position: revert;
text-emphasis-position: revert-layer;
text-emphasis-position: unset;

值

over

在水平书写模式下在文本上方绘制标记。

under

在水平书写模式下在文本下方绘制标记。

在垂直书写模式下在文本右侧绘制标记。

left

在垂直书写模式下在文本左侧绘制标记。

描述

强调标记的首选位置取决于语言。例如，在日语中，首选位置是 over right。另一方面，在中文中，首选位置是 under right。下表总结了中文、蒙古语和日语的首选强调标记位置。

首选强调标记和 ruby 位置
语言 首选位置 插图
水平 垂直
日语 over right Emphasis marks appear over each emphasized character in horizontal Japanese text. Emphasis marks appear on the right of each emphasized character in vertical Japanese text.
韩语
蒙古语
中文 under right Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text.

注意： text-emphasis-position 不能通过 text-emphasis 简写属性设置，因此也不能通过它重置。

正式定义

初始值over right
应用于所有元素
继承是
计算值按指定
动画类型离散

正式语法

text-emphasis-position = 
  [ over | under ]   &&
  [ right | left ]?

示例

优先使用 ruby 而不是强调标记

一些编辑器在强调标记与 ruby 冲突时会隐藏强调标记。在 HTML 中，可以使用以下样式规则实现此目的。

css
ruby {
  text-emphasis: none;
}

优先使用强调标记而不是 ruby

一些其他编辑器在强调标记与 ruby 冲突时会隐藏 ruby。在 HTML 中，可以使用以下模式实现此目的。

css
em {
  text-emphasis: dot; /* Set text-emphasis for <em> elements */
}

em rt {
  display: none; /* Hide ruby inside <em> elements */
}

规范

规范
CSS 文本装饰模块 Level 3
# text-emphasis-position-property

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅