8000 Prepare for FPWD · xfq/csswg-drafts@fe6549c · GitHub
Skip to content

Commit fe6549c

Browse files
fantasaifantasai
committed
Prepare for FPWD
1 parent beaff78 commit fe6549c

2 files changed

Lines changed: 111 additions & 114 deletions

File tree

‎css3-align/Overview.html‎

Lines changed: 97 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<link href="#contents" rel=contents>
88
<link href="#index" rel=index>
99
<link href="../default.css" rel=stylesheet type="text/css">
10-
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css< 9355 /span>" rel=stylesheet
10+
<link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel=stylesheet
1111
type="text/css">
1212

1313
<style type="text/css">
@@ -25,14 +25,21 @@
2525

2626
<h1>CSS Box Alignment Module Level 3</h1>
2727

28-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 6 June 2012</h2>
28+
<h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 12 June
29+
2012</h2>
2930

30-
<dl><!--
31-
<dt>This version:
32-
<dd><a href="http://www.w3.org/TR/2012/ED-css3-align-20120606/">http://www.w3.org/TR/2012/ED-css3-align-20120606/</a>
33-
<dt>Latest version:
34-
<dd><a href="http://www.w3.org/TR/css3-align/">http://www.w3.org/TR/css3-align/</a>
35-
-->
31+
<dl>
32+
<dt>This version:
33+
34+
<dd><a
35+
href="http://www.w3.org/TR/2012/WD-css3-align-20120612/">http://www.w3.org/TR/2012/WD-css3-align-20120612/</a>
36+
37+
38+
<dt>Latest version:
39+
40+
<dd><a
41+
href="http://www.w3.org/TR/css3-align/">http://www.w3.org/TR/css3-align/</a>
42+
3643

3744
<dt>Editor's draft:
3845

@@ -42,9 +49,7 @@ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 6 June 2012</h2>
4249

4350
<dt>Previous version:
4451

45-
<dd><a
46-
href="http://fantasai.inkedblade.net/style/specs/css3-align/02">http://fantasai.inkedblade.net/style/specs/css3-align/02</a>
47-
<!--
52+
<dd>— <!--
4853
<dt>Issue Tracking:</dt>
4954
<dd><a href="http://www.w3.org/Style/CSS/Tracker/products/FIXME">http://www.w3.org/Style/CSS/Tracker/products/FIXME</a>
5055
-->
@@ -90,42 +95,48 @@ <h2 class="no-num no-toc" id=abstract>Abstract</h2>
9095
boxes within their containers in the various CSS box layout models: block
9196
layout, table layout, flex layout, and grid layout. (The alignment of text
9297
and inline-level content is defined in <a href="#CSS3TEXT"
93-
rel=biblioentry>[CSS3TEXT]<!--{{CSS3TEXT}}--></a> and [[CSS3LINEBOX]].)
98+
>[CSS3TEXT]<!--{{CSS3TEXT}}--></a> and [[CSS3LINEBOX]].)
9499
CSS is a language for describing the rendering of structured documents
95100
(such as HTML and XML) on screen, on paper, in speech, etc.
96101

97102
<h2 class="no-num no-toc" id=status>Status of this document</h2>
98103
<!--begin-status-->
99104

100-
<p>This is a public copy of the editors' draft. It is provided for
101-
discussion only and may change at any moment. Its publication here does
102-
not imply endorsement of its contents by W3C. Don't cite this document
103-
other than as work in progress.
105+
<p><em>This section describes the status of this document at the time of
106+
its publication. Other documents may supersede this document. A list of
107+
current W3C publications and the latest revision of this technical report
108+
can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
109+
index at http://www.w3.org/TR/.</a></em>
110+
111+
<p>Publication as a Working Draft does not imply endorsement by the W3C
112+
Membership. This is a draft document and may be updated, replaced or
113+
obsoleted by other documents at any time. It is inappropriate to cite this
114+
document as other than work in progress.
104115

