The text-emphasis-position
CSS property sets where emphasis marks are drawn. Like ruby text, if there isn't enough room for emphasis marks, 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; text-emphasis-position: left over; text-emphasis-position: right under; text-emphasis-position: left under; /* Global values */ text-emphasis-position: inherit; text-emphasis-position: initial; text-emphasis-position: unset;
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.
Description
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, Mongolian and Japanese:
Language | Preferred position | Illustration | ||
---|---|---|---|---|
Horizontal | Vertical | |||
Japanese | over | right | [[File:../../../../../drafts.csswg.org/css-text-decor-3/images/text-emphasis-ja.png|Emphasis marks appear over each emphasized character in horizontal Japanese text.]] | [[File:../../../../../drafts.csswg.org/css-text-decor-3/images/text-emphasis-v.gif|Emphasis marks appear on the right of each emphasized character in vertical Japanese text.]] |
Korean | ||||
Mongolian | ||||
Chinese | under | right | [[File:../../../../../drafts.csswg.org/css-text-decor-3/images/text-emphasis-zh.gif|Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text.]] |
Note: The text-emphasis-position
cannot be set, and therefore are not reset either, using the text-emphasis
shorthand property.
Formal definition
Initial value | over right
|
Applies to | all elements |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Formal syntax
[ over | under ] && [ right | left ]
Examples
Preferring ruby over emphasis marks
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;
}
Preferring emphasis marks over ruby
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 3The definition of 'text-emphasis' in that specification. | Candidate Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
text-emphasis-position
|
Chrome Full support 25 Full support 25 Prefixed' Implemented with the vendor prefix: -webkit- |
Edge Full support 79 Full support 79 Prefixed' Implemented with the vendor prefix: -webkit- |
Firefox Full support 46 Full support 46 No support 45 — 49 Disabled' From version 45 until version 49 (exclusive): this feature is behind the |
IE
No support No |
Opera Full support 15 Full support 15 Prefixed' Implemented with the vendor prefix: -webkit- |
Safari Full support 6.1 Full support 6.1 Full support 6.1 Prefixed' Implemented with the vendor prefix: -webkit- |
WebView Android Full support 4.4 Full support 4.4 Prefixed' Implemented with the vendor prefix: -webkit- |
Chrome Android Full support 25 Full support 25 Prefixed' Implemented with the vendor prefix: -webkit- |
Firefox Android Full support 46 Full support 46 No support 45 — 49 Disabled' From version 45 until version 49 (exclusive): this feature is behind the |
Opera Android Full support 14 Full support 14 Prefixed' Implemented with the vendor prefix: -webkit- |
Safari iOS Full support 7 Full support 7 Full support 7 Prefixed' Implemented with the vendor prefix: -webkit- |
Samsung Internet Android Full support 1.5 Full support 1.5 Prefixed' Implemented with the vendor prefix: -webkit- |
left and right
|
Chrome
Full support 62 |
Edge
Full support 79 |
Firefox
Full support 46 |
IE
No support No |
Opera
Full support 49 |
Safari
Full support 8 |
WebView Android
Full support 62 |
Chrome Android
Full support 62 |
Firefox Android
Full support 46 |
Opera Android
Full support 46 |
Safari iOS
Full support 8 |
Samsung Internet Android
Full support 8.0 |
Legend
- Full support
- Full support
- No support
- No support
- User must explicitly enable this feature.'
- User must explicitly enable this feature.
- Requires a vendor prefix or different name for use.'
- Requires a vendor prefix or different name for use.
See also
- The longhand properties
text-emphasis-style
,text-emphasis-color
, and the corresponding shorthand propertytext-emphasis
.
text-emphasis-position by Mozilla Contributors is licensed under CC-BY-SA 2.5.