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

In modern web typography, text decoration plays a crucial role in highlighting hyperlinks, emphasizing critical concepts, and structuring legal or academic copy. Historically, browser engines drew text underlines across fixed typographic baselines, often cutting awkwardly through character descenders (such as the downward stems of lowercase letters g, j, p, q, and y) or colliding with subscripts and mathematical indices. In contemporary CSS Text Decoration Module Level 3 specifications supported across Apple’s WebKit rendering engine, developers can control the exact placement of underlines using the text-underline-position property. Safari Web Inspector provides specialized tools to inspect computed underline placement, debug baseline clashes, and verify typographic layout across languages and writing modes.

Understanding CSS text-underline-position Values

The text-underline-position property controls where underlines are placed relative to the text baseline:

• auto (default): The browser engine chooses the underline placement. In WebKit, this typically places the underline close to the alphabetic baseline, frequently intersecting descenders unless text-decoration-skip-ink is active.
• from-font: Instructs WebKit to read the preferred underline position metrics embedded inside the active OpenType or TrueType font file tables (such as the post or OS/2 tables). If the font designer defined a specific underline offset, that offset takes precedence.
• under: Forces the underline below the lowest descender of the font. This guarantees that letters like p and y never touch or cross the underline line, creating a clean reading experience in technical, mathematical, and chemical notation where subscripts must remain legible.
• left: In vertical writing modes (such as traditional Chinese or Japanese), positions the underline to the left side of the vertical text column.
• right: In vertical writing modes, positions the underline to the right side of the vertical text column.

A typical CSS rule set ensuring clean underlines for academic formulas and hyperlink citations appears as follows:

/* Clean underlines clearing all font descenders */
.academic-citation {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-position: under;
  text-underline-offset: 2px;
}

/* Vertical Japanese text column with left-side underline */
.vertical-japanese-quote {
  writing-mode: vertical-rl;
  text-decoration: underline;
  text-underline-position: left;
}

Enabling Developer Tools in Safari

To inspect typography rules in Safari on macOS:

1. Launch Safari and navigate to Safari > Settings (or press Cmd + ,).
2. Select the Advanced tab and ensure Show features for web developers is enabled.
3. Open your target webpage in Safari.
4. Right-click on the underlined text and choose Inspect Element, or press Option + Cmd + I.

Inspecting and Modifying text-underline-position in Elements Panel

When Safari Web Inspector opens, navigate to the Elements tab. Select the underlined text element in the DOM hierarchy.

Validating Applied Underline Metrics

1. Select the target text node (e.g., <a class="academic-citation">) in the DOM tree.
2. Inspect the Styles panel in the right sidebar.
3. Locate the text-underline-position declaration.
4. Switch to the Computed panel to verify the exact cascading value resolved by WebKit. Notice whether the value evaluates to under, from-font, or default auto.

Interactively Toggling Underline Placement in Real Time

To test how different underline positions impact readability:

• Click on the text-underline-position declaration in the Styles panel.
• Change the value from auto to under. Observe how WebKit immediately shifts the underline downwards, clearing the descenders of g, p, and y completely.
• Change the value to from-font to test whether the active font family contains embedded underline positioning metadata.
• Pair text-underline-position: under with dynamic adjustments to text-underline-offset (e.g., text-underline-offset: 4px;) to achieve precise visual balance.

Debugging Subscript Collisions in Mathematical and Chemical Copy

In scientific articles, placing an underline at the default alphabetic baseline causes the line to cut straight through subscripts (e.g., H₂O or variable notations like x_i,j), rendering numbers illegible.

To diagnose and fix subscript collisions in Safari Web Inspector:

1. Inspect the container containing subscripts.
2. Notice that under default baseline rules, the underline clashes with <sub> elements.
3. In the Styles panel, apply:

   text-underline-position: under;

4. Verify in the viewport that WebKit shifts the underline beneath the subscript glyphs, restoring complete mathematical clarity.

Auditing Vertical Writing Modes (CJK Typography)

In East Asian vertical typography (writing-mode: vertical-rl or vertical-lr), horizontal baseline rules do not apply. In Chinese and Japanese publishing standards, book titles and proper names are traditionally marked with a side-line (proper name mark):

1. Select a vertical text element in Safari Web Inspector.
2. In the Styles panel, set:

   text-underline-position: right;

3. Confirm that the line renders cleanly along the right-hand margin of the vertical glyph column.
4. Toggle between left and right to verify typographic conventions matching editorial guidelines.

By leveraging Safari Web Inspector to inspect computed underline placement, test OpenType font metrics, and debug subscript collisions, web designers and typographers can achieve flawless, readable text decorations across all Apple platforms.