Bug 44206 – Alignment of block MathML differs between WebKit and Firefox

• Status: RESOLVED
• Resolution: FIXED
• Component: MathML

[Randall Farmer]

In Firefox, blocks of math at that URL are centered.  In WebKit, they're not.  Looks like a user-agent CSS difference; Firefox's mathml.css has:

math[mode="display"], math[display="block"] {
display: block;
text-align:-moz-center;
}

WebKit has:

math[display="block"] {
display: block;
margin-bottom: 1em;
page-break-inside: avoid;
}

[François Sausset]

The w3c MathML3 recommendation specifies nothing about that.
See: http://www.w3.org/TR/MathML3/chapter2.html#interf.toplevel.atts
Specifically this part: "specifies whether the enclosed MathML expression should be rendered as a separate vertical block (in display style) or inline, aligned with adjacent text. When display="block", displaystyle is initialized to "true", whereas when display="inline", displaystyle is initialized to "false"; in both cases scriptlevel is initialized to 0 (See Section 3.1.6 Displaystyle and Scriptlevel). Moreover, when the math element is embedded in a larger document, a block math element should be treated as a block element as appropriate for the document type (typically as a new vertical block), whereas an inline math element should be treated as inline (typically exactly as if it were a sequence of words in normal text). In particular, this applies to spacing and linebreaking: for instance, there should not be spaces or line breaks inserted between inline math and any immediately following punctuation. When the display attribute is missing, a rendering agent is free to initialize as appropriate to the context."

However, centering the text seems natural in a mathematical context.
For homogeneity with other MathML implementation, we should probably center the text.

[François Sausset]

I just tested with Amaya and text is not centered (as expected by a strict interpretation of the mathml3 recommendation)!
I'll try to have a look at other implementations.

[Alex Milowski]

I think adding these properties to our math[display="block"] rule should fix this:

   margin-left: auto;
   margin-right: auto;

Centering block mathematics is common practice.  We should default to centering
and people can turn it off in their own stylesheets.

[François Sausset]

Created attachment 66394 [details]
Patch

Patch (using text-align: center;) + test.
After a discussion on the [e-mail] mailing list, a consensus arose for a centered math element (like in Firefox and MathPlayer).

[Alex Milowski]

Using "text-align: center" is not what we want.  This will make the contained children align center.

We need to use auto left/right margins via:

   margin-left: auto;
   margin-right: auto;

that will make sure the left and right margins have equal value and
the net effect is the block is centered in the block stacking direction
(block flow).

[François Sausset]

Created attachment 66511 [details]
Revised patch

In fact, both text and block flows have to be centered, depending if the width of the block is fixed or inherited.
Thus, I added auto margins in addition to text centering.

[Beth Dakin]

Comment on attachment 66511 [details]
Revised patch

r=me

[WebKit Commit Bot]

Comment on attachment 66511 [details]
Revised patch

Clearing flags on attachment: 66511

Committed r66899: <http://trac.webkit.org/changeset/66899>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[WebKit Review Bot]

http://trac.webkit.org/changeset/66899 might have broken GTK Linux 32-bit Release
The following changes are on the blame list:
http://trac.webkit.org/changeset/66899
http://trac.webkit.org/changeset/66900