mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-10-22 16:09:23 +00:00
115e5f42af
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.
103 lines
6.1 KiB
Text
103 lines
6.1 KiB
Text
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
|
BlockContainer <html> at (0,0) content-size 800x174 [BFC] children: not-inline
|
|
BlockContainer <body> at (8,16) content-size 784x142 children: not-inline
|
|
BlockContainer <ol> at (48,16) content-size 744x54 children: not-inline
|
|
BlockContainer <(anonymous)> at (48,16) content-size 744x0 children: inline
|
|
TextNode <#text>
|
|
ListItemBox <li> at (48,16) content-size 744x18 children: inline
|
|
frag 0 from TextNode start: 0, length: 7, rect: [48,16 58.78125x18] baseline: 13.796875
|
|
"Item 20"
|
|
ListItemMarkerBox <(anonymous)> at (17,17) content-size 30.75x16 children: not-inline
|
|
TextNode <#text>
|
|
BlockContainer <(anonymous)> at (48,34) content-size 744x0 children: inline
|
|
TextNode <#text>
|
|
ListItemBox <li> at (48,34) content-size 744x18 children: inline
|
|
frag 0 from TextNode start: 0, length: 7, rect: [48,34 55.53125x18] baseline: 13.796875
|
|
"Item 21"
|
|
ListItemMarkerBox <(anonymous)> at (20,35) content-size 27.5x16 children: not-inline
|
|
TextNode <#text>
|
|
BlockContainer <(anonymous)> at (48,52) content-size 744x0 children: inline
|
|
TextNode <#text>
|
|
ListItemBox <li> at (48,52) content-size 744x18 children: inline
|
|
frag 0 from TextNode start: 0, length: 7, rect: [48,52 58x18] baseline: 13.796875
|
|
"Item 22"
|
|
ListItemMarkerBox <(anonymous)> at (18,53) content-size 29.96875x16 children: not-inline
|
|
TextNode <#text>
|
|
BlockContainer <(anonymous)> at (48,70) content-size 744x0 children: inline
|
|
TextNode <#text>
|
|
BlockContainer <(anonymous)> at (8,86) content-size 784x0 children: inline
|
|
TextNode <#text>
|
|
BlockContainer <ol> at (48,86) content-size 744x72 children: not-inline
|
|
BlockContainer <(anonymous)> at (48,86) content-size 744x0 children: inline
|
|
TextNode <#text>
|
|
ListItemBox <li> at (48,86) content-size 744x18 children: inline
|
|
frag 0 from TextNode start: 0, length: 6, rect: [48,86 46.71875x18] baseline: 13.796875
|
|
"Item 1"
|
|
ListItemMarkerBox <(anonymous)> at (29,87) content-size 18.6875x16 children: not-inline
|
|
TextNode <#text>
|
|
BlockContainer <(anonymous)> at (48,104) content-size 744x0 children: inline
|
|
TextNode <#text>
|
|
ListItemBox <li> at (48,104) content-size 744x18 children: inline
|
|
frag 0 from TextNode start: 0, length: 6, rect: [48,104 48.828125x18] baseline: 13.796875
|
|
"Item 5"
|
|
ListItemMarkerBox <(anonymous)> at (27,105) content-size 20.796875x16 children: not-inline
|
|
TextNode <#text>
|
|
BlockContainer <(anonymous)> at (48,122) content-size 744x0 children: inline
|
|
TextNode <#text>
|
|
ListItemBox <li> at (48,122) content-size 744x18 children: inline
|
|
frag 0 from TextNode start: 0, length: 6, rect: [48,122 49.109375x18] baseline: 13.796875
|
|
"Item 6"
|
|
ListItemMarkerBox <(anonymous)> at (27,123) content-size 21.078125x16 children: not-inline
|
|
TextNode <#text>
|
|
BlockContainer <(anonymous)> at (48,140) content-size 744x0 children: inline
|
|
TextNode <#text>
|
|
ListItemBox <li> at (48,140) content-size 744x18 children: inline
|
|
frag 0 from TextNode start: 0, length: 6, rect: [48,140 49.09375x18] baseline: 13.796875
|
|
"Item 7"
|
|
ListItemMarkerBox <(anonymous)> at (27,141) content-size 21.0625x16 children: not-inline
|
|
TextNode <#text>
|
|
BlockContainer <(anonymous)> at (48,158) content-size 744x0 children: inline
|
|
TextNode <#text>
|
|
BlockContainer <(anonymous)> at (8,174) content-size 784x0 children: inline
|
|
TextNode <#text>
|
|
|
|
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
|
PaintableWithLines (BlockContainer<HTML>) [0,0 800x174]
|
|
PaintableWithLines (BlockContainer<BODY>) [8,16 784x142]
|
|
PaintableWithLines (BlockContainer<OL>) [8,16 784x54]
|
|
PaintableWithLines (BlockContainer(anonymous)) [48,16 744x0]
|
|
PaintableWithLines (ListItemBox<LI>) [48,16 744x18]
|
|
MarkerPaintable (ListItemMarkerBox(anonymous)) [17,17 30.75x16]
|
|
TextPaintable (TextNode<#text>)
|
|
PaintableWithLines (BlockContainer(anonymous)) [48,34 744x0]
|
|
PaintableWithLines (ListItemBox<LI>) [48,34 744x18]
|
|
MarkerPaintable (ListItemMarkerBox(anonymous)) [20,35 27.5x16]
|
|
TextPaintable (TextNode<#text>)
|
|
PaintableWithLines (BlockContainer(anonymous)) [48,52 744x0]
|
|
PaintableWithLines (ListItemBox<LI>) [48,52 744x18]
|
|
MarkerPaintable (ListItemMarkerBox(anonymous)) [18,53 29.96875x16]
|
|
TextPaintable (TextNode<#text>)
|
|
PaintableWithLines (BlockContainer(anonymous)) [48,70 744x0]
|
|
PaintableWithLines (BlockContainer(anonymous)) [8,86 784x0]
|
|
PaintableWithLines (BlockContainer<OL>) [8,86 784x72]
|
|
PaintableWithLines (BlockContainer(anonymous)) [48,86 744x0]
|
|
PaintableWithLines (ListItemBox<LI>) [48,86 744x18]
|
|
MarkerPaintable (ListItemMarkerBox(anonymous)) [29,87 18.6875x16]
|
|
TextPaintable (TextNode<#text>)
|
|
PaintableWithLines (BlockContainer(anonymous)) [48,104 744x0]
|
|
PaintableWithLines (ListItemBox<LI>) [48,104 744x18]
|
|
MarkerPaintable (ListItemMarkerBox(anonymous)) [27,105 20.796875x16]
|
|
TextPaintable (TextNode<#text>)
|
|
PaintableWithLines (BlockContainer(anonymous)) [48,122 744x0]
|
|
PaintableWithLines (ListItemBox<LI>) [48,122 744x18]
|
|
MarkerPaintable (ListItemMarkerBox(anonymous)) [27,123 21.078125x16]
|
|
TextPaintable (TextNode<#text>)
|
|
PaintableWithLines (BlockContainer(anonymous)) [48,140 744x0]
|
|
PaintableWithLines (ListItemBox<LI>) [48,140 744x18]
|
|
MarkerPaintable (ListItemMarkerBox(anonymous)) [27,141 21.0625x16]
|
|
TextPaintable (TextNode<#text>)
|
|
PaintableWithLines (BlockContainer(anonymous)) [48,158 744x0]
|
|
PaintableWithLines (BlockContainer(anonymous)) [8,174 784x0]
|
|
|
|
SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)
|
|
SC for BlockContainer<HTML> [0,0 800x174] [children: 0] (z-index: auto)
|