Paragraph spacing in input and preview does not match final display

Stephen Coles

Just reposting this report so it’s not lost.

Typedrawers’ CSS has built-in spacing below paragraphs, but that doesn’t show in the input field (or the Preview), so people add an extra linebreak to get space between paragraphs. If you do a single return, you get space between the two paragraphs. So it’s a bit of a bug that needs to get fixed in either the input or the display styles.

Stephen Coles

Test:

These two paragraphs have a single line break between them.

These two paragraphs have a single line break between them.

These two paragraphs have two line breaks between them.

These two paragraphs have two line breaks between them.

theorosendorf

I’d be happy to take a stab at this if the maintainers are too busy.

John Hudson

Maybe something can be done about the code view also?

Linespaces like this<br>in code view get mangled.

Michael Rafailyk

The first reason of the issue is that the CSS in editor is different from the CSS in the published comment. Some synchronisation of rules (in the editor's CSS) will help to see more fair Preview before the comment will be posted.

The second reason of the issue is that, when I press the Enter key in editor, there is some random chance that I have something from the following options, and I never know which one:

• <br> – directly does what I see in the editor. One <br> is a line break, two <br><br> are a double line break. This is fair for both editor and published comment, so usually I prefer this option.
• <div> – I'm not sure but it seems like it has a different vertical space than just two <br><br>.
• <br> inside <div> – worst option which cause that extra vertical space.

The second and third options are hard to see in the editor until I switch to the HTML view, so for a some time I constantly review the comment in HTML view before publishing it.