Skip to content

A sample recipe

Peter Krautzberger edited this page Apr 13, 2016 · 2 revisions

Mimicking AssitiveMML.js #119

Some assistive technologies require raw MathML in the page to provide voicing. One way to help them is to embed visually-hidden MathML while marking the visual rendering (HTML/SVG) with aria-hidden='true'. While separating visual and non-visual rendering is bad practice, this might be the only reasonable compromise for your requirements.

Here's a simple approach for recreating the behavior of the AssistiveMML extension part of core MathJax using mathjax-node.

// a simple TeX-input example
var mjAPI = require("mathjax-node/lib/mj-single.js");
mjAPI.config({
  MathJax: {
    // traditional MathJax configuration
  }
});
mjAPI.start();

var yourMath = "E = mc^2";

mjAPI.typeset({
  math: yourMath,
  format: "TeX", // "inline-TeX", "MathML"
  mml:true,
  html: true //  svg:true,
}, function (data) {
  if (!data.errors) {
    output = "<span aria-hidden='true'>" + data.html + "</span><span class='hidden'> " + data.mml + "</span>"
    // where class=hidden might include
    // position:absolute!important, top: 0, left: 0;
    // clip: rect(1px 1px 1px 1px) : rect(1px, 1px, 1px, 1px));
    // padding: 1px 0 0 0!important;
    // border: 0!important;
    // height: 1px!important;
    // width: 1px!important;
    // overflow: hidden!important;
    // display:block!important;
    // -webkit-touch-callout: none;
    // -webkit-user-select: none;
    // -khtml-user-select: none;
    // -moz-user-select: none;
    // -ms-user-select: none;
    // user-select: none;
    console.log(output);
  }
});
Clone this wiki locally