How to Inspect CSS text-underline-position and CJK Typographic Rules in Safari Web Inspector

Rendering polished, internationalized typography across multilingual web applications requires careful control over text decorative baselines. In Western alphabetic scripts, default underlines cut directly through lowercase character descenders (such as "g", "p", "q", and "y") or collide with diacritics. In East Asian typographic typesetting (Chinese, Japanese, and Korean – CJK), underlines must sit cleanly below character bounding boxes to avoid obscuring stroke radicals. CSS Text Decoration Module Level 4 provides text-underline-position controls that developers can inspect and refine in Safari Web Inspector.

Understanding text-underline-position Directives

The text-underline-position property dictates baseline placement geometry:

• auto: The browser engine selects an appropriate placement. In alphabetic scripts, underlines are drawn near the baseline, often clipping descenders unless text-decoration-skip-ink is active.
• from-font: Respects the font designer’s embedded metrics, positioning the underline precisely where the OpenType font table specifies.
• under: Forces the underline completely beneath the lowest character descender across all glyphs in the line, ensuring zero overlap with letter stems.
• left / right: Specialized positioning for vertical East Asian writing modes (writing-mode: vertical-rl), placing the decorative underline on the typographic reading side.

Configuring Safari Web Inspector for Typographic Inspection

To inspect multilingual text decoration rules in Safari:

1. Open your webpage in Safari and press Option + Command + I to launch Web Inspector.
2. Select the Elements tab.
3. Select your heading, link, or multilingual text container in the DOM tree.
4. In the right sidebar, switch to the Styles panel and inspect the active decoration rules.

Inspecting Underline Placement in Practice

Review the CSS styling rules applied to mixed Western and CJK typography:

/* Global styling ensuring clean descender clearance */
a.editorial-link {
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-underline-position: under;
  text-decoration-color: #2563eb;
}

/* Specific CJK typography rule */
:lang(zh), :lang(ja), :lang(ko) {
  text-underline-position: under;
}

/* Vertical writing mode rule */
.vertical-prose {
  writing-mode: vertical-rl;
  text-underline-position: right;
}

Inside Safari Web Inspector:

1. Select an a.editorial-link containing descenders (e.g., "typography").
2. In the Styles panel, toggle text-underline-position: under;:
   • Notice how the underline drops cleanly beneath the bottom loop of the "p" and "y" glyphs without requiring ink-skipping gaps.
3. Select a CJK text block and verify that text-underline-position: under keeps the decorative line from dissecting horizontal baseline strokes.
4. Switch to the Computed panel to verify effective property inheritance across nested inline elements.

Diagnosing Vertical Alignment Pitfalls

When decorative underlines appear misplaced or clipped:

• Line-Height Clamping: If an inline element has tight line-height or container overflow: hidden, positioning underlines with under may clip the stroke against the bottom container edge. Increase bottom padding slightly to accommodate the underline offset.
• Font Metric Disparities: When combining from-font with generic fallback font families, underlines may jump vertically if fallback fonts specify different OpenType baseline tables. Using under provides visual consistency across fallback fonts.

Validating Cross-Browser Progressive Enhancement

Modern WebKit in Safari provides full hardware-accelerated rendering for advanced text decoration baselines. Wrapping experimental directives in @supports guarantees graceful baseline fallbacks on legacy browsers without stylesheet parsing errors.