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
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