How to Inspect CSS font-variant-numeric Diagonal Fractions in Safari Web Inspector

In culinary recipes, technical specifications, and mathematical documentation, displaying fractions using standard slash characters (such as 1/2 or 3/4) creates clunky typography that breaks line balance. While Unicode provides pre-composed fraction symbols (like ½), they are limited to a handful of common fractions and lack visual harmony with custom typefaces. The font-variant-numeric: diagonal-fractions property provides declarative access to OpenType frac tables, rendering arbitrary number sequences across forward slashes as beautifully proportioned typographic fractions. Apple Safari provides native visual inspection tooling within Safari Web Inspector to inspect and validate diagonal fraction substitutions in real time.

The Semantic Power of OpenType Diagonal Fractions

Traditional approaches required authors to manually insert superscript and subscript elements (e.g. <sup>3</sup>/<sub>8</sub>) or paste isolated Unicode glyphs. This breaks text accessibility and prevents screen readers from pronouncing mathematical values naturally.

Applying font-variant-numeric: diagonal-fractions allows authors to write clean, standard ASCII markup (e.g. 3/8, 5/16, 11/32), while the browser OpenType engine renders them as diagonal fractions using proportional numerator and denominator glyphs:

/* Apply diagonal fractions across culinary ingredients */
.recipe-ingredient-quantity {
  font-family: "SF Pro Text", "Baskerville", serif;
  font-variant-numeric: diagonal-fractions;
  font-weight: 500;
}

/* Reset to normal fractions if needed */
.standard-ratio-display {
  font-variant-numeric: normal;
}

Inspecting Diagonal Fractions in Safari Web Inspector

Safari Web Inspector allows web authors to examine active OpenType numeric tables directly from the visual browser interface:

1. Launch Safari and navigate to Develop > Show Web Inspector (Cmd+Option+I on macOS).
2. Select the Elements panel and click on an element containing fraction text.
3. In the right-hand details pane, click the Font icon in the inspector toolbar.
4. Scroll down to the Font Variant and OpenType Features sections.
5. Locate the Fractions (frac) feature toggle.
6. If the active font contains the OpenType frac table, Safari displays a blue toggle switch. You can toggle the switch to preview live visual transformations on the canvas instantly.

Diagnosing Typography Support Pitfalls

If fractions fail to render diagonally when applying diagonal-fractions, consider these troubleshooting steps:

• Font file table availability: Many basic web fonts only include fraction tables for simple fractions (1/2, 1/4, 3/4). High-quality editorial fonts (such as Adobe Garamond or SF Pro) support arbitrary multi-digit fraction rendering.
• Spacing around slashes: OpenType frac rules expect continuous digit-slash-digit sequences without interstitial whitespace (e.g. 3/4 rather than 3 / 4).
• Preserving tables during subsetting: Confirm that web font compressors do not discard the frac OpenType table when building lightweight WOFF2 bundles.