#header,next=TEST_CASES.html,prev=./FXY2.html

During COVID I wrote up some math notes in HTML taking advantage of the wide screen format of desktop systems to display large formulae. However now that I am back to commuting by train, it would be nice to display those notes on my mobile phone. The desktop mode of the original HTML does a poor job at displaying on such a device. Therefore I have designed and implemented a script preprocessor which converts TeX-like math code into responsive HTML code.

There are some obvious things that can be done to improve the display of math on small touch screens. From most desirable to least

While those things are fine for inline math they are not good enough for display equations. It would be nice to have something similar to text-flow but more sophisticated, where it rearranges the equation to fit into the available space something like a human would do on a blackboard. This is where the preprocessor comes in.

Preprocessor

The preprocessor converts TeX code to responsive HTML code. These are the steps in the process:

Algorithms

flow

The flow algorithm is very similar to normal text flow and is most suitable for homogenous text like polynomials. The left parameter tells the algorithm to break just before plus and minus signs (normally it breaks just after). The indent parameter tells the algorithm to indent lines after the first to the level of the first equals sign.

#flow,left,indent
\Delta = 256a^3e^3 - 192a^2bde^2 - 128a^2c^2e^2 + 144a^2cd^2e - 27a^2d^4 + 144ab^2ce^2 - 6ab^2d^2e - 80abc^2de + 18abcd^3 + 16ac^4e - 4ac^3d^2 - 27b^4e^2 + 18b^3cde - 4b^3d^3 - 4b^2c^3e + b^2c^2d^2

This is the above code rendered with an equation label.

#flow,left,indent \Delta = 256a^3e^3 - 192a^2bde^2 - 128a^2c^2e^2 + 144a^2cd^2e - 27a^2d^4 + 144ab^2ce^2 - 6ab^2d^2e - 80abc^2de + 18abcd^3 + 16ac^4e - 4ac^3d^2 - 27b^4e^2 + 18b^3cde - 4b^3d^3 - 4b^2c^3e + b^2c^2d^2

To see the math respond to screen size change on a mobile device, rotate the device to switch between portrait and landscape mode.

fold

The fold algorithm is a text flow algorithm in which the line breaks occur at predetermined positions and in a predetermined order. It is better for inhomogenous text like matrices and integrals. For a large equation which won't fit on one line it usually looks best to do the first break after the top level equals sign. Then if needed, another break around the middle of what's remaining.

#fold
\begin{vmatrix}
1 & x_1 & x_1^3 & x_1^4 \\
1 & x_2 & x_2^3 & x_2^4 \\
1 & x_3 & x_3^3 & x_3^4 \\
1 & x_4 & x_4^3 & x_4^4 \\
\end{vmatrix} = $
\big(x_1x_2 + x_1x_3 + x_1x_4 + x_2x_3 + $
x_2x_4 + x_3x_4\big) \cdot \prod_{i\lt j} (x_j-x_i)

This is the above code rendered with an equation label.

#fold2 \begin{vmatrix} 1 & x_1 & x_1^3 & x_1^4 \\ 1 & x_2 & x_2^3 & x_2^4 \\ 1 & x_3 & x_3^3 & x_3^4 \\ 1 & x_4 & x_4^3 & x_4^4 \\ \end{vmatrix} = $$ \big(x_1x_2 + x_1x_3 + $ x_1x_4 + x_2x_3 + $ x_2x_4 + x_3x_4\big) \cdot $ \prod_{i\lt j} (x_j-x_i)

stack

A stack is a set of equations which can be written on one line separated by comma's if there is room. Otherwise they can be stacked and aligned vertically at the equals signs. The width parameter is the container width which trigger's the transition from horizontal to vertical format.

#stack,width=500
x_3 = a \cdot \frac {x_1y_1 + x_2y_2} {x_1x_2 + y_1y_2}
y_3 = a \cdot \frac {x_1y_1 - x_2y_2} {x_1y_2 - x_2y_1}

This is the above code rendered with an equation label.

