- STEM on the Web
- Text and layout
- Maths on the Web
- Diagrams: Chemistry, Statistics, etc.
- Converting Math Document
- Concentrating on Formulas
- Good vs Bad rendering
Beyond Simple Textual Content
- What about STEM content?
- Even if WCAG is satisfied, STEM is rarely accessible
Easy answer: Because STEM is hard!
Long answer: It depends... but STEM is hard!
Combines some of the hardest A11y Problems
- Highly specialised vernacular
- Different scripts
And that's only the traditional content
Modern STEM Content
- 3D graphics
- Dynamic content
- Interactive content
Let's look at some of the problems
Scripts and Vernacular
Note, that not every screen reader will generate the same output!
STEM are infinite languages
- meaning shifts, vernacular is added
- aimed at diverse audiences (pubils, students, scientists)
- difficult to understand (in particular automatically)
- precision is important (vague recognition is not enough)
Standard declarative approaches often fail
- More complex than standard text tables
- Sometimes the visual content is not the table content
- Key tables (e.g. for maps)
Many problems in one
- Audio: What is the reading order
- Zoom: Non-trivial for large formulas
- Highlighting: What is important and needs to be distinguished
- Simplifications: How to simplify the symbol clutter
- Subtitles: Voice recognition very difficult
- WCAG is satisfied with ALT text
- That is generally not enough
- Example: Biosynthesis
- Alternative formats are important (tactile, audio-tactile)
- 3D Material DLMF
- Dynamic Calculations
- Interactive Graphics
- Interactive Simulations
Looking at Math Documents
- Specialist environments
- Equation referenceing
What do we want?
History of Maths on the Web
- Really old
- Rendered as a bitmap image
- Fixed resolution, does not scale, information lost
- Somewhat old
- Rendered with HTML elements
- Often ugly, no nesting, limited expressiveness
- More modern
- Rendered as SVG images
- Scales, some information contained, needs to be pre-prepared
- Fully rendered
- Rendered on the fly in the browser
- Scales, information can be embedded
Wishlist for Math Documents
Our Math documents on the web should be
- Fully rendered
- Well structured
Everything is possible in HTML
Not all is well supported by converters
Conversion of a Math Document
- Word, Open office doc, etc.
Working with LaTeX Documents
- Download our example
- Unpack the zip file locally and change to directory
- Translate with
pandoc rademacher.tex -o rademacher.html --standalone
- Pandoc will give you a number of warning that it cannot conver the TeX
- does not reflow
- simple math is given as HTML
- complex math is included as code
- math is given in two ways
- but generally ugly
Adding native rendering
pandoc rademacher.tex -o rademacher.html --standalone --mathjax
make4ht rademacher.tex "mathjax"
This now should give nicely rendered math
Fixing layout issues
- The document translated with pandoc does not reflow. This is due to the CSS
command that restricts the page width. We can get rid of it in the
rademacher.html file. Open with Ascii editor (not word)
The document should now reflow. There are still a number of padding elements
which might be annoying.
Fixing layout issues (2)
We can remove superfluous padding too:
Removes the padding on the left hand side.
Removes the padding on the right hand side.
- Note, that if you do the conversion with
make4ht a lot less styling will be
added by default. While this makes it somewhat less pretty, it ensures more
Converting a Word Document
Source: Peter Krautzberger
pandoc word.docx -o testme.html --standalone --mathjax
- Alternatively save directly as HTML file from Word
- Observe the differences:
- Can take LaTeX, AsciiMath, and MathML as input
- Generates browser output, e.g. HTML/CSS, SVG
- De facto rendering solution of (nearly) all Mathematics on the web
- Provides accessibility extension
- MathJax IS NOT MathML!
MathJax is generally included. If not, it is easy to add a script tag to the
header of the HTML file:
This loads a basic configuration, which finds LaTeX and MathML code in the page
and translates it into HTML with CSS styling.
MathJaxstill might need to be configured.
- Using MathJax
- Generating semantics for Mathematics