From fc9258d8af90e356f5650c1ad1bd8023900bf163 Mon Sep 17 00:00:00 2001 From: Eric Dunsworth <1907279+EricDunsworth@users.noreply.github.com> Date: Wed, 22 Sep 2021 12:14:05 -0400 Subject: [PATCH] MathML polyfill: Update MathJax to ^3.2.0 Drastically reduces MathJax's burden on the build: * Brings a huge speed boost to Grunt's "copy:js" task (from ~13 to ~2 seconds) * Reduces MathJax's compiled size down from ~25 MB (1,347 files/809 folders) to ~1 MB (24 files/5 folders) * Almost halves the production dist folder's size (from ~55 MB to ~31 MB) Related changes: * Disable MathJax's context menu * Add an ES6 polyfill for IE11 support * Add extra line comments to give more context about how the polyfills are loaded in * Change the MathJax fallback test to look for a configuration option we're not customizing * Uses the CDN's latest version of MathJax 3 * Falls back on WET's local version of MathJax 3.2.0 if the CDN is unreachable * Tries loading a local version of MathJax 2 if all else fails * Add a temporary CSS workaround for mathjax/MathJax#2765 (thanks @dpvc!) * Remove the build system's string-replace:inline task (was only being used to insert a specific version number in the CDN's URL) * Update the documentation's known issues section: * Change it into an unordered list * Replace mentions of IE7-9 support with Chromium and IE11 * Remove mention of SVG support * Add an item about IE11 only being supported in internet-connected networks (due to its ES6 polyfill) * Remove items specific to IE7-8 Notes: * Disabling MathJax's context menu has the following impacts: * Works around MathJax 3.x's missing i18n support * Makes MathJax more closely mimic native MathML implementations (i.e. scraps bells and whistles that go beyond being a polyfill) * Removes some accessibility/usability enhancements that were present in WET's MathJax 2.x implementation (e.g. focusing on expressions, double-click to zoom). But it's not a huge loss since those enhancements don't exist in native MathML implementations. Visually-hidden MathML markup is still provided for ATs that support it. * Prevents users from accessing options that are excluded from WET's local copy of MathJax (e.g. "Math Settings - Math Renderer - SVG") * IE considerations: * Breaks compatibility with older versions of IE (older than IE11) * IE11 will only work if internet access is available * Somewhat alleviates #8425 (could still be improved by removing MathJax from the "copy:js" task) * Fixes #8769 --- Gruntfile.coffee | 23 ++------------ package-lock.json | 6 ++-- package.json | 2 +- src/core/wb.js | 50 +++++++++++++++++++++++++----- src/polyfills/mathml/mathml-en.hbs | 11 +++---- src/polyfills/mathml/mathml-fr.hbs | 11 +++---- src/polyfills/mathml/mathml.scss | 19 ++++++++++++ 7 files changed, 79 insertions(+), 43 deletions(-) create mode 100644 src/polyfills/mathml/mathml.scss diff --git a/Gruntfile.coffee b/Gruntfile.coffee index c3b2b37348a..0a62fbcccc0 100644 --- a/Gruntfile.coffee +++ b/Gruntfile.coffee @@ -126,7 +126,6 @@ module.exports = (grunt) -> "copy:js" "concat:core" "concat:coreIE8" - "string-replace" "concat:pluginsIE8" "concat:i18n" ] @@ -313,7 +312,6 @@ module.exports = (grunt) -> themeDist: "dist/theme-wet-boew" jqueryVersion: "<%= pkg.dependencies.jquery %>" jqueryOldIEVersion: "1.12.4" - MathJaxVersion: "<%= pkg.dependencies.mathjax %>" banner: "/*!\n * Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)\n * wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html\n" + " * v<%= pkg.version %> - " + "<%= grunt.template.today('yyyy-mm-dd') %>\n *\n */" modernizrBanner: "/*! Modernizr (Custom Build) | MIT & BSD */\n" @@ -1141,15 +1139,10 @@ module.exports = (grunt) -> expand: true flatten: true , - cwd: "node_modules/mathjax" + cwd: "node_modules/mathjax/es5" src: [ - "MathJax.js" - "config/**" - "extensions/**" - "jax/**" - "localization/**" - "fonts/HTML-CSS/TeX/woff/**" - "fonts/HTML-CSS/TeX/otf/**" + "mml-chtml.js" + "output/chtml/fonts/woff-v2/**" ] dest: "<%= coreDist %>/js/MathJax/" expand: true @@ -1391,16 +1384,6 @@ module.exports = (grunt) -> assemble: dest: 'site/data/i18n' - "string-replace": - inline: - files: - "dist/wet-boew/js/": "dist/wet-boew/js/*.js" - options: - replacements: [ - pattern: "WET_BOEW_VERSION_MATHJAX" - replacement: "<%= MathJaxVersion %>" - ] - "gh-pages": options: clone: "wet-boew-dist" diff --git a/package-lock.json b/package-lock.json index 0958c72f4dc..7c676fd0172 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8562,9 +8562,9 @@ "dev": true }, "mathjax": { - "version": "2.7.4", - "resolved": "https://registry.npmjs.org/mathjax/-/mathjax-2.7.4.tgz", - "integrity": "sha512-B6SLtoETmV08kqTepRyz8eqMRGFzllPy2QASKFdFl0g0YB6SNgQVnWae11RaF3/y8ZKLTJNJ7hLbMIqmBEkLzw==" + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/mathjax/-/mathjax-3.2.0.tgz", + "integrity": "sha512-PL+rdYRK4Wxif+SQ94zP/L0sv6/oW/1WdQiIx0Jvn9FZaU5W9E6nlIv8liYAXBNPL2Fw/i+o/mZ1212eSzn0Cw==" }, "maxmin": { "version": "2.1.0", diff --git a/package.json b/package.json index 7d15b15bb1a..a2896aad862 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "jquery": "2.2.4", "jquery-validation": "1.19.3", "magnific-popup": "git+https://github.com/wet-boew/Magnific-Popup.git#1.0.0+keyboard_trap_fix", - "mathjax": "2.7.4", + "mathjax": "^3.2.0", "proj4": "2.3.3", "unorm": "^1.6.0" }, diff --git a/src/core/wb.js b/src/core/wb.js index 4e12c08bd28..e01223d74a7 100644 --- a/src/core/wb.js +++ b/src/core/wb.js @@ -571,18 +571,54 @@ Modernizr.load( [ // Start initialization wb.init( document, componentName, selector ); + // Disable MathJax's context menu to more closely mimic native MathML implementations + window.MathJax = { + options: { + enableMenu: false + } + }; + + // Load an ES6 polyfill for IE11 + Modernizr.load( [ { + test: window.navigator.msSaveOrOpenBlob, + yep: "timeout=500!https://polyfill.io/v3/polyfill.min.js?features=es6" + } ] ); + // Load the MathML dependency. Since the polyfill is only loaded // when !Modernizr.mathml, we can skip the test here. Modernizr.load( [ { - load: "timeout=500!https://cdn.jsdelivr.net/npm/mathjax@WET_BOEW_VERSION_MATHJAX/MathJax.js?config=Accessible", + + // Load latest version of MathJax 3 from a CDN + // Also load a CSS workaround for a MathJax 3.2.0 bug (refer to CSS file for details) + load: [ + "timeout=500!https://cdn.jsdelivr.net/npm/mathjax@3/es5/mml-chtml.js", + "plyfll!mathml.min.css" + ], complete: function() { - Modernizr.load( [ { - test: window.MathJax === undefined, - yep: "mthjx!MathJax.js?config=Accessible" - } ] ); - // Identify that initialization has completed - wb.ready( $document, componentName ); + // Wait a moment to reduce the risk of a race condition + setTimeout( function() { + + // Fall back on a local copy of MathJax 3 if CDN loading fails + // Note: Won't work with IE11 in isolated networks (ES6 polyfill has no local fallback) + Modernizr.load( [ { + test: window.MathJax.startup, + nope: "mthjx!mml-chtml.js", + complete: function() { + + // Try loading a local copy of MathJax 2 as a last dith effort + Modernizr.load( [ { + test: window.MathJax.startup, + nope: "mthjx!MathJax.jsx?config=Accessible", + complete: function() { + + // Identify that initialization has completed + wb.ready( $document, componentName ); + } + } ] ); + } + } ] ); + }, 100 ); } } ] ); } ); diff --git a/src/polyfills/mathml/mathml-en.hbs b/src/polyfills/mathml/mathml-en.hbs index 3d3e124c0f5..5fb67c5c6a6 100644 --- a/src/polyfills/mathml/mathml-en.hbs +++ b/src/polyfills/mathml/mathml-en.hbs @@ -7,18 +7,17 @@ "tag": "mathml", "parentdir": "mathml", "altLangPrefix": "mathml", - "dateModified": "2014-02-19" + "dateModified": "2021-09-20" } ---

