文本属性-位置 | text-emphasis-position

text-emphasis-position

该text-emphasis-position CSS属性描述了强调标记的绘制位置。强调标记对行高的影响与ruby文本相同：如果位置不够，则会增加行高。

/* 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: unset;

Initial value	over right
Applies to	all elements
Inherited	no
Media	visual
Computed value	as specified
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

首选位置

重点标记的首选位置取决于语言。以日语为例，首选的位置是在正上方。另一方面，在中文中，首选位置是在右下方。下面的信息表总结了中文和日文中的强调标记的首选位置：

Language	Preferred position	Illustration
Horizontal	Vertical
Japanese	over	right

| Mongolian |

注意：使用text-emphasis简写属性时，text-emphasis-position不能被设置，因此也不会被重置。

语法

可能值

over在横向书写模式下在文本上画标记。under以水平书写方式在文本下面画标记。right在垂直书写模式下在文本右侧绘制标记。left以垂直书写方式将标记画到文字的左边。

形式语法

[ over | under ] && [ right | left ]

实例

有些编辑器喜欢在与ruby冲突时隐藏强调标记。在HTML中，这可以通过以下样式规则来完成：

ruby {
  text-emphasis: none;
}

其他编辑器则偏好在与重点标记冲突时隐藏ruby。在HTML中，这可以通过以下模式来完成：

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

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

规范

Specification	Status	Comment
CSS Text Decoration Module Level 3The definition of 'text-emphasis' in that specification.	Candidate Recommendation	Initial definition

浏览器兼容性

Feature	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Basic support (over and under)	46 (46)1	25.0-webkit	No support	15.0-webkit	6.1-webkit 7.1
left and right	46 (46)1	No support2	No support	No support	7.1

Feature	Firefox Mobile (Gecko)	Android	IE Phone	Opera Mobile	Safari Mobile
Basic support	46 (46)1	4.4-webkit	No support	33-webkit	7.1