Paragraph spacing in input and preview does not match final display

Options
Stephen Coles
Stephen Coles Posts: 1,023
edited June 24 in Suggestions and Bug Reports
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.

Comments

  • Stephen Coles
    Stephen Coles Posts: 1,023
    edited June 24
    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
    theorosendorf Posts: 14
    I’d be happy to take a stab at this if the maintainers are too busy.
  • John Hudson
    John Hudson Posts: 3,444
    edited June 26
    Maybe something can be done about the code view also?

    Linespaces like this<br>in code view get mangled.
  • Michael Rafailyk
    Michael Rafailyk Posts: 194
    edited June 27
    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.

Categories