Text Emphasis
Do you write content that frequently can be improved with just the right amount of emphasis?
CSS properties for emphasizing text are:
text-emphasis-style
text-emphasis-color
text-emphasis-position
text-emphasis-style
When you specify a text-emphasis-style property, the browser renders an emphasis based on your style.
Here is an example of a style with filled triangles for emphasis.
They say birds have wings so they can fly.
Here is the source code for the above.
They say <span style="text-emphasis-style: filled triangle;">birds have wings</span> so they can fly.
The text-emphasis-style values that may be specified are:
| Value | Example |
|---|---|
| filled dot | • |
| open dot | ◦ |
| filled circle | ● |
| open circle | ○ |
| filled double-circle | ◉ |
| open double-circle | ◎ |
| filled triangle | ▲ |
| open triangle | △ |
| filled sesame | ﹅ |
| open sesame | ﹆ |
| [any character] | [character] |
For illustrating how to specify any character as the text-emphasis-style value, here is an example that specifies the capital letter "I" as the character. The example is immediately followed by the source code.
They say birds have wings so they can fly.
They say <span style="text-emphasis-style: 'I';">birds have wings</span> so they can fly.
Note that the CSS property's value (the letter I) is between single-quotes. That should be double-quotes in the source code when the style attribute's value is between single quotes. Here is example code for that eventuality.
They say <span style='text-emphasis-style: "I";'>birds have wings</span> so they can fly.
text-emphasis-color
When you specify a text-emphasis-color property, the browser renders the emphasis characters based on your color preference.
Here is an example of a style with orange filled triangles for emphasis.
They say birds have wings so they can fly.
Here is the source code for the above.
They say <span style="text-emphasis-color: orange; text-emphasis-style: filled triangle;">birds have wings</span> so they can fly.
Any valid HTML color can be specified. As an example, orange can also be specified as #fda429, rgb(253,164,41), or hsl(35,98%,58%).
text-emphasis-position
The browser default position for emphasis characters generally is over the text.
The emphasis characters may be specified for under the text with the CSS text-emphasis-position property. The value of that property may be over for the general default position or under to place the emphasis characters under the text.
Here is an example of orange triangle characters placed under the text for emphasis. Immediately following the example is the source code. (Note: Some older browsers won't implement emphasis below the text even though they do implement emphasis above the text.)
They say birds have wings so they can fly.
They say <span style="text-emphasis-position: under; text-emphasis-color: orange; text-emphasis-style: filled triangle;">birds have wings</span> so they can fly.
Emphasis Choice
With the ability to specify style, color, and position, you have wide leeway for how you want to emphasize text in your content.
(If you wish to specify text-emphasis-style and text-emphasis-color with shorthand, see the Mozilla text-emphasis page.)
The emphasis you choose will depend on personal preference and how it seems best for the audience you expect.
(This content first appeared in Possibilities newsletter.)
Will Bontrager
