retypeapp / retype

Retype is an ✨ ultra-high-performance✨ static site generator that builds a website based on simple text files.
https://retype.com
Other
1.07k stars 204 forks source link

Incorrect list spacing #67

Open ErwinJoubert opened 3 years ago

ErwinJoubert commented 3 years ago

I have a long and overcomplicated list and the list elements are separated by spaces for the sake of sanity but having spaces between elements causes problems with nested element spacing. Adding spaces between nested elements or removing all spacing fixes it.

## Bee Movie
- According to all known laws of aviation, there is no way a bee should be able to fly.

- Its wings are too small to get its fat little body off the ground.
    - The bee, of course, flies anyway because bees don't care what humans think is impossible.
    - Yellow, black. Yellow, black.

- Yellow, black. Yellow, black.
    - Ooh, black and yellow!

- Let's shake it up a little.

- Barry! Breakfast is ready!
list example

I dunno if this is the expected behavior and I'm just abusing spacing or not.

fabriciomurta commented 3 years ago

I think your markup shouldn't reflect the screenshot you shared. There's an indentation that is not matching.

But regarding the spaces between lines, they don't look right, indeed.

This is how the markdown you shared looks to me:

image

geoffreymcgill commented 3 years ago

Hi @ErwinJoubert. Thanks for the report and sample demonstrating how to reproduce. We will investigate and try to figure out what's going wrong here. We will try to get the fix into the next release.

AndreyChechel commented 3 years ago

The issue relates to the problem of loose vs. tight lists: https://spec.commonmark.org/0.30/#loose

In terms of CommonMark, there are actually 2 list types in the sample above: an outer and a couple of inner lists. Since the outer list items are delimited with a blank line - it's a loose list. Whereas, the inner lists are tight ones. That exactly matches CommonMark's example: https://spec.commonmark.org/0.30/#example-326

Content in loose list items are rendered within <p></p> tags - that's why the rendered result looks inconsistent. It's even reproducible in the CommonMark playground. A possible workaround would be to stick to either loose or tight types both for the outer and inner lists, e.g.:

Hope the samples above help. Meanwhile we will try to come up to a different CSS that would help to leverage the spacing issue.

geoffreymcgill commented 3 years ago

Given Retype implements the CommonMark spec as defined, I'm not sure there's much we can do here.

Here's a couple of screen captures of the tight and loose list rendering from Retype.

Retype tight list

Screen Shot 2021-07-12 at 7 27 15 AM

Retype loose list

Screen Shot 2021-07-12 at 7 26 29 AM

I will add a section to the Retype documentation discussing the differences between tight vs loose lists.