CSS text-emphasis Playground — Free Online Tool

Add small marks above or beside letters — the way print uses italics for Latin but East Asian typography uses 傍点 (sesame, dot, circle, triangle). Configure style, color, position, and the skip rules; live preview for horizontal & vertical writing modes; copy-ready shorthand.

text-emphasis-style — shape

Fill

Custom (single grapheme)

text-emphasis-position

Horizontal: pick over or under. Vertical (CJK): pick left or right.

text-emphasis-color

Color mode

text-emphasis-skip experimental

Sample text

Apply to

All sample text Only <em class="emph"> spans

Horizontal — heading size

Horizontal — body size

Vertical writing mode (writing-mode: vertical-rl)

これは縦書きで傍点を付けたサンプル文章です。

About text-emphasis

What it is — small typographic marks (dots, circles, triangles) drawn above or beside each glyph for emphasis. In Japanese this is called 傍点 (bōten); in Chinese 着重号; in print English we usually italicize instead.
Shorthand — text-emphasis: filled dot red. Position is set separately because it's an inherited property.
Spaces & punctuation are skipped by default (you don't want a dot above every comma). Use text-emphasis-skip to override.
Vertical writing — in vertical text (Japanese / Chinese / Mongolian), over = right side, under = left side. Always specify both keywords for portability.
Custom marks — accept any single grapheme cluster string. Useful for editorial design (★, ✦, ❤) but the spec recommends sticking to predefined shapes for accessibility.
Browser support — Chrome 99+ unprefixed, Safari 15.4+, Firefox 46+. Older WebKit needs the -webkit- prefix; the generated CSS includes both.