Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Add CSS for MathML fallback #2196

Merged
merged 2 commits into from

4 participants

@r-gaia-cs

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
Owner

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
Owner

Any update here? Anything we can help with?

@r-gaia-cs

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
Owner

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
Owner

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

@r-gaia-cs

@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
Owner

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
Owner

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

EXCELLENT WORK!

@r-gaia-cs

Fix @fred-wang comments about missing <=.

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 Owner

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
Owner

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! :)

@r-gaia-cs

@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...)

@r-gaia-cs r-gaia-cs referenced this pull request from a commit in r-gaia-cs/mathml.css
@r-gaia-cs r-gaia-cs 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
@r-gaia-cs

@darkwing At r-gaia-cs/kuma@a8e2e03 I move the Javascript into media/redesign/js/wiki.js as requested.

@r-gaia-cs

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

@r-gaia-cs r-gaia-cs 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
Owner

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

@r-gaia-cs

It's ready for review/merge.

@darkwing
Owner

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?

@darkwing
Owner

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

@r-gaia-cs

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 from
@groovecoder
Owner

:beers: 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
Commits on Apr 28, 2014
  1. @r-gaia-cs

    Add @fred-wang CSS for MathML fallback

    r-gaia-cs authored
    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.
Commits on Apr 29, 2014
  1. @r-gaia-cs

    Remove function call

    r-gaia-cs authored
    as suggest by @darkwing.
This page is out of date. Refresh to see the latest.
Showing with 248 additions and 0 deletions.
  1. +225 −0 media/css/libs/mathml.css
  2. +23 −0 media/redesign/js/wiki.js
