[css-multicol] disappearing list markers

> On Mar 9, 2017, at 09:54, Dael Jackson <daelcss@gmail.com> wrote:
> 
>  <jensimmons> btw there’s a very annoying bug in multicolumn that I
>               was running into again yesterday. Here’s a demo.
>               http://codepen.io/jensimmons/pen/QpdyMr The list
>               styling is missing from any column but the first one
>               in Safari and Chrome. Likely an old webkit bug (from
>               before the fork). It would be good to fix this.

This isn't so much as a layout engine bug as a very annoying side effect of the way the default UA stylesheet for lists is written:

ol and ul have "padding-left: 40px;" in the UA stylesheet (or rather 'padding-start: 40px', with logical properties), and it is in that 40px area that the list counters and bullets get shown, since they are off to the left (start) of the list items' boxes. This already is terrible when you use a very large font size, as your bullets/counters may end up overflowing the list, but gigantic font sizes are rare enough that it doesn't happen all that often.

The problem with multicol is that when you turn an ol or an ul into a multicol, the padding is applied to the multicolumn as a whole, not to each individual column box, So effectively, the first column gets it, and the other columns do not. So, since there isn't a 40px space to show the list item markers, they overflow the column box, and get clipped. If you put your ul / ol in a div / article / section / ... and turn that into a multicol, the "bug" goes away.

It is still terrible, as you do not always have a wrapper element, and CSS should be sane and robust.

The right way to do it is to use a 40px (or even better 2.5em) margin on the li instead of a padding on the ul/ol, and authors can do just that. But as far as I know, we cannot fix the default style, as too much of the web depends on it.

Maybe someone smarter can think of a way of fixing this issue without breaking the web.

—Florian

Received on Thursday, 9 March 2017 06:21:18 UTC