8000 [css3-page] Rewrite 6.3.2 Margin Box Variable Dimension (again) · w3c/csswg-drafts@0393635 · GitHub
Skip to content

Commit 0393635

Browse files
SimonSapinSimonSapin
committed
[css3-page] Rewrite 6.3.2 Margin Box Variable Dimension (again)
While in the previous iteration the layout of page-margin boxes was similar to floats, it is now closer to normal blocks. The biggest change is that boxes with 'width: auto' tend to occupy all of the available space, even if max-content is smaller than that. Also, they do not always get at least min-content anymore. If a sentence has one very long word that has to overflow, there is no reason that other lines should be allowed to overflow too. Lastly, this new algorithm should be saner when mixing auto and non-auto widths.
1 parent 24b52eb commit 0393635

2 files changed

Lines changed: 169 additions & 235 deletions

File tree

‎css3-page/Overview.html‎

Lines changed: 78 additions & 134 deletions
<meta content="Håkon Wium Lie" name=dcterms.creator>
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@
99
rel=dcterms.rights>
1010
<meta content=" CSS Paged Media Module Level 3" name=dcterms.title>
1111
<meta content=text name=dcterms.type>
12-
<meta content=2012-11-05 name=dcterms.issued>
12+
<meta content=2012-11-24 name=dcterms.issued>
1313
<meta content="Melinda Grant" name=dcterms.creator>
1414
1515
<meta content="Elika J. Etemad" name=dcterms.creator>
1616
<meta content=W3C name=dcterms.publisher>
17-
<meta content="http://www.w3.org/TR/2012/ED-css3-page-20121105/"
17+
<meta content="http://www.w3.org/TR/2012/ED-css3-page-20121124/"
1818
name=dcterms.identifier>
1919
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
2020
<link href="../default.css" rel=stylesheet type="text/css">
@@ -99,14 +99,14 @@
9999

100100
<h1>CSS Paged Media Module Level 3</h1>
101101

102-
<h2 class="no-num no-toc" id=w3c-working>Editor's Draft 5 November 2012</h2>
102+
<h2 class="no-num no-toc" id=w3c-working>Editor's Draft 24 November 2012</h2>
103103

104104
<dl>
105105
<dt>This version:
106106

107107
<dd><a
108108
href="http://dev.w3.org/csswg/css3-page/">http://dev.w3.org/csswg/css3-page/</a></dd>
109-
<!-- <dd><a href="http://www.w3.org/TR/2012/ED-css3-page-20121105/">http://www.w3.org/TR/2012/WD-css3-page-20121105</a></dd> -->
109+
<!-- <dd><a href="http://www.w3.org/TR/2012/ED-css3-page-20121124/">http://www.w3.org/TR/2012/WD-css3-page-20121124</a></dd> -->
110110

111111
<dt>Latest version:
112112

@@ -191,7 +191,7 @@ <h2 class="no-num no-toc" id=status>Status of this Document</h2>
191191
<p>This document contains the <abbr
192192
title="Cascading Style Sheets">CSS3</abbr> Paged Media Module W3C Last
193193
Call <a href="/2005/10/Process-20051014/tr.html#RecsWD">Working Draft</a>
194-
of 5 November 2012. The Last Call period ends on <span
194+
of 24 November 2012. The Last Call period ends on <span
195195
class=fudge>TBD</span>.
196196

197197
<p>Relative to the previous Last Call Working Draft, this version has
@@ -1462,136 +1462,80 @@ <h4 id=margin-dimension><span class=secno>6.3.2. </span>Margin Box
14621462
</ul>
14631463

14641464
<p>The following algorithm determines the used width of each box. For this
1465-
purpose, boxes that are note <a href="#generated"><em>generated</em></a>
1466-
are replaced by empty boxes with all properties set to their initial
1467-
values. In particular, margins, border widths and padding are all zero.
1465+
purpose, boxes that are note <a href="#generated"><i>generated</i></a>
1466+
are assumed to have a ‘<code class=property>width</code>’ and an <a
1467+
href="#outer-width"><i>outer width</i></a> of zero.
14681468

14691469
<p class=note> Note: The high-level goals are (in order of priority) to
14701470
center the middle box (B) if it is generated, to minimize overflow and
14711471
overlap, and to distribute space proportionally to the amount of content.
14721472

