CSS text-emphasis-position Property

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

The rusty swing set creaked.

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
Edge Chrome Firefox Opera Safari
999946857
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
99466871899

Last updated by CSSPortal on: 2nd January 2024