-
Notifications
You must be signed in to change notification settings - Fork 98
A sample recipe
Peter Krautzberger edited this page Apr 13, 2016
·
2 revisions
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);
}
});