105116
<p>The (<a
106117
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
107-
mailing list <a
108-
href="mailto:www-style@w3.org?Subject=%5Bcss3-align%5D%20PUT%20SUBJECT%20HERE">
109-
www-style@w3.org</a> (see <a
110-
href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
111-
discussion of this specification. When sending e-mail, please put the text
112-
“css3-align” in the subject, preferably like this:
118+
mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see
119+
<a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
120+
for discussion of this specification. When sending e-mail, please put the
121+
text “css3-align” in the subject, preferably like this:
113122
“[<!---->css3-align<!---->] <em>…summary of comment…</em>”
114123

115-
<p>This document was produced by the <a href="/Style/CSS/members">CSS
116-
Working Group</a> (part of the <a href="/Style/">Style Activity</a>).
124+
<p>This document was produced by the <a
125+
href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
126+
the <a href="http://www.w3.org/Style/">Style Activity</a>).
117127

118128
<p>This document was produced by a group operating under the <a
119-
href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
120-
Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
129+
href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
130+
2004 W3C Patent Policy</a>. W3C maintains a <a
131+
href="http://www.w3.org/2004/01/pp-impl/32061/status"
121132
rel=disclosure>public list of any patent disclosures</a> made in
122133
connection with the deliverables of the group; that page also includes
123134
instructions for disclosing a patent. An individual who has actual
124135
knowledge of a patent which the individual believes contains <a
125-
href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
136+
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
126137
Claim(s)</a> must disclose the information in accordance with <a
127-
href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
128-
W3C Patent Policy</a>.</p>
138+
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
139+
6 of the W3C Patent Policy</a>.</p>
129140
<!--end-status-->
130141

131142
<p>The following features are at risk: …
@@ -231,7 +242,7 @@ <h2 id=intro><span class=secno>1. </span> Introduction</h2>
231242
cohesive and common box alignment model to share among all of CSS.
232243

233244
<p class=note>The alignment of text and inline-level content is defined in
234-
<a href="#CSS3TEXT" rel=biblioentry>[CSS3TEXT]<!--{{CSS3TEXT}}--></a> and
245+
<a href="#CSS3TEXT">[CSS3TEXT]<!--{{CSS3TEXT}}--></a> and
235246
[[CSS3LINEBOX]].
236247

237248
<p>Inspiration for this document:
@@ -254,15 +265,15 @@ <h3 id=placement><span class=secno>1.1. </span> Module interactions</h3>
254265

255266
<p>This module adds some new alignment capabilities to the block layout
256267
model described in <a href="#CSS21"
257-
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> chapters 9 and 10 and defines
268+
>[CSS21]<!--{{!CSS21}}--></a> chapters 9 and 10 and defines
258269
the interaction of these properties with the alignment of table cell
259270
content using ‘<code class=property>vertical-align</code>’, as defined
260-
in <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> chapter
271+
in <a href="#CSS21">[CSS21]<!--{{!CSS21}}--></a> chapter
261272
17. The interaction of these properties with Grid Layout <a
262273
href="#CSS3-GRID-LAYOUT"
263-
rel=biblioentry>[CSS3-GRID-LAYOUT]<!--{{!CSS3-GRID-LAYOUT}}--></a> and
274+
>[CSS3-GRID-LAYOUT]<!--{{!CSS3-GRID-LAYOUT}}--></a> and
264275
Flexible Box Layout <a href="#CSS3-FLEXBOX"
265-
rel=biblioentry>[CSS3-FLEXBOX]<!--{{!CSS3-FLEXBOX}}--></a> is defined in
276+
>[CSS3-FLEXBOX]<!--{{!CSS3-FLEXBOX}}--></a> is defined in
266277
their respective modules.
267278

268279
<p>No properties in this module apply to the <code>::first-line</code> or
@@ -273,9 +284,9 @@ <h3 id=values><span class=secno>1.2. </span> Values</h3>
273284
<p>This specification follows the <a
274285
href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
275286
definition conventions</a> from <a href="#CSS21"
276-
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
287+
>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
277288
this specification are defined in CSS Level 2 Revision 1 <a
278-
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS
289+
href="#CSS21">[CSS21]<!--{{!CSS21}}--></a>. Other CSS
279290
modules may expand the definitions of these value types: for example
280291
[[CSS3VALUES]], when combined with this module, adds the ‘<code
281292
class=css>initial</code>’ keyword as a possible property value.
@@ -313,7 +324,7 @@ <h2 id=overview><span class=secno>2. </span> Overview of Alignment
313324

314325
<colgroup span=2></colgroup>
315326

316-
<colgroup span=4></colgroup>
327+
<colgroup span=1></colgroup>
317328

318329
<thead>
319330
<tr>
@@ -385,13 +396,6 @@ <h2 id=overview><span class=secno>2. </span> Overview of Alignment
385396
<td>stacking
386397

387398
<td>flex containers and grid containers
388-
389-
<tfoot>
390-
<tr>
391-
<td colspan=0><small>✔ indicates the property can be defined to be
392-
useful in that layout model<br>
393-
✘ indicates the property doesn't apply and is not useful in that
394-
layout model</small>
395399
</table>
396400

397401
<p class=issue> The exact behavior of these properties on layout models
@@ -408,18 +412,22 @@ <h2 id=overview><span class=secno>2. </span> Overview of Alignment
408412
<p class=issue>True alignment vs. safe alignment. Maybe make safe by
409413
default, true if ‘<a href="#true2"><code class=css>true</code></a>’ is
410414
specified? Or safe/true depending on layout model (e.g. safe for blocks,
411-
true for flexbox)?
415+
true for flexbox)? Current draft introduces a ‘<a href="#true2"><code
416+
class=css>true</code></a>’ keyword, but other options should be
417+
considered.
412418

