Skip to content

[v4.1.0] MathML attributes with trailing whitespace (e.g., mathvariant="bold ", displaystyle="true ") are not rendered correctly #3505

@sobhanadrink

Description

@sobhanadrink

Issue Summary

In MathJax v4.1.0, MathML elements fail to render as expected when certain attributes contain trailing whitespace in their values. This affects common attributes such as mathvariant and displaystyle.

Earlier MathJax versions (e.g., v2.7.4) appeared to handle or normalize these values more leniently. In v4.1.0, however, the same MathML renders incorrectly unless the whitespace is manually removed.

This issue is especially relevant for applications that generate MathML dynamically or consume legacy MathML content where attribute normalization cannot always be guaranteed.

Steps to Reproduce:

  1. Load MathJax v4.1.0 with the MathML input and CHTML output.
  2. Render MathML that includes attributes with trailing whitespace (e.g., mathvariant="bold " or displaystyle="true ").
  3. Observe that the expected styling or layout is not applied.
  4. Remove the trailing whitespace and re-render.
  5. Observe that the math renders correctly.

Expected Behavior
MathJax should either:

  • Normalize attribute values by trimming leading/trailing whitespace, or
  • Provide a documented configuration or hook to enable compatibility with MathML that includes whitespace in attribute values.

Actual Behavior
Attributes with trailing whitespace are not recognized, causing:

  • mathvariant="bold " to be ignored
  • displaystyle="true " to behave as if unset
  • Incorrect rendering compared to earlier MathJax versions

Sample HTML (Minimal Reproduction)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MathJax Attribute Whitespace Issue</title>

    <script type="text/javascript">
        window.MathJax = {
            options: {
                enableExplorerHelp: false,
                menuOptions: {
                    settings: {
                        assistiveMml: true,
                        enrich: false,
                        speech: false,
                        braille: false,
                        collapsible: false
                    }
                }
            },
            output: {
                linebreaks: { inline: false }
            },
            chtml: {
                mtextInheritFont: true
            }
        };
    </script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/tex-mml-chtml.js"></script>
</head>
<body>

<h3>Example 1: Trailing space in <code>mathvariant</code></h3>

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mstyle mathvariant="bold ">
        <mn>2</mn>
        <mo>+</mo>
        <mi>i</mi>
    </mstyle>
</math>

<h3>Example 2: Trailing space in <code>displaystyle</code></h3>

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mi>BA</mi>
    <mo>=</mo>
    <mstyle displaystyle="true ">
        <mfrac>
            <mtext>number of hits</mtext>
            <mtext>number of at bats</mtext>
        </mfrac>
    </mstyle>
</math>

</body>
</html>

Technical details:

  • MathJax Version: 4.1.0
  • Client OS: Windows 11
  • Browser: Chrome, Edge, Firefox

I am using the following MathJax configuration:

    window.MathJax = {
        options: {
            enableExplorerHelp: false, // Disables MathJax's built-in help for accessibility explorer.
            menuOptions: {
                settings: {
                    assistiveMml: true, // Enables Assistive MathML for screen readers.
                    enrich: false, // Disables semantic enrichment of MathML.
                    speech: false, // Disables speech output (e.g., spoken math).
                    braille: false, // Disables braille output.
                    collapsible: false, // Disables collapsible equations.
                },
            },
        },
        output: {
            linebreaks: {
                inline: false,
            },
        },
        chtml: {
            mtextInheritFont: true, // Keeps <mtext> elements in math font for consistent sizing.
        },
    }; 

and loading MathJax via

<script src="https://cdn.jsdelivr.net/npm/[email protected]/tex-mml-chtml.js"></script>

Supporting information:

We understand that this behavior may stem from strict MathML attribute parsing rules, and that attribute values containing trailing whitespace may be considered invalid.

However, since earlier MathJax versions appeared to tolerate or normalize such values, we wanted to ask:

  • Is this strict behavior in v4.1.0 intentional?
  • Does MathJax provide (or plan to provide) a configuration option, hook, or preprocessing step to normalize attribute values at runtime?
  • Is there a recommended approach on the MathJax side for handling MathML from dynamic or legacy sources where trimming whitespace is not always feasible upstream?

Any guidance or best practices would be greatly appreciated.

Attached sample HTML and Image
Mathjax-4.1.0-math-attributes-with-trailing-whitespace-not rendered-correctly.html

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    Code ExampleContains an illustrative code example, solution, or work-aroundExpected BehaviorThis is how MathJax worksv4

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions