Skip to content

Commit 679170c

Browse files
tabatkinstabatkins
committed
[css-flexbox] Dfn 'order-modified document order'.
1 parent 307de54 commit 679170c

4 files changed

Lines changed: 53 additions & 52 deletions

File tree

‎css-flexbox/Overview.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -244,7 +244,7 @@
244244
</p>
245245
<h1 class="p-name no-ref" id=title>CSS Flexible Box Layout Module Level 1</h1>
246246
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
247-
<span class=dt-updated><span class=value-title title=20140114>14 January 2014</span></span></span></h2>
247+
<span class=dt-updated><span class=value-title title=20140116>16 January 2014</span></span></span></h2>
248248
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-flexbox/>http://dev.w3.org/csswg/css-flexbox/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css3-flexbox/>http://www.w3.org/TR/css3-flexbox/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-flexbox/>http://dev.w3.org/csswg/css-flexbox/</a><dt>Previous Versions:<dd><a href=http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/ rel=previous>http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/</a><dd><a href=http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/ rel=previous>http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/</a><dd><a href=http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/ rel=previous>http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/</a><dd><a href=http://www.w3.org/TR/2011/WD-css3-flexbox-20111129/ rel=previous>http://www.w3.org/TR/2011/WD-css3-flexbox-20111129/</a><dd><a href=http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/ rel=previous>http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/</a><dd><a href=http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/ rel=previous>http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/</a>
249249
<dt>Feedback:</dt>
250250
<dd><a href="mailto:www-style@w3.org?subject=%5Bcss-flexbox%5D%20feedback">www-style@w3.org</a>
@@ -1101,7 +1101,8 @@ <h3 class="heading settled heading" data-level=5.4 id=order-property><span class
11011101
which specifies which ordinal group the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a> belongs to.
11021102

11031103
<p>
1104-
A flex container will lay out its content starting from the lowest numbered ordinal group and going up.
1104+
A flex container lays out its content in <dfn data-dfn-type=dfn data-export="" id=order-modified-document-order>order-modified document order<a class=self-link href=#order-modified-document-order></a></dfn>,
1105+
starting from the lowest numbered ordinal group and going up.
11051106
Items with the same ordinal group are laid out in the order they appear in the source document.
11061107
This also affects the <a href=http://www.w3.org/TR/CSS2/zindex.html>painting order</a> <a data-biblio-type=normative data-link-type=biblio href=#css21 title=css21>[CSS21]</a>,
11071108
exactly as if the elements were reordered in the document.
@@ -3022,6 +3023,7 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
30223023
<li>&lt;number&gt;<ul><li>value for flex-grow, <a href=#valuedef-number0 title="section 7.3.1">7.3.1</a>
30233024
<li>value for flex-shrink, <a href=#valuedef-number title="section 7.3.2">7.3.2</a>
30243025
</ul><li>order, <a href=#propdef-order title="section 5.4">5.4</a>
3026+
<li>order-modified document order, <a href=#order-modified-document-order title="section 5.4">5.4</a>
30253027
<li>participates in baseline alignment, <a href=#baseline-participation title="section 8.3">8.3</a>
30263028
<li>row, <a href=#valuedef-row title="section 5.1">5.1</a>
30273029
<li>row-reverse, <a href=#valuedef-row-reverse title="section 5.1">5.1</a>

‎css-flexbox/Overview.src.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1004,7 +1004,8 @@ <h3 id='order-property'>
10041004
which specifies which ordinal group the <a>flex item</a> belongs to.
10051005

10061006
<p>
1007-
A flex container will lay out its content starting from the lowest numbered ordinal group and going up.
1007+
A flex container lays out its content in <dfn export>order-modified document order</dfn>,
1008+
starting from the lowest numbered ordinal group and going up.
10081009
Items with the same ordinal group are laid out in the order they appear in the source document.
10091010
This also affects the <a href="http://www.w3.org/TR/CSS2/zindex.html">painting order</a> [[!CSS21]],
10101011
exactly as if the elements were reordered in the document.

