Mathjax resizing in tables
37 views
Skip to first unread message
Lisa Johnson
Jan 27, 2025, 4:06:49 PM1/27/25
to MathJax Users
I know I’ve asked this before (thanks for all your help, Murray!), but I was wondering if there was any progress (or ever will be) on the equations resizing in html tables. For now, I’ve made the tables into images (eg https://mathhints.com/advanced-algebra/piecewise-functions/) but would love go back to dynamically creating the tables.
They have always looked fine on a pc, but overflow on tablets and phone since the equations are so large. And yes I’ve tried adding the overflow commands for horizontal scrolling, but this can be awkward for users.
I know - I need to rewrite without the tables, and prob will at some point, but thought I’d ask…
But I love mathjax - thanks for everything!!!
Thanks for any suggestions.
Lisa
Murray
Jan 29, 2025, 12:58:18 AM1/29/25
to MathJax Users
Hello Lisa
I thought I'd give others a chance to respond first, but as no-one has, here I am.
Unfortunately, having the tables as images has several drawbacks.
(1) When viewing your page on my phone, I had to zoom right in to read what was on the image in many cases. This became quite troublesome quickly.
(2) Any text on images is not accessible to 2 important visitors:
* Blind people. MathJax has a lot of neat facilities for blind people to use screen readers to read the math. If it's in an image, that is lost, as is any of the text descriptions of the math.
An example is this page:
https://mathhints.com/differential-calculus/differentiation/
About 1/4 down the page it says "Here is what it looks like in Theorem form"
The next thing the screen reader would read is "Power Rule", which is the next <h2> heading, so blind people are not able to follow a lot of what's happening.
* Search engine spiders. The images don't have ALT tags, so search engines have no idea what the image is about, so they'll just ignore them. All that text that used to be in their index for your site will disappear over time. This is not so good for the site's SEO score.
(I'd actually encourage you to reinstate your tables - they are better all round than images.)
(3) You mentioned that you thought " horizontal scrolling can be awkward for users". I agree that for your situation with content in tables, it can be a problem, since your users could face at least the following:
* Horizontally scrolling the whole table, especially if it is taller than the current screen height. This would be like trying to view a PDF on a phone (which is always painful), where you're scrolling and zooming most of the time to read any of it. Not so good.
* Horizontally scrolling each math expression inside each table. Also not so good.
However, if the page itself is basically vertical and the mathematics is also formatted vertically (using \begin{equation} or \begin{align} to align equals nicely), rather than horizontally, then it's a more "normal" situation faced by phone users.
A vertical layout would reduce the amount of horizontal scrolling, but it's inevitable for some wide equations, especially those involving square roots.
(While the discussion on this page is about KaTeX and I'm assuming inline equations, the principles are somewhat the same for MathJax: https://bourne2learn.com/math/katex/katex-wrap-examples.php )
(4) You asked about equation resizing. I think I mentioned this a while ago, but you can run a script after MathJax is processed to reduce the font size so it fits in the available space. (It's just a loop that keeps on reducing the font size a little bit at a time until the overall width of the math element is just less than the width of the container.)
Once again, this is fairly straightforward if it's one equation per line on the page, but if there are several equations in columns in a table, the script would need to cater for that and you could end up with tiny equations which are unreadable.
(I used to take such an approach of reducing font size like this, but the script would stop when it reached a minimum font size, something like 0.75 em, or 12 pt, but even then, equations can end up being too wide for the available space and users need to horizontally scroll. Another issue is subscripts and superscripts end up tiny, so users may need to zoom in and scroll horizontally. Most won't bother.)
Anyway, feel free to reach out by email and we can discuss this some more.
I thought I'd give others a chance to respond first, but as no-one has, here I am.
Unfortunately, having the tables as images has several drawbacks.
(1) When viewing your page on my phone, I had to zoom right in to read what was on the image in many cases. This became quite troublesome quickly.
(2) Any text on images is not accessible to 2 important visitors:
* Blind people. MathJax has a lot of neat facilities for blind people to use screen readers to read the math. If it's in an image, that is lost, as is any of the text descriptions of the math.
An example is this page:
https://mathhints.com/differential-calculus/differentiation/
About 1/4 down the page it says "Here is what it looks like in Theorem form"
The next thing the screen reader would read is "Power Rule", which is the next <h2> heading, so blind people are not able to follow a lot of what's happening.
* Search engine spiders. The images don't have ALT tags, so search engines have no idea what the image is about, so they'll just ignore them. All that text that used to be in their index for your site will disappear over time. This is not so good for the site's SEO score.
(I'd actually encourage you to reinstate your tables - they are better all round than images.)
(3) You mentioned that you thought " horizontal scrolling can be awkward for users". I agree that for your situation with content in tables, it can be a problem, since your users could face at least the following:
* Horizontally scrolling the whole table, especially if it is taller than the current screen height. This would be like trying to view a PDF on a phone (which is always painful), where you're scrolling and zooming most of the time to read any of it. Not so good.
* Horizontally scrolling each math expression inside each table. Also not so good.
However, if the page itself is basically vertical and the mathematics is also formatted vertically (using \begin{equation} or \begin{align} to align equals nicely), rather than horizontally, then it's a more "normal" situation faced by phone users.
A vertical layout would reduce the amount of horizontal scrolling, but it's inevitable for some wide equations, especially those involving square roots.
(While the discussion on this page is about KaTeX and I'm assuming inline equations, the principles are somewhat the same for MathJax: https://bourne2learn.com/math/katex/katex-wrap-examples.php )
(4) You asked about equation resizing. I think I mentioned this a while ago, but you can run a script after MathJax is processed to reduce the font size so it fits in the available space. (It's just a loop that keeps on reducing the font size a little bit at a time until the overall width of the math element is just less than the width of the container.)
Once again, this is fairly straightforward if it's one equation per line on the page, but if there are several equations in columns in a table, the script would need to cater for that and you could end up with tiny equations which are unreadable.
(I used to take such an approach of reducing font size like this, but the script would stop when it reached a minimum font size, something like 0.75 em, or 12 pt, but even then, equations can end up being too wide for the available space and users need to horizontally scroll. Another issue is subscripts and superscripts end up tiny, so users may need to zoom in and scroll horizontally. Most won't bother.)
Anyway, feel free to reach out by email and we can discuss this some more.
Regards
Murray
Lisa Johnson
Jan 29, 2025, 2:49:17 PM1/29/25
to mathja...@googlegroups.com
Thank you so much, Murray. This is invaluable information and I’ll try your suggestions. You are invaluable to this group. I will definitely get rid of the table images - should have checked in before I did the work :)
I’ll let you know if I have any questions.
Thanks again for your detailed reply!
--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/mathjax-users/24833574-b479-48a3-b6c5-6a9acaa16b2dn%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages