Hi all! Happy Holidays! I’ve got users on my instance (discuss.pixls.us) that have what I think is a reasonable request: the spacing between list elements could be increased a bit. At the moment, list items don’t have any extra spacing to offset each item: I am the very model of a modern Major-General, I’ve information vegetable, animal, and mineral, I know the kings of England, and I quote the fights historical, From Marathon to Waterloo, in order categorical; I’m very well acquainted too with matters mathematical, I understand equations, both the simple and quadratical, About binomial theorem I’m teeming with a lot o’ news— With many cheerful facts about the square of the hypotenuse. The line height is the same as the list element spacing, making it hard sometimes to read lists effectively. This doesn’t pertain to list items that are rendered loose, which look a bit better: I am the very model of a modern Major-General, I’ve information vegetable, animal, and mineral, I know the kings of England, and I quote the fights historical, From Marathon to Waterloo, in order categorical; I’m very well acquainted too with matters mathematical, I understand equations, both the simple and quadratical, About binomial theorem I’m teeming with a lot o’ news— With many cheerful facts about the square of the hypotenuse. Though I think the loose rendering is a bit much personally, it is certainly more readable than the tight rendering. So I took a quick look and adding some slight margin spacing between elements makes things look a bit better (this is with .cooked li { margin-bottom: 0.2em; }): [image] This plays nicely with loose lists as the vertical margin will collapse (basically doesn’t change anything on loose lists). Any thoughts on possibly defaulting this style: .cooked li { margin-bottom: 0.2em; }

If you want extra spacing, just put extra spacing? :wink: I am the very model of a modern Major-General, I’ve information vegetable, animal, and mineral, I know the kings of England, and I quote the fights historical, From Marathon to Waterloo, in order categorical; I’m very well acquainted too with matters mathematical, I understand equations, both the simple and quadratical, About binomial theorem I’m teeming with a lot o’ news— With many cheerful facts about the square of the hypotenuse. was done with * I am the very model of a modern Major-General, I've information vegetable, animal, and mineral, I know the kings of England, and I quote the fights historical, From Marathon to Waterloo, in order categorical; * I'm very well acquainted too with matters mathematical, I understand equations, both the simple and quadratical, About binomial theorem I'm teeming with a lot o' news--- With many cheerful facts about the square of the hypotenuse.

Absolutely, I mentioned loose list spacing in my post, and I agree. This was just about tight lists and some slight readability enhancements for them. If there’s no interest for it I understand, just thought it might be a nice small enhancement.

@awesomerobot what are your thoughts here?

This makes sense for improving the readability of lists with a lot of text, and I don’t think there are any issues with adding some additional margin between list items by default. Beyond adding: [image] Patrick_David: .cooked li { margin-bottom: 0.2em; } we’d also need to make sure the composer preview is covered, and I’d likely want to add ul li:last-child { margin-bottom: 0; } So we’re not adding additional space to the bottom of the list. I can probably do this at some point this week unless there are any objections.

[image] awesomerobot: ul li:last-child { margin-bottom: 0; } So we’re not adding additional space to the bottom of the list. If the space that’s there is a margin, the vertical space should collapse (I think). If you didn’t want to have to add too many more styles. I was really just thinking the bare minimum to visually offset a new list item w/o the much bigger space from a loose list. Also, thank you all for entertaining this. :slight_smile:

[image] awesomerobot: I can probably do this at some point this week unless there are any objections. I don’t see any need for this. tight list and loose list look correct to me as-is.. anything other than that should be a local site CSS customization.

It’s not as noticeable with trivial lists. I think this is more for lists that tend to get a little… unwieldy. For instance we recently had a post with some new features for darktable: A new module for haze removal The local contrast module can now be pushed much further, it also got a new local laplacian mode Add undo support for masks and more intelligent grouping of undo steps Blending now allows to display individual channels using false colors darktable now supports loading Fujifilm compressed RAFs darktable now supports loading floating point HDR DNGs as written by HDRMERGE We also added channel specific blend modes for Lab and RGB color spaces The base curve module allows for more control of the exposure fusion feature using the newly added bias slider The tonecurve module now supports auto colour adjustment in RGB Add absolute color input as an option to the color look up table module A new X-Trans demosaicing algorithm, Frequency Domain Chroma, was implemented. You can now choose from pre-defined scheduling profiles for OpenCL Speaking of OpenCL, darktable now allows to force-use OpenCL for a specific pixelpipe Xmp sidecar files are no longer written to disk when the content didn’t actually change. That mostly helps with network storage and backup systems that use files’ time stamps My thought about it was that each list item is usually expected to be read in a similar way you would read a paragraph. That is, it’s a logical grouping that are very slightly offset in order to visually group them together. Each paragraph element has roughly 1em of margin above and below it in, and this helps to visually offset the grouping. I was thinking that list elements are usually read in the same way - that is each item is usually intended to stand visually on it’s own and slightly apart from other items. In this case the actual height between tight list items is the same as the line height overall. This causes the list to visually lack a vertical break (apart from the bullet itself, of course). (Of course, it could be reasoned that a loose list is the go-to in this case, and I’d be inclined to agree - this is really splitting hairs I realize.) Either way, I appreciate y’all taking the time to check it out. I’ll probably add it custom on my side if it doesn’t go upstream.

I don’t agree with your rationale as a global default. Per site, people should do what they want, but as a global default for the world, line spacing should work like so: a line another line a list item another list item Those are equivalent, as they should be.

Minor CSS Change Proposal

Development

Falco (Falco) December 19, 2017, 8:28pm 6

We just need to keep loose and tight lists different enough, so the user can pick the more appropriate for the occasion.

Topic		Replies	Views
Weird list margins behavior? UX	1	589	March 20, 2023
HTML list item spacing Product Support	2	1055	February 6, 2015
List numbers rendered incorrectly Bug	2	560	April 5, 2022
Markdown nested lists have different vertical padding for different bullet depths Product Support	9	4569	January 10, 2019
List formatting breaks when there's an empty line separating them Product Support	7	1834	September 29, 2018

Minor CSS Change Proposal

Related topics