1473-
<ul>
1474-
<li>If B is not <a href="#generated"><em>generated</em></a>:
1475-
<ul>
1476-
<li>If both A’s and C’s widths are ‘<code
1477-
class=css>auto</code>’
1478-
<ul>
1479-
<li>If the sum of their <a href="#outer-max-content"><em>outer
1480-
max-content</em></a> is less than or equal to <a
1481-
href="#max-box-width"><var>max box width</var></a>, the used width
1482-
for A and C is the respective ‘<code
1483-
class=css>max-content</code>’.
1484-
1485-
<li>Otherwise,
1486-
<ul>
1487-
<li>Let < 8096 ;var>remaining width</var> be <a
1488-
href="#max-box-width"><var>max box width</var></a> minus A’s and
1489-
C’s <a href="#outer-min-content"><var>outer
1490-
min-content</var></a>
1491-
1492-
<li>If <var>remaining width</var> is negative or zero, the used
1493-
widths for A and C are the respective ‘<code
1494-
class=css>min-content</code>’.
1495-
1496-
<li>Otherwise, the respective used widths for A and C are:
1497-
<code>min-content + (<var>remaining width</var> × weight ÷ sum
1498-
of both weights)</code>, where the respective weights are ‘<code
1499-
class=css>max-content</code>’ minus ‘<code
1500-
class=css>min-content</code>’.
1501-
</ul>
1502-
1503-
<p class=note>Note: Each box gets at least ‘<code
1504-
class=css>min-content</code>’. The remaining space, if any, is
1505-
distributed proportionally to ‘<code
1506-
class=css>max-content</code>’ minus ‘<code
1507-
class=css>min-content</code>’. The rules are construted to never
1508-
divide by zero.
1509-
</ul>
1510-
1511-
<li>Otherwise, if A’s width is ‘<code class=css>auto</code>’, the
1512-
used width is <code>min(max-content, max(min-content,
1513-
available))</code> where <var>available</var> is:
1514-
<ul>
1515-
<li><a href="#max-box-width"><var>max box width</var></a>
1516-
1517-
<li>minus C’s <a href="#outer-width"><i>outer width</i></a>
1518-
1519-
<li>minus A’s own margins, borders and padding
1520-
</ul>
1521-
1522-
<li>Otherwise, if C’s width is ‘<code class=css>auto</code>’, the
1523-
used width is <code>min(max-content, max(min-content,
1524-
available))</code> where <var>available</var> is:
1525-
<ul>
1526-
<li><a href="#max-box-width"><var>max box width</var></a>
1527-
1528-
<li>minus A’s <a href="#outer-width"><i>outer width</i></a>
1529-
1530-
<li>minus C’s own margins, borders and padding
1531-
</ul>
1532-
</ul>
1533-
1534-
<li>Otherwise (if B is generated)
1535-
<ul>
1536-
<li>If B’s width is ‘<code class=css>auto</code>’
1537-
<ul>
1538-
<li>Let <var>AC-min</var> be <code>2 × max(A’s outer min-content,
1539-
C’s outer min-content)</code>.
1540-
1541-
<li>Let <var>AC-max</var> be <code>2 × max(A’s outer max-content,
1542-
C’s outer max-content)</code>.
1543-
1544-
<li>If B’s <a href="#outer-max-content"><i>outer
1545-
max-content</i></a> is less than or equal to <a
1546-
href="#max-box-width"><i>max box width</i></a> minus
1547-
<var>AC-max</var>, the used width for B is ‘<code
1548-
class=css>max-content</code>’.
1549-
1550-
<li>Otherwise, if B’s <a href="#outer-min-content"><i>outer
1551-
min-content</i></a> is greater than <a href="#max-box-width"><i>max
1552-
box width</i></a> minus <var>AC-min</var>, the used width for B is
1553< 6D5F span class="diff-text-marker">-
‘<code class=css>min-content</code>’.
1554-
1555-
<li>Otherwise,
1556-
<ul>
1557-
<li>Let the weight for B be ‘<code
1558-
class=css>max-content</code>’ minus ‘<code
1559-
class=css>min-content</code>’.
1560-
1561-
<li>Let the weight for AC be <var>AC-max</var> minus
1562-
<var>AC-min</var>
1563-
1564-
<li>The used width for B is: <code>min-content + (remaining ×
1565-
weight ÷ sum of both weights)</code>, where <var>remaining</var>
1566-
is <a href="#max-box-width"><i>max box width</i></a> minus
1567-
<var>AC-min</var> minus B’s <a
1568-
href="#outer-min-content"><i>outer min-content</i></a>.
1569-
</ul>
1570-
</ul>
1571-
1572-
<li>Then, if A’s width is ‘<code class=css>auto</code>’, the used
1573-
width is <code>min(max-content, max(min-content, available))</code>
1574-
where <var>available</var> is:
1575-
<ul>
1576-
<li>half of <a href="#max-box-width"><var>max box width</var></a>
1577-
1578-
<li>minus half of B’s <a href="#outer-width"><i>outer width</i></a>
1579-
1580-
<li>minus the A’s own margins, borders and padding
1581-
</ul>
1582-
1583-
<li>Then, if C’s width is ‘<code class=css>auto</code>’, the used
1584-
width is <code>min(max-content, max(min-content, available))</code>
1585-
where <var>available</var> is:
1586-
<ul>
1587-
<li>half of <a href="#max-box-width"><var>max box width</var></a>
1588-
1589-
<li>minus half of B’s <a href="#outer-width"><i>outer width</i></a>
1590-
1591-
<li>minus the C’s own margins, borders and padding
1592-
</ul>
1593-
</ul>
1594-
</ul>
1473+
<ol>
1474+
<li> If B is not <a href="#generated"><i>generated</i></a>:
1475+
<ol>
1476+
<li> If only box has ‘<code class=css>width: auto</code>’, its used
1477+
width is resolved so that the sum of the <a
1478+
href="#outer-width"><i>outer width</i></a>s equals <a
1479+
href="#max-box-width"><i>max box width</i></a>.
1480+
1481+
<li> If A and C both have ‘<code class=css>width: auto</code>’:
1482+
<ol>
1483+
<li> Let <i>free space</i> be <a href="#max-box-width"><i>max box
1484+
width</i></a> minus A’s and C’s <i>outer min-content width</i>.
1485+
1486+
<li> If <i>free space</i> is positive, let the respective
1487+
<i>weight</i> for A and C be <i>max-content</i> minus
1488+
<i>min-content</i>. If it is negative or zero, let the weights be
1489+
<i>min-content</i>. In either case if both weights are zero, let
1490+
them be ‘<code class=css>1px</code>’ instead. <span class=note>
1491+
The ‘<code class=css>1px</code>’ value is arbitrary as long as
1492+
the weights are equal. </span>
1493+
1494+
<li> The respective used width is <i>min-content</i> + <i>free
1495+
space</i> × <i>weight</i> ÷ sum of both weights
1496+
</ol>
1497+
</ol>
1498+
1499+
<li> If B is <a href="#generated"><i>generated</i></a>:
1500+
<ol>
1501+
<li> If B has ‘<code class=css>width: auto</code>’:
1502+
<ol>
1503+
<li> Let <i>free space</i> be <a href="#max-box-width"><i>max box
1504+
width</i></a> - 2 × max(<i>min<sub>A</sub></i>,
1505+
<i>min<sub>C</sub></i>) - <i>min<sub>B</sub></i>, where <i>min</i>
1506+
is a box’s <i>outer min-content width</i> if ‘<code
1507+
class=property>width</code>’ is ‘<code class=css>auto</code>’,
1508+
zero otherwise.
1509+
1510+
<li> Let <i>upper limit</i> be <a href="#max-box-width"><i>max box
1511+
width</i></a> - 2 × max(<i>fixed<sub>A</sub></i>,
1512+
<i>fixed<sub>C</sub></i>), where <i>fixed</i> is a box’s <a
1513+
href="#outer-width"><i>outer width</i></a> if ‘<code
1514+
class=property>width</code>’ is not ‘<code
1515+
class=css>auto</code>’, zero otherwise.
1516+
1517+
<li> If <i>free space</i> is positive, let the <i>weight</i> of a box
1518+
be <i>max-content</i> minus <i>min-content</i>. If it is negative or
1519+
zero, let the weights be <i>min-content</i>.
1520+
1521+
<li> Let <i>weight<sub>AC</sub></i> be max(<i>weight<sub>A</sub></i>,
1522+
<i>weight<sub>C</sub></i>)
1523+
1524+
<li> If both <i>weight<sub>AC</sub></i> and <i>weight<sub>B</sub></i>
1525+
are zero, let them be ‘<code class=css>1px</code>’ instead.
1526+
1527+
<li> B’s used width is min(<i>upper limit</i>, <i>min-content</i> +
1528+
<i>free space</i> × <i>weight<sub>B</sub></i> ÷
1529+
(<i>weight<sub>AC</sub></i> + <i>weight<sub>B</sub></i>))
1530+
</ol>
1531+
1532+
<li> Then, if A or C has ‘<code class=css>width: auto</code>’, the
1533+
respective used widths are resolved so that <a
1534+
href="#outer-width"><i>outer width</i></a> equals (<a
1535+
href="#max-box-width"><i>max box width</i></a> - B’s <a
1536+
href="#outer-width"><i>outer width</i></a>) ÷ 2
1537+
</ol>
1538+
</ol>
15951539

15961540
<p>The used values for ‘<code class=property>bottom-left</code>’,
15971541
‘<code class=property>bottom-center</code>’ and ‘<code
@@ -3848,10 +3792,10 @@ <h3 class=no-num id=informative-references>Informative References</h3>
38483792
<dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES]
38493793

38503794
<dd>Elika J. Etemad; Koji Ishii. <a
3851-
href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/"><cite>CSS
3852-
Writing Modes Module Level 3.</cite></a> 1 May 2012. W3C Working Draft.
3853-
(Work in progress.) URL: <a
3854-
href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/</a>
3795+
href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/"><cite>CSS
3796+
Writing Modes Module Level 3.</cite></a> 15 November 2012. W3C Working
3797+
Draft. (Work in progress.) URL: <a
3798+
href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/</a>
38553799
</dd>
38563800
<!---->
38573801

0 commit comments

Comments
 (0)