Description
I reduced a layout issue on https://herbie.uwplse.org/ to the following code block:
<!doctype html>
<style>
ul {
width: 1rem;
border: 1px solid black;
list-style-position: inside;
}
</style>
<ul>
<li>Text</li>
</ul>The Chrome rendering looks like this:
The 1rem width is too small to fit the content, which forces the maximum number of line breaks. Because the list has list-style-position: inside, the marker (bullet) is the first inline box in the <li> and therefore the first line is just the bullet and the second line is the word. Here's the standard text:
The marker box is placed as the first inline box in the principal block box, before the element's content and before any
:beforepseudo-elements. CSS 2.1 does not specify the precise location of the marker box.
Here's the Ladybird rendering:
It's not just a line breaking issue; if I add a second word to the HTML you get this:
