[FEATURE] Vertical whitespace between large multi-line HTML blocks

[jayvdb]

• [x] I've searched the issues
• [x] I've read the docs

Feature Request

When there are large multi-line HTML blocks, it would be nice to insert a blank line between them.

Specifically, I am seeing lots of blank lines being removed from between multi-line script and style tags, and I think those blank lines were helpful.

But I can imagine that any html block which has many lines of content (i.e. above some threshold to be customised) should have a blank line around it to help reset the brain when reading / help someone scrolling to notice where to focus to glance at what part of the file they are up to, and to allow a template or HTML comment above one of these blocks to clearly reside together with the following block rather than being directly below the previous block.

[christopherpickering]

Thanks, one of the latest commits will now preserve the newlines inside script and style tags.

I agree it would be nice to have an option to add extra breaks after certain tags.

[dyve]

Handling vertical whitespace has some prior art, like black.

I'm not too fond of losing all my vertical whitespace, but I can live with it. I could also live with "reduce vertical whitespace to a single line. I don't think HTML/JS is as clear in its intentions and spacing as python is.

[christopherpickering]

Yeah, I feel like 90% of html is personal preference. We have the option to add white space after certain template blocks, I wonder if we should add the option to add whitespace after outer closing html tags. Do you have a good recommendation for where/ how to put whitespace?

[jayvdb]

Google and MDN styleguides don't mention vertical whitespace. Here are some I found.

http://www.onepointed.com/dan/computing/CodeStandard/htmlStandard.shtml#html-vast

By using whitespace (judiciously ) to separate logical page elements the HTML source is much easier to read.

https://ianrmedia.unl.edu/resources/html-and-css-style-guide

Blank line: Add a blank line before and after large blocks of code, lists and tables

https://contribute.jquery.org/style-guide/html/

Comments are always preceded by a blank line.

https://docs.gitlab.com/ee/development/documentation/styleguide/ (quite general, but more about markdown than html)

Insert an empty line between different markups (for example, after every paragraph, header, list, and so on).

[dyve]

Whitespace is also meaningful in HTML. Adding whitespace is something that can give trouble in a Django template.

{% for book in books %}
    <a href="{{ book.get_absolute_url ">{{ book.title }}</a><span>, </span>
{% endfor %}

If you add whitespace between </a> and <span>, it will be meaningful.

For vertical whitespace, I would say:

• Adding vertical whitespace between attributes inside long elements is fine for breaking long lines)
• If you add (vertical) whitespace between elements, only add between block elements.
• Reduce all vertical whitespace to a single line.

Another approach might be:

• Reduce all vertical whitespace to a single line.
• Report lines that are too long and have the developer fix them.

[christopherpickering]

Closing this as I think the --preserve-blank-lines option will probably cover most cases.