‎css-grid/Overview.html‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@
8080
</p>
8181
<h1 class="p-name no-ref" id=title>CSS Grid Layout Module Level 1</h1>
8282
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
83-
<span class=dt-updated><span class=value-title title=20140114>14 January 2014</span></span></span></h2>
83+
<span class=dt-updated><span class=value-title title=20140116>16 January 2014</span></span></span></h2>
8484
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-grid/>http://dev.w3.org/csswg/css-grid/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css3-grid-layout/>http://www.w3.org/TR/css3-grid-layout/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-grid/>http://dev.w3.org/csswg/css-grid/</a><dt>Previous Versions:<dd><a href=http://www.w3.org/TR/2013/WD-css3-grid-layout-20130402/ rel=previous>http://www.w3.org/TR/2013/WD-css3-grid-layout-20130402/</a><dd><a href=http://www.w3.org/TR/2012/WD-css3-grid-layout-20121106/ rel=previous>http://www.w3.org/TR/2012/WD-css3-grid-layout-20121106/</a>
8585
<dt>Feedback:</dt>
8686
<dd><a href="mailto:www-style@w3.org?subject=%5Bcss-grid%5D%20feedback">www-style@w3.org</a>
@@ -2290,7 +2290,7 @@ <h3 class="heading settled heading" data-level=8.4 id=abspos-items><span class=s
22902290
}
22912291
</pre>
22922292
<figure>
2293-
<img height=402 src=images/abspos-grid.svg width=702>
2293+
<img alt="" height=402 src=images/abspos-grid.svg width=702>
22942294
</figure>
22952295

22962296
<p class=note> Note: Note that grids and the <a data-link-type=dfn href=#grid-placement-property title="grid-placement properties">grid-placement properties</a> are <a data-link-type=dfn href=http://dev.w3.org/csswg/css-writing-modes-3/#flow-relative title=flow-relative>flow-relative</a>,
@@ -2406,7 +2406,7 @@ <h3 class="heading settled heading" data-level=9.4 id=grid-align><span class=sec
24062406
}
24072407
</pre>
24082408
<figure>
2409-
<img height=252 src=images/align-justify-content.svg width=352>
2409+
<img alt="" height=252 src=images/align-justify-content.svg width=352>
24102410
</figure>
24112411
</div>
24122412

@@ -2420,7 +2420,7 @@ <h3 class="heading settled heading" data-level=9.5 id=z-order><span class=secno>
24202420

24212421
<p>
24222422
When <a data-link-type=dfn href=#grid-item title="grid items">grid items</a> overlap,
2423-
the <a href=http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index><a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#z-index title=z-index>z-index</a></a> property provides control over the drawing order of <a data-link-type=dfn href=#grid-item title="grid items">grid items</a>.
2423+
the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#z-index title=z-index>z-index</a> property provides control over the drawing order of <a data-link-type=dfn href=#grid-item title="grid items">grid items</a>.
24242424
<a data-link-type=dfn href=#grid-item title="grid items">Grid items</a> paint <a href=http://www.w3.org/TR/css3-flexbox/#painting>exactly the same as flex items</a> <a data-biblio-type=normative data-link-type=biblio href=#css3-flexbox title=css3-flexbox>[CSS3-FLEXBOX]</a>:
24252425
they use <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-flexbox-1/#propdef-order title=order>order</a>-modified document order,
24262426
and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#z-index title=z-index>z-index</a> values other than <a class=css-code data-link-for=z-index data-link-type=value title=auto>auto</a> create a stacking context even if <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#position title=position>position</a> is <span class=css data-link-type=maybe title=static>static</span>.
@@ -2435,13 +2435,11 @@ <h3 class="heading settled heading" data-level=9.5 id=z-order><span class=secno>
24352435
and explicit <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#z-index title=z-index>z-index</a>
24362436
used to control their stacking order.
24372437

2438-
<div class=figure>
2439-
<p>
2440-
<img alt="Image: Drawing order controlled by z-index and source order." src=images/drawing-order.png>
2438+
</p><figure>
2439+
<img src=images/drawing-order.png>
24412440

2442-
<p class=caption>
2443-
Drawing order controlled by z-index and source order.
2444-
</div>
2441+
<figcaption>Drawing order controlled by z-index and source order.</figcaption>
2442+
</figure>
24452443

