Aligning mathml equations at equal sign - mathml

Question

I have three equations in MathML. I want to align them at equals sign. I certainly can do this using mtable and columnalign. Is there much better and clean way to do this ?

Answer 1

You can use <maligngroup/>

Answer 2

<maligngroup> and its kin were never widely implemented and have not made it into MathML Core. I haven’t found any explicit statement on what’s supposed to be used instead; the W3C MathML Polyfills repo doesn’t even try to replace them.
But I really don’t see anything in Core’s limited element set that would do the job except <mtable>. So that’s almost certainly the way to go.
Here’s a simple(?) example, together with how Firefox renders it on my system using the Latin Modern Math font.
<math display="block">
<mtable>
<mtr>
<mtd><mi>y</mi></mtd>
<mtd><mo>=</mo></mtd>
<mtd>
<mfrac>
<mrow>
<msup><mi>x</mi><mn>2</mn></msup>
<mo>−</mo>
<mn>4</mn>
</mrow>
<mrow>
<mi>x</mi><mo>−</mo><mn>2</mn>
</mrow>
</mfrac>
</mtd>
<mtd></mtd>
</mtr>
<mtr>
<mtd></mtd>
<mtd><mo>=</mo></mtd>
<mtd>
<mfrac>
<mrow>
<mrow>
<mo>(</mo>
<mrow>
<mi>x</mi><mo>+</mo><mn>2</mn>
</mrow>
<mo>)</mo>
</mrow>
<mo>&InvisibleTimes;</mo>
<mrow>
<mo>(</mo>
<mrow>
<mi>x</mi><mo>−</mo><mn>2</mn>
</mrow>
<mo>)</mo>
</mrow>
</mrow>
<mrow>
<mi>x</mi><mo>−</mo><mn>2</mn>
</mrow>
</mfrac>
</mtd>
<mtd></mtd>
</mtr>
<mtr>
<mtd></mtd>
<mtd><mo>=</mo></mtd>
<mtd><mi>x</mi><mo>+</mo><mn>2</mn></mtd>
<mtd>
<mtext>where </mtext>
<mrow><mi>x</mi><mo>&NotEqual;</mo><mn>2</mn></mrow>
</mtd>
</mtr>
</mtable>
</math>
Problem: the table content renders very small, especially in the <mfrac>.
Solution: That’s because <mtable> sets math-style: compact; by default. Use CSS to set math-style: normal; instead. (MathML Core is supposed to integrate better with CSS, so maths can be styled the same way as anything else on the Web.)
Problem: Nothing but Safari actually supports math-style as of this writing.
Solution: Bury your head in your hands and wait for a future browser release. At least Firefox has a config option to enable it, so I can show you how it should look.
Problem: You want your equations to be left-aligned.
Solution: Again, CSS is the way to go… but MathML lacks an equivalent to <col>/<colgroup> for styling a whole table column at once. Work around it using selectors (and possibly classes) to target the relevant cells. In this case, I used mtd:nth-child(3) { text-align: left; }.
Problem: There’s a big whack of spacing at the right side of the equations (the third column), and it’s not part of the cell padding nor of the space between cells.
Solution: ???