Text
text-emphasis
text-emphasis is a shorthand that puts an emphasis mark on every character, as in Japanese and Chinese typography. It sets the mark shape and color together.
Syntax<'text-emphasis-style'> || <'text-emphasis-color'> …
<'text-emphasis-style'> || <'text-emphasis-color'>
<'text-emphasis-style'> = none
| [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ]
| <string>Preview
Presets
Drag the bottom-right corner to resize
Shorthand breakdown
text-emphasisfilled sesametext-emphasis-style
#e66465text-emphasis-color
Code
.box {
text-emphasis: filled sesame #e66465;
}Controls
text-emphasis-stylefilled sesame
filled | open
dot | circle | double-circle | triangle | sesame
text-emphasis-color#e66465
About
Two longhands
text-emphasis-style: the mark. Combinefilledoropenwithdot,circle,double-circle,triangleorsesame. If one is left out, the fill defaults tofilledand the shape todotin horizontal text orsesamein vertical text. Any single character such as"★"works too. The initial value isnone.text-emphasis-color: the mark color. The initial value iscurrentcolor(the text color).
Where the marks go
text-emphasis-position decides whether the marks sit above or below, or left or right, of the text. By default they go above horizontal text and to the right of vertical text. The conventions differ by language, so it is not part of the shorthand.
Watch out
- Spaces and punctuation get no marks.
- For emphasis in Japanese,
text-emphasisreads better than the default italic ofem, which Japanese fonts can only fake by slanting.