413419
<h2 id=self-alignment><span class=secno>3. </span> Self-Alignment: Aligning
414420
the Box within its Parent</h2>
415421

416422
<p>The ‘<a href="#justify-self0"><code
417423
class=property>justify-self</code></a>’ and ‘<a
418424
href="#align-self0"><code class=property>align-self</code></a>’
419-
properties control alignment of the box within its parent.
425+
properties control alignment of the box within its containing block.
420426

421427
<div class=figure>
422-
<p><img src=self-target.jpg>
428+
<p><img
429+
alt="Diagram showing that the alignment of the element within its containing block is affected."
430+
src=self-target.jpg>
423431
</div>
424432

425433
<h3 id=justify-self><span class=secno>3.1. </span> Inline/Main-Axis
@@ -649,7 +657,9 @@ <h2 id=content-alignment><span class=secno>4. </span> Content-Alignment:
649657
properties control alignment of the box's content within the box.
650658

651659
<div class=figure>
652-
<p><img src=content-target.jpg>
660+
<p><img
661+
alt="Diagram showing that the alignment of the content within the element is affected."
662+
src=content-target.jpg>
653663
</div>
654664

655665
<h3 id=justify-content><span class=secno>4.1. </span> Inline/Main-Axis
@@ -721,94 +731,79 @@ <h3 id=justify-content><span class=secno>4.1. </span> Inline/Main-Axis
721731
<dt><dfn id=auto1>‘<code class=css>auto</code>’</dfn>
722732

723733
<dd>If the element has ‘<code class=css>display: block</code>’ and
724-
‘<code class=css>justify-self: auto</code>’‘<code class=css>,
725-
computes to the value inherited from the parent. Otherwise computes to
726-
</code>’‘<a href="#start0"><code
727-
class=property>start</code></a>’‘<code class=css>. </code>
734+
‘<code class=css>justify-self: auto</code>’, computes to the value
735+
inherited from the parent. Otherwise computes to ‘<a
736+
href="#start0"><code class=css>start</code></a>’.
728737

729-
<dt><dfn id=start0>’‘<code class=property>start</code>’‘<code
730-
class=css></code></dfn>
738+
<dt><dfn id=start0>‘<code class=css>start</code>’</dfn>
731739

732740
<dd>Start-aligns the content within its box.
733741

734-
<dt><dfn id=end0>’‘<code class=property>end</code>’‘<code
735-
class=css></code></dfn>
742+
<dt><dfn id=end0>‘<code class=css>end</code>’</dfn>
736743

737744
<dd>End-aligns the content within its box.
738745

