Code Monkey home page Code Monkey logo

mathjax-a11y's Introduction

MathJax

Beautiful math in all browsers

GitHub release version GitHub release version (v2) NPM version powered by NumFOCUS
jsdelivr rank jsDelivr hits (npm) npm monthly downloads (full) npm total downloads

MathJax is an open-source JavaScript display engine for LaTeX, MathML, and AsciiMath notation that works in all modern browsers. It was designed with the goal of consolidating the recent advances in web technologies into a single, definitive, math-on-the-web platform supporting the major browsers and operating systems. It requires no setup on the part of the user (no plugins to download or software to install), so the page author can write web documents that include mathematics and be confident that users will be able to view it naturally and easily. Simply include MathJax and some mathematics in a web page, and MathJax does the rest.

Some of the main features of MathJax include:

  • High-quality display of LaTeX, MathML, and AsciiMath notation in HTML pages

  • Supported in most browsers with no plug-ins, extra fonts, or special setup for the reader

  • Easy for authors, flexible for publishers, extensible for developers

  • Supports math accessibility, cut-and-paste interoperability, and other advanced functionality

  • Powerful API for integration with other web applications

See http://www.mathjax.org/ for additional details about MathJax, and https://docs.mathjax.org for the MathJax documentation.

MathJax Components

MathJax version 3 uses files called components that contain the various MathJax modules that you can include in your web pages or access on a server through NodeJS. Some components combine all the pieces you need to run MathJax with one or more input formats and a particular output format, while other components are pieces that can be loaded on demand when needed, or by a configuration that specifies the pieces you want to combine in a custom way. For usage instructions, see the MathJax documentation.

Components provide a convenient packaging of MathJax's modules, but it is possible for you to form your own custom components, or to use MathJax's modules directly in a node application on a server. There are web examples showing how to use MathJax in web pages and how to build your own components, and node examples illustrating how to use components in node applications or call MathJax modules directly.

What's in this Repository

This repository contains only the component files for MathJax, not the source code for MathJax (which are available in a separate MathJax source repository). These component files are the ones served by the CDNs that offer MathJax to the web. In version 2, the files used on the web were also the source files for MathJax, but in version 3, the source files are no longer on the CDN, as they are not what are run in the browser.

The components are stored in the es5 directory, and are in ES5 format for the widest possible compatibility. In the future, we may make an es6 directory containing ES6 versions of the components.

Installation and Use

Using MathJax components from a CDN on the web

If you are loading MathJax from a CDN into a web page, there is no need to install anything. Simply use a script tag that loads MathJax from the CDN. E.g.,

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

See the MathJax documentation, the MathJax Web Demos, and the MathJax Component Repository for more information.

Hosting your own copy of the MathJax Components

If you want to host MathJax from your own server, you can do so by installing the mathjax package using npm and moving the es5 directory to an appropriate location on your server:

npm install mathjax@3
mv node_modules/mathjax/es5 <path-to-server-location>/mathjax

Note that we are still making updates to version 2, so include @3 when you install, since the latest chronological version may not be version 3.

Alternatively, you can get the files via GitHub:

git clone https://github.com/mathjax/MathJax.git mj-tmp
mv mj-tmp/es5 <path-to-server-location>/mathjax
rm -rf mj-tmp

Then (in either case) you can use a script tag like the following:

<script id="MathJax-script" async src="<url-to-your-site>/mathjax/tex-chtml.js"></script>

where <url-to-your-site> is replaced by the URL to the location where you moved the MathJax files above.

See the documentation for details.

Using MathJax components in a node application

To use MathJax components in a node application, install the mathjax package:

npm install mathjax@3

(we are still making updates to version 2, so you should include @3 since the latest chronological version may not be version 3).

Then require mathjax within your application:

require('mathjax').init({ ... }).then((MathJax) => { ... });

where the first { ... } is a MathJax configuration, and the second { ... } is the code to run after MathJax has been loaded. E.g.

require('mathjax').init({
  loader: {load: ['input/tex', 'output/svg']}
}).then((MathJax) => {
  const svg = MathJax.tex2svg('\\frac{1}{x^2-1}', {display: true});
  console.log(MathJax.startup.adaptor.outerHTML(svg));
}).catch((err) => console.log(err.message));

Note: this technique is for node-based application only, not for browser applications. This method sets up an alternative DOM implementation, which you don't need in the browser, and tells MathJax to use node's require() command to load external modules. This setup will not work properly in the browser, even if you webpack it or bundle it in other ways.

See the documentation and the MathJax Node Repository for more details.

Reducing the Size of the Components Directory

Since the es5 directory contains all the component files, so if you are only planning one use one configuration, you can reduce the size of the MathJax directory by removing unused components. For example, if you are using the tex-chtml.js component, then you can remove the tex-mml-chtml.js, tex-svg.js, tex-mml-svg.js, tex-chtml-full.js, and tex-svg-full.js configurations, which will save considerable space. Indeed, you should be able to remove everything other than tex-chtml.js, and the input/tex/extensions, output/chtml/fonts/woff-v2, adaptors, a11y, and sre directories. If you are using the results only on the web, you can remove adaptors as well.

If you are not using A11Y support (e.g., speech generation, or semantic enrichment), then you can remove a11y and sre as well (though in this case you may need to disable the assistive tools in the MathJax contextual menu in order to avoid MathJax trying to load them when they aren't there).

If you are using SVG rather than CommonHTML output (e.g., tex-svg.js rather than tex-chtml.js), you can remove the output/chtml/fonts/woff-v2 directory. If you are using MathML input rather than TeX (e.g., mml-chtml.js rather than tex-chtml.js), then you can remove input/tex/extensions as well.

The Component Files and Pull Requests

The es5 directory is generated automatically from the contents of the MathJax source repository. You can rebuild the components using the command

npm run make-es5 --silent

Note that since the contents of this repository are generated automatically, you should not submit pull requests that modify the contents of the es5 directory. If you wish to submit a modification to MathJax, you should make a pull request in the MathJax source repository.

MathJax Community

The main MathJax website is http://www.mathjax.org, and it includes announcements and other important information. A MathJax user forum for asking questions and getting assistance is hosted at Google, and the MathJax bug tracker is hosted at GitHub.

Before reporting a bug, please check that it has not already been reported. Also, please use the bug tracker (rather than the help forum) for reporting bugs, and use the user's forum (rather than the bug tracker) for questions about how to use MathJax.

MathJax Resources

mathjax-a11y's People

Contributors

dependabot[bot] avatar dpvc avatar pkra avatar zorkow avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mathjax-a11y's Issues

Enriched Math Tex Error

When entering a formula including something similar to:
( x + 1 ) ^2 =
The exponent is applied to the last term within the brackets, rather than the brackets as a hole.

(I've attached a screenshot to demonstrate)
screenshot1

Dolphin Screenreader notes

I tested Dolphin again.

It reads aria-labels so we have now some support now. However, Dolphin adds a lot of unfortunate noise.

a) it announces all potential click handlers (single/double/right) and the application
b) when navigating passed the label, it will read all characters, so you'd need SVG (but #119)

Nothing for this release but worth thinking about in the next iteration.

[a11y walker] can't disable assistiveMML nor use inline configurations

Something I noticed without time to look into. Due to the bug in 2.6.0 (fixed in 2.6.1), we can't use combined configurations while disabling the AssistiveMML extension. Yet when I switched to just inline configurations, I got Math Processing errors. Probably just a timing issue.

[a11y tool] only add one initial announcement

It seems in documents with more than one equation, the walker is adding an announcement ("nav. math in page, explore with shift+space") for each equation, leading to as many announcements as there are equations in the page -- that's a bit annoying ๐Ÿ˜‰

walker demo: disable AssistiveMML

They are somewhat exclusive and the results can be confusing. But somehow the configuration I added to the walker does not actually deactivate it.

[meta] production use cases

Some thoughts on what we need for production use

  • responsive equations
    • minimal build of SRE + respEq extension
    • pre-processing abilities
      • generate MathML with mactions + minimal JS for collapsing
      • pre-generate SVG/CommonHTML output to a set of breakpoints with media queries
  • a11y tool
    • build minimal version for pre-generated enriched MathML, SVG, CommonHTML

SVG output + explorer = math processing errors

I see this failure at http://codepen.io/pkra/pen/yOWrWQ (with the dist built from current master).

Also, only one expression (the first display-style expression) has the usual Math processing error in the DOM.

lastError gives

