CSS layout and line breaking

Frédéric Wang <[email protected]> Wed, 27 Feb 2013 08:02:51 +0100
Newsgroups gmane.comp.mozilla.devel.mathml
Message-ID <[email protected]>
Hi,

I don't know if everybody saw this:

http://ojanvafai.com/post/mathml-in-webkit

Currently, our MathML code has its own frames but we follow the CSS 
model and compute the "min-content" and "max-content" measures (although 
at the moment they are just equal for MathML). We also reuse the CSS 
frames for the <math> and <mtable>/<mtr>/<mtd> elements and in 
particular this provides line breaking for these elements.

I remember that Karl said a long time ago that he was not happy with the 
approach with intrinsic width computation for MathML so I'm wondering 
what are the issues at the moment, apart the fact that for stretchy 
operators we are a bit overestimating the intrinsic width? Perhaps 
something with how we treat embellished operators? IIUC the way to fix 
bug 415413 would also be to overestimate the intrinsic width of text frames?

BTW, I think the fact that things like

<mpadded width="height">...</mpadded>

can make width depends on height is a problem with our curent approach 
but that could probably be removed from the MathML spec (I don't think 
computing horizontal metrics from vertical metrics is used in practice).

I believe that we have many issues with <math>/<mtable> frames 
inheriting from CSS frames and not our MathML ones (like bugs 219873, 
236963 or 433064) so adding a pseudo mrow frame would probably be the 
solution. But I guess we should implement line breaking first, at least 
the most basic feature (breaking in <mrow> frames at <mo> positions). I 
don't see how we can do that without keeping our intrinsic width 
approach (and improving it to distinguish "min-content" and "max-content).

A trivial line breaking example is

    <div style="width: 100px;">
      <table>
        <tr>
           <td>
             <math>
               <mi>x</mi>
	      <mo>+</mo>
	      <mi>x</mi>
	      <mo>+</mo>
	      <mi>x</mi>
	      <mo>+</mo>
	      <mi>x</mi>
	      <mo>+</mo>
	      <mi>x</mi>
	      <mo>+</mo>
	      <mi>x</mi>
	      <mo>+</mo>
	      <mi>x</mi>
             </math>
           </td>
         </tr>
      </table>
    </div>

that Gecko currently line breaks, as expected. I tested this with 
MathPlayer/MathJax linebreaking support and they are not able to line 
break the equation correctly (while they can if you remove the table and 
directly put the <math> in the <div>) probably because there is no 
interaction with the table column width. It seems to me that relying on 
the CSS model helps us to pass this test.

Any thoughts?

-- 
Frédéric Wang maths-informatique-jeux.com/blog/frederic