The CSS text-emphasis-position Property

Overview

The text-emphasis-position property specifies the placement of emphasis marks in relation to the text. As in the case of ruby text, if there's not enough space for the emphasis marks, the line height increases to accommodate them.

To clarify, ruby text is a small annotation that provides pronunciation guidance for ideographic characters in East Asian languages.

Note: text-emphasis-position can't be set with the text-emphasis shorthand.

Examples and Usage

In this demonstration, we apply the text-emphasis-position property to four h2 elements. Each element has a different position value, enabling a comparison of the different ways this property can affect the placement of emphasis marks.

HTML Structure

<h2>over right</h2>

<h2>under right</h2>

<h2>over left</h2>

<h2>over right</h2>

CSS Styling

h2 {
  text-emphasis: dot blue;  /* Applying blue dot emphasis marks */
  margin-bottom: 50px;
}

h2:nth-child(1) {
  text-emphasis-position: over right;  /* Position marks over the text, to the right (common in horizontal writing) */
}
h2:nth-child(2) {
  text-emphasis-position: under right;  /* Position marks under the text, to the right */
}
h2:nth-child(3) {
  text-emphasis-position: over left;  /* Position marks over the text, to the left in vertical writing */
  writing-mode: vertical-rl;
}
h2:nth-child(4) {
  text-emphasis-position: over right;  /* Position marks over the text, to the right in vertical writing */
  writing-mode: vertical-rl;
}

Here, the :nth-child selector is used here to target each h2 element individually, applying different emphasis mark positions to showcase their effects in various contexts.

For the first h2 element, over right; is used, which is the initial value of text-emphasis-position. The emphasis marks are placed above the text, to the right. If right or left is omitted in the value, it defaults to right.

The second h2 element uses under right;, positioning emphasis marks beneath the text and to the right. Although the visual difference between over right; and under right; may not be immediately apparent, it does have potential implications on line height.

The last two h2 elements simulate vertical text orientation, common in some East Asian languages, by using writing-mode: vertical-rl;. For the third h2, the emphasis marks are placed over left;, i.e., above the text and to the left in vertical writing. The fourth h2 uses over right;, placing the marks above the text, but to the right in vertical writing.

Values

The text-emphasis-position property accepts the following values:

Value	Description
`over`	Emphasis marks are placed over the text. (horizontal writing mode)
`under`	Emphasis marks are placed under the text. (horizontal writing mode)
`right`	Emphasis marks are placed to the right of the text. This applies in vertical writing modes.
`left`	Emphasis marks are placed to the left of the text. This applies in vertical writing modes.

Associated Properties

text-emphasis
text-emphasis-color
text-emphasis-style
text-decoration (with related properties from the CSS Text Decoration Module)

Tips and Tricks

The emphasis marks are drawn as if they were ruby annotations themselves, with their position given by text-emphasis-position. The position may be adjusted to avoid conflict with underline or overline decorations.
The position of emphasis marks often depends on the language. For example, Japanese typography commonly places emphasis marks over right, while Chinese typography typically positions them under right. Understanding these language-specific conventions is crucial when working with different languages.
The text-emphasis-position property can be used to adjust the position of emphasis marks in both horizontal and vertical writing modes. Remember to adjust the writing-mode property accordingly when working with vertical text.

Browser Compatibility

Browser versions for Chrome (25-98), Edge (79-98), and Opera (15-97, 98), require vendor prefixes for proper functioning. For more details, refer to the first link in the Useful Resources below.

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer
Support	Yes*	Yes*	Yes*	Yes*	Yes*	No

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.