Add CSS for MathML fallback #2196

Merged
merged 2 commits into from Apr 29, 2014

4 participants

@rgaiacs

This is related with Bug 981409.

Short Description

Some browsers don't support MathML and because of this the sections in MDN that cover MathML will be bad render. As example, visit https://developer.mozilla.org/en-US/docs/Web/MathML/Examples/MathML_Pythagorean_Theorem with Firefox (that support MathML) and with Chrome (that don't support MathML).

@fred-wang wrote a small CSS to "fix" the lack of MathML support for basic math expressions and ask me to add it into kuma.

Examples

View of MDN sample with this PR in Firefox:

screenshot from 2014-03-26 14 52 24

View of MDN sample with this PR in Chrome:

screenshot from 2014-03-26 14 52 13

@fred-wang

Thanks!

Currently, your commit load mathml.css on all MDN pages for browsers without MathML support.

I wonder whether we would like to load it only on some pages that the doc writers mark as "use MathML" or something.

@darkwing
Mozilla member

I'm concerned about the use of user agents sniffing here. I think a better route would be DOM querying and conditional loading, as I've done here:

https://github.com/mozilla/kuma/blob/master/media/redesign/js/wiki.js#L111

I also believe we should move mathml.css to media/css/libs, because it's from an external lib.

@fred-wang

For an example of MathML support detection based on the <mspace> element, see hasMathMLSupport() in https://developer.mozilla.org/en-US/docs/Web/MathML/Authoring#Fallback_for_Browsers_without_MathML_support

@fred-wang

Additional comment: we also discussed on IRC about adding a warning for browsers without MathML support, so that people are not surprised by the limitation of the CSS-based rendering:

"Your browser does not seem to support MathML. Some CSS fallback will be used instead, but the mathematics on this page might not render correctly."

@darkwing
Mozilla member

Any update here? Anything we can help with?

@rgaiacs

Sorry for the delay. I will update this PR Friday.

I wonder whether we would like to load it only on some pages that the doc writers mark as "use MathML" or something.

Instead of request the user to mark the page I prefer that the server search for <math> in the document and set the mark. @darkwing Can you help me with that?

adding a warning for browsers without MathML support, so that people are not surprised by the limitation of the CSS-based rendering:

When the warning must be show?

  • Every time a page with <math> is load?
  • Only for the first page requested?
@darkwing
Mozilla member

No worries and no rush -- I just want to make sure I can help where needed!

  1. We wont need the server search :) We can do the same pattern as what I did here:

https://github.com/mozilla/kuma/blob/master/media/redesign/js/wiki.js#L122

Instead, we'll search for math tags :)

  1. We can insert the warning with JavaScript within the same function as the math tag search :)
@darkwing
Mozilla member

And of course I'll help with anything you need!

@rgaiacs

@darkwing I still need to

  • add support for localization,
  • improve the notification text (*) and
  • improve the layout/CSS of notification (*).

Any help with previous items with (*) will be grateful.

screenshot from 2014-04-11 13 24 01

@fred-wang

Thanks for working on this Raniere. FYI, here is the message I suggested on #mathml:

"Your browser does not seem to support MathML. Some CSS fallback will be used instead, but the mathematics on this page might not render correctly."

so that it warns about potential rendering issues but keeps neutral about browser suggestion.

@fred-wang

For the CSS, I don't know about the convention of the MDN design but perhaps you could just use a box like this harmony warning:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/hypot

@darkwing
Mozilla member

Whoa, awesome work! I slightly rewrote the JS for this (untested):

https://gist.github.com/darkwing/435b1c03057c62cf50fd

I also rewrote the text. Give this a try and let me know what you think!

@darkwing
Mozilla member

Also, before we can merge this, I'd like to ask you to squash your git commits (davidwalsh.name/squash-commits-git).

EXCELLENT WORK!

@rgaiacs

Fix @fred-wang comments about missing <=.

@darkwing darkwing commented on an outdated diff Apr 15, 2014
templates/base.html
@@ -194,5 +194,8 @@
{% endblock %}
{% block js %}{% endblock %}
+
+ <!-- CSS fallback for MathML. More information at https://bugzilla.mozilla.org/show_bug.cgi?id=981409 -->
+ <script src="{{ MEDIA_URL }}js/libs/mathml-css/mathml-css.js"> </script>
@darkwing
Mozilla member
darkwing added a line comment Apr 15, 2014

This is too general of a place for this include, as it will be included on the homepage and many other places where it isn't needed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@darkwing
Mozilla member

Seeing how small this code has gotten (yay!), I think we can place lines 9-22 into media/redesign/js/wiki.js . That file is only loaded in the wiki and so only the MathML fallback can appear there! :)

@rgaiacs

@darkwing Sorry for the delay. Today when I try to work on this PR I got lots of 503 error that I can explain.

@fred-wang Something interest happen when testing today with Firefox 31.0a1 (2014-04-22):

bug-css

Any idea why the Javascript say that this version of Firefox don't support MathML?

@fred-wang

Any idea why the Javascript say that this version of Firefox don't support MathML?

Can you tell me what are the width/height values of the mspace element?
(It's possible that 1px error is too strict...)

@darkwing
Mozilla member
@rgaiacs rgaiacs pushed a commit to rgaiacs/mathml.css that referenced this pull request Apr 24, 2014
Raniere Silva Bug sample related 31.0a1 (2014-04-23)
This was first reported
mozilla/kuma#2196 (comment)
and the problem was a missing `firstChild`.

Unfortunately even after add the missing `firstChild` the problem
wasn't fix. When open `test/kuma.html` we got:

    box.height = 19
    box.width = 77

but when open `test/mspace.html` we got:

    box.height = 23
    box.width = 77
b8100b7
@rgaiacs

@darkwing At rgaiacs/kuma@a8e2e03 I move the Javascript into media/redesign/js/wiki.js as requested.

@rgaiacs

@darkwing replaced "&&" with "||".

Raniere Silva 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.
968f543
@darkwing
Mozilla member

Looking good! So is this ready for review/merge or is there more coming?

@rgaiacs

It's ready for review/merge.

@darkwing
Mozilla member

Looking at this again, I think we can eliminate the extra function call:

https://gist.github.com/darkwing/64eeedfe7484c005bee3#file-gistfile1-js-L11

How does that look? Also, which browsers are you testing for hit / miss?

Raniere Silva Remove function call
as suggest by @darkwing.
e9410fc
@darkwing
Mozilla member

The fallback message could use an update but I'll do that once this is merged. \o/

@rgaiacs

I think we can eliminate the extra function call:

Done at e9410fc.

which browsers are you testing for hit / miss?

  • Firefox 27.0 and Nightly

    Both support MathML

  • Chromium Version 34.0.1847.116 (260972)

    Chromium don't support MathML.

  • Web/epiphany 3.12.0 (Powered by WebKit 2.4.1)

    Looks like that this version support MathML.

@darkwing darkwing merged commit 7f9f7ec into mozilla:master Apr 29, 2014

1 check passed

Details continuous-integration/travis-ci The Travis CI build passed
@groovecoder
Mozilla member

🍻 for everyone on this! Been a long stretch of good work!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment