How to Inspect CSS text-emphasis and Accent Marks in Safari Web Inspector

In East Asian typography—particularly Japanese (kenten) and Chinese (zhùyīn)—emphasis is traditionally conveyed not through italics or bolding, but by placing discrete typographic marks (such as dots, circles, or triangles) above horizontal text or beside vertical columns. In Western design, these properties offer creative opportunities for editorial highlights and decorative text callouts. CSS Text Decoration Module Level 3 introduces text-emphasis properties that developers can inspect and refine directly within Safari Web Inspector.

Understanding CSS text-emphasis Properties

The text-emphasis shorthand bundles mark style and color into coordinated typographic properties:

• text-emphasis-style: Defines the typographic glyph used for emphasis marks. Built-in keywords include dot, circle, double-circle, triangle, and sesame (open or filled), or arbitrary custom characters like "*" or "•".
• text-emphasis-color: Controls mark coloration, defaulting to the element’s computed color.
• text-emphasis-position: Dictates placement relative to characters: over right (default for horizontal text, placed above glyphs) or under left (placed beneath horizontal characters).
• Automatic Skip Behavior: The rendering engine automatically skips whitespace, punctuation, and control symbols, ensuring marks latch strictly to letters and ideographs.

Configuring Safari Web Inspector for Emphasis Inspection

To inspect emphasis marks in Safari:

1. Open your website in Safari and launch Web Inspector by pressing Option + Command + I.
2. Click the Elements tab.
3. Select your emphasized text span in the DOM tree.
4. In the right sidebar, switch to the Styles panel.

Inspecting text-emphasis Declarations in Practice

Review the CSS styling rules applied to editorial callouts:

/* Applying filled dot emphasis marks to Japanese prose */
.japanese-highlight {
  text-emphasis-style: dot;
  text-emphasis-color: #dc2626;
  text-emphasis-position: over right;
}

/* Applying custom typographic asterisk marks to Western callouts */
.editorial-callout {
  text-emphasis-style: "*";
  text-emphasis-color: #2563eb;
  text-emphasis-position: over right;
}

Inside Safari Web Inspector:

1. Select .editorial-callout in the DOM tree.
2. In the Styles panel, verify that text-emphasis-style and text-emphasis-color are active without warnings.
3. Click the colour swatch adjacent to text-emphasis-color to test alternative accent colours in real time.
4. Switch to the Computed panel to verify that text-emphasis-position is calculated properly.
5. Notice how line-height automatically expands in the viewport to accommodate the emphasis marks without overlapping preceding text lines.

Diagnosing Common Layout Pitfalls

When emphasis marks clip or disrupt vertical typography:

• Line-Height Clamping: If an ancestor container specifies a restrictive line-height: 1, emphasis marks can clip against preceding lines. Increase line-height to at least 1.5 or add vertical padding.
• Ruby Text Collisions: When combining emphasis marks with ruby annotation characters (furigana), set text-emphasis-position: under to prevent ruby characters and emphasis marks from occupying the same space.

Validating Progressive Enhancement Fallbacks

Ensure graceful degradation for legacy browsers that lack text-emphasis support:

.highlight-term {
  font-weight: 700; /* Fallback for legacy clients */
}

@supports (text-emphasis: dot) {
  .highlight-term {
    font-weight: normal;
    text-emphasis: dot #dc2626;
  }
}

Safari Web Inspector allows rapid testing of these conditions by disabling rules interactively in the Styles panel, ensuring pristine typographic execution across all Apple devices.