MathJax.Hub.lastError
TypeError: Cannot read property 'root' of null
    at Object.AddSpeech (https://beta.mathjax.org/mathjax/contrib/a11y/Assistive-Explore.js?rev=2.6.1:1:5904)
    at Object.AddEvent (https://beta.mathjax.org/mathjax/contrib/a11y/Assistive-Explore.js?rev=2.6.1:1:5825)
    at Object.Register (https://beta.mathjax.org/mathjax/contrib/a11y/Assistive-Explore.js?rev=2.6.1:1:4595)
    at Function.execute (https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full:19:3084)
    at cb (https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full:19:2661)
    at Execute (https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full:19:7293)
    at ExecuteHooks (https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full:19:10599)
    at Function.execute (https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full:19:3084)
    at cb (https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full:19:2661)
    at Execute (https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full:19:7293)
    at Post (https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full:19:9345)
    at Object.processOutput (https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full:19:40062)
    at Function.execute (https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full:19:3084)
    at Function.WAITEXECUTE (https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full:19:5827)
    at cb (https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full:19:2661)
    at Function.WAITEXECUTE (https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full:19:6016)
    at cb (https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full:19:2661)
    at Execute (https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full:19:7293)
    at Object.loadComplete (https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full:19:15890)
    at https://cdn.mathjax.org/mathjax/2.6-latest/jax/output/SVG/fonts/TeX/Main/Regular/BasicLatin.js?rev=2.6.1:19:19138

Switching to a different renderer + refreshing the page resets ok.

[a11y tool] NVDA bugs

  • NVDA consistently loses first speech text
    • could be fixed by adding a 100ms delay, cf. #36
  • NVDA consistently loses speech text updates.
    • This is somewhat more erratic. It only happens in certain situations (and always when entering a lower level of an expression) but it is consistent, e.g.,
    • in the quadratic equation, x is never voiced when entering the first level (but exploring left, then right gets x voiced). Similarly, -b is never voiced when exploring the fraction's numerator.

Since no other AT has these problems, maybe it's a bug on NVDA's side. Let's reach out.

[a11y extension] documentation

Here's what I come up with.

  • explain the two-in-one extensions or split them up
  • document configuration options
  • document menu options
  • document behavior
    • global aria-label
    • walker
    • collapse
    • interaction between the various parts, dependencies etc.

[a11y walker] improving UX for documents / AT reading modes

As an AT user, I want to read documents with mathematics the same way I read other documents, using my AT's smart modes, e.g., to read the entire document or read it line-by-line.

This experience falls short because, e.g., NVDA will (sensibly) read the aria-label ("math") when reading line-by-line, i.e., "When math holds, we get math which implies math".

While some navigation is availabe to reach back (ctrl+tab to go to previous focusable), it is not always reliable (jumping too far behind). Also, once you're on the focused element, I couldn't figure out if there's a way to get back into the flow.

Some ideas.

  • talk to AT community on expected / best-of-class behavior.
  • add complete speech text as aria-label (preceded by "math", perhaps, just like headings are preceded by "heading level n")
  • consider if we could/should/would get AT to stop at each equation (treating them as newlines, even inline math), and enable smooth UX for activating and continuing(/skipping) the walker.

What else could we do?

Equation labels

We don't handle them yet, right?

My gut feeling would be that they will never get collapsed completely (but might in themselves if they're huge). As in

<...> (<...>)

etc.

SVG maction class name

@dpvc
I would have expected the collapsible elements in SVG to have class mjx-svg-maction.
However, they have no classname at all, so hover and flame do not work.

[a11y tool] discoverability

We need to somehow alert the user that the tool is available.

Maybe role=application helps (though @zorkow had problems with it in the past). Otheriwse, we could add a label. I'm thinking it might be something equivalent to role=math, i.e., something that will make AT indicate there's some math.

[a11y walker] enable inline math

Currently, all extensions skip inline math. That makes sense for responsive rendering (though I might argue for that there, too). But for the a11y walker we need to enable inline math elements.

Collapse and aria label out of sync

If an expression is already collapsed on load the aria label reads the full expression.
Should either contain the expression corresponding to the visible expression or the shortest possible one for faster page reading.

Complexity

data-semantic-complexity can appear twice in MathML element. That leads to an XML error at my end.
I believe it only happens for mactions on the top level.
Example expression:

i = 1, 2, \ldots, n+1

Pre-generating output

More notes from previous F2Fs.

We want to figure out how we can align the new tools (enrichment, collapse, speech/walker) with MathJax-node.

  • pre-generate enriched MathML
  • pre-generate maction-ified MathML (+ minimal extension for collapsing)
  • pre-generate full MathJax-node output (+ minimal extensions for collapsing)
    • enable the walker to use the data attributes in the output.

[a11y extension] location location location

I would like to propose to move the dist and build files back into this repo.

Since we're not putting the final extension in the third-party repo, we might as well push them to the CDN from this repo; the other one just adds noise and confusion.

Accessibility-Extension.js naming

I was wondering about the name. -Extensions (plural) seems a bit more fitting (but might lead to typos). Something like Accessibility-Loader / a11y-loader is more fitting but perhaps not as easy to remember. Not a huge thing but wanted to raise it (esp in the context of #115)

[a11y tool] JAWS adds "blank" in front of each speech string

JAWS voices "blank" before each speech string during exploration.

However, it usually stops doing that after a while and start voicing things correctly.

I have not been able to figure out how to trigger this change in behavior. It might be a bug in JAWS or it might be something we can tweak. Let's reach out.

Make SRE work on both http and https

It seems SRE now forces HTTPS, in particular even loading it over http leads to SRE loading its json data via https.

This leads to problems on WinXP (which doesn't support recent encryption cyphers).

A simple way to grab a copy of all relevant files for local testing would be enough.

Problem with annotation element.

If a MathML semantics annotation element (apparently Mathtype adds those) stops rendering of the enriched expression.
Simple example:

<math><semantics><mrow><mi>a</mi><mi>b</mi></mrow><annotation>implicit times</annotation></semantics></math>

"Responsive Equations" menu entry

Where is that entry's text stored/generated?

Also, should we harmonize the naming of this option and Semantic-Collapse.js (where I would have assumed this comes from but I don't see it)?

Sample with processing error

The sample from our MathUI paper is throwing an error in the Semantics-Lab (but not in regular MathJax).

\begin{align*}
I_\nu(\nu^{-1},1)
&=\underbrace{\frac{\pi^2}{4}\ln\left(\frac{(1+\nu)^{1+\nu}}{\nu^\nu}
\right)-\frac{7\zeta(3)}{8}\nu}_{\text{Let this be
C}}+2\int^\frac{1-\nu}{1+\nu}_1\frac{\chi_3(v)}{(1+v)^2}{\rm d}v\\
&=C-\left.\frac{2\chi_3(v)}{1+v}\right|^\frac{1-\nu}{1+\nu}_1+2\int^\frac{1-\nu}
{1+\nu}_1\frac{\chi_2(v)}{v(1+v)}{\rm d}v\\
&=C+(1-\nu)\chi_3\left(\frac{1-\nu}{1+\nu}\right)-\frac{7\zeta(3)}{8}
-\left.{\color{white}{\frac{1}{1}}}2\chi_2(v)\ln(1+v)\right|^\frac{1-\nu}{1+\nu}
_1+\int^\frac{1-\nu}{1+\nu}_1\frac{\ln(1+v)\ln\left(\frac{1+v}{1-v}\right)}{v}{
\rm d}v\\
&=C+(1-\nu)\chi_3\left(\frac{1-\nu}{1+\nu}\right)-\frac{7\zeta(3)}{8}
+2\chi_2\left(\frac{1-\nu}{1+\nu}\right)\ln\left(\frac{1+\nu}{2}\right)+\frac{
\pi^2}{4}\ln{2}\\
&\ \ \ \
+\frac{1}{2}\int^\frac{1-\nu}{1+\nu}_1\frac{
\ln^2(1+v)-\ln^2(1-v)+\ln^2\left(\frac{1-v}{1+v}\right)}{v}{\rm d}v
\end{align*}

Don't collapse endpunct and startpunct

Punctuated with role endpunct or startpunct should not be collapsed.
These are expressions that contain a single punctuation at start or end, only. In most maths expressions this is irrelevant.
For example:
a = b.
will lead to
<.>
Instead it should lead to
<=>.

Initial announcement

Should be spoken once when the first math element gets focus not at start of page as most blind people will stop speech immediately after page load.
(Suggestion by Sina.)

[a11y extension] add load complete call

This files needs at least a loadComplete call. Since we'll be pushing it to the CDN's third party folder, we need to decide on a path structure, e.g.,

MathJax.Callback.Queue(
  ["loadComplete",MathJax.Ajax,"[Contrib]/mathjax-a11y/MathJax-accessibility.js"]
);

Moar demos

Just to record this from other conversations. It would be good to revive the older demos that only show some features, e.g.,

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.