739-
<dt><dfn id=flex-start>’‘<code
740-
class=property>flex-start</code>’‘<code class=css></code></dfn>
746+
<dt><dfn id=flex-start>‘<code class=css>flex-start</code>’</dfn>
741747

742748
<dd>For flex containers, aligns the items to the main-start edge.
743-
Otherwise equivalent to ’‘<a href="#start0"><code
744-
class=property>start</code></a>’‘<code class=css>. </code>
749+
Otherwise equivalent to ‘<a href="#start0"><code
750+
class=css>start</code></a>’.
745751

746-
<dt><dfn id=end1>’‘<code class=property>end</code>’‘<code
747-
class=css></code></dfn>
752+
<dt><dfn id=end1>‘<code class=css>end</code>’</dfn>
748753

749754
<dd>For flex containers, aligns the items to the main-end edge. Otherwise
750-
equivalent to ’‘<a href="#end2"><code
751-
class=property>end</code></a>’‘<code class=css>. </code>
755+
equivalent to ‘<a href="#end2"><code class=css>end</code></a>’.
752756

753-
<dt><dfn id=left>’‘<code class=property>left</code>’‘<code
754-
class=css></code></dfn>
757+
<dt><dfn id=left>‘<code class=css>left</code>’</dfn>
755758

756759
<dd>Aligns content to the line-left edge. On a flex container, this is
757-
treated as ’‘<a href="#auto2"><code
758-
class=property>auto</code></a>’‘<code class=css> if the line-left
759-
direction is in the wrong dimension. </code>
760+
treated as ‘<a href="#auto2"><code class=css>auto</code></a>’ if the
761+
line-left direction is in the wrong dimension.
760762

761-
<dt><dfn id=right>’‘<code class=property>right</code>’‘<code
762-
class=css></code></dfn>
763+
<dt><dfn id=right>‘<code class=css>right</code>’</dfn>
763764

764765
<dd>Aligns content to the line-right edge. On a flex container, this is
765-
treated as ’‘<a href="#auto2"><code
766-
class=property>auto</code></a>’‘<code class=css> if the line-right
767-
direction is in the wrong dimension. </code>
766+
treated as ‘<a href=" 6853 ;#auto2"><code class=css>auto</code></a>’ if the
767+
line-right direction is in the wrong dimension.
768768

769-
<dt><dfn id=center1>’‘<code class=property>center</code>’‘<code
770-
class=css></code></dfn>
769+
<dt><dfn id=center1>‘<code class=css>center</code>’</dfn>
771770

772771
<dd>Centers the content within its box
773772

774-
<dt><dfn id=space-between>’‘<code
775-
class=property>space-between</code>’‘<code class=css></code></dfn>
773+
<dt><dfn id=space-between>‘<code class=css>space-between</code>’</dfn>
776774

777775
<dd>Distributes the content evenly throughout the line by adjusting
778776
inter-child spacing. If there is only one child (or if the element is a
779777
block container), this is equivalent to centering.
780778

781-
<dt><dfn id=space-around>’‘<code
782-
class=property>space-around</code>’‘<code class=css></code></dfn>
779+
<dt><dfn id=space-around>‘<code class=css>space-around</code>’</dfn>
783780

784781
<dd>Distributes the content evenly throughout the line by adjusting
785782
inter-child spacing and applying half of that spacing between the
786783
first/last child and the box edges. If there is only one child (or if the
787784
element is a block container), this is equivalent to centering.
788785

789-
<dt><dfn id=true1>’‘<code class=property>true</code>’‘<code
790-
class=css></code></dfn>
786+
<dt><dfn id=true1>‘<code class=css>true</code>’</dfn>
791787

792788
<dd>If specified, alignment is "true", and may cause the contents to
793789
overflow the start edge of the box. Otherwise, the content is forced to
794-
start-align if its total outer measure (before ’‘<a
795-
href="#space-between0"><code
796-
class=property>space-between</code></a>’‘<code class=css> or
797-
</code>’‘<a href="#space-around0"><code
798-
class=property>space-around</code></a>’‘<code class=css> is applied)
799-
is wider than the containing block. </code>
790+
start-align if its total outer measure (before ‘<a
791+
href="#space-between0"><code class=css>space-between</code></a>’ or
792+
‘<a href="#space-around0"><code class=css>space-around</code></a>’ is
793+
applied) is wider than the containing block.
800794
</dl>
801795

