Is there any way to control the new LivePreview with CSS?

What I’m trying to do

I want to adjust paragraph spacing in LivePreview mode. I figured out how to make this work satisfactorily in the Legacy Editor. But now it’s broken.

I.e. I want to add some space between line breaks

I.e. single Enter keystroke, not double Enter keystrokes

double spaced paragraphs causes problems for me later in my workflow

I like LivePreview. I really want to combine all the benefits of the new editor with the modest gain I’d made previously.

Things I have tried

I tried finding a CSS specification for LivePreview, assuming I could puzzle it out if I could see some examples. I found scattered posts like this: Live Preview: Add margin-top to H1-H6?, but

Tried chaging “pre” to “div”, as here: Live Preview: Add margin-top to H1-H6? - #7 by renfield - no luck

1 Like

@aluminumbird : you could also ask in the #appearance Discord channel. There are some amazing CSS gurus active there.

1 Like

This is something I have been trying to figure out as well. I haven’t been able to find any documentation on css for live preview.

Here is an additional thing I have found which doesn’t make a whole lot of sense to me but I don’t really understand css much either so that’s probably why.

This code:

.markdown-source-view, .cm-s-obsidian, .markdown-preview-view p {
    content: '';
    display:contents;
    margin-top: 8px;
}

Produces a strange result. In reading mode, it looks correct, but in live view mode, it shifts the entire document’s padding. Why would that be?

I trust that you have added your support to this feature request:

I would point out that it is vary bad practice to use line spacing to produce pretend paragraphs, when what you really want is real paragraphs. Can lead to problems down the line.

However, if you know how to manage the lines then I use this CSS which works well enough for me:

.cm-s-obsidian .CodeMirror-line,
.cm-s-obsidian .cm-line {
    padding-bottom: 10px ;
    padding-top: 10px ;
}

It works in Live Preview

I would point out that it is vary bad practice to use line spacing to produce pretend paragraphs, when what you really want is real paragraphs. Can lead to problems down the line.

Why is that? What do you mean by “real paragraphs”?

However, if you know how to manage the lines then I use this CSS which works well enough for me:

Can you explain how this works? Specifically, What does .cm-s-obsidian do and why do you need to put that in front of .cm-line and .CodeMirror-line? What does the .cm-s-obsidian .CodeMirror-line, do and why is it needed infront of the .cm-s-obsidian .cm-line line?

edit:
Also, what would be the reason the code you gave would work, it seems, using the default theme but not the minimal theme?

Because lines and paragraphs are different things and programs treat them differently.
Different markup in word processors
HTML - <br> vs <p>
And in markdown a paragraph is defined by an empty line before and after.

One that’s defined by the program as a paragraph. A line with a lot of CSS padding between the lines may look like a paragraph but is still treated as a line.

Not really. My interest in CSS is strictly utilitarian and temporary. I’m no CSS guru.

Can’t answer about minimal - it’s not one I have ever used.
I’d suggest adding an important but I thought snippets came last and took priority anyway.
I suggest asking kepano - minimal is quite a large complex theme

Lots of themes are becoming very complex now. I usually stick to simpler ones.

Because lines and paragraphs are different things and programs treat them differently.
Different markup in word processors
HTML - <br> vs <p>
And in markdown a paragraph is defined by an empty line before and after.

Ah I see. So then should there be a way to treat, in css, an empty line as a paragraph and not have it take an entire line?

Thanks for the help by the way.

You should be able to use CSS to style paragraphs to look like lines and lines to look like paragraphs. But the CSS will only apply in the program that uses it. The lines will still be lines and the paragraphs will still be paragraphs.

When I wrote in Obsidian, I used lines (because I wanted to use the single Enter keystroke), and it only took a second in a text editor to convert those lines to paragraphs. Though that gave me a problem if I wanted to type mixed lines and paragraphs as I had no separate keystroke for lines.

Yeah, that makes sense. I have switched over to double enter for paragraphs since that is the format for markdown and makes sense to stick to for portability and compatibility. I do wish I could have css display that as less than the length of a normal line which I haven’t been able to figure out how to do.

double Enter isn’t a format for markdown paragraphs, it’s just a keystroke carried over from text editors. Keystrokes are defined by the program - and are different in Typora and MarkText.

The markdown bit, needed for portability, is the blank line before and after a paragraph.

Hm, I see. thanks for the clarification.

Yeah, I don’t understand I guess why:

p {
    margin-bottom: .5em !important;
  }

isn’t doing what I would think it would do. For instance in this comment. If I had this css running I would expect that the first sentence and the second sentence wouldn’t have a full line length between them but half a line length. But when I put that css in my custom obsidian css it doesn’t behave like that. I feel I am missing something basic.

Why this might not be a good idea.
I came upon this thread with the same complaint in mind. I don’t like the way a single line break makes it difficult to distinguish paragraphs in Obsidian, especially for long-form writing. I’m not accustomed to entering double line breaks after paragraphs and it also doesn’t look right. So as I searched for a way to add paragraph spacing I eventually landed here, through a string of interesting discussions started by aluminumbird.
I noticed that DorVIP warns that changing the CSS properties so that a paragraph is treated as a line “could cause problems down the line.” And I was curious what they meant, so I did some experimenting. First, I loaded up the CSS snipped and opened Obsidian with the snippet applied. Then I found a long article and copied and pasted it into MS, just to take a look. There were line endings at the ends of paragraphs which I expected. However, since the markdown code would have to be eliminated to use in word, I ran it through a standard online markdown converter to html. When I pasted it back into MS, the line endings were stripped and the paragraphs ran together, which would be a real headache in a long piece of text.
Therefore, if I want to get text out of Obsidian to format in another program, which is highly likely,it appears that a snippet which makes text within Obsidian look “right” might actually be of detriment once the text is converted to another format like .doc, .rtf, html etc. Maybe someone else knows how to get around this, but for the moment I’ve changed my mind about using the snippet in Obsidian for my long texts.
I haven’t tested it with the Longform plugin, or Pandoc, which may handle the conversion differently. I wonder if anyone has figured out how to achieve what we all want in a way we can export and edit easily?

This is the code I used to test
:
.cm-s-obsidian .CodeMirror-line,
.cm-s-obsidian .cm-line {
    padding-bottom: 10px ;
    padding-top: 10px ;
}
2 Likes

You’d need two things to do this in Obsidian.
One is using Enter for New Paragraph (Shift-Enter for New Line). There’s a feature request which you could support, but no indication it will happen.

But that still leaves you with the gap between the paragraphs rather than the indent I assume you would want. That would need a CSS snippet to reduce the gap and add an indent.

Alternatively, you could use Typora to edit or write in the Obsidian vault. Still a hit of a gap between paragraphs though, size depending on theme.

A more cumbersome option is to programmatically convert the lines to paragraphs. Should be easy in a text editor (though I’ve only used mine for this). Or use the multiple cursor option to select all lines and press Enter. That will make all lines into paragraphs. Neither is ideal if you sometimes actually want lines.

Great! Experimenting is so useful.
This is a problem I discovered switching in and out of OPML. Converters can lose the lines and you end up with a single soggy mass of words and no easy way to recover.

The HTML problem is that it differentiates between

and
but markdown just has an extra space between lines. Usually works first time, but go backwards and forwards and at some point the lines can get lost. As you found.

Personally, I think it’s important for your flow to be able to use the keystrokes you have become accustomed to, so I find it impossible to recommend switching between single Enter and double Enter depending on the program you are using at the time.

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