1010 rel =dcterms.rights >
1111 < meta content ="CSS Writing Modes Module Level 3 " name =dcterms.title >
1212 < meta content =text name =dcterms.type >
13- < meta content =2012-11-02 name =dcterms.issued >
13+ < meta content =2012-11-09 name =dcterms.issued >
1414 < meta content ="Elika J. Etemad " name =dcterms.creator >
1515 < meta content ="Koji Ishii " name =dcterms.creator >
1616 < meta content =W3C name =dcterms.publisher >
17- < meta content ="http://www.w3.org/TR/2012/ED-css3-writing-modes-20121102 / "
17+ < meta content ="http://www.w3.org/TR/2012/ED-css3-writing-modes-20121109 / "
1818 name =dcterms.identifier >
1919 < link href ="../default.css " rel =stylesheet type ="text/css ">
2020 < style type ="text/css ">
4343
4444 < h1 > CSS Writing Modes Module Level 3</ h1 >
4545
46- < h2 class ="no-num no-toc " id =longstatus-date > Editor's Draft 2 November
46+ < h2 class ="no-num no-toc " id =longstatus-date > Editor's Draft 9 November
4747 2012</ h2 >
4848
4949 < dl >
@@ -52,7 +52,7 @@ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 2 November
5252 < dd > < a
5353 href ="http://dev.w3.org/csswg/css3-writing-modes/ "> http://dev.w3.org/csswg/css3-writing-modes/</ a >
5454 <!--
55- <dd><a href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121102 /">http://www.w3.org/TR/2012/ED-css3-writing-modes-20121102 /</a>
55+ <dd><a href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121109 /">http://www.w3.org/TR/2012/ED-css3-writing-modes-20121109 /</a>
5656-->
5757
5858 < dt > Latest version:
@@ -1366,7 +1366,7 @@ <h3 id=writing-mode><span class=secno>3.1. </span> Block Flow Direction:
13661366<!-- --> </form> </ pre >
13671367
13681368 < p > < img
1369- alt ="Screenshot of vertical layout: the input element is laid lengthwise from top to bottom and its contents rendered in a vertical writing mode, matching the labels outside it. The drop-down selection control after it slides out to the side (towards the foot edge of the block) rather than downward as it would in horizontal writing modes. "
1369+ alt ="Screenshot of vertical layout: the input element is laid lengthwise from top to bottom and its contents rendered in a vertical writing mode, matching the labels outside it. The drop-down selection control after it slides out to the side (towards the after edge of the block) rather than downward as it would in horizontal writing modes. "
13701370 src =vertical-form.png >
13711371 </ div >
13721372
@@ -2074,8 +2074,8 @@ <h2 id=abstract-box><span class=secno>6. </span> Abstract Box Terminology</h2>
20742074
20752075 < dd > Interpreted relative to the flow of content. The flow-relative
20762076 directions are < a href ="#start "> < i > start</i > </ a > , < a
2077- href ="#end "> < i > end</ i > </ a > , < a href ="#head "> < i > head </ i > </ a > , and < a
2078- href ="#foot "> < i > foot </ i > </ a > .
2077+ href ="#end "> < i > end</ i > </ a > , < a href ="#before "> < i > before </ i > </ a > , and < a
2078+ href ="#after "> < i > after </ i > </ a > .
20792079
20802080 < dt > < a href ="#line-directions "> line-relative</ a >
20812081
@@ -2149,7 +2149,7 @@ <h3 id=logical-directions><span class=secno>6.2. </span> Flow-relative
21492149 Directions</ h3 >
21502150
21512151 < p > The < dfn id =flow-relative-directions > flow-relative directions</ dfn > , < a
2152- href ="#head "> < i > head </ i > </ a > , < a href ="#foot "> < i > foot </ i > </ a > , < a
2152+ href ="#before "> < i > before </ i > </ a > , < a href ="#after "> < i > after </ i > </ a > , < a
21532153 href ="#start "> < i > start</ i > </ a > , and < a href ="#end "> < i > end</ i > </ a > , are
21542154 defined relative to the flow of content on the page. In an < abbr
21552155 title =left-to-right > LTR</ abbr > ‘< a href ="#horizontal-tb "> < code
@@ -2158,7 +2158,7 @@ <h3 id=logical-directions><span class=secno>6.2. </span> Flow-relative
21582158 follows:
21592159
21602160 < dl >
2161- < dt > < dfn id =head > head </ dfn > / < dfn id =before > before</ dfn >
2161+ < dt > < dfn id =before > before </ dfn > or < dfn id =block- before> block- before</ dfn >
21622162
21632163 < dd > Nominally the side that comes earlier in the block progression, as
21642164 determined by the ‘< a href ="#writing-mode1 "> < code
@@ -2168,9 +2168,9 @@ <h3 id=logical-directions><span class=secno>6.2. </span> Flow-relative
21682168 class =css > vertical-rl</ code > </ a > ’, and the left in ‘< a
21692169 href ="#vertical-lr "> < code class =css > vertical-lr</ code > </ a > ’.
21702170
2171- < dt > < dfn id =foot > foot </ dfn > / < dfn id =after > after</ dfn >
2171+ < dt > < dfn id =after > after </ dfn > or < dfn id =block- after> block- after</ dfn >
21722172
2173- < dd > The side opposite < a href ="#head "> < i > head </ i > </ a > .
2173+ < dd > The side opposite < a href ="#before "> < i > before </ i > </ a > .
21742174
21752175 < dt > < dfn id =start > start</ dfn >
21762176
@@ -2197,8 +2197,8 @@ <h3 id=logical-directions><span class=secno>6.2. </span> Flow-relative
21972197 summary email</ a > .
21982198
21992199 < p class =note > Note that while determining the < a
2200- href ="#head "> < i > head </ i > </ a > and < a href ="#foot "> < i > foot </ i > </ a > sides of
2201- a box depends only on the ‘< a href ="#writing-mode1 "> < code
2200+ href ="#before "> < i > before </ i > </ a > and < a href ="#after "> < i > after </ i > </ a >
2201+ sides of a box depends only on the ‘< a href ="#writing-mode1 "> < code
22022202 class =property > writing-mode</ code > </ a > ’ property, determining the < a
22032203 href ="#start "> < i > start</ i > </ a > and < a href ="#end "> < i > end</ i > </ a > sides of
22042204 a box depends not only on the ‘< a href ="#writing-mode1 "> < code
@@ -2214,7 +2214,7 @@ <h3 id=logical-directions><span class=secno>6.2. </span> Flow-relative
22142214 <----- width / measure ----->
22152215
22162216 top side/
2217- head side
2217+ before side
22182218 +------------------------------+ A
22192219 left side/ | ---inline direction ---> | right side/ |
22202220 start side | | | end side |
@@ -2223,7 +2223,7 @@ <h3 id=logical-directions><span class=secno>6.2. </span> Flow-relative
22232223 | V | |
22242224 +------------------------------+ V
22252225 bottom side/
2226- foot side
2226+ after side
22272227 </ pre >
22282228 </ div >
22292229
@@ -2237,7 +2237,7 @@ <h3 id=logical-directions><span class=secno>6.2. </span> Flow-relative
22372237 start side
22382238 +------------------------------+ A
22392239 left side/ | <---block direction--- | right side/ |
2240- foot side | | | head side |
2240+ after side | | | before side |
22412241 | * vertical * inline| | height/
22422242 | *writing mode* direction| | measure
22432243 | V | |
@@ -2256,12 +2256,12 @@ <h3 id=line-directions><span class=secno>6.3. </span> Line-relative
22562256 class =property > text-orientation</ code > </ a > ’ and ‘< a
22572257 href ="#writing-mode1 "> < code class =property > writing-mode</ code > </ a > ’.
22582258 Usually the line-relative “top” corresponds to the < a
2259- href ="#head "> < i > head </ i > </ a > side, but this is not always the case: in
2260- Mongolian typesetting (and thus by default in ‘< a
2259+ href ="#block-before "> < i > block-before </ i > </ a > side, but this is not always
2260+ the case: in Mongolian typesetting (and thus by default in ‘< a
22612261 href ="#vertical-lr "> < code class =css > vertical-lr</ code > </ a > ’ writing
22622262 modes), the line-relative “top” corresponds to the < a
2263- href ="#foot "> < i > foot </ i > </ a > side. Hence the need for distinct
2264- terminology.
2263+ href ="#block-after "> < i > block-after </ i > </ a > side. Hence the need for
2264+ distinct terminology.
22652265
22662266 < div class =figure > < img alt ="Mongolian mixed with English "
22672267 src =mongolian-lr.jpg >
@@ -2418,7 +2418,7 @@ <h3 id=logical-to-physical><span class=secno>6.4. </span>
24182418 < td colspan =8 > height
24192419
24202420 < tr >
2421- < th scope =row > head
2421+ < th scope =row > before
24222422
24232423 < td colspan =2 > top
24242424
@@ -2427,7 +2427,7 @@ <h3 id=logical-to-physical><span class=secno>6.4. </span>
24272427 < td colspan =4 > left
24282428
24292429 < tr >
2430-
8DE4
< th scope =row > foot
2430+ < th scope =row > after
24312431
24322432 < td colspan =2 > bottom
24332433
@@ -2583,7 +2583,7 @@ <h3 id=vertical-layout><span class=secno>7.1. </span> Principles of Layout
25832583 class =css > mixed-right</ code > </ a > ’ ‘< a href ="#rtl "> < code
25842584 class =css > rtl</ code > </ a > ’ table, the first column would be on the
25852585 bottom (the start side), and the first row on the right (the < a
2586- href ="#head "> < i > head </ i > </ a > side). The table's ‘< code
2586+ href ="#block-before "> < i > block-before </ i > </ a > side). The table's ‘< code
25872587 class =property > margin-right</ code > ’ and ‘< code
25882588 class =property > margin-left</ code > ’ would collapse with margins before
25892589 (on the right) and after (on the left) the table, respectively, and if
@@ -2668,9 +2668,11 @@ <h3 id=dimension-mapping><span class=secno>7.2. </span> Dimensional Mapping</h3>
26682668 height) and to the the start and end margins, padding, and border.
26692669 Likewise the calculation rules in < a
26702670 href ="http://www.w3.org/TR/CSS21/visudet.html#Computing_heights_and_margins "> CSS2.1
2671- Section 10.6</ a > are used in the block dimension: they apply to the extent
2672- and to the head and foot margins, padding, and border. < a href ="#CSS21 "
2673- rel =biblioentry > [CSS21]<!--{{!CSS21}}--> </ a >
2671+ Section 10.6</ a > are used in the block dimension: they apply to the < a
2672+ href ="#extent "> < i > extent</ i > </ a > and to the < a
2673+ href ="#block-before "> < i > block-before</ i > </ a > and < a
2674+ href ="#block-after "> < i > block-after</ i > </ a > margins, padding, and border.
2675+ < a href ="#CSS21 " rel =biblioentry > [CSS21]<!--{{!CSS21}}--> </ a >
26742676
26752677 < p > As a corollary, percentages on the margin and padding properties, which
26762678 are always calculated with respect to the containing block width in
@@ -2884,12 +2886,16 @@ <h3 id=logical-direction-layout><span class=secno>7.4. </span>
28842886
28852887 < p > The < a
28862888 href ="http://www.w3.org/TR/CSS21/box.html#collapsing-margins "> margin
2887- collapsing rules</ a > apply exactly with the < em > head margin</ em >
2888- substituted for the top margin and the < em > foot margin</ em > substituted
2889- for the bottom margin. Similarly the head padding and border are
2890- substituted for the top padding and border, and the foot padding and
2891- border substituted for the bottom padding and border. Note this means only
2892- head and foot margins ever collapse.
2889+ collapsing rules</ a > apply exactly with the < em > < a
2890+ href ="#block-before "> < i > block-before</ i > </ a > margin</ em > substituted for
2891+ the top margin and the < em > < a href ="#block-after "> < i > block-after</ i > </ a >
2892+ margin</ em > substituted for the bottom margin. Similarly the < a
2893+ href ="#block-before "> < i > block-before</ i > </ a > padding and border are
2894+ substituted for the top padding and border, and the < a
2895+ href ="#block-after "> < i > block-after</ i > </ a > padding and border substituted
2896+ for the bottom padding and border. Note this means only < a
2897+ href ="#block-before "> < i > block-before</ i > </ a > and < a
2898+ href ="#block-after "> < i > block-after</ i > </ a > margins ever collapse.
28932899
28942900 < p > Flow-relative directions are calculated with respect to the writing mode
28952901 of the element and used to abstract layout related to the element's
@@ -2903,7 +2909,8 @@ <h3 id=logical-direction-layout><span class=secno>7.4. </span>
29032909 from the start edge of the line box.
29042910
29052911 < li > For tables, the ordering of columns begins on the start side of the
2906- table, and the ordering of rows begins on the head side of the table.
2912+ table, and the ordering of rows begins on the < a
2913+ href ="#block-before "> < i > block-before</ i > </ a > side of the table.
29072914 </ ul >
29082915
29092916 < h3 id =line-mappings > < span class =secno > 7.5. </ span > Line-Relative Mappings</ h3 >
@@ -2994,13 +3001,13 @@ <h3 id=caption-side><span class=secno>7.7. </span> Table Caption Mappings:
29943001 < tr >
29953002 < th > New Values:
29963003
2997- < td > ‘< a href ="#head "> < code class =css > head </ code > </ a > ’ | ‘< a
2998- href ="#foot "> < code class =css > foot </ code > </ a > ’
3004+ < td > ‘< a href ="#before "> < code class =css > before </ code > </ a > ’ | ‘< a
3005+ href ="#after "> < code class =css > after </ code > </ a > ’
29993006
30003007 < tr >
30013008 < th > Initial:
30023009
3003- < td > head
3010+ < td > before
30043011
30053012 < tr >
30063013 < th > Applies to:
@@ -3029,9 +3036,9 @@ <h3 id=caption-side><span class=secno>7.7. </span> Table Caption Mappings:
30293036 </ table >
30303037
30313038 < p > This module introduces two new values to the ‘< code
3032- class =property > caption-side</ code > ’ property: ‘< a href ="#head "> < code
3033- class =css > head </ code > </ a > ’ and ‘< a href ="#foot "> < code
3034- class =css > foot </ code > </ a > ’, which position the caption before and after
3039+ class =property > caption-side</ code > ’ property: ‘< a href ="#before "> < code
3040+ class =css > before </ code > </ a > ’ and ‘< a href ="#after "> < code
3041+ class =css > after </ code > </ a > ’, which position the caption before and after
30353042 the table box, respectively. For tables with ‘< a
30363043 href ="#horizontal-tb "> < code class =css > horizontal-tb</ code > </ a > ’ writing
30373044 mode, they are equivalent to the existing ‘< code class =css > top</ code > ’
@@ -3041,17 +3048,17 @@ <h3 id=caption-side><span class=secno>7.7. </span> Table Caption Mappings:
30413048 < p class =note > For implementations that support the ‘< code
30423049 class =property > top-outside</ code > ’ and ‘< code
30433050 class =property > bottom-outside</ code > ’ model, corresponding ‘< code
3044- class =property > head -outside</ code > ’ and ‘< code
3045- class =property > foot -outside</ code > ’ will be similarly introduced.
3051+ class =property > before -outside</ code > ’ and ‘< code
3052+ class =property > after -outside</ code > ’ will be similarly introduced.
30463053
30473054 < p > Implementations that support the ‘< code class =css > top</ code > ’ and
30483055 ‘< code class =css > bottom</ code > ’ values of the ‘< code
30493056 class =property > caption-side</ code > ’ property but do not support side
30503057 captions (i.e. ‘< code class =css > left</ code > ’ and ‘< code
30513058 class =css > right</ code > ’ captions in horizontal writing modes) must treat
30523059 ‘< code class =css > top</ code > ’ and ‘< code class =css > bottom</ code > ’
3053- as ‘< a href ="#head "> < code class =css > head </ code > </ a > ’, when the table
3054- is in a vertical writing mode.
3060+ as ‘< a href ="#before "> < code class =css > before </ code > </ a > ’, when the
3061+ table is in a vertical writing mode.
30553062
30563063 < p > For implementations that do support side captions (i.e. the ‘< code
30573064 class =css > left</ code > ’ and ‘< code class =css > right</ code > ’ values
@@ -3124,7 +3131,7 @@ <h4 id="spacing-attributes">Spacing Attributes</h4>
31243131
31253132 <ul>
31263133 <li><code>hspace</code> as start and end margins</li>
3127- <li><code>vspace</code> as head and foot margins</li>
3134+ <li><code>vspace</code> as block-before and block-after margins</li>
31283135 <li>marginwidth</li>
31293136 <li>marginheight</li>
31303137 </ul>
@@ -3519,10 +3526,6 @@ <h3 class=no-num id=recent-changes> Changes from the <a
35193526 heuristics of the containing paragraph.
35203527
35213528 < li > Added data tables for orientation of characters in Unicode.
3522-
3523- < li > Replaced < a href ="#before "> < i > before</ i > </ a > with < a
3524- href ="#head "> < i > head</ i > </ a > and < a href ="#after "> < i > after</ i > </ a > with
3525- < a href ="#foot "> < i > foot</ i > </ a > .
35263529 </ ul >
35273530
35283531 < h3 class =no-num id =changes-201109 > Changes from the < a
@@ -4258,7 +4261,7 @@ <h2 class=no-num id=property-index> Property Index</h2>
42584261
42594262 < td >
42604263
4261- < td > head
4264+ < td > before
42624265
42634266 < td > same as CSS2.1
42644267
0 commit comments