24462444
<pre>&lt;style type="text/css"&gt;
24472445
#grid {
@@ -2463,7 +2461,8 @@ <h3 class="heading settled heading" data-level=9.5 id=z-order><span class=secno>
24632461
&lt;div id="C"&gt;C&lt;/div&gt;
24642462
&lt;div id="D"&gt;D&lt;/div&gt;
24652463
&lt;div id="E"&gt;E&lt;/div&gt;
2466-
&lt;/div&gt;</pre> </div>
2464+
&lt;/div&gt;
2465+
</pre> </div>
24672466

24682467
<h3 class="heading settled heading" data-level=9.6 id=grid-baselines><span class=secno>9.6 </span><span class=content>
24692468
Grid Baselines</span><a class=self-link href=#grid-baselines></a></h3>

‎css-grid/Overview.src.html‎

Lines changed: 37 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1528,7 +1528,7 @@ <h3 id="grid-auto-flow-property">
15281528
while addressing use cases and back-compat.
15291529

15301530
<p>
1531-
Auto-placement takes <a>grid items</a> in 'order'-modified document order.
1531+
Auto-placement takes <a>grid items</a> in <a>order-modified document order</a>.
15321532

15331533
<div class='example'>
15341534
<p>
@@ -1652,7 +1652,7 @@ <h4 id='auto-placement-algo'>
16521652

16531653
For each <a>grid item</a> with a <a>definite row position</a>
16541654
(that is, the 'grid-row-start' and 'grid-row-end' properties define a <a>definite grid position</a>),
1655-
in 'order'-modified document order,
1655+
in <a>order-modified document order</a>,
16561656
position its <a>inline-start</a> edge
16571657
to the earliest (smallest positive index) line index
16581658
that ensures this item’s <a>grid area</a> will not overlap any <a>occupied grid cells</a>.
@@ -1707,7 +1707,7 @@ <h4 id='auto-placement-algo'>
17071707
Initially the <a>auto-placement cursor</a> at is specified with a row and column position both equal to 1.
17081708

17091709
For each <a>grid item</a> that hasn't been positioned by the previous steps,
1710-
in 'order'-modified document order:
1710+
in <a>order-modified document order</a>:
17111711

17121712
<dl>
17131713
<dt>If the item has a <a>definite column position</a>:
@@ -2343,7 +2343,7 @@ <h3 id="abspos-items">
23432343
</pre>
23442344

23452345
<figure>
2346-
<img src="images/abspos-grid.svg" width="702" height="402" >
2346+
<img src="images/abspos-grid.svg" width="702" height="402" alt=''>
23472347
</figure>
23482348

23492349
Note: Note that grids and the <a>grid-placement properties</a> are <a>flow-relative</a>,
@@ -2461,7 +2461,7 @@ <h3 id='grid-align'>
24612461
</pre>
24622462

24632463
<figure>
2464-
<img src="images/align-justify-content.svg" width="352" height="252">
2464+
<img src="images/align-justify-content.svg" width="352" height="252" alt=''>
24652465
</figure>
24662466
</div>
24672467

@@ -2475,9 +2475,9 @@ <h3 id='z-order'>
24752475

24762476
<p>
24772477
When <a>grid items</a> overlap,
2478-
the <a href="http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index">'z-index'</a> property provides control over the drawing order of <a>grid items</a>.
2478+
the 'z-index' property provides control over the drawing order of <a>grid items</a>.
24792479
<a>Grid items</a> paint <a href="http://www.w3.org/TR/css3-flexbox/#painting">exactly the same as flex items</a> [[!CSS3-FLEXBOX]]:
2480-
they use 'order'-modified document order,
2480+
they use <a>order-modified document order</a>,
24812481
and 'z-index' values other than <a value for=z-index>auto</a> create a stacking context even if 'position' is ''static''.
24822482

24832483
<p class='note'>
@@ -2490,36 +2490,35 @@ <h3 id='z-order'>
24902490
and explicit 'z-index'
24912491
used to control their stacking order.
24922492

2493-
<div class="figure">
2494-
<p>
2495-
<img alt="Image: Drawing order controlled by z-index and source order." src="images/drawing-order.png" />
2493+
<figure>
2494+
<img src="images/drawing-order.png" />
24962495