Overview

This polyfill loads MathJax when MathML is detected on the page and the browser has inadequate MathML support.

Known issues

-
    -
  1. Browsers that lack both MathML and SVG support (e.g., IE7 - IE9) will take longer to load MathML than browsers with either SVG or MathML support
    2. -
  2. IE8 takes a lot longer to load MathML than either IE7 or IE9 (known MathJax reflow issue)
    3. -
  3. Pages with a lot of complex formulas can take a few minutes to load on slow machines running IE8 (known MathJax issue)
    4. -
+
diff --git a/src/polyfills/mathml/mathml-fr.hbs b/src/polyfills/mathml/mathml-fr.hbs index fcbfdee602a..66ccfa2fa0c 100644 --- a/src/polyfills/mathml/mathml-fr.hbs +++ b/src/polyfills/mathml/mathml-fr.hbs @@ -7,7 +7,7 @@ "tag": "mathml", "parentdir": "mathml", "altLangPrefix": "mathml", - "dateModified": "2014-02-19" + "dateModified": "2021-09-20" } --- @@ -15,11 +15,10 @@

Overview

This polyfill loads MathJax when MathML is detected on the page and the browser has inadequate MathML support.

Known issues

-
    -
  1. Browsers that lack both MathML and SVG support (e.g., IE7 - IE9) will take longer to load MathML than browsers with either SVG or MathML support
    2. -
  2. IE8 takes a lot longer to load MathML than either IE7 or IE9 (known MathJax reflow issue)
    3. -
  3. Pages with a lot of complex formulas can take a few minutes to load on slow machines running IE8 (known MathJax issue)
    4. -
+
diff --git a/src/polyfills/mathml/mathml.scss b/src/polyfills/mathml/mathml.scss new file mode 100644 index 00000000000..3b67cc174c5 --- /dev/null +++ b/src/polyfills/mathml/mathml.scss @@ -0,0 +1,19 @@ +/* + * Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW) + * wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html + */ + +/* +Extra CSS for MathJax 3.2.0: +-Prevent msubsup element's superscripts from looking like subscripts +-See https://github.com/mathjax/MathJax/issues/2765#issuecomment-920400049 +-Only needed for 3.2.0, remove whenever WET updates to > 3.2.0 +*/ + +mjx-script > * { + display: inline-block !important; +} + +mjx-script > mjx-spacer { + display: block !important; +}