How to avoid different formatting in reading vs. live preview mode?

What I’m trying to do

I’d like to have (as much as possible) the same layout (spacing, fonts etc.) both in reading mode and live preview editing mode.

Currently, some spacings are different (like spaces after Headings) and the font seems to be different.
Reading mode:

Editing mode:

Things I have tried

I already adjusted some CSS, but I’m curious if there isn’t a more elegant solution.

I’m using minimal theme.

1 Like

I seem to remember there are multiple threads about this, e.g.:

I also seem to remember some core Obsidian update that tried to make it look as aligned as possible a few months back or was it about adding more padding to headings? (I still needed to put in my own CSS as I don’t like everything compressed in markdown files.)

I find it curious, that this is an issue at all.

My expectation was, that any template would try to make sure that both reading and editing mode are looking as similar as possible.

Am I missing something?

Some themes claim to be able to display seamlessly Lp and Pv. I can’t remember them (sorry for this) but i think their solutions are just approximations, never perfect results. Technically, the code for both views is different, therefore it is difficult to get the same appearance in both views

I myself like to see a difference, if I’m in Live preview or Preview view - of course if these differences aren’t too exaggerated, eg mess with my page layout as a whole

Have you figured out the elegant way to “sync” live preview and reading mode?

For me it causes problem because i need to print my pages that i pre-formatted in live preview but pages get reformatted in exported pdf according to the reading view which doesn’t allow editing.

For now only workaround i found is using Linter (plugin that formats text in file aka edit view according the rules that can be adjusted in settings) But it works the other way around. That is, it re-formats file to look like preview.

No, I kind of got used to it.
Most of the time, I simply only use live-preview mode only, so I don’t suffer too much from the different appearances. :man_shrugging:

PDF export comes from the rendered i.e. Reading view, so you’ll want to look at (and adjust) that before exporting to PDF.

What you’re missing, so to speak, is that it is two different markdown engines producing the live preview and the reading view. And even though they both translate markdown into html, they’re doing it their own way. So as someone stated elsewhere in this thread various themes try to make it look alike, but the html used is different make this task extremely challenging.

Personally I’m using either source mode or reading view, I don’t use the live preview most of the time, so then I also don’t really mind it being slightly different. So my best advice is to choose which modes you want to use, and try to ignore the differences if you visit the other alternative.

That makes sense. I didn’t know about the technical background.
Thank you for the clarification!

Maybe I’m misunderstanding but isn’t it what i wrote ?
( That is, export to pdf comes from Reading View, which is the problem as long as Live view and Reading view differs, because editing and manual formatting happens in Live view. )

Or do you mean that pdf export is supposed to come from view rendered at the time of using the pdf export ? Because that is not how it works for me.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.