Unable to render vertically lay out addition of two numbers with MathJax and MathML

StackOverflow https://stackoverflow.com/questions/12735353

  •  05-07-2021
  •  | 
  •  

Question

I would like to render two numbers on a web page like this:

    123
  + 456
 ______

I've found this example:

<mstack>
  <mn>496</mn>
  <msrow> <mo>+</mo> <none/> <mn>28</mn> </msrow>
  <msline/>
</mstack>

but MathJax doesn't support mstack, msrow and msline elements.I've attempted to use a mtable

<body>
    <math xmlns="http://www.w3.org/1998/Math/MathML">
        <mtable id="test" columnalign="right">
            <mtr><mtd></mtd><mtd><mn>12321</mn></mtd></mtr>
            <mtr><mtd><mo>+</mo></mtd><mtd><mn>45665445</mn></mtd></mtr>
       </mtable>
    </math>
</body>

with this CSS:

 <style type="text/css">
       #test
       {
           border-bottom:1px solid black;
       }
    </style>

but the bottom border is overlapping the lower number. Is there a way to achieve this layout with MathJax/MathML?

Was it helpful?

Solution

You can see examples of this kind of layout in the MathML spec at

http://www.w3.org/Math/draft-spec/mathml.html#chapter3_presm.elemmath.examples

If, once the document has loaded, you select the button "convert and display with MathJax" then the MathML3 mstack markup will be transformed to some MathML2 that MathJax understands. The relevant javascript is all available linked from that page.

Also relevant is the discussion between myself and the MathJax developer at

https://groups.google.com/forum/#!msg/mathjax-users/wa85p5TAIe4/hgUoLEXrweoJ

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top