How to Inspect and Control CSS text-emphasis-position in Safari Web Inspector

In East Asian digital typography—particularly Japanese and Chinese web design—authors frequently highlight keywords, characters, or phrases using emphasis marks (known in Japanese as bouten or kenten). Rather than using bolding or italics, which distort ideographic letterforms, small dots, circles, or triangles are placed adjacent to glyphs. The CSS text-emphasis-position property dictates where these marks appear relative to the text run. In Apple Safari, developers can test, inspect, and refine emphasis styling using Web Inspector.

Understanding text-emphasis-position Syntax

The text-emphasis-position property accepts two primary keyword arguments defining horizontal and vertical orientation:

text-emphasis-position: [ over | under ] && [ right | left ];

Values include:

• over: Draws emphasis marks above the characters in horizontal text flow. This is the standard typographic convention for Japanese text.
• under: Draws emphasis marks beneath the characters in horizontal text flow. This is preferred in Chinese typography to avoid collision with ruby tone annotations.
• right: Draws marks to the right of glyphs in vertical writing modes (writing-mode: vertical-rl).
• left: Draws marks to the left of glyphs in vertical text layouts.

Enabling Safari Web Inspector

To access styling tools in Safari on macOS:

1. Launch Safari and press Cmd + , to open Settings.
2. Select the Advanced tab and enable Show features for web developers.
3. Navigate to your web page containing ideographic text or emphasis marks.
4. Right-click the emphasized phrase and select Inspect Element.

Testing text-emphasis Properties in the Styles Panel

To style and position emphasis marks interactively:

1. Select the target text span in the Elements DOM tree.
2. In the Styles panel on the right sidebar, declare your emphasis styling:

   .highlight-kanji {
     text-emphasis-style: filled circle;
     text-emphasis-color: #d9381e;
     text-emphasis-position: over right;
   }

3. Observe how Safari’s WebKit text engine renders circular dots directly over each Japanese Kanji glyph.
4. Change the value to under right to verify that the dots relocate beneath the baseline cleanly, maintaining adequate line-height spacing without clipping adjacent paragraphs.

Verifying Interaction with Ruby and Line Heights

When applying emphasis marks to multilingual or annotated typography:

• Inspect the Computed tab to ensure line-height provides sufficient padding so emphasis dots do not collide with adjacent text lines.
• Verify that ruby annotations (furigana) and emphasis marks do not occupy the same vertical boundary. If furigana occupies the over position, configure text-emphasis-position: under to maintain clean readability.

Testing text-emphasis-position in Safari Web Inspector ensures culturally accurate, beautiful East Asian typography across iOS and macOS displays.