With the release of Chrome 109, MathML Core was officially introduced to the Chromium engine, finally aligning Chrome with Firefox and Safari in supporting native mathematical notation on the web. However, developers frequently encounter quirks where equations render with awkward trailing margins, misaligned brackets, or unwanted blank space on the right.

If you have wrapped your MathML markup in an inline-block container and noticed that Chrome reserves significantly more horizontal space than Gecko (Firefox) or WebKit (Safari), this guide breaks down why it happens and how to fix it.

What Causes the Unwanted Right-Hand Space?

In most instances, inconsistent spacing in Chromium’s MathML engine stems from three distinct factors:

  • Font Metrics and OpenType MATH Tables: MathML engines compute bounding boxes for operators (such as the square root symbol <msqrt> and closing parenthesis <mo>)</mo>) using OpenType MATH tables. If the client operating system lacks a specialized math font, Chrome falls back to standard system fonts, often overestimating glyph widths and bounding boxes.
  • Whitespace Sensitivity: Mathematical markup treats inter-element whitespace differently than regular HTML. Indentation and line breaks between tags like <mn> and <mo> can introduce invisible inline spacing depending on the browser layout tree.
  • Stretchy Operators and Spacing Rules: Chromium follows the MathML Core specification strictly regarding the default lspace and rspace (left/right spacing) of operators like parentheses, plus signs, and radicals.

Solutions to Remove Trailing Spacing in MathML

1. Specify a Dedicated Math Font Stack

The most effective fix for cross-browser visual parity is ensuring that all browsers use a font containing proper OpenType MATH layout metrics. Add a robust math font stack to your CSS:

math {  font-family: "Latin Modern Math", "STIX Two Math", "Cambria Math", math, serif;}

When a dedicated math font is present, Chrome can accurately measure the bounding limits of the square root radical and surrounding parentheses, eliminating the phantom whitespace at the end of the expression.

2. Normalize CSS Properties on the <math> Element

Browsers apply different default stylesheets to native MathML elements. Chrome sometimes sets implicit inline margins or computes display boxes differently inside nested containers. Normalizing the element resolves this:

math {  display: inline;  margin: 0;  padding: 0;  letter-spacing: normal;  word-spacing: normal;}

3. Strip Whitespace Between MathML Tags

Line breaks and indentation inside <math> can introduce phantom text nodes that alter layout calculations in Chromium. Remove extraneous line breaks inside the markup:

<div style="display: inline-block; border: 1px solid red;">  <math><mrow><mo>(</mo><mn>3</mn><mo>+</mo><msqrt><mn>33</mn></msqrt><mo>)</mo></mrow></math></div>

4. Explicitly Disable Unwanted Operator Spacing (rspace/lspace)

By default, operators in MathML possess preset spacing. A closing parenthesis is treated as a postfix operator, but if Chrome treats it as an infix operator due to nesting, it will append an extra rspace (right space). You can explicitly set this to zero:

<mo rspace="0">)</mo>

Alternatively, if you do not want the parentheses to stretch dynamically to the height of the radical, you can set stretchy="false":

<mo stretchy="false">(</mo><mn>3</mn><mo>+</mo><msqrt><mn>33</mn></msqrt><mo stretchy="false">)</mo>

Summary

The extra space on the right in Chrome is typically caused by font metric fallback errors on square root characters paired with default operator spacing. To achieve a pixel-perfect layout across Chrome, Firefox, and Safari:

  • Apply a dedicated math font stack (e.g., STIX Two Math, Cambria Math).
  • Strip unnecessary whitespace between MathML nodes.
  • Explicitly define rspace="0" on closing operators if an unexpected right-hand gap persists.