text-emphasis-position

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

CSS 属性 text-emphasis-position 设置强调标记的位置。强调标记（如注音字符）在没有足够空间时，会自动增加行高。

尝试一下

语法

css
/* 初始值 */
text-emphasis-position: over right;

/* 关键字值 */
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;

/* 全局值 */
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。下面的信息表总结了中文、蒙古语和日语的首选强调标记位置：

标记和注音文字的首选强调标记位置
语言 偏好位置 效果
水平排列 垂直排列
日语 上方 右侧 水平排列的日语文本中强调标记出现在日语文字的上方 垂直排列的日语文本中强调标记出现在日语文字的右侧
韩语
蒙古语
中文 下方 右侧 垂直排列的中文文本中强调标记出现在汉字的下方

备注： text-emphasis-position 无法使用简写属性 text-emphasis 进行设置，因此也无法进行重置。

形式定义

初始值auto
适用元素所有元素
是否是继承属性是
计算值as specified
动画类型离散值

形式语法

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

示例

优先使用注音标记而不是强调标记

一些编辑器在注音标记与强调标记冲突时倾向于隐藏强调标记。在 HTML 中，可以通过以下样式规则实现：

css
ruby {
  text-emphasis: none;
}

优先使用强调标记而不是注音标记

一些编辑器在强调标记与注音标记冲突时倾向于隐藏注音标记。在 HTML 中，可以通过以下样式规则实现：

css
em {
  text-emphasis: dot; /* 为 <em> 元素设置 text-emphasis */
}

em rt {
  display: none; /* 隐藏 <em> 元素内部的注音标记 */
}

规范

Specification
CSS Text Decoration Module Level 3
# text-emphasis-position-property

浏览器兼容性

BCD tables only load in the browser

参见