Headers in legacy editor huge after update

[Lise]

re Obsidian Release v0.13.31

Windows 11.
Just updated to the latest Electron, and my “legacy editor” headings are huge (Obs v0.13.31). I say this because 1) It’s a pain to update each css file for all 12 of my vaults, and 2) it specifically says in this release note that the issue is fixed. It isn’t for me so I’m wondering if there is something else I should do? (I’d really rather not update my css files if there is some sort of auto fix).

[WhiteNoise]

are you using a theme? does it happen with the default theme?

sidenote: why are using the legacy editor? what is wrong with the new editor in source code mode?

[Lise]

I use the default theme and I include snippets where I need to modify things (as in a header snippet that uses em as the size (e.g., header 1 is 1.1 em) so it should work regardless).

re sidenote: when I tried it many versions back I found it confusing – and dataview didn’t play nice with it at the time, or if not dataview then some other plugin.

[WhiteNoise]

I think you have to update the snippets to follow this

https://forum.obsidian.md/t/obsidian-release-v0-13-27-insider-build/33223

The new editor in source code mode should feel the same as the legacy editor.

[Lise]

I switched to the new editor.

My css file:

.cm-header-1, .markdown-preview-view h1 {
    font-size: 1.1em;

Both (editing and reading) indicate 1.1 em when I go into Inspector.

But obviously one of them is not 1.1em

[WhiteNoise]

We’ve also moved heading font sizes from cm-header-x to HyperMD-header-x to avoid certain elements not being properly up-sized like LaTeX and inline code.

[Lise]

I don’t know what’s going on.

Given this css:

.HyperMD-header-2, .markdown-preview-view h2, h2 {
    font-size: 1.2 em;
    color: #a3be8c; /* was a3be8c */
    font-weight: 600;
    border-bottom: 1px dashed;/* options: solid, dashed, dotted, double, thick double */
    padding: 10px 0px 0px 5px;

I save my file, and inspector displays this:

Note the 2nd inspector element:
.markdown-preview-view h2 displaying a font-size of 1.6em which is no where in my css

I should have added this as well, showing h2 as 1.5em, although it is in strikeout

[efemkay]

@Lise

.HyperMD-header-2, .markdown-preview-view h2, h2 {
    font-size: 1.2 em;

here ur unit cannot have space from the figure. it should be written as 1.2em

@Lise

Note the 2nd inspector element:
.markdown-preview-view h2 displaying a font-size of 1.6em which is no where in my css

the 1.6em size for h2 is the default theme size. defined under :root { }

since u already define .markdown-preview-view h2, then the h2 is redundant and got trumped by the more specific selector (which for ur case, have the same settings, so should be ok)

[joelpittet]

I just noticed similar issues, it looks like someone recently dumped an !important for headers which is causing a bit of havoc.

.cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6 {
    font-size: inherit !important;
}

app://obsidian.md/app.css:2289

Adding !important to your CSS will fix this but it’s not ideal and if possible it would be nice if that got reverted.