Free Online Math Resources

• Wikipedia Mathematics Portal
• Encyclopedia of Mathematics
• Wolfram Mathworld
• Project Euclid
• Planet Math
• MacTutor History of Mathematics Archive
• NIST Digital Library of Mathematical Functions
• DigiZeitschriften - Das Deutsche Digital Zeitschriftenarchiv (German digital journal archive)
• Crelle's Journal
• Explicit-Formulas Database
• LMFDB - The L-functions and Modular Forms Database
• Internet Archive handy for finding very old math publications

Random Mathematicians

• John Baez
• Peter Borwein
• J. S. Milne
• John Stillwell

MathJax

MathJax is a great tool but I did have one issue which required javascript to workaround. The problem is with the layout of subscripts. When layed out normally, subscripts end up with different base lines depending on the presence of descenders, superscripts etc. I assume the reason for this is that TeX/LateX layout is designed for the printed page rather than a large display screen. On the screen subscripts look better if they all have the same baseline.

Katex

Katex is another great javascript library for rendering TeX in a browser. I have added experimental support for the Katex renderer. It is a faster renderer with better support for flowing math text.

« Responsive » HTML Math Authoring

Responsive HTML math has been experimentally implemented on some pages. Katex already implements automatic line-breaking for inline math. Although this feature is not available in MathJax3 a similar effect can be achieved by manually breaking inline TeX code into smaller pieces.

Display equations are a different story. Dynamic reflowing of display math equations to fit the current viewport has required abandoning top level TeX equation environments. Instead large equations are broken into smaller pieces of inline math and inserted into various arrangements of HTML flex boxes.

• Equation Numbering: this is easily implemented using javascript and an appropriate flex box.
• Line-breaking: in general it is very difficult to come up with a 100% effective algorithm. However a general algorithm is not required. Instead simple heuristics work about 80% of the time. The remaining 20% of cases can be dealt with using explicit markup and/or some re-authoring to more break-friendly TeX code.
• Spacing: split TeX is not strictly equal to the sum of its parts. Splitting needs to take into account renderer-specific changes in spacing around operators between non-split and split TeX code.
• Flex Boxes: Flex boxes are a big improvement to the HTML layout model. However they are not capable of dealing with all math vertical alignment requirements, in a direct and sensible way. May need to use CSS grid's to achieve satisfactory vertical alignment.

Features Implemented

• Fold: Splits the equation into two words, usually just after the first equals sign. If equation is too wide to fit on single line the first word is displayed left justified on the first line and the second word is displayed right justified on the second line.
• Flow: Similar to normal text flow with an indent after the first line. There are two variants one with fixed indent and one with variable indent equal to first word.
• List: Basically the same as flow with fixed indent. Natural break points are after comma's and column gap is larger.
• Stack: Vertical stack of equations which auto changes to horizontal stack if viewport is wide enough. The vertical stack can be optionally aligned (but this is not yet fully implemented).
• Flow Stack: Vertical stack of aligned equations each of which flows if there is insufficient room to display them on one line. Current implementation is clunky and would be better with a grid rather than flex box.
• Train:

Features Under Consideration

• Smarter breaking heuristics, for example only break at outer level where fence levels are all zero.
• Horizontally scrollable equations.

Responsive Authoring Idea's That Were Tried And Rejected

• Zooming to fit all content into screen / viewport width.
• Makes the content illegible.
• Creating two (or more) versions of the math content - one for narrow screens one for wide screens.
• Very tedious to author multiple versions.
• May still not fit nicely on intermediate screen sizes.
• Making equations horizontally scrollable.
  • Makes for a very busy UI.
  • Complicated to use, with multiple scroll bars in action.
  • Maybe ok if used sparingly and there's no better option.
• Using standard tex equation environments and hoping responsive layout and equation labelling would be implemented / improved by the tex rendering libraries
  • Currently it's not really there
• Using HTML text layout features to achieve wrapping and centering.
  • Text styling tends to have undesirable side-effects such as getting inherited into the math html layout.

Javascript Encapsulation

Javascript code is encapsulated using classes rather than modules. The reason is that to properly view the pages containing modules in a browser you need to use a webserver rather than simply use file:// as the URL. And that is a bit inconvenient.

Static Web Hosting

For simplicity and low cost this web site is hosted as a static web site. All layout and rendering is performed in javascript on the client device. This means a small delay of say half a second between when the content is downloaded and when it is ready for display.

Browser Support

These web pages are designed to look good on a large screen. They render nicely on Chrome, FireFox, Edge and Safari on laptops and desktops. Mobile phone rendering is not perfect, but is being improved. MathML support is usable in FireFox, but not in the others.

Easter Eggs

• To change the math rendering library and font size click the title of any page.
• To see which version of the math rendering library is loaded hover over the badge in the top right-hand corner of the page.