MathML formula looks vertically unaligned when compiling Markdown to HTML with Pandoc

Question

I'm trying to create an HTML with a math formula, from the following markdown:

// myFile.md

This is a formula: $f(x) = y$

Then, I run the following command:

$ pandoc --mathml myFile.md -o -

The generated output, looks like follows:

<p>
  This is a formula:
  <math display="inline" xmlns="http://www.w3.org/1998/Math/MathML">
    <semantics>
      <mrow>
        <mi> f</mi>
        <mrow>
          <mo stretchy="true" form="prefix"> (</mo> <mi> x</mi>
          <mo stretchy="true" form="postfix"> )</mo>
        </mrow>
        <mo> =</mo>
        <mi> y</mi>
      </mrow>
      <annotation encoding="application/x-tex"> f(x) = y </annotation>
    </semantics>
  </math>
</p>

And it's rendered this way:

Am I doing anything wrong? Is there a way to solve this problem?

Expected output

After some tries, what I would expect is what I get with one of the following hacks:

• If I manually remove the <mrow> and </mrow> tags following "f".
• If I manually set stretchy attribute to false.

But these are just hacks. I need Pandoc to produce the proper output:

Thanks.

Answer 1

It is a problem with Safari. In other browsers, my first generated HTML looks good. Thank you very much to @Damien for his help :-)

This highlights the problems of using MathML for ePubs, as we don't have control over the reader being used. For instance, from iBooks I've experienced the same weird rendering than in Safari.

Finally, I've decided to use GladTeX to convert math to inline images so I ensure a better compatibility.