Is a linebreak in the html between list elements normal?

support
1

Hi, I write a quick typing course, so obviously I am very, very sensitive and nitpicky about typography. Literally every line break or space matters.
So I tend to use related properties or that kind of thing pretty liberally.
And I notice that “white-space-collapse:preserve-breaks” (as well values nowrap, pre, pre-line, pre-wrap, break-spaces) show that behavior, visually introducing a new line (so, two line breaks in a row) between list elements.
The html code shows only a line-break. So it’s like the browser stacks that plus the normal list element line-returning behavior.
But this quirk irks me, the line break in the markdown meant to separate the list element, obviously, not introduce a literal line-break in the html code… and on top of that, minifying plain doesn’t work.

image
image960×397 33.6 KB

2

A link to the site, or better yet a link to the code repo would help a lot in figuring this out.

Guessing, I would look in to the theme css or render hooks.

1 Like
3

As @frjo pointed out, the markdown sources and generated html + CSS is the key.

  • First: Markdown source , guess you are aware of the differences of

    - foo
- bar

    which renders to

    <ul>
<li>foo</li>
<li>bar</li>
</ul>

    whereas:

    - foo

- bar

    renders to:

    <ul>
<li>
<p>foo</p>
</li>
<li>
<p>bar</p>
</li>
</ul>

    more details and lot’s of examples how that will behave in speical cases: Common Mark Spec or try it out

  • Second: Browser default without any CSS
    HTML does not target appealing layout - it is a content structure. And it looks readable without any CSS. All Browsers add some styling – nowadays exposed as (css) styles – , around the different tags <ul>, <li>, <p> …
    Check the computed styles with DEV Tools without using any own CSS. The result will be browser dependent. If you don’t like that, you will have to override these settings, some even apply a CSS reset (search for it) to kill all browser influence.

  • Third: own CSS styling
    Will add/change the stuff - again use DEV tools to see the effects and figure out which rules adds something, especially with these white-space-collapse settings and/or minification.

  • Fourth: There might be still some differences between different Browsers in some situation and or for some tags …

2 Likes
4

Yes I know how to put paragraphs inside a list, and it is not it. Browsers behave identically, and no weird markup appears in the code. However, like I said, a linebreak is introduced by Goldmark/hugo, of which white-space:pre/pre-wrap/pre-line causes the literal interpretation.
Here’s a repo: GitHub - evanescente-ondine/hugo-sample
First time in my life I managed to set up a repo ever, houra.

5

I’m not sure what that means. Our Markdown interpreter (Goldmark) is doing exactly what it should be doing per the CommonMark specification.

Try it:
https://spec.commonmark.org/dingus/?text=List -%20item -%20item

This:

List

- item
- item

Is rendered to this:

<p>List</p>
<ul>
<li>item</li>
<li>item</li>
</ul>

If you minify your build it looks like this:

<p>List</p><ul><li>item</li><li>item</li></ul>
6

I took the htdocs/index.html and opened it directly in Chrome. As I said NO CSS → Browser Style

No blank line but margins added.

Sometimes a picture helps:

image
image1098×468 57.2 KB

p.s.

exactly where I verified my first point

p.s.

These days it’s much better but still some quirks out there (edge shows the same values. … both use the same browser engine, dunno how firefox or safire will do)

7

Ok, I get it. Then it bothers me that the minifier (works now, go figure) removes newlines and double spaces and tabulations alike, both inside and outside tags. But I like and use tabulations in particular, which don’t get their own html elements unlike linebreaks except inside <pre> :frowning:
Is there any way to preserve tabs ? The actual Tab character is unlikely to be outputed by programs and much more likely by users, so why touch it…

8

Whitespace is often meaningless in HTML, especially between elements.

9

mmh, I suppose that is even handled before minify by the Markdown engine.

There’s no concept as indenting lines in a paragraph using spaces or tabs in Markdown as in the good old typewriter paper writing.

Common mark Spec # TABS
Tabs in lines are not expanded to spaces. However, in contexts where spaces help to define block structure, tabs behave as if they were replaced by spaces with a tab stop of 4 characters.

Thus, for example, a tab can be used instead of four spaces in an indented code block. (Note, however, that internal tabs are passed through as literal tabs, not expanded to spaces.)