Changing math font size causes cell misalignment

1

I have taken to adding a <style> .katex { font-size: 1.08em; }</style> to the top cell of notebooks, because otherwise the math font is dramatically and distractingly bigger than the text font. Unfortunately this seems to cause the cells to go out of alignment, which gets progressively worse going down a long page.

Here’s a screenshot of the notebook I have been working on today, which shows the issue I am talking about:

36%20AM
Screen Shot 2018-04-28 at 9.14.36 AM.png1480×1196 98.9 KB

This is Safari 11.0.3. Seems to not happen in current Firefox.

2

What’s going on here is that:

  • Changing the style of the page from one cell - changing the code size from one cell that affects all the rest, means that cell ‘C’ changes, but cells ‘A’ and ‘B’ change height
  • There is, thankfully, a browser API for detecting height changes like this: ResizeObserver. We use it to catch this case and correctly resize cells when they change height indirectly - essentially when other elements affect their height.
  • Unfortunately, ResizeObserver isn’t supported in Safari, so that’s what you’re seeing - changing the style node doesn’t correctly update the other cells in Safari.

And more unfortunately, this usually isn’t an issue when notebooks are loaded fresh, only when they’re edited, but I’m seeing misalignment even on refresh of your notebook. I’ll dig around and see if there’s any way to fix this issue without needing to polyfill ResizeObserver.

1 Like
3

Thanks Tom. Is there maybe a way to force updates on all the cells?

4

Yes, you can workaround this problem by making the dependency explicit through references.

One way to do that is to give your style cell a name:

style = html`<style>
  … CSS goes here …
</style>`

Then anywhere you create content that depends on this style, you reference the style cell to declare the dependency. For example:

style, md`Hello, world!`

Or, slightly more verbose:

{
  style; // This cell depends on the style cell.
  return md`Hello, world!`;
}

If you don’t like the repetition of style references, you could create a wrapper for tex that has your style dependency:

styletex = {
  style;
  return tex;
}

Then, as long as you reference styletex instead of tex, the cell will implicitly depend on your custom style.

(The technique of explicit reference is used in some of my WebGL notebooks.)

2 Likes
5

Thanks Mike. (And thanks for listing a few ways to do it.)

Cool. I defined $ for tex (with reference to my title cell, which includes the style) and $$ for tex.block. Seems to work great.

2 Likes
6

Good idea. We’ve changed the default inline KaTeX font-size to 1.1em. (Though, we kept the larger 1.21em for tex.block to improve readability.)

7

Seems like this made my page-specific CSS stop working? Now all the math fonts are too big for my taste on my pages.

(I find 1.1em still looks noticeably bigger than the text font; I found 1.08em to look best to my taste, but it might depend a bit on browser etc. Personally I want the block font to also be the same size, but I can see where you are coming from.)

Edit: seems like you folks are using more specific CSS selectors. I updated mine.

8

Not sure if this is the best way to handle things, but I made a @jrus/misc notebook, which I then call on like,

import {math_css, $, $$} with {$css as $css} from "@jrus/misc"

And in another cell,

$css = html`${math_css}`

The $ and $$ in the misc notebook are defined such that they ping $css before rendering anything.