summaryrefslogtreecommitdiff
path: root/documentation/layout.mdwn
blob: 414253f2e6f91607d8d64ce84a9963dd1b22ec45 (plain)
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
[[!meta title="Documentation/Layout"]]
[[!meta author="James Bursa"]]
[[!meta date="2011-11-26T22:20:06Z"]]


[[!toc]] The modules in the render
directory process and layout HTML pages.

Overview
--------

This is the process to render an HTML document:

First the HTML is parsed to a tree of xmlNodes using the HTML parser in
libxml. This happens simultaneously with the fetch
[html\_process\_data()].

Any stylesheets which the document depends on are fetched and parsed.

The tree is converted to a 'box tree' by xml\_to\_box(). The box tree
contains a node for each block, inline element, table, etc. The aim of
this stage is to determine the 'display' or 'float' CSS property of each
element, and create the corresponding node in the box tree. At this
stage the style for each element is also calculated (from CSS rules and
element attributes). The tree is normalised so that each node only has
children of permitted types (eg. TABLE\_CELLs must be within
TABLE\_ROWs) by adding missing boxes.

The box tree is passed to the layout engine [layout\_document()], which
finds the space required by each element and assigns coordinates to the
boxes, based on the style of each element and the available width. This
includes formatting inline elements into lines, laying out tables, and
positioning floats. The layout engine can be invoked again on a already
laid out box tree to reformat it to a new width. Coordinates in the box
tree are relative to the position of the parent node.

The box tree can then be rendered using each node's coordinates.

Lists
-----

Lists are one or more elements with 'display: list-item' (which is set
for 'li' by the default CSS). A list-item is constructed as a BLOCK box
and a box for the marker attached at block-\>list\_marker. The marker
contains the bullet, number, or similar, depending on the
list-style-type.

Layout of the block is as normal. A pass of layout after main layout
places list marker boxes to the left of their block (see
layout\_lists()).

Absolute positioning
--------------------

Absolutely positioned boxes are constructed in the box tree in the same
place as if they were not absolutely positioned. Inline boxes are
created as INLINE\_BLOCK, tables as TABLE, and other boxes as BLOCK (see
box\_solve\_display()).

During layout, absolutely positioned boxes in block context (BLOCK or
TABLE) are given a position in layout\_block\_context(), but treated as
having no height. In inline context (INLINE\_BLOCK), they are given a
position in layout\_line(), but treated as having no width or height.
This is done to determine the static position.

An additional pass after main layout positions and layouts all
absolutely positioned boxes (see layout\_position\_absolute()).

[[!inline raw=yes pages="Documentation"]]