802796
<p>For flex containers, if the "start" and "end" are not in the alignment
803797
dimension, the "head" and "foot" sides are used instead, respectively.
804798

805-
<p class=note>This would, in conjunction with ’text-align', implement the
806-
HTML <code>align</code> attribute and <code>&lt;center&gt;</code>. The
807-
weird behavior of ‘<a href="#auto2"><code class=css>auto</code></a>’
808-
is for that and because ‘<code class=css>display: block</code>’
809-
elements are essentially transparent, layout-wise, so passing through the
810-
alignment unchanged is useful and probably intuitive to authors (though
811-
it's really weird for implementers).
799+
<p class=note>This would, in conjunction with ‘<code
800+
class=property>text-align</code>’, implement the HTML <code>align</code>
801+
attribute and <code>&lt;center&gt;</code>. The weird behavior of ‘<a
802+
href="#auto2"><code class=css>auto</code></a>’ is for that and because
803+
‘<code class=css>display: block</code>’ elements are essentially
804+
transparent, layout-wise, so passing through the alignment unchanged is
805+
useful and probably intuitive to authors (though it's really weird for
806+
implementers).
812807

813808
<h3 id=align-content><span class=secno>4.2. </span> Stacking/Cross-Axis
814809
Alignment: the ‘<a href="#align-content0"><code
@@ -879,10 +874,10 @@ <h3 id=align-content><span class=secno>4.2. </span> Stacking/Cross-Axis
879874
class=css>head</code></a>’, except that it does not cause the block to
880875
establish a block formatting context. For table cells, defers alignment
881876
to ‘<code class=property>vertical-align</code>’ as specified in <a
882-
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> chapter 17.
877+
href="#CSS21">[CSS21]<!--{{!CSS21}}--></a> chapter 17.
883878
For flex containers, it causes any positive free space to be distributed
884879
equally across the lines. <a href="#CSS3-FLEXBOX"
885-
rel=biblioentry>[CSS3-FLEXBOX]<!--{{!CSS3-FLEXBOX}}--></a>
880+
>[CSS3-FLEXBOX]<!--{{!CSS3-FLEXBOX}}--></a>
886881

887882
<dt><dfn id=head0>‘<code class=css>head</code>’</dfn>
888883

@@ -918,7 +913,7 @@ <h3 id=align-content><span class=secno>4.2. </span> Stacking/Cross-Axis
918913
class=css>baseline</code></a>’-aligned cells/items in the same row.
919914
This is equivalent to the behavior of ‘<code class=css>vertical-align:
920915
baseline</code>’ on table cells; see <a href="#CSS21"
921-
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> chapter 17 for details. If
916+
>[CSS21]<!--{{!CSS21}}--></a> chapter 17 for details. If
922917
size constraints prevent the baselines from fully aligning, alignment is
923918
as close as possible. If the content's position is not fully determined
924919
by baseline alignment, the content is head-aligned insofar as possible
@@ -972,7 +967,9 @@ <h2 id=default-alignment><span class=secno>5. </span> Default Alignment of
972967
by the element.
973968

974969
<div class=figure>
975-
<p><img src=child-target.jpg>
970+
<p><img
971+
alt="Diagram showing that the alignment of grid items within the element is affected."
972+
src=child-target.jpg>
976973
</div>
977974

978975
<h3 id=justify-items><span class=secno>5.1. </span> Inline/Main-Axis
@@ -1120,7 +1117,7 @@ <h3 id=conventions><span class=secno>6.1. </span> Document conventions</h3>
11201117

11211118
<p>All of the text of this specification is normative except sections
11221119
explicitly marked as non-normative, examples, and notes. <a
1123-
href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
1120+
href="#RFC2119">[RFC2119]<!--{{!RFC2119}}--></a>
11241121

11251122
<p>Examples in this specification are introduced with the words “for
11261123
example” or are set apart from the normative text with

0 commit comments

Comments
 (0)