View
225 media/css/libs/mathml.css
@@ -0,0 +1,225 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/*
+ https://github.com/fred-wang/mathml.css
+
+ This CSS stylesheet is a simplified version of the "MathML for CSS Profile"
+ (http://www.w3.org/TR/mathml-for-css/) without CSS table rules that had only
+ been implemented in Presto and using new CSS3 selectors and flexboxes.
+
+ We know from Opera's experience that relying exclusively on a fixed set of
+ CSS rules to do math layout is not reasonable. This stylesheet is only
+ intended to provide some fallback to browsers without MathML support in order
+ to make basic mathematical constructions readable, without claim of rendering
+ quality.
+
+ This stylesheet must not be loaded in browsers that have MathML support or
+ it will mess up the native rendering. You can load this mathml.css file
+ conditionally by doing some UA string sniffing:
+ https://developer.mozilla.org/en-US/docs/Web/MathML/Authoring#noMathML
+*/
+
+@namespace "http://www.w3.org/1998/Math/MathML";
+
+/* math */
+math {
+ display: inline;
+ text-indent: 0;
+}
+math[display="block"] {
+ display: block;
+ text-align: center;
+}
+
+/* fraction */
+mfrac {
+ display: inline-table !important;
+ vertical-align: middle;
+ border-collapse: collapse;
+}
+mfrac > * {
+ display: table-row !important;
+}
+mfrac:not([linethickness="0"]) > *:first-child {
+ border-bottom: solid thin;
+}
+
+/* sub/sup scripts */
+msub > *:nth-child(2), msubsup > *:nth-child(2),
+mmultiscripts > *:nth-child(2n+2),
+mmultiscripts > mprescripts ~ *:nth-child(2n+3) {
+ font-size: 0.8em;
+ vertical-align: sub;
+}
+msup > *:nth-child(2), msubsup > *:nth-child(3),
+mmultiscripts > *:nth-child(2n+3),
+mmultiscripts > mprescripts ~ *:nth-child(2n+2) {
+ font-size: 0.8em;
+ vertical-align: super;
+}
+mprescripts:after {
+ content: ";";
+}
+
+/* under/over scripts */
+munder, mover, munderover {
+ display: inline-flex !important;
+ flex-direction: column;
+}
+munder > *:nth-child(2), munderover > *:nth-child(2) {
+ font-size: 0.8em;
+ order: +1;
+}
+mover > *:nth-child(2), munderover > *:nth-child(3) {
+ font-size: 0.8em;
+ order: -1;
+}
+munder {
+ vertical-align: text-top;
+}
+mover {
+ vertical-align: text-bottom;
+}
+munderover {
+ vertical-align: middle;
+}
+
+/* roots */
+msqrt, mroot {
+ display: inline-flex !important;
+ margin-left: .5em;
+ vertical-align: middle;
+ border-top: solid thin;
+}
+msqrt:before, mroot:before {
+ margin-left: -.5em;
+ content: "\221A";
+}
+mroot > *:nth-child(2) {
+ margin-right: .25em;
+ margin-left: -.75em;
+ font-size: 0.8em;
+ order: -1;
+}
+
+/* menclose */
+menclose {
+ display: inline-table !important;
+ border-collapse: separate;
+ border-spacing: 0.4ex 0;
+}
+menclose[notation*="top"], menclose[notation*="actuarial"] {
+ border-top: solid thin;
+}
+menclose[notation*="bottom"], menclose[notation*="madruwb"] {
+ border-bottom: solid thin;
+}
+menclose[notation*="right"], menclose[notation*="actuarial"],
+menclose[notation*="madruwb"] {
+ border-right: solid thin;
+}
+menclose[notation*="left"] {
+ border-left: solid thin;
+}
+menclose[notation*="box"], menclose[notation*="roundedbox"],
+menclose[notation*="circle"] {
+ border: solid thin;
+}
+menclose[notation*="roundedbox"] {
+ border-radius: 15%;
+}
+menclose[notation*="circle"] {
+ border-radius: 50%;
+}
+menclose[notation*="horizontalstrike"] {
+ text-decoration: line-through;
+}
+
+/* table */
+mtable {
+ display: inline-table !important;
+ vertical-align: middle;
+}
+mtr {
+ display: table-row !important;
+}
+mtd {
+ display: table-cell !important;
+ padding: 0 0.5ex;
+}
+
+/* token elements */
+mspace {
+ margin: .2em;
+}
+mi {
+ font-style: italic;
+}
+mo {
+ margin-right: .2em;
+ margin-left: .2em;
+}
+ms:before, ms:after {
+ content:"\0022";
+}
+ms[lquote]:before {
+ content: attr(lquote);
+}
+ms[rquote]:after {
+ content: attr(rquote);
+}
+
+/* mathvariants */
+[mathvariant="bold"], [mathvariant="bold-italic"],
+[mathvariant="bold-sans-serif"], [mathvariant="sans-serif-bold-italic"] {
+ font-weight: bold;
+ font-style: normal;
+}
+[mathvariant="monospace"] {
+ font-family: monospace;
+ font-style: normal;
+}
+[mathvariant="sans-serif"],
+[mathvariant="bold-sans-serif"], [mathvariant="sans-serif-italic"],
+[mathvariant="sans-serif-bold-italic"] {
+ font-family: sans-serif;
+ font-style: normal;
+}
+[mathvariant="italic"], [mathvariant="bold-italic"],
+[mathvariant="sans-serif-italic"], [mathvariant="sans-serif-bold-italic"] {
+ font-style: italic;
+}
+[mathvariant="normal"] {
+ font-style: normal;
+}
+
+/* mphantom */
+mphantom {
+ visibility: hidden;
+}
+
+/* merror */
+merror {
+ outline: solid thin red;
+}
+merror:before {
+ content: "Error: ";
+}
+
+/* annotations */
+semantics > *:first-child {
+ display: inline;
+}
+annotation, annotation-xml {
+ font-family: monospace;
+ display: none !important;
+}
+math:active > semantics > *:first-child,
+math:active > semantics > *:first-child {
+ display: none !important;
+}
+math:active annotation:first-of-type {
+ display: inline !important;
+}
View
23 media/redesign/js/wiki.js
@@ -2,6 +2,29 @@
'use strict';
/*
+ Bug 981409 - Add some CSS fallback for browsers without MathML support.
+
+ This is based on
+ https://developer.mozilla.org/en-US/docs/Web/MathML/Authoring#Fallback_for_Browsers_without)MathML_support
+ and https://github.com/fred-wang/mathml.css.
+ */
+ $('math').length && (function() {
+ // Test for MathML support
+ var $div = $('<div class="offscreen"><math xmlns="http://www.w3.org/1998/Math/MathML"><mspace height="23px" width="77px"/></math></div>').appendTo(document.body);
+ var box = $div.get(0).firstChild.firstChild.getBoundingClientRect();
+ $div.remove();
+
+ var supportsMathML = Math.abs(box.height - 23) <= 1 && Math.abs(box.width - 77) <= 1;
+ if (!supportsMathML) {
+ // Add CSS fallback
+ $('<link href="/media/css/libs/mathml.css" rel="stylesheet" type="text/css" />').appendTo(document.head);
+
+ // Add notification
+ $('#wikiArticle').prepend('<div class="notice"><p>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.</p></div>');
+ }
+ })();
+
+ /*
Togglers within articles (i.e.)
*/
$('.toggleable').mozTogglers();
Something went wrong with that request. Please try again.