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.

* Some parts of this feature may have varying levels of support.

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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-emphasis-position
auto
ExperimentalNon-standard
left
over
right
under

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见