#stack,width=500 x_3 = a \cdot \frac {x_1y_1 + x_2y_2} {x_1x_2 + y_1y_2} y_3 = a \cdot \frac {x_1y_1 - x_2y_2} {x_1y_2 - x_2y_1}

train

A train is a list of expressions coupled together with equals signs. On a wide screen they look good written on one line, but on a narrow screen they look better written as a vertical stack with the equals signs vertically aligned. The width parameter is the container width which trigger's the transition from horizontal to vertical format.

#train,width=700
g_2
= -4(\epsilon_1\epsilon_2 + \epsilon_2\epsilon_3 + \epsilon_3\epsilon_1)
= \tfrac {1} {24} (A^2 + B^2 + C^2)
= \tfrac {1} {12} (12ae - 3bd + c^2)

This is the above code rendered with an equation label.

#train,width=700 g_2 = -4 (\epsilon_1\epsilon_2 + \epsilon_2\epsilon_3 + \epsilon_3\epsilon_1) = \tfrac {1} {24} (A^2 + B^2 + C^2) = \tfrac {1} {12} (12ae - 3bd + c^2)

Where To Next?

The above set of algorithms are a good starting point for implementing responsive layout features in a TeX to HTML javascript library. Implementing natively would have the following advantages

I think it unlikely the developers of MathJax and KaTeX would want to implement these more complex responsive layout features. This is because those packages are primarily focused on reproducing the exact rendering of LaTeX and it does not include such features.

Given the recent 2023 adoption of MathML Core support across all major browsers, I think the best way forward is to create a new software package which does TeX to MathML conversion directly, incorporating responsive layout features. It should be possible to mitigate all the undesirable effects of chopping math formula into small pieces, as is required for responsive layout. While the rendering quality of MathML is not as good as those two libraries, it is strategically superior and, given enough time, moderately simple to implement the conversion process.

Prototype MathML

The following equations are manually crafted MathML examples. They represent the ideal output of a TeX math to MathML converter which generates "responsive" HTML.

#flow

Δ = 256 a 3 e 3 − 192 a 2 b d e 2 − 128 a 2 c 2 e 2 + 144 a 2 c d 2 e − 27 a 2 d 4 + 144 a b 2 c e 2 − 6 a b 2 d 2 e − 80 a b c 2 d e + 18 a b c d 3 + 16 a c 4 e − 4 a c 3 d 2 − 27 b 4 e 2 + 18 b 3 c d e − 4 b 3 d 3 − 4 b 2 c 3 e + b 2 c 2 d 2
(5)

#fold

| 1 x 1 x 1 3 x 1 4 1 x 2 x 2 3 x 2 4 1 x 3 x 3 3 x 3 4 1 x 4 x 4 3 x 4 4 | = ( x 1 x 2 + x 1 x 3 + x 1 x 4 + x 2 x 3 + x 2 x 4 + x 3 x 4 ) ⋅ ∏ i < j ( x j − x i )
(6)

#stack

x 3 = a ⋅ x 1 y 1 + x 2 y 2 x 1 x 2 + y 1 y 2 , y 3 = a ⋅ x 1 y 1 − x 2 y 2 x 1 y 2 − x 2 y 1 ,
(7)

#train

g 2 = − 4 ( ϵ 1 ϵ 2 + ϵ 2 ϵ 3 + ϵ 3 ϵ 1 ) = 1 24 ( A 2 + B 2 + C 2 ) = 1 12 ( 12 a e − 3 b d + c 2 )
(8)

These examples demonstrate how to apply responsive styling directly on the MathML <mrow> elements thereby maintaining the semantic integrity of the <math> object tree.

MathML Issues

To evaluate the current state of MathML I have added KaTeX MathML and TeXZilla to the list of supported converters. They can be selected from the control panel which is activated by clicking on the web page title. Although there are a few issues, they provide a good yardstick to gauge the current state of MathML support in the mainstream browsers. I have also added Lexer a gamma version of the new converter. Current known issues are: