Skip to content

Commit 593ac2e

Browse files
bert-githubbert-github
committed
[css2] Issues 157 and 158.
--HG-- extra : convert_revision : svn%3A73dc7c4b-06e6-40f3-b4f7-9ed1dbc14bfc/trunk%403047
1 parent b850d95 commit 593ac2e

1 file changed

Lines changed: 89 additions & 24 deletions

File tree

‎css2/visuren.src‎

Lines changed: 89 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
22
<html lang="en">
3-
<!-- $Id: visuren.src,v 2.166 2010-10-05 19:26:22 bbos Exp $ -->
3+
<!-- $Id: visuren.src,v 2.167 2010-10-13 15:38:59 bbos Exp $ -->
44
<head>
55
<title>Visual formatting model</title>
66
<meta name="editor" lang="tr" content="Tantek &Ccedil;elik">
@@ -11,6 +11,10 @@ del.proposed,span.delproposed { background:#fbb }
1111
span.insproposed,li.insproposed { text-decoration:underline }
1212
span.delproposed,span.delcurrent { text-decoration:line-through }
1313
body>del,body>ins {display:block}
14+
blockquote.math {display: table}
15+
blockquote.math p {display: table-row}
16+
blockquote.math span {display: table-cell; padding-right: 0.3em}
17+
blockquote.math span:first-child {text-align: right}
1418
</style>
1519
</head>
1620
<body>
@@ -1374,39 +1378,100 @@ id="clearance">clearance.</dfn> Clearance inhibits margin collapsing
13741378
and acts as spacing above the margin-top of an element. It is used to
13751379
push the element vertically past the float.
13761380

1377-
<p>
1378-
Computing the clearance of an element on which 'clear' is set is done by first determining the hypothetical position of the element's top border edge within its parent block. This position is determined after the top margin of the element has been collapsed with previous adjacent margins (including the top margin of the parent block).
1379-
</p>
1380-
<p>
1381-
If this hypothetical position of the element's top border edge is not
1382-
past the relevant floats, then clearance is introduced and must be set
1383-
to the greater of:
1384-
</p>
1381+
<p>Computing the clearance of an element on which 'clear' is set is
1382+
done by first determining the hypothetical position of the element's
1383+
top border edge within its parent block. This position is the same as
1384+
the where the actual top border edge would have been if the element
1385+
had a non-zero top border and its 'clear' property had been 'none'.
1386+
1387+
<p>If this hypothetical position of the element's top border edge is
1388+
not past the relevant floats, then clearance is introduced, and
1389+
margins collapse according to the rules in 8.3.1.
1390+
1391+
<p>Then the amount of clearance is set to the greater of:
1392+
13851393
<ol>
13861394
<li>The amount necessary to place the border edge of the block even
13871395
with the bottom outer edge of the lowest float that is to be
13881396
cleared.
13891397

1390-
<li>The amount necessary to make the sum of the following equal to
1391-
the distance to which these margins collapsed when the hypothetical
1392-
position was calculated:
1393-
<ul>
1394-
<li>the margins collapsing above the clearance
1395-
1396-
<li>the clearance itself
1397-
1398-
<li>if the block's own margins collapse together: the block's top
1399-
margin
1400-
1401-
<li>if the block's own margins do not collapse together: the
1402-
margins collapsing below the clearance
1403-
</ul>
1398+
<li>The amount necessary to place the top border edge of the block
1399+
at its hypothetical position.
14041400
</ol>
14051401
<p class=note>
14061402
Note: The clearance can be negative or zero.
14071403

14081404
<div class=example>
1409-
<p>An example of negative clearance is this situation, in which the
1405+
<p>Example 1. Assume (for the sake of simplicity), that we have just
1406+
three boxes, in this order: block B1 with a bottom margin of M1 (B1
1407+
has no children and no padding or border), floating block F with a
1408+
height H, and block B2 with a top margin of M2 (no padding or border,
1409+
no children). B2 has 'clear' set to 'both'. We also assume B2 is not
1410+
empty.
1411+
1412+
<p>Without considering the 'clear' property on B2, we have the situation in
1413+
the diagram below. The margins of B1 and B2 collapse. Let's say the
1414+
bottom border edge of B1 is at y = 0, then the top of F is at y = M1,
1415+
the top border edge of B2 is at y = max(M1,M2), and the bottom of F is
1416+
at y = M1 + H.
1417+
1418+
<div class="figure">
1419+
<p><img src="./images/clearance.png"
1420+
alt="Float F extends into the margin above M2."></p>
1421+
</div>
1422+
1423+
<p>We also assume that B2 is not below F, i.e., we are in the
1424+
situation described in the spec where we need to add clearance. That
1425+
means:
1426+
1427+
<blockquote>
1428+
<p>max(M1,M2) &lt; M1 + H
1429+
</blockquote>
1430+
1431+
<p>We need to compute clearance C twice, C1 and C2, and
1432+
keep the greater of the two: C = max(C1,C2). The first way is to put
1433+
the top of B2 flush with the bottom of F, i.e., at y = M1 + H. That
1434+
means, because the margins no longer collapse with a clearance between
1435+
them:
1436+
1437+
<blockquote class=math>
1438+
<p> <span>bottom of F</span> <span>= top border edge of B2</span> <span>&#8660;</span>
1439+
<p> <span>M1 + H</span> <span>= M1 + C1 + M2</span> <span>&#8660;</span>
1440+
<p> <span>C1</span> <span>= M1 + H - M1 - M2</span>
1441+
<p> <span></span> <span>= H - M2</span>
1442+
</blockquote>
1443+
1444+
<p>The second computation is to keep the top of B2 where it is, i.e., at y
1445+
= max(M1,M2). That means:
1446+
1447+
<blockquote class=math>
1448+
<p> <span>max(M1,M2)</span> <span>= M1 + C2 + M2</span> <span>&#8660;</span>
1449+
<p> <span>C2</span> <span>= max(M1,M2) - M1 - M2</span>
1450+
</blockquote>
1451+
1452+
<p>We assumed that max(M1,M2) &lt; M1 + H, which implies
1453+
1454+
<blockquote class=math>
1455+
<p> <span>C2 = max(M1,M2) - M1 - M2</span> <span>&lt; M1 + H - M1 - M2 = H - M2</span> <span>&#8658;</span>
1456+
<p> <span>C2</span> <span>&lt; H - M2</span>
1457+
</blockquote>
1458+
1459+
<p>And, as C1 = H - M2, it follows that
1460+
1461+
<blockquote class=math>
1462+
<p> <span>C2 &lt; C1</span>
1463+
</blockquote>
1464+
1465+
<p>and hence
1466+
1467+
<blockquote class=math>
1468+
<p> <span>C = max(C1,C2) = C1</span>
1469+
</blockquote>
1470+
</div>
1471+
1472+
<div class=example>
1473+
<p>Example 2. An example of negative clearance is this situation, in
1474+
which the
14101475
clearance is -1em. (Assume none of the elements have borders or
14111476
padding):
14121477

0 commit comments

Comments
 (0)