Mathematical treatises, cooking recipes, and technical documentation often require specialized stacked or barred fraction displays rather than standard diagonal slashed fractions (frac). The OpenType afrc (Alternative Fractions) feature tag substitutes standard numbers and slashes with vertically stacked horizontal-bar fractions. Safari Web Inspector provides native typographic tools to preview and audit alternative fraction substitutions on macOS.
Typographical Role of Alternative Fractions
While diagonal fractions (e.g. 1/2) suit inline body text, vertical stacked fractions (numerator directly above denominator separated by a horizontal bar) are preferred in formal mathematical notations and scientific publications. Specifying font-feature-settings: "afrc" 1; activates Apple’s CoreText substitution routines, rendering authentic stacked glyphs without requiring external LaTeX math engines.
Configuring Alternative Fractions in CSS
Implement alternative fractions in your stylesheet:
.recipe-quantities {
font-family: "Minion Pro", "Baskerville", serif;
font-feature-settings: "afrc" 1;
font-variant-numeric: stacked-fractions;
line-height: 1.6;
}Inspecting Features in Safari Web Inspector
- Open the webpage containing numerical fractions in Safari.
- Right-click the fraction text and choose Inspect Element.
- Switch to the Font tab in Web Inspector’s right pane.
- Locate Alternative Fractions (afrc) under the Features list.
- Toggle the switch to observe live fraction restructuring rendered by CoreText across the character sequence.
Accessible Semantic Text Integrity
Because OpenType substitutions operate exclusively at the graphic layout layer, the accessibility tree retains standard semantic text representation (e.g. “1/2”), ensuring optimal search indexing and screen reader performance.