text-emphasis

Overview

The text-emphasis property places a specific emphasis mark on each character of text, acting as a shorthand for text-emphasis-style and text-emphasis-color. Contrary to text-decoration which applies the specified decoration across the entire element and doesn't inherit, text-emphasis does inherit, enabling the customization of emphasis marks for descendant elements.

The size of these marks is roughly half the font size. While they don't directly affect the line height, they could cause overflow if there isn't enough spacing (leading) above and below the text.

Note: Emphasis marks are not applied to spaces or control characters.

Examples and Usage

The text-emphasis property is especially useful when working with East Asian languages, where emphasis marks carry a significant role. In the following example, we'll be emphasizing two Chinese characters using the text-emphasis shorthand.

HTML Structure

<p class="emphasis">
    The fifth animal in the Chinese Zodiac is Dragon (simplified <span lang="zh-Hans">龙</span> and traditional <span lang="zh-Hant">龍</span> Chinese characters).
</p>

CSS Styling

.emphasis span {
/* Applies red triangle-shaped emphasis marks to the Chinese characters for "dragon". */
  text-emphasis: filled triangle red; 
}

The code block above specifies a red-filled triangle as the emphasis mark for both the simplified and traditional Chinese characters for "Dragon" nested inside a span element. The lang attribute helps specify the language of the content, providing better accessibility.

While this example uses the filled triangle style and the color red, other emphasis styles and colors can be used for different effects.

Values

The text-emphasis property accepts the following values:

Associated Properties

• text-emphasis-color
• text-emphasis-style
• text-emphasis-position
• text-decoration (with related properties from the CSS Text Decoration Module)

Tips and Tricks

• The text-emphasis property is mainly used in East Asian languages to highlight text.

• Consider the text-emphasis property as an alternative to italic or bold for emphasizing text.

• While text-decoration doesn't inherit and applies the specified decoration across the entire element, text-emphasis does inherit, allowing the alteration of emphasis marks for descendant elements.

• The emphasis mark size is approximately half the size of the text. Be aware of potential overflow if there isn't enough leading.

• The text-emphasis property could be helpful in vertical text layouts, common in East Asian typography.

Browser Compatibility

While some older WebKit browsers support -webkit-text-emphasis, they lack support for CJK languages and thus are considered unsupported. In Firefox version 45, text-emphasis can be enabled with the layout.css.text-emphasis.enabled flag. For more information, check out the first link in the Useful Resources below.

Caution: Early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Useful Resources

Can I use: text-emphasis

W3C's Editor's Draft of CSS Text Decoration Module Level 3: text-emphasis