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

In mathematical notation, engineering formulas, and academic textbooks, fractions are traditionally displayed as stacked (nut) fractions—where the numerator sits directly above the denominator separated by a horizontal fraction bar (vinculum). While standard web fractions default to diagonal (slashed) layouts, scientific typography requires vertically stacked fractions to align with surrounding equations. In OpenType typography, this is handled through the Alternative Fractions feature tag (afrc).

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

Understanding Diagonal vs Stacked Fractions

The distinction between diagonal and stacked fractions is crucial for academic presentation:

• Diagonal Fractions (frac): Slanted layout separated by a slash (e.g., ½), ideal for recipes and running body text.
• Stacked Fractions (afrc): Vertically aligned numerator and denominator separated by a horizontal fraction bar, ideal for formulas and scientific equations.

/* High-level standards-compliant CSS declaration */
.math-formula .fraction {
    font-variant-numeric: stacked-fractions;
}

/* Equivalent low-level OpenType tag */
.math-formula-fallback {
    font-feature-settings: "afrc" 1;
}

/* Explicit reset */
.body-copy {
    font-variant-numeric: normal;
    font-feature-settings: "afrc" 0;
}

Inspecting Stacked Fractions in Safari Web Inspector

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

1. Open Safari on macOS and navigate to your page containing mathematical 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 afrc (Alternative / Stacked Fractions) is listed and marked as enabled.
6. In the Styles panel, toggle font-variant-numeric: stacked-fractions; on and off to observe the numbers align into a vertical stacked fraction.

Authoring Clean Mathematical Stylesheets

To combine stacked fractions with math typography fallbacks:

/* Academic Mathematical Formula Styling */
.equation .fraction {
    font-family: "STIX Two Text", "Latin Modern Math", Cambria Math, serif;
    font-variant-numeric: stacked-fractions;
    font-feature-settings: "afrc" 1;
    display: inline-block;
    vertical-align: middle;
}

/* Ensure narrative copy uses diagonal fractions */
article p .fraction {
    font-variant-numeric: diagonal-fractions;
    font-feature-settings: "frac" 1;
}

Testing on iOS Devices via Remote Debugging

To audit formula 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 stacked fractions maintain clean vertical spacing on high-resolution Retina displays without colliding with adjacent lines.

Using afrc produces authentic, publication-grade vertical fraction typography across all Apple platforms.