How to Inspect CSS font-feature-settings Diagonal Fractions (frac) in Safari Web Inspector

In culinary recipes, financial prospectuses, real estate listings, and mathematical textbooks, displaying numerical fractions (such as 1/2, 3/4, or 5/8) using standard keyboard slashes and numbers looks clumsy and irregular. When written as 1/2, the numbers appear full-size alongside a full-height solidus slash, clashing with the surrounding typography. Professional OpenType typefaces solve this with Diagonal Fractions (OpenType feature tag frac), which automatically substitutes the numeral sequence with designed numerator glyphs, a proportional fraction bar, and denominator glyphs.

Using CSS properties like font-variant-numeric: diagonal-fractions; or font-feature-settings: "frac" 1;, web designers can enforce professional fraction formatting. Inspecting these glyph mappings inside Safari Web Inspector ensures accurate rendering across macOS and iOS platforms.

Understanding Standard Slashes vs OpenType Fractions

The difference between unstyled slash sequences and OpenType diagonal fractions is substantial:

• Unstyled Sequence (1/2): Full-size numbers flanking a full-height slash, taking up excessive horizontal space and disrupting paragraph texture.
• Diagonal Fractions (frac): Optically balanced miniature numerators raised to the top, separated by a diagonal fraction bar, followed by miniature denominators sitting on the baseline.

/* High-level standards-compliant CSS declaration */
.recipe-ingredient-amount {
    font-variant-numeric: diagonal-fractions;
}

/* Equivalent low-level OpenType tag */
.recipe-fallback {
    font-feature-settings: "frac" 1;
}

/* Explicit fraction suppression for file paths or dates */
.date-string {
    font-variant-numeric: normal;
    font-feature-settings: "frac" 0;
}

Inspecting Diagonal Fractions in Safari Web Inspector

Safari Web Inspector allows web authors to verify whether the active typeface supports and renders the frac feature:

1. Open Safari on macOS and navigate to your page containing fraction data.
2. Right-click the fraction text and select Inspect Element.
3. In the inspection panel on the right, switch to the Fonts tab.
4. Scroll to the Feature Settings > Numeric section. Safari lists all available OpenType numeric features.
5. Verify that frac (Fractions) is listed and marked as enabled.
6. In the Styles panel, toggle font-variant-numeric: diagonal-fractions; on and off to observe the numbers transform into an optically balanced diagonal fraction.

Authoring Clean Editorial Stylesheets

To apply diagonal fractions selectively while protecting dates and URLs from unintended substitutions:

/* Recipe and Technical Fraction Typography */
.fraction,
.ingredient-quantity,
.stock-fraction {
    font-family: "Charter", "Palatino", Georgia, serif;
    font-variant-numeric: diagonal-fractions;
    font-feature-settings: "frac" 1;
}

/* Guard dates, times, and URLs */
time, .date, .url-slug {
    font-variant-numeric: normal;
    font-feature-settings: "frac" 0;
}

Testing on iOS Devices via Remote Debugging

To audit fraction legibility on mobile Apple devices:

1. Enable Web Inspector in Settings > Safari > Advanced on your iPhone or iPad.
2. Connect the device to your Mac via USB and inspect the page from desktop Safari’s Develop menu.
3. Confirm that diagonal fractions maintain clear optical separation on high-resolution Retina screens.

Using frac produces elegant, publication-grade fraction typography across all Apple platforms.