1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
This document gives an example of how a given rendering of inline elements,
with its associated HTML code, will map to 2 different trees:
-a tree of render objects, mirroring the corresponding DOM tree.
-a tree of lineboxes reflecting how inline-level render objects are laid out in distinct lines inside
block-level elements. (cf. https://www.w3.org/TR/CSS2/visuren.html#inline-formatting and https://www.w3.org/TR/CSS2/visudet.html#line-height)
Rendering:
=========
_________________
|Lorem ipsum dolor|
|sit amet. |
|_________________|
=> 1 block level element
=> 2 lines (because of wrapping).
HTML:
====
<div>Lorem <span>ipsum <i>dolor sit</i> amet.</span></div>
Render tree:
===========
[RenderBlock1
[RenderText1 "Lorem "]
[RenderInline1
[RenderText2 "ipsum "]
[RenderInline2
[RenderText3 "dolor sit"]
]
[RenderText4 " amet."]
]
]
Linebox tree:
============
[RootInlineBox1
[InlineTextBox1 "Lorem"]
[InlineFlowBox1
[InlineTextBox2 "ipsum"]
[InlineFlowBox3
[InlineTextBox3 "dolor"]
]
]
]
[RootInlineBox2
[InlineFlowBox2
[InlineFlowBox4
[InlineTextBox4 "sit"]
]
[InlineTextBox5 " amet."]
]
]
Linkage of LineBox tree:
========================
(just for first line:)
RootBox1->nextOnLine() == InlineTextBox1 ->nextOnLine() == InlineFlowBox1 -> nextOnLine() == InlineTextBox2 ->
nextOnLine() == InlineFlowBox2-> nextOnLine() == InlineTextBox2 ->nextOnLine() == InlineFlowBox2 ->
nextOnLine() == InlineTextBox3
Correspondence Render tree / Linebox tree:
==========================================
(just for some objects:)
( RenderBlock1 -> firstLineBox() == RootBox1 ) ->nextLineBox() == (RootBox2 == RenderBlock1 -> lastLineBox() )
( RenderInline1 ->firstLineBox() == InlineFlowBox1 ) -> nextLineBox() == (InlineFlowBox2 == RenderInline1 -> lastLineBox() )
( RenderText3 -> firstTextBox() == InlineTextBox3 ) -> nextTextBox() == (InlineTextBox4 == RenderText3 -> lastLineBox() )
|
