retype
retype copied to clipboard
retypeapp
Incorrect list spacing
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!
I dunno if this is the expected behavior and I'm just abusing spacing or not.
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:
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.
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.:
- tight lists (see playground)
- 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!
- loose lists (see playground)
- 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!
In the last sample the []() part looks tricky, it's just because there seem to be no good way to convert a list of a single item into a loose list.
Hope the samples above help. Meanwhile we will try to come up to a different CSS that would help to leverage the spacing issue.
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
Retype loose list
I will add a section to the Retype documentation discussing the differences between tight vs loose lists.