CSS text-emphasis: add a typographic cue without hiding meaning

When to use it

A bilingual catalog uses emphasis marks on a short Japanese caution phrase. The phrase still says what action is required in words, so a reader who does not see the marks loses no instruction. A strong element in the HTML carries the semantic emphasis; CSS adds dots only within the Japanese copy scope. Review horizontal and vertical editions, ruby annotations, punctuation, multiple-line wraps, and the actual font shipped with the page. A mark above a horizontal line may compete with ruby text, so choose one annotation method for a given phrase rather than stacking visual cues without inspection. The sample gives the caution line extra leading, which must be measured with real translated text at high zoom. Avoid applying marks to a whole paragraph: the result becomes noisy, and the line-box cost grows across many lines. If the product relies on a warning, preserve a text label or other semantic signal that survives print, forced colors, and missing CSS.

.catalog-copy:lang(ja) strong { text-emphasis: filled dot #803a42; text-emphasis-position: over right; }
.catalog-copy:lang(ja) { line-height: 1.8; }
@media print { .catalog-copy:lang(ja) strong { text-emphasis-color: currentColor; } }

Cost and verification

The marks are inexpensive to paint, but line spacing and font fallback affect layout. Test whether a different typeface moves or obscures them. Browser and font rendering can differ, and a forced-colors mode may replace authored colors. Keep the original text meaningful without decoration. CSS cannot make a strong element semantically correct if the author highlighted the wrong phrase. Reserve the effect for short runs and inspect line breaks at the widths actually used by readers. If ruby is present, verify its placement before choosing over or under emphasis. The visual mark should aid reading, not become the only safety cue.

Common Mistakes

• Do not use emphasis marks as the sole warning.
• Do not apply marks to long blocks without checking line spacing.
• Do not stack marks and ruby annotation without reviewing collisions.

Connected lessons

• CSS Property Decisions
• CSS :lang(): style text from its declared language
• CSS readable type: set measure and rhythm before decorative details
• CSS writing-mode: test layout axes rather than rotating text
• HTML inline text: emphasis, importance, code, and abbreviations