MathML Core: \begin{align} ... \end{align} has too much padding
tmke8 opened this issue · 1 comments
This latex code:
\begin{align}
x &= a+b\\
&= c
\end{align}
is converted to this MathML code by texmath:
<math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
<mtable>
<mtr>
<mtd columnalign="right" style="text-align: right">
<mi>x</mi>
</mtd>
<mtd columnalign="left" style="text-align: left">
<mo>=</mo>
<mi>a</mi>
<mo>+</mo>
<mi>b</mi>
</mtd>
</mtr>
<mtr>
<mtd columnalign="right" style="text-align: right" />
<mtd columnalign="left" style="text-align: left">
<mo>=</mo>
<mi>c</mi>
</mtd>
</mtr>
</mtable>
</math>
but this leads to too much space between x
and =a+b
:
The reason is that the <mtd>
element has obligatory padding
in MathML-Core:
The mtd is laid out as a
table-cell
with content centered in the cell and a default padding. The user agent stylesheet must contain the following rules:mtd { display: table-cell; text-align: center; padding: 0.5ex 0.4em; }
That padding is probably appropriate for matrices, but not for an align environment. So, the solution is to remove the left
and right
padding:
<math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
<mtable>
<mtr>
<mtd columnalign="right" style="text-align: right; padding-left: 0; padding-right: 0">
<mi>x</mi>
</mtd>
<mtd columnalign="left" style="text-align: left; padding-left: 0; padding-right: 0">
<mo>=</mo>
<mi>a</mi>
<mo>+</mo>
<mi>b</mi>
</mtd>
</mtr>
<mtr>
<mtd columnalign="right" style="text-align: right; padding-left: 0; padding-right: 0" />
<mtd columnalign="left" style="text-align: left; padding-left: 0; padding-right: 0">
<mo>=</mo>
<mi>c</mi>
</mtd>
</mtr>
</mtable>
</math>
which results in:
I've tested this in both Chrome and Firefox with identical results.
This won't be easy to fix. The TeX reader (in texmath) just represents an align as an EArray, so once it gets to the MathML writer it's indistinguishable from an array. To handle this properly we migth need a dedicated constructor (math element type) for aligned equations.
As a workaround, you can put your equation in a div with a class, and then put some CSS on that div that overrides the default padding.