mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-09-03 16:16:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Improve graphical list item marker positioning

Browse source 
While 788d5368a7 took care of better text
marker positioning, this improves graphical marker positioning instead.

By looking at how Firefox and Chrome render markers, it's clear that
there are three parts to positioning a graphical marker:

  * The containing space that the marker resides in;
  * The marker dimensions;
  * The distance between the marker and the start of the list item.

The space that the marker can be contained in, is the area to the left
of the list item with a height of the marker's line-height. The marker
dimensions are relative to the marker's font's pixel size: most of them
are a square at 35% of the font size, but the disclosure markers are
sized at 50% instead. Finally, the marker distance is always gauged at
50% of the font size.

So for example, a list item with `list-style-type: disc` and `font-size:
20px`, has 10px between its start and the right side of the marker, and
the marker's dimensions are 7x7.

The percentages I've chosen closely resemble how Firefox lays out its
list item markers.
This commit is contained in:
Jelle Raaijmakers 2025-07-16 21:35:09 +02:00 • committed by Sam Atkins
commit 115e5f42af
Notes: github-actions[bot] 2025-07-17 08:36:21 +00:00
21 changed files with 187 additions and 171 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Tests/LibWeb/Layout/expected/css-pseudo-element-display-list-item.txt
View file

@ -9,7 +9,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
ListItemBox <(anonymous)> at (24,26) content-size 768x18 children: inline
frag 0 from TextNode start: 0, length: 11, rect: [24,26 88.703125x18] baseline: 13.796875
"Filler Text"
ListItemMarkerBox <(anonymous)> at (0,27) content-size 12x16 children: not-inline
ListItemMarkerBox <(anonymous)> at (10,32) content-size 6x6 children: not-inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,44) content-size 784x0 children: inline
TextNode <#text>
@ -21,7 +21,7 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x18]
TextPaintable (TextNode<#text>)
PaintableWithLines (ListItemBox(anonymous)) [24,26 768x18]
MarkerPaintable (ListItemMarkerBox(anonymous)) [0,27 12x16]
MarkerPaintable (ListItemMarkerBox(anonymous)) [10,32 6x6]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,44 784x0]