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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<meta name="generator" content="Doxygen 1.8.8"/>
<title>Dillo: Handling Elements Out Of Flow</title>
<link href="tabs.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://www.dillo.org/dw/html/jquery.js"></script>
<script type="text/javascript" src="dynsections.js"></script>
<link href="doxygen.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
<div id="titlearea">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr style="height: 56px;">
<td style="padding-left: 0.5em;">
<div id="projectname">Dillo
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- end header part -->
<!-- Generated by Doxygen 1.8.8 -->
<div id="navrow1" class="tabs">
<ul class="tablist">
<li><a href="index.html"><span>Main Page</span></a></li>
<li class="current"><a href="pages.html"><span>Related Pages</span></a></li>
<li><a href="namespaces.html"><span>Namespaces</span></a></li>
<li><a href="annotated.html"><span>Classes</span></a></li>
<li><a href="files.html"><span>Files</span></a></li>
</ul>
</div>
</div><!-- top -->
<div class="header">
<div class="headertitle">
<div class="title">Handling Elements Out Of Flow </div> </div>
</div><!--header-->
<div class="contents">
<div class="textblock"><h1>Introduction </h1>
<p>This texts deals with both floats and positioned elements, which have in common that there is a distinction between generating block and containing block (we are here using the same notation as in the CSS 2 specification). Consider this snippet (regarding floats):</p>
<pre class="fragment"><ul>
<li>Some text.</li>
<li>
<div style="float:right; width=50%">Some longer text, so
that the effect described in this passage can be
demonstrated.
</div>
Some more and longer text.</li>
<li>Final text. Plus some more to demonstrate how text flows
around the float on the right side.</li>
</ul>
</pre><p>which may be rendered like this</p>
<div class="image">
<img src="dw-floats-01.png" alt="dw-floats-01.png"/>
</div>
<p>The float (the DIV section, yellow in the image) is defined ("generated") within the list item (blue), so, in CSS 2 terms, the list item is the generating block of the float. However, as the image shows, the float is not contained by the list item, but another block, several levels above (not shown here). In terms of <a class="el" href="namespacedw.html" title="Dw is in this namespace, or sub namespaces of this one. ">dw</a>, this means that the <a class="el" href="classdw_1_1Textblock.html" title="A Widget for rendering text blocks, i.e. paragraphs or sequences of paragraphs. ">dw::Textblock</a> representing the float cannot be a child of the <a class="el" href="classdw_1_1Textblock.html" title="A Widget for rendering text blocks, i.e. paragraphs or sequences of paragraphs. ">dw::Textblock</a> representing the generating block, the list item, since the allocation of a child widget must be within the allocation of the parent widget. Instead, to each <a class="el" href="classdw_1_1Textblock.html" title="A Widget for rendering text blocks, i.e. paragraphs or sequences of paragraphs. ">dw::Textblock</a>, another <a class="el" href="classdw_1_1Textblock.html" title="A Widget for rendering text blocks, i.e. paragraphs or sequences of paragraphs. ">dw::Textblock</a> is assigned as the containing box.</p>
<p>(Notice also that other text blocks must regard floats to calculate their borders, and so their size. In this example, the following list item (green) must consider the position of the float. This is discussed in detail in the next section.)</p>
<h1>Implementation overview </h1>
<ul>
<li><a class="el" href="classdw_1_1oof_1_1OOFAwareWidget.html" title="Base class for widgets which can act as container and generator for widgets out of flow...">dw::oof::OOFAwareWidget</a> is the base for both generators and containers. <a class="el" href="classdw_1_1Textblock.html" title="A Widget for rendering text blocks, i.e. paragraphs or sequences of paragraphs. ">dw::Textblock</a> and <a class="el" href="classdw_1_1Table.html" title="A Widget for rendering tables. ">dw::Table</a> are based on this, but <a class="el" href="classdw_1_1Table.html" title="A Widget for rendering tables. ">dw::Table</a> is only relevant for positioned elements, so much simpler than <a class="el" href="classdw_1_1Textblock.html" title="A Widget for rendering text blocks, i.e. paragraphs or sequences of paragraphs. ">dw::Textblock</a>.</li>
<li>Different containers for floats, absolutely positioned elements etc.</li>
<li>If a widget is out of flow, the generating widget keeps a reference with the type <a class="el" href="structdw_1_1core_1_1Content.html#a41c29111b049db05a8de25b2e1ca4bd5a4c8a19a7c367471bad79ceab8c7c685e" title="reference to a widget out of flow (OOF); this widget (containing this content) is only the generator ...">dw::core::Content::WIDGET_OOF_REF</a>, while the containing block refers to it as <a class="el" href="structdw_1_1core_1_1Content.html#a41c29111b049db05a8de25b2e1ca4bd5a9b3fac13d3f8c955fc2bb9fa143fe3d9" title="widget out of flow (OOF); this widget (containing this content) is only the container (parent)...">dw::core::Content::WIDGET_OOF_CONT</a>. For widgets within flow, <a class="el" href="structdw_1_1core_1_1Content.html#a41c29111b049db05a8de25b2e1ca4bd5a7e1923bd8e88b36e3d08bd1107aa11ed" title="widget in normal flow, so that this widget (containing this content) is both container (parent) and g...">dw::core::Content::WIDGET_IN_FLOW</a> is used. Notice that in the first case, there are two pieces of content referring to the same widget. An application of this distinction is iterators. (For selection and searching, the generating hierarchy is used, whih is different from the widget hierarchy.)</li>
</ul>
<p>Handling widgets out of flow is partly the task of class implementing <a class="el" href="classdw_1_1oof_1_1OutOfFlowMgr.html" title="Represents additional data for OOF containers. ">dw::oof::OutOfFlowMgr</a>, which is stored by <a class="el" href="classdw_1_1oof_1_1OOFAwareWidget.html#a2c786190fdba74e1233f0b7f913f1953">dw::oof::OOFAwareWidget::outOfFlowMgr</a>, but only for containing blocks. Generating blocks should refer to <em>container->outOfFlowMgr[...]</em>.</p>
<p>Overview of the <a class="el" href="classdw_1_1oof_1_1OutOfFlowMgr.html" title="Represents additional data for OOF containers. ">dw::oof::OutOfFlowMgr</a> hierarchy;</p>
<div align="center">
<img src="dot_inline_dotgraph_5.png" alt="dot_inline_dotgraph_5.png" border="0" usemap="#dot_inline_dotgraph_5.map"/>
<map name="dot_inline_dotgraph_5.map" id="dot_inline_dotgraph_5.map"><area shape="rect" id="node1" href="classdw_1_1oof_1_1OutOfFlowMgr.html" title="\N" alt="" coords="87,5,194,55"/><area shape="rect" id="node2" href="classdw_1_1oof_1_1OOFFloatsMgr.html" title="\N" alt="" coords="15,103,123,152"/><area shape="rect" id="node3" href="classdw_1_1oof_1_1OOFPositionedMgr.html" title="\N" alt="" coords="147,103,281,152"/><area shape="rect" id="node4" href="classdw_1_1oof_1_1OOFPosAbsLikeMgr.html" title="\N" alt="" coords="67,200,209,249"/><area shape="rect" id="node7" href="classdw_1_1oof_1_1OOFPosRelMgr.html" title="\N" alt="" coords="234,200,349,249"/><area shape="rect" id="node5" href="classdw_1_1oof_1_1OOFPosAbsMgr.html" title="\N" alt="" coords="5,297,124,347"/><area shape="rect" id="node6" href="classdw_1_1oof_1_1OOFPosFixedMgr.html" title="\N" alt="" coords="148,297,275,347"/></map>
</div>
<h1>Further details </h1>
<ul>
<li><a class="el" href="dw-out-of-flow-floats.html">Handling Elements Out Of Flow: Floats</a></li>
<li><a class="el" href="dw-out-of-flow-positioned.html">Handling Elements Out Of Flow: Positioned Elements</a> </li>
</ul>
</div></div><!-- contents -->
<!-- start footer part -->
<hr class="footer"/><address class="footer"><small>
Generated on Sat May 28 2016 11:47:43 for Dillo by  <a href="http://www.doxygen.org/index.html">
<img class="footer" src="doxygen.png" alt="doxygen"/>
</a> 1.8.8
</small></address>
</body>
</html>
|
