How to Inspect and Control CSS text-box-edge in Safari Web Inspector

Aligning text baselines, icon glyphs, and button containers with pixel-perfect precision has long challenged web designers due to half-leading—the default extra spacing added above cap-height and below the baseline by font metrics. While modern CSS introduces text-box-trim to strip half-leading, the companion property text-box-edge determines the exact typographic edges used for trimming. Safari Technology Preview and modern WebKit releases provide dedicated inspection tools to preview and debug text-box-edge metrics.

Understanding CSS text-box-edge Font Metrics

The text-box-edge property accepts one or two keywords specifying the over and under edge bounds:

• text: Trims to the font em-box, stripping leading but retaining ascenders and descenders.
• cap: Trims the top edge to the font cap-height (ideal for capitalised headings and badges).
• ex: Trims the top edge to the x-height (lowercase character tops).
• alphabetic: Trims the bottom edge precisely to the alphabetic baseline.
• Syntax Combinations: text-box-edge: cap alphabetic aligns buttons and cards directly to uppercase character tops and baselines.

Enabling Develop Menu and Modern CSS Flags in Safari

Ensure developer tooling is active:

1. Open Safari on macOS.
2. Navigate to Safari > Settings > Advanced.
3. Check Show features for web developers.
4. In the top menu bar, select Develop > Feature Flags.
5. Search for CSS text-box-trim and CSS text-box-edge and ensure both are checked.

Inspecting text-box-edge in Web Inspector

To inspect active font trimming boundaries:

1. Right-click the target heading, badge, or button element and select Inspect Element.
2. In the Elements panel, select the target text node.
3. In the right-hand panel, click the Styles tab.
4. Locate the CSS rule declaring:

   text-box-trim: both;
   text-box-edge: cap alphabetic;

5. Safari Web Inspector confirms active declarations with solid styling and validates the property against the computed layout tree.

Visualizing Font Metrics in the Details Sidebar

Examine how the font rendering engine measures the glyph box:

1. Switch to the Computed tab in the right-hand inspection drawer.
2. Scroll to the Font & Text section.
3. Inspect the Font Family and verify OpenType metrics: Cap Height, X-Height, Ascent, and Descent.
4. Modify values interactively in the Styles tab—switching between cap alphabetic and ex alphabetic—to watch Safari recalculate button padding and baseline alignment in real time.