🏠 back to Observable

vertical scroll bars on display katex

I noticed that some recent change has added a bunch of vertical overflow scrollbars to katex in notebooks where they didn’t show up before.

Are those intended, or a bug? I could e.g. try to add some vertical whitespace in my latex code to make them go away.

They seem to show up in both Firefox and Chrome here.

Example:
37%20PM

2 Likes

This is my fault. I’m trying to allow horizontal scrolling when tex.block is too wide, so I added overflow-x: auto. But I don’t want overflow-y, so I’m not sure yet what’s going wrong here. My apologies. I’ll try to fix my solution (or revert it).

I have reverted this change and the fix should be live in a few minutes. I’d still like to enable horizontal scrolling for wide tex.block’s, but it looks like it won’t be possible with simple CSS. Suggestions welcome.

1 Like

No worries. When I looked before it didn’t look like the KaTeX people had any especially good ideas for making KaTeX-rendered display math more mobile-friendly.

Personally I don’t much like the horizontal scrollbar solution on websites where I have seen it used, but it is better than just overflowing off the right side with no ability to see chopped-off content at all.

Personally my preference on mobile for equations is for them to be just shrunk so that they fit on the page, but with the mobile browsers’ ability to zoom not disabled, so any equation that is illegibly small can be expanded.

I added a function for this @jrus/misc#responsive_katex which can be seen in use at https://observablehq.com/d/fb4d519e95cdbd83

It might not be easy to do this in an automatic way that doesn’t break anything else / stomp on other authors’ preferences though.

1 Like

Replacing margin: 1em 0 with padding: 1em 0 for .katex-display might work. Basically the element content must not extent past the parent boundaries.