text-emphasis-position

The text-emphasis-position CSS property describes where emphasis marks are drawn at. The effect of emphasis marks on the line height is the same as for ruby text: if there isn't enough place, the line height is increased.

/* Initial value */
text-emphasis-position: over right;
/* Keywords value */
text-emphasis-position: over left;
text-emphasis-position: under right;
text-emphasis-position: under left;
/* 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

Preferred position

The preferred position of emphasis marks depends on the language. In Japanese for example, the preferred position is over right. In Chinese, on the other hand, the preferred position is under right. The informative table below summarizes the preferred emphasis mark positions for Chinese and Japanese:

Preferred emphasis mark and ruby position
Language	Preferred position		Illustration
Language	Horizontal	Vertical	Illustration
Japanese	over	right
Mongolian	over	right
Chinese	under	right

Note: The text-emphasis-position cannot be set, and therefore are not reset either, using the text-emphasis shorthand property.

Syntax

Values

over: Draw marks over the text in horizontal writing mode.
under: Draw marks under the text in horizontal writing mode.
right: Draws marks to the right of the text in vertical writing mode.
left: Draw marks to the left of the text in vertical writing mode.

Formal syntax

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

Examples

Some editors prefer to hide emphasis marks when they conflict with ruby. In HTML, this can be done with the following style rule:

ruby {
  text-emphasis: none;
}

Some other editors prefer to hide ruby when they conflict with emphasis marks. In HTML, this can be done with the following pattern:

em {
  text-emphasis: dot; /* Set text-emphasis for <em> elements */
}
em rt {
  display: none; /* Hide ruby inside <em> elements */
}

Specifications

Specification	Status	Comment
CSS Text Decoration Module Level 3 The 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 support^[2]	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

[1] In Firefox 45, it wasn't activated by default: in about:config, the user has to set the preference layout.css.text-emphasis.enabled to true.

[2] See Chrome bug 522882.