Forum How do I...?

Align MathML to the baseline

jbutter
Hi,

I've been working on trying to align my MathML equations to the baseline in Prince. After digging through the W3C spec on MathML and just experimenting around, I still can't figure it out.

The same line of code on Firefox and IE (using MathPlayer) is automatically aligned to the baseline by the browser.

<p>Know what each of these symbols represent: μ,
  <m:math>
    <m:semantics>
      <m:mover accent="true">
        <m:mi>x</m:mi>
        <m:mo>¯</m:mo>
      </m:mover>
      <m:annotation encoding="MathType-MTEF"> </m:annotation>
    </m:semantics>
  </m:math>
  ,
  <m:math>
    <m:semantics>
      <m:mover accent="true">
        <m:mi>p</m:mi>
        <m:mo>^</m:mo>
      </m:mover>
      <m:annotation encoding="MathType-MTEF"> </m:annotation>
    </m:semantics>
  </m:math>
  ,
  <m:math>
    <m:semantics>
      <m:mrow>
        <m:mfrac>
          <m:mi>σ</m:mi>
          <m:mrow>
            <m:msqrt>
              <m:mi>n</m:mi>
            </m:msqrt>
          </m:mrow>
        </m:mfrac>
      </m:mrow>
      <m:annotation encoding="MathType-MTEF"> </m:annotation>
    </m:semantics>
  </m:math>
  ,
  <m:math>
    <m:semantics>
      <m:mrow>
        <m:msqrt>
          <m:mrow>
            <m:mfrac>
              <m:mrow>
                <m:msubsup>
                  <m:mi>s</m:mi>
                  <m:mn>1</m:mn>
                  <m:mn>1</m:mn>
                </m:msubsup>
              </m:mrow>
              <m:mrow>
                <m:msub>
                  <m:mi>n</m:mi>
                  <m:mn>1</m:mn>
                </m:msub>
              </m:mrow>
            </m:mfrac>
            <m:mo>+</m:mo>
            <m:mfrac>
              <m:mrow>
                <m:msubsup>
                  <m:mi>s</m:mi>
                  <m:mn>2</m:mn>
                  <m:mn>2</m:mn>
                </m:msubsup>
              </m:mrow>
              <m:mrow>
                <m:msub>
                  <m:mi>n</m:mi>
                  <m:mn>2</m:mn>
                </m:msub>
              </m:mrow>
            </m:mfrac>
          </m:mrow>
        </m:msqrt>
      </m:mrow>
      <m:annotation encoding="MathType-MTEF"> </m:annotation>
    </m:semantics>
  </m:math>
</p>


I've tried the following CSS but no luck.
math{
	vertical-align: baseline;
}


Although I have noticed that "vertical-align: middle;" works, that causes problems with x-bar and p-hat being below the baseline. I would appreciate any feedback on what I can do to get this to align to the baseline, thanks!
jbutter
I've added an online version of the sample code. It is at http://tlt.byu.edu/mathml/sample.htm
mikeday
Prince can't automatically align MathML to the baseline at this time, and chunks of MathML are currently treated as opaque blocks with no inherent baseline, much like images or SVG. In the future we may be able to add support for automatic baseline alignment for MathML, but for now it will require manually specifying the alignment with the vertical-align property or adding padding to get it where you want it to appear.
jbarrus
Has the support for MathML been improved at all since this post?
mikeday
Not yet, baseline alignment of MathML to the surrounding content is still on the roadmap.
mikeday
Baseline alignment of MathML is fixed in Prince 8.0, now available in beta. Sorry it took so long! :)