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

While diagonal fractions (such as 3/4) are ideal for inline narrative prose and culinary recipes, mathematical textbooks, engineering manuals, and scientific notation frequently require stacked fractions (also known as nut fractions), where the numerator sits directly above the denominator separated by a horizontal fraction bar. In modern CSS Fonts Module Level 4, the font-variant-numeric: stacked-fractions property provides declarative access to OpenType afrc (Alternative Fractions) tables. Apple Safari provides native visual inspection tooling within Safari Web Inspector to inspect and validate stacked fraction substitutions in real time.

The Typographic Function of Stacked Fractions

Traditional web publishing of stacked fractions relied on MathML elements or complex CSS multi-element flexboxes (e.g. display: inline-flex; flex-direction: column). While workable, HTML math scaffolds introduce heavy DOM bloat and can disrupt vertical line rhythm across surrounding body copy.

Using font-variant-numeric: stacked-fractions, authors maintain clean ASCII text (e.g. 1/2), while the browser OpenType rendering engine substitutes the sequence with a compact, vertically stacked glyph pair separated by a horizontal bar:

/* Apply stacked fractions across engineering equations */
.engineering-spec-fraction {
  font-family: "Lucida Grande", "EB Garamond", serif;
  font-variant-numeric: stacked-fractions;
  line-height: 1.8;
}

/* Fallback to standard diagonal fractions if stacked is unsupported */
.general-equation {
  font-variant-numeric: diagonal-fractions;
}

Inspecting Stacked 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 mathematical 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 Alternative Fractions (afrc) feature row.
6. If the active font contains the OpenType afrc 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 stacked fractions fail to render when applying stacked-fractions, check the following common causes:

• Font file table availability: The OpenType afrc table is rare compared to standard frac tables, typically found only in specialized mathematical typefaces or comprehensive serif foundry packages.
• Line-height clearance: Stacked fractions require adequate vertical clearance to prevent horizontal fraction bars from colliding with adjacent text baselines. Ensure line-height is set to at least 1.6 to 1.8.
• Graceful degradation: If the active font lacks afrc support, the browser renders standard unadorned slash characters cleanly without breaking document layout.