search

oleeskild / obsidian-digital-garden

MIT License
1.2k stars 113 forks source link

Long latex overflow issue on mobile #585

Open ajkdrag opened 2 months ago

ajkdrag commented 2 months ago

If there's a long latex equation, it overflows on mobile devices. Since there's no horizontal scrollwheel, it gets cut off. Any fix with CSS or something in the template?

stalegjelsten commented 1 week ago

Hi @ajkdrag!

It seems the equations are SVGs generated by MathJax. The SVGs are placed inside a mjx-container element.

Scrolling works after I added overflow:scroll to the CSS of the mjx-container, but I have currently no idea as to how to implement this fix in the source code...

image
stalegjelsten commented 1 week ago

My hacky solution

I created a user script to add scrollbars automatically to all equations that are too wide for the viewport. A couple of my equations then got vertical scrollbars as well – even though the equation was perfectly visible without y-axis scrolling – so I made overflow-y: hidden.

Save the script as something like mathjax-fix.njk in the /src/site/_includes/components/user/notes/head folder in your Digital Garden repo. It will then get automatically compiled into the head of all your pages. See the Digital Garden documentation for more info on custom components.

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const mathjaxContainers = document.querySelectorAll("mjx-container.MathJax");
    mathjaxContainers.forEach((container) => {
      container.style.overflowX = "auto";
      container.style.overflowY = "hidden";
    });
  });
</script>