Description

The text-emphasis-position CSS property is used to define the positioning of the text emphasis marks, such as dots or circles, within a piece of text. These marks are typically used to highlight certain characters or words in Asian typography. By adjusting the text-emphasis-position, web developers can control whether the emphasis marks appear above, below, or around the text characters they are meant to emphasize, allowing for precise typographic styling to enhance readability and aesthetics in Asian scripts.

Initial value

over right

Applies to

All elements

Inherited

Yes

Computed value

As specified

Animatable

No

JavaScript syntax

object.style.textEmphasisPosition

Interactive Demo

text-emphasis-position: over;

text-emphasis-position: under;

Syntax

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

Values

• overDraw marks over the text in horizontal writing mode.
• underDraw marks under the text in horizontal writing mode.
• rightDraw marks to the right of the text in vertical writing mode.
• leftDraw marks to the left of the text in vertical writing mode.

Example

ruby {
  text-emphasis: none;
}

Browser Support

The following table will show you the current browser support for the CSS text-emphasis-position property.

Desktop
99	99	46	85	7

Tablets / Mobile
99	46	68	7	18	99

Last updated by CSSPortal on: 2nd January 2024