2497-
<p class="caption">
2498-
Drawing order controlled by z-index and source order.
2499-
</div>
2496+
<figcaption>Drawing order controlled by z-index and source order.</figcaption>
2497+
</figure>
25002498

25012499
<pre>
2502-
&lt;style type="text/css">
2503-
#grid {
2504-
display: grid;
2505-
grid-template-columns: 1fr 1fr;
2506-
grid-template-rows: 1fr 1fr
2507-
}
2508-
#A { grid-column: 1 / span 2; grid-row: 2; align-self: foot }
2509-
#B { grid-column: 1; grid-row: 1; z-index: 10 }
2510-
#C { grid-column: 2; grid-row: 1; align-self: head; margin-left: -20px }
2511-
#D { grid-column: 2; grid-row: 2; justify-self: end; align-self: head }
2512-
#E { grid-column: 1 / span 2; grid-row: 1 / span 2;
2513-
z-index: 5; justify-self: center; align-self: center; }
2514-
&lt;/style>
2515-
2516-
&lt;div id="grid">
2517-
&lt;div id="A">A&lt;/div>
2518-
&lt;div id="B">B&lt;/div>
2519-
&lt;div id="C">C&lt;/div>
2520-
&lt;div id="D">D&lt;/div>
2521-
&lt;div id="E">E&lt;/div>
2522-
&lt;/div></pre>
2500+
&lt;style type="text/css">
2501+
#grid {
2502+
display: grid;
2503+
grid-template-columns: 1fr 1fr;
2504+
grid-template-rows: 1fr 1fr
2505+
}
2506+
#A { grid-column: 1 / span 2; grid-row: 2; align-self: foot }
2507+
#B { grid-column: 1; grid-row: 1; z-index: 10 }
2508+
#C { grid-column: 2; grid-row: 1; align-self: head; margin-left: -20px }
2509+
#D { grid-column: 2; grid-row: 2; justify-self: end; align-self: head }
2510+
#E { grid-column: 1 / span 2; grid-row: 1 / span 2;
2511+
z-index: 5; justify-self: center; align-self: center; }
2512+
&lt;/style>
2513+
2514+
&lt;div id="grid">
2515+
&lt;div id="A">A&lt;/div>
2516+
&lt;div id="B">B&lt;/div>
2517+
&lt;div id="C">C&lt;/div>
2518+
&lt;div id="D">D&lt;/div>
2519+
&lt;div id="E">E&lt;/div>
2520+
&lt;/div>
2521+
</pre>
25232522
</div>
25242523

25252524
<h3 id='grid-baselines'>
@@ -2536,13 +2535,13 @@ <h3 id='grid-baselines'>
25362535

25372536
<li>
25382537
Otherwise, if the grid container has at least one <a>grid item</a> whose area intersects the first row/column,
2539-
and the first such <a>grid item</a> (in <a>'order'-modified grid order</a>) has a baseline
2538+
and the first such <a>grid item</a> (in <a>order-modified grid order</a>) has a baseline
25402539
parallel to the relevant axis,
25412540
the grid container's baseline is that baseline.
25422541

25432542
<li>
25442543
Otherwise, the grid container's baseline is <a href="http://www.w3.org/TR/css3-writing-modes/#inline-alignment">synthesized</a>
2545-
from the first item's (in <a>'order'-modified grid order</a>) content box,
2544+
from the first item's (in <a>order-modified grid order</a>) content box,
25462545
or, failing that, from the grid container's content box.
25472546
</ol>
25482547

@@ -2552,12 +2551,12 @@ <h3 id='grid-baselines'>
25522551
and its inline axis is parallel to that dimension.
25532552

25542553
<p>
2555-
<dfn export>'order'-modified grid order</dfn> is the order in which
2554+
<dfn export title="order-modified document order">'order'-modified grid order</dfn> is the order in which
25562555
<a>grid items</a> are encountered when traversing the grid's <a>grid cells</a>,
25572556
in row-major order if calculating the inline-axis baseline,
25582557
or in column-major order if calculating the block-axis baseline.
25592558
If two items are encountered at the same time,
2560-
they are taken in 'order'-modified document order.
2559+
they are taken in <a>order-modified document order</a>.
25612560

25622561
<p>
25632562
When calculating the baseline according to the above rules,

0 commit comments

Comments
 (0)