Merge pull request #37 from mathjax/update_4.2.1

Update 3.2.1
mathjax · May 19, 2022 · 33e6c58 · 33e6c58
2 parents a15f0a5 + f2a1925
commit 33e6c58
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -45,6 +45,7 @@ The examples below show how to use and configure MathJax components in your web
 * [tex-mml.html](tex-mml.html.md) ([View Demo](https://mathjax.github.io/MathJax-demos-web/tex-mml.html)) 
 * [mml-attribute.html](mml-attribute.html.md) ([View Demo](https://mathjax.github.io/MathJax-demos-web/mml-attribute.html))
 * [speech-tex-chtml.html](speech-tex-chtml.html.md) ([View Demo](https://mathjax.github.io/MathJax-demos-web/speech-tex-chtml.html))
+* [speech-explorer-tex.html](speech-explorer-tex.html.md) ([View Demo](https://mathjax.github.io/MathJax-demos-web/speech-explorer-tex.html))
 
 ### Customization
 
@@ -55,6 +56,11 @@ The examples below show how to use and configure MathJax components in your web
 * [custom-component](custom-component/custom-component.html.md) ([View Demo](https://mathjax.github.io/MathJax-demos-web/custom-component/custom-component.html))
 * [custom-build](custom-build/custom-mathjax.html.md) ([View Demo](https://mathjax.github.io/MathJax-demos-web/custom-build/custom-mathjax.html))
 
+### Speech Output Demo
+
+* [convert-with-speech](speech-generator/convert-with-speech.html) A lab to explore all possible speech options in MathJax.
+
+
 ## MathJax Component Files
 
 MathJax version 3 has the ability to create MathJax "components" that can be dynamically loaded by MathJax as needed (much as could be done in version 2).  This allows portions of MathJax to be bundled together into components that include most or all of what you need to run MathJax, but still allows less-used pieces to be loaded on demand later when needed.  This is similar to v2's combined configuration files and TeX extensions.  

diff --git a/speech-explorer-tex.html b/speech-explorer-tex.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <meta name="viewport" content="width=device-width">
+  <style>
+  kbd {
+    display: inline-block;
+    padding: 3px 5px;
+    font-size: 11px;
+    line-height: 10px;
+    color: #444d56;
+    vertical-align: middle;
+    background-color: #fafbfc;
+    border: solid 1px #c6cbd1;
+    border-bottom-color: #959da5;
+    border-radius: 3px;
+    box-shadow: inset 0 -1px 0 #959da5;
+    }
+  </style>
+  <title>MathJax v3 with TeX input and HTML output with speech</title>
+  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+  <script>
+  MathJax = {
+    loader: {load: ['a11y/sre']},
+    options: {
+      menuOptions: {
+        settings: {
+          explorer: true,
+          assistiveMml: false
+        }
+      }
+    },
+    tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]}
+  };
+  </script>
+  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
+</head>
+<body>
+
+  <p>
+  These expressions will have auto-generated speech attached for screen readers. Focus on a formula and press <kbd>Enter</kbd> to start exploration with the arrow keys.
+  </p>
+
+  <p>
+  When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
+  $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
+  </p>
+
+</body>
+</html>
diff --git a/speech-explorer-tex.html.md b/speech-explorer-tex.html.md
@@ -0,0 +1,27 @@
+# [speech-expolrer-tex.html](https://mathjax.github.io/MathJax-demos-web/speech-explorer-tex.html)
+
+This example shows how to enable MathJax's accessibility extension to attach speech to typeset math and enable interactive exploration of expressions.
+
+The key lines are
+
+``` html
+  <script>
+  MathJax = {
+    loader: {load: ['a11y/sre']},
+    options: {
+      menuOptions: {
+        settings: {
+          explorer: true,
+          assistiveMml: false
+        }
+      }
+    },
+    tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]}
+  };
+  </script>
+  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
+```
+
+which causes the `a11y/sre` extension to be loaded, and modifies the menu settings to initialise the interactive explorer on page load. In addition we can switch off the assistive mml extension as it is no longer needed.
+
+[Run the example](https://mathjax.github.io/MathJax-demos-web/speech-explorer-tex.html)
diff --git a/speech-generator/convert-with-speech.html b/speech-generator/convert-with-speech.html
@@ -8,7 +8,7 @@
   <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
   <script>
   MathJax = {
-    loader: {load: ['input/asciimath', 'input/mml', 'input/tex', 'output/svg', 'sre/sre_browser']},
+    loader: {load: ['input/asciimath', 'input/mml', 'input/tex', 'output/svg', 'a11y/sre']},
     tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]},
     startup: {
       ready: function() {

diff --git a/speech-generator/convert-with-speech.js b/speech-generator/convert-with-speech.js
@@ -1,4 +1,5 @@
 let Convert = {};
+let SRE = null;
 
 Convert.textAreas = {
   input: null,
@@ -42,9 +43,9 @@ Convert.getElements = function() {
 };
 
 Convert.setupSre = function() {
-  for (let loc of sre.Variables.LOCALES) {
+  for (let [loc, lang] of SRE.locales.entries()) {
     let option = document.createElement('option');
-    option.innerHTML = loc.toUpperCase();
+    option.innerHTML = lang;
     option.setAttribute('value', loc);
     if (loc === 'en') {
       option.setAttribute('selected', true);
@@ -55,6 +56,7 @@ Convert.setupSre = function() {
 };
 
 Convert.init = function() {
+  SRE = MathJax._.a11y.sre.Sre;
   Convert.getElements();
   Convert.setupSre();
 };
@@ -63,7 +65,7 @@ Convert.init = function() {
 Convert.setPreferences = function(locale) {
   Convert.divs.preferences.innerHTML = '';
   Convert.state.preferences = [];
-  let prefs = sre.ClearspeakPreferences.getLocalePreferences()[locale];
+  let prefs = SRE.clearspeakPreferences.getLocalePreferences()[locale];
   if (!prefs) {
     Convert.state.clearspeak = false;
     Convert.textAreas.clearspeak.innerHTML = '';
@@ -128,40 +130,31 @@ Convert.setPreferences = function(locale) {
 
 
 Convert.updatePreferences = async function(locale) {
-  sre.System.getInstance().setupEngine({locale: locale});
-  let promise = new Promise((resolve) => {
-    const checkSre = function() {
-      if (sre.Engine.isReady()) {
-        resolve();
-      } else {
-        setTimeout(checkSre, 100);
-      }};
-    checkSre();
-  });
-  return promise.then(() => {Convert.setPreferences(locale);});
+  return SRE.setupEngine({locale: locale}).
+    then(() => {Convert.setPreferences(locale);});
 };
 
 
-Convert.computeClearspeak = function() {
-  Convert.textAreas.clearspeak.innerHTML =
-    Convert.computeSpeech('clearspeak', Convert.state.preferences.map((x) => x.value).join(':'));
+Convert.computeClearspeak = async function() {
+  return Convert.computeSpeech(
+    Convert.textAreas.clearspeak, 'clearspeak',
+    Convert.state.preferences.map((x) => x.value).join(':'));
 };
 
 
-Convert.computeMathspeak = function() {
-  Convert.textAreas.mathspeak.innerHTML =
-    Convert.computeSpeech('mathspeak', Convert.selectors.style.value);
+Convert.computeMathspeak = async function() {
+  return Convert.computeSpeech(
+    Convert.textAreas.mathspeak, 'mathspeak', Convert.selectors.style.value);
 };
 
 
-Convert.computeSpeech = function(domain, style) {
+Convert.computeSpeech = async function(node, domain, style) {
   let locale = Convert.selectors.locale.value;
   let modality = locale === 'nemeth' ? 'braille' : 'speech';
-  sre.System.getInstance().setupEngine(
+  return SRE.setupEngine(
     {locale: locale, domain: domain, modality: modality,
      style: style, markup: Convert.selectors.markup.value, pprint: true
-    });
-  return sre.System.getInstance().toSpeech(Convert.input2Mathml());
+    }).then(() => node.innerHTML = SRE.toSpeech(Convert.input2Mathml()));
 };
 
 
@@ -191,9 +184,9 @@ Convert.radioValue = function(radios) {
 };
 
 
-Convert.convertExpression = function() {
+Convert.convertExpression = async function() {
   Convert.render();
-  Convert.computeMathspeak();
+  await Convert.computeMathspeak();
   if (Convert.state.clearspeak) {
     Convert.computeClearspeak();
   }

diff --git a/speech-tex-chtml.html.md b/speech-tex-chtml.html.md
@@ -27,6 +27,6 @@ The key lines are
   <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
 ```
 
-which causes the `a11y/semantic-enrich` extension to be loaded, and modifies the enrich action to force the enrichment regardless of the settings in the contextual menu.  The output jax will pick on on the speech text that is generated by the extension and create the proper tags and attributes for it to be picked up by screen readers.
+which causes the `a11y/semantic-enrich` extension to be loaded, and modifies the enrich action to force the enrichment regardless of the settings in the contextual menu.  The output jax will pick up on the speech text that is generated by the extension and create the proper tags and attributes for it to be picked up by screen readers.
 
 [Run the example](https://mathjax.github.io/MathJax-demos-web/speech-tex-chtml.html)
diff --git a/tex-mml.html.md b/tex-mml.html.md
@@ -47,11 +47,6 @@ The key lines are
           (doc) => {for (math of doc.math) {MathJax.config.renderMathML(math, doc)}},
           (math, doc) => MathJax.config.renderMathML(math, doc)
         ]
-      },
-      menuOptions: {
-        settings: {
-          assistiveMml: false
-        }
       }
     },
     //