981409 - Add some CSS fallback for browsers without MathML support

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: General, enhancement)

Description

[Frédéric Wang (:fredw)]

Attachment: Math page with a CSS Fallback (to open in Chrome, IE or Opera)

At the moment, browsers without MathML support show some unformatted content + the LaTeX source for the mathematical equations. We could add some CSS rules that would only be loaded for Chrome/IE/Opera, to at least display something readable.

I attach a page with some examples from MDN. I quickly wrote a small stylesheet with some rules from http://www.w3.org/TR/mathml-for-css/ and WebKit's stylesheet, and that could be used as a fallback. This tries to do basic math layout and displays the LaTeX source when you put the mouse over the equation.

Comment 1

[Raniere Silva]

Comment on attachment 8388194 [details]
Math page with a CSS Fallback (to open in Chrome, IE or Opera)

My CSS knowledge is very limited for this bug.

Frédéric, did you forgot the `xmlns` attribute or is a test case?

>    <math>
>      <mmultiscripts>
>        <mi>x</mi>
>        <mi>y</mi>
>        <mi>z</mi>
>        <mi>b</mi>
>        <mi>z</mi>
>        <mprescripts/>
>        <mi>b</mi>
>        <mi>z</mi>
>      </mmultiscripts>
>    </math>

Comment 2

[Frédéric Wang (:fredw)]

(In reply to ra092767 from comment #1)
> My CSS knowledge is very limited for this bug.

I don't think we want to bother too much about the CSS. We know from Opera's experience that doing math rendering with pure CSS is not reasonable. We just want a light fallback so that Chrome/IE users can at least have something readable (even if that's with ugly rendering).

So the point would just be to figure out how to load the stylesheet in Kuma, for Chrome/IE users. Since you already worked on Kuma, I believe you could help to find how.

> 
> Frédéric, did you forgot the `xmlns` attribute or is a test case?
> 
> >    <math>
> >      <mmultiscripts>
> >        <mi>x</mi>
> >        <mi>y</mi>
> >        <mi>z</mi>
> >        <mi>b</mi>
> >        <mi>z</mi>
> >        <mprescripts/>
> >        <mi>b</mi>
> >        <mi>z</mi>
> >      </mmultiscripts>
> >    </math>

The important thing here is the stylesheet, I'll publish it on a separate GitHub repository. The HTML content is a "testcase", with examples from MDN except that one which I authored by hand to test mmultiscripts.

Comment 3

[Frédéric Wang (:fredw)]

I've published the stylesheet on GitHub:
https://github.com/fred-wang/mathml.css

and added some info on MDN:
https://developer.mozilla.org/en-US/docs/Web/MathML/Authoring#css-fallback

Comment 4

[John Karahalis [:openjck]]

Awesome. I think the first question to answer is how the writing team wants to do this -- whether this roll-over effect (see Bugzilla attachment) is the right approach. Once we answer that, we can move forward with implementation.

Comment 5

[Frédéric Wang (:fredw)]

Attachment: testcase

Same testcase, but with the mathml.css loaded via Javascript for Chrome/IE/Opera.

Comment 6

[Frédéric Wang (:fredw)]

The rationale for the roll-over effect is that for more complex equations, I imagined that the rendering could be too bad to be understandable and so having the original LaTeX source could help to avoid ambiguities. However, it's perhaps not very user-friendly and it's inconsistent with what browsers with native MathML support do. It's easy to remove, though (just drop the :hover CSS rules).

Comment 7

[Raniere Silva]

sheppy, fscholz, teoli and alispivak agree to send a small CSS to browser that don't support MathML just to make small examples readable. From MDN Community meetings 2014-03-12.

Comment 8

[Frédéric Wang (:fredw)]

So I've replaced :hover with :active. This allows the user to switch between the CSS-based and LaTeX source by clicking on the expression with the mouse (and probably moving the cursor when doing keyboard navigation). I don't have strong preference, so we can also just drop these CSS rules and always show the CSS-based rendering.

Comment 9

[Raniere Silva]

I send a PR for this: https://github.com/mozilla/kuma/pull/2196.

Comment 10

[[github robot]]

Commit pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/968f543ae8dfb4a1a7cf2fb635a4e3bc9d307519
Add @fred-wang CSS for MathML fallback

The CSS was based on
https://github.com/fred-wang/mathml.css.

This should close bug 981409.

Thanks to @darkwing for the help.

- Add CSS MathML fallback
- Add Javascript to test for web browser MathML support
- Add Javascript to add warning when browser not support MathML

TODO:

- Localization for warning.