Automatic column width for latex equations in html page

[jpmorr]

Is there a way to specify that an equation should fit within a column width?

I have an equation that is quite long and extends beyond the column width in html format:

In the latex generated pdf it is properly formatted to the page width as it seems to automatically adjust the font size to make it fit:

Here's the equation:

$$
\{\Delta F\} = \{\Delta F_{\alpha x} \ \Delta F_{\alpha y} \ \Delta F_{\alpha z} \  \Delta M_{\alpha x} \  \Delta M_{\alpha y} \ \Delta M_{\alpha z} \ \Delta F_{\beta x} \  \Delta F_{\beta y} \ \Delta F_{\beta z} \ \Delta M_{\beta x} \  \Delta M_{\beta y} \ \Delta M_{\beta z} \}
$$ {#eq-DeltaF}

How do I make the html fit the equation to the column properly?

[mcanouil]

This is a MathJax issue (or KaTeX, etc.).
There is an extension to MathJax that seems to do what you want: https://mathjax.github.io/MathJax-a11y/docs/.

You can see the following related question to MathJax extension: #1620.

[mcanouil]

@jpmorr Would the following work for you?

See the Quarto document content

--- format: html ---

Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim enim non leo lacinia volutpat quis eu felis. Suspendisse in vehicula elit. Nam imperdiet odio sapien, eu congue diam facilisis nec. Vestibulum egestas, tortor eu euismod dictum, nulla diam dapibus augue, sit amet fermentum felis turpis nec risus. Sed ipsum lectus, ultricies vitae lacinia a, vulputate quis lectus. Aliquam mattis est vel neque aliquam, et pellentesque nisi mattis. Pellentesque tristique ultricies tortor, eget pulvinar leo ornare at.

:::{style="font-size:50%;"}
$$
{\Delta F} = {\Delta F_{\alpha x} \ \Delta F_{\alpha y} \ \Delta F_{\alpha z} \ \Delta M_{\alpha x} \ \Delta M_{\alpha y} \ \Delta M_{\alpha z} \ \Delta F_{\beta x} \ \Delta F_{\beta y} \ \Delta F_{\beta z} \ \Delta M_{\beta x} \ \Delta M_{\beta y} \ \Delta M_{\beta z} }
$$ {#eq-DeltaF}
:::

Etiam dapibus pellentesque nisl, vitae condimentum nisl commodo id. Curabitur odio tellus, auctor ut eleifend ut, bibendum lobortis tellus. Sed eleifend porta lorem id scelerisque. Nunc eu orci turpis. Aliquam suscipit velit in justo lobortis, vel feugiat ligula pulvinar. Fusce sed cursus arcu. Etiam et cursus eros, ac dignissim nibh. Maecenas arcu dui, egestas vitae diam et, imperdiet pharetra eros. Aliquam sagittis purus et est volutpat, quis posuere justo condimentum. Maecenas fermentum nunc quam, non rutrum lorem vestibulum non. Etiam eu finibus arcu, eget consectetur dolor. Maecenas ultricies magna accumsan felis auctor eleifend eu ultricies urna.

[jpmorr]

@mcanouil That's a really nice solution. I tried using \small in the latex environment to resize it and that works better for the HTML output as it keeps the equation number the correct size but slightly reduces the actual equation whereas {style=} reduce the equation number as well:

(style modification is equation 3.4, \small is 3.5)

However I think for the pdf generation, the style solution is better as it's ignored when creating the pdf and the font size doesn't become too small

[mcanouil]

If you want/need a better solution, then I suggest for you to focus your search in a MathJax, KaTeX, etc. and/or LaTeX context rather than Quarto.

For example, one could use horizontal scroll bar:

:::{style="overflow-x:auto;overflow-y:hidden;"}
$$
\{\Delta F\} = \{\Delta F_{\alpha x} \ \Delta F_{\alpha y} \ \Delta F_{\alpha z} \  \Delta M_{\alpha x} \  \Delta M_{\alpha y} \ \Delta M_{\alpha z} \ \Delta F_{\beta x} \  \Delta F_{\beta y} \ \Delta F_{\beta z} \ \Delta M_{\beta x} \  \Delta M_{\beta y} \ \Delta M_{\beta z} \}
$$ {#eq-DeltaF}
:::

Screen.Recording.2022-08-29.at.20.16.42.mov

[jpmorr]

@mcanouil That's pretty cool, but I think overkill in this situation. Both of the previous solutions really work quite well and I think I'd prefer to just show a slightly smaller font than scroll the equation. Thanks for all the great ideas though!

[mcanouil]

It was only to show you that with css you can do whatever you want and suit your use case.
The solutions are nearly infinite. 😉