User:Jacobolus/math block example

Bug report, https://phabricator.wikimedia.org/T331242 was a duplicate of https://phabricator.wikimedia.org/T182041

For example:

Here is a formula,
<math display=block>x^2 + y^2 = 1,</math>
and here is text afterward.

Rendered:

Generated markup:

<p>Here is a formula,
<div class="mwe-math-element">
    <div class="mwe-math-mathml-display mwe-math-mathml-a11y" style="display: none;">
        <math display="block" xmlns="http://www.w3.org/1998/Math/MathML" ...>
            ...
        </math>
    </div>
    <img ... />
</div>

and here is text afterward.
</p>

Treated by browsers as:

<p>Here is a formula,</p>      <!-- implicitly closed <p> tag -->
<div class="mwe-math-element">
    <div class="mwe-math-mathml-display mwe-math-mathml-a11y" style="display: none;">
        <math display="block" xmlns="http://www.w3.org/1998/Math/MathML" ...>
            ...
        </math>
    </div>
    <img ... />
</div>

and here is text afterward.    <!-- bare text node -->
<p></p>                        <!-- implicitly opened -->

The issue here is that a div is not "phrasing content" (see HTML spec: phrasing content) and therefore is not allowed inside a paragraph. When the browser sees a div inside a paragraph, it will implicitly close the paragraph immediately before the div.

Later, the text after the div is put into a bare text node, not inside any top-level element. This is a problem because it is impossible for CSS to target such elements to be styled. As a result, any style intended to apply to paragraphs or other text content will not affect these text nodes.

Finally, when the browser sees the closing paragraph tag not corresponding to any opening tag, it will implicitly open it, leaving an empty paragraph at the end.

As a workaround, authors can add explicit blank lines:

Here is another formula,

<math display=block>e = mc^2,</math>

and here is text afterward.

Rendered:

Generated markup:

<p>Here is another formula,
</p>
<p>
<div class="mwe-math-element">
    <div class="mwe-math-mathml-display mwe-math-mathml-a11y" style="display: none;">
        <math display="block" xmlns="http://www.w3.org/1998/Math/MathML" ...>
          ...
        </math>
    </div>
    <img .../>
</div>
</p>
<p>and here is text afterward.
</p>

Treated by browsers as:

<p>Here is another formula,</p>
<p></p>                    <!-- implicitly closed empty paragraph -->
<div class="mwe-math-element">
    <div class="mwe-math-mathml-display mwe-math-mathml-a11y" style="display: none;">
        <math display="block" xmlns="http://www.w3.org/1998/Math/MathML" ...>
          ...
        </math>
    </div>
    <img .../>
</div>
<p></p>                    <!-- implicitly opened -->
<p>and here is text afterward.</p>

This is still not a perfect solution, as it results in 2 extra empty paragraphs. But it works better in practice than the previous one because at least css stylesheets can target the trailing content, and the empty paragraphs don’t affect page rendering.

In my opinion both of the above markup examples should instead output:

Desired markup:

<p>Here is another formula,</p>
<div class="mwe-math-element">
    <div class="mwe-math-mathml-display mwe-math-mathml-a11y" style="display: none;">
        <math display="block" xmlns="http://www.w3.org/1998/Math/MathML" ...>
          ...
        </math>
    </div>
    <img .../>
</div>
<p>and here is text afterward.</p>