How to Inspect and Style MathML Equations with CSS math-style in Safari Web Inspector

Rendering mathematical notation—including fractions, radicals, integral calculus, matrices, and complex exponents—has historically been an operational burden on the web. Developers frequently relied on heavy client-side JavaScript rendering engines (such as MathJax or KaTeX) or generated pre-rendered SVG and PNG images, which compromised DOM accessibility and page loading speeds. With the official standardization and native implementation of MathML Core across modern browser engines—championed by Apple WebKit and Safari—mathematical formulas render natively at full speed. Through standard CSS properties like math-style and math-depth, web designers can govern equation layouts directly. Using Safari Web Inspector on macOS, developers can inspect, test, and style native MathML equations in real time.

Understanding MathML Core and CSS math-style Syntax

MathML Core introduces dedicated CSS styling properties that integrate mathematical syntax into standard web stylesheets:

• math-style: Controls the rendering mode of mathematical expressions, corresponding to the classic TeX display styles:
  • normal: Renders in display mode. Fractions are formatted with full-sized numerators and denominators, operators (such as summation $\sum$ and integration $\int$) render at full scale, and limits appear directly above and below the operator glyph.
  • compact: Renders in inline / text mode. Fractions and sub-expressions compress vertically to prevent uneven line-spacing (leading) within a paragraph of body text. Limits appear beside operators rather than stacking vertically.
• math-depth: Controls how font sizes scale for nested mathematical levels (such as superscripts, subscripts, and nested fractions). Values include auto-add, integers, and relative shifts.

Enabling Safari Web Inspector and Selecting MathML Elements

To inspect and debug MathML formulas in Safari on macOS:

1. Enable the Develop menu via Safari > Settings > Advanced > Show features for web developers.
2. Navigate to the academic paper, documentation portal, or educational webpage containing MathML.
3. Right-click the mathematical equation and select Inspect Element.
4. In Web Inspector, expand the <math> root element in the DOM tree to view its child tags (such as <mrow>, <mfrac>, <msqrt>, and <mo>).

Inspecting and Modifying math-style in the Styles Sidebar

Select a <math> or <mfrac> tag and examine the Styles panel:

/* Example standalone display equation styling */
math.display-formula {
    display: block;
    margin: 1.5rem auto;
    math-style: normal; /* Full-scale display styling */
    font-size: 1.25rem;
}

/* Example inline formula embedded within a paragraph */
math.inline-formula {
    display: inline;
    math-style: compact; /* Vertically compressed to fit inline text */
}

Test the visual impact of math-style in Web Inspector:

1. In the Styles panel, click on the value for math-style.
2. Change normal to compact on a standalone fraction formula.
3. Observe the fraction immediately compress its vertical footprint: the numerator and denominator font sizes shrink slightly, and summation limits shift to the right of the operator.

Property Value	Rendering Mode	Fraction & Operator Presentation	Primary Use Case
math-style: normal	Display Mode	Full-height fractions; limits placed directly above and below operators.	Centered, standalone equations, theorem definitions, derivation proofs.
math-style: compact	Inline Mode	Compressed fractions; limits placed beside operators to preserve paragraph rhythm.	Equations embedded inside body sentences and list items.

Inspecting MathML Font Metrics and Math Fonts

MathML rendering depends on fonts equipped with OpenType MATH tables (such as Latin Modern Math, STIX Two Math, or Apple’s native system fonts). In Safari Web Inspector:

1. Switch to the Computed tab for the <math> element.
2. Scroll to the Font section.
3. Safari reports the exact font family used for rendering. If a system fallback is used, you can enforce dedicated math typefaces in your stylesheet:

/* Professional mathematical typography styling */
math {
    font-family: "STIX Two Math", "Cambria Math", "Latin Modern Math", serif;
}

Controlling Nested Scaling with math-depth

When formulas contain deeply nested powers (e.g., $x^{y^z}$) or fractions within fractions, font sizes can quickly become illegibly small if scaling is unconstrained. Use math-depth to manage scaling behavior:

/* Prevent nested exponents from shrinking beyond a minimum threshold */
msup > * {
    math-depth: auto-add;
}

/* Force standard font size in sub-fractions */
mfrac mfrac {
    math-depth: 0;
}

In Web Inspector, inspect the computed font size of nested <mn> (number) and <mi> (identifier) tags to ensure legibility across mobile viewports.

Auditing Semantic Accessibility for Screen Readers

One of the primary benefits of native MathML over image-based formulas is screen reader accessibility. Safari and VoiceOver on macOS natively announce MathML equations mathematically (e.g., reading <mfrac> as “fraction with numerator x and denominator y”).

In Safari Web Inspector:

1. Switch to the Accessibility tab in the right sidebar.
2. Select the <math> container.
3. Verify that the accessible role is identified as math and that all child operators and operands are present in the accessibility tree.

Using Safari Web Inspector to inspect and style MathML equations with CSS math-style enables publication of blazing-fast, accessible, and mathematically precise scientific typography directly on the modern web.