Responsive Design and Math

Published on October 24, 2014.

From Wikipedia

"Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors)."

Responsive design is a nice feature for web pages and EPUBs. At this post you will get an overview of the status of responsive design for math.

Sample

For the overview we need at least one example. I choose use LaTeX and LaTeXML to get the example in more than one format.

Starting from sample.tex :

$ latexmk -pdf sample.tex
$ latexmlc --format=epub --split --mathimages --nomathsvg --nopresentationmathml --destination=sample.epub sample.tex
$ latexmlc --format=epub --destination=sample-mathml.epub sample.tex
$ latexmlc --format=html5 --nomathimages --nomathsvg --destination=sample.html sample.tex

PDF

The purpose of PDF is be the digital version of something that were printed. Because of this PDF doesn't support responsive design and read it on small screen is painful.

EPUB

Before EPUB3 you need to use bitmap images to get math in EPUB. Like PDF, bitmap images doesn't support responsive design. What you can do is set the image width to the screen width (this makes long equation be impossible to read) or set the image width to the original size (this makes long equation be crop or overflow across other pages).

EPUB3 with MathML

Starting with EPUB3 you can/should use MathML to get math in EPUB. Since MathML is "powered" by XML, the same technology that "powered" HTML, you can have responsive design on it.

Unfortunately, linebreaking of expressions is something that aren't implemented in MathML render softwares neither at MathML authoring tools.

Tags:

• Blog