# Changing math font size causes cell misalignment
**URL:** https://talk.observablehq.com/t/changing-math-font-size-causes-cell-misalignment/689
**Category:** Uncategorized
**Created:** [April 28, 2018, 4:16pm UTC](https://talk.observablehq.com/t/changing-math-font-size-causes-cell-misalignment/689 "2018-04-28T16:16:35Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@jrus](https://talk.observablehq.com/u/jrus)
#### Post date: [April 28, 2018, 4:16pm UTC](https://talk.observablehq.com/t/changing-math-font-size-causes-cell-misalignment/689/1 "2018-04-28T16:16:35Z")
I have taken to adding a `` 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](https://beta.observablehq.com/@jrus/svg-elliptical-arcs) I have been working on today, which shows the issue I am talking about:
This is Safari 11.0.3. Seems to not happen in current Firefox.
---
### Author:  [@tom](https://talk.observablehq.com/u/tom)
#### Post date: [April 28, 2018, 5:36pm UTC](https://talk.observablehq.com/t/changing-math-font-size-causes-cell-misalignment/689/2 "2018-04-28T17:36:09Z")
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](https://developers.google.com/web/updates/2016/10/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](https://caniuse.com/#feat=resizeobserver), 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.
---
### Author:  [@jrus](https://talk.observablehq.com/u/jrus)
#### Post date: [April 29, 2018, 12:21am UTC](https://talk.observablehq.com/t/changing-math-font-size-causes-cell-misalignment/689/3 "2018-04-29T00:21:06Z")
Thanks Tom. Is there maybe a way to force updates on all the cells?
---
### Author:  [@mbostock](https://talk.observablehq.com/u/mbostock)
#### Post date: [April 29, 2018, 12:36am UTC](https://talk.observablehq.com/t/changing-math-font-size-causes-cell-misalignment/689/4 "2018-04-29T00:36:10Z")
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:
```auto
style = html``
```
Then anywhere you create content that depends on this style, you reference the style cell to declare the dependency. For example:
```auto
style, md`Hello, world!`
```
Or, slightly more verbose:
```auto
{
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:
```auto
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](https://beta.observablehq.com/@mbostock/de-jong-attractor-ii).)
---
### Author:  [@jrus](https://talk.observablehq.com/u/jrus)
#### Post date: [April 29, 2018, 1:28am UTC](https://talk.observablehq.com/t/changing-math-font-size-causes-cell-misalignment/689/5 "2018-04-29T01:28:38Z")
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.
---
### Author:  [@mbostock](https://talk.observablehq.com/u/mbostock)
#### Post date: [May 19, 2018, 5:05am UTC](https://talk.observablehq.com/t/changing-math-font-size-causes-cell-misalignment/689/6 "2018-05-19T05:05:47Z")
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.)
---
### Author:  [@jrus](https://talk.observablehq.com/u/jrus)
#### Post date: [May 19, 2018, 6:29am UTC](https://talk.observablehq.com/t/changing-math-font-size-causes-cell-misalignment/689/7 "2018-05-19T06:29:47Z")
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.
---
### Author:  [@jrus](https://talk.observablehq.com/u/jrus)
#### Post date: [May 19, 2018, 7:38am UTC](https://talk.observablehq.com/t/changing-math-font-size-causes-cell-misalignment/689/8 "2018-05-19T07:38:17Z")
Not sure if this is the best way to handle things, but I made a [@jrus/misc](https://beta.observablehq.com/@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.