CSS text-emphasis in East Asian Typography

The CSS text-emphasis property is a styling feature designed to apply emphasis marks to text, serving as the digital equivalent of traditional typographic accents used primarily in East Asian languages such as Chinese, Japanese, and Korean. Unlike Western typography, which commonly relies on italics, oblique styles, or bolding to highlight text, East Asian scripts traditionally use small symbols placed adjacent to characters to denote stress. The text-emphasis property provides a native, layout-stable way to render these marks on the web without relying on manual HTML hacks, images, or pseudo-elements.

The Role of Emphasis Marks in East Asian Typography

In East Asian scripts, italicizing characters often distorts their structural balance and makes them difficult to read. Instead, typographic traditions rely on discrete marks—known as kenten or wakiten in Japanese and boute in Chinese—positioned alongside the characters.

These marks typically consist of small dots, circles, or sesame shapes positioned above or below horizontal text, or to the right or left of vertical text. They indicate to the reader that a particular word, phrase, or sentence carries special importance.

How the text-emphasis Property Works

The text-emphasis property is a shorthand for two distinct properties: text-emphasis-style and text-emphasis-color. A companion property, text-emphasis-position, determines the placement of the marks.

1. text-emphasis-style

This property defines the shape and fill of the emphasis mark. It accepts keyword values or a custom string:

• Shapes: dot, circle, double-circle, triangle, sesame
• Fill state: filled (default) or open
• Custom characters: A single custom character string, such as a punctuation mark or symbol (e.g., '*').

For example, text-emphasis-style: open dot; renders hollow dots, while text-emphasis-style: filled sesame; applies traditional sesame-shaped marks.

2. text-emphasis-color

This property controls the color of the emphasis marks. If omitted, it defaults to currentColor, matching the text color of the parent element. Defining a custom color allows designers to make the emphasis visually distinct from the main body copy.

3. text-emphasis-position

This property dictates where the marks are rendered relative to the text run:

• Horizontal writing modes: Typically set to over (above the text, standard for Japanese and Simplified Chinese) or under (below the text, common in Traditional Chinese).
• Vertical writing modes: Typically set to right or left.

Advantages Over Traditional Workarounds

Before text-emphasis gained broad browser support, developers often attempted to mimic these marks using Ruby annotations (<ruby>, <rt>), background images, or ::before and ::after pseudo-elements. These methods carried significant drawbacks:

• Line Height Disruption: Ruby tags often alter the line box height unpredictably, breaking vertical rhythm.
• Semantic Pollution: Using markup elements solely for visual styling clutters the document object model (DOM) and can confuse screen readers.
• Maintenance Complexity: Positioning pseudo-elements precisely over variable-width characters requires brittle, hardcoded CSS.

The text-emphasis property resolves these issues by handling layout metrics natively. Browsers automatically adjust line spacing to accommodate the marks without interfering with character spacing, font metrics, or accessibility trees.