@@ -14,7 +14,7 @@ Previous Version: http://www.w3.org/TR/2012/WD-css3-align-20120612/
14
14
Abstract : This module contains the features of <a href="http://www.w3.org/TR/CSS/">CSS</a> relating to the alignment of boxes within their containers in the various CSS box layout models: block layout, table layout, flex layout, and grid layout. (The alignment of text and inline-level content is defined in [[CSS3TEXT]] and [[CSS3LINE]].)
15
15
!Issue Tracking : <a href="http://www.w3.org/Style/CSS/Tracker/products/39">http://www.w3.org/Style/CSS/Tracker/products/39</a>
16
16
Link Defaults : selectors-3 (dfn) first formatted line, css-flexbox-1 (dfn) flex line, css-multicol-1 (dfn) multi-column element, css-fonts-3 (dfn) first available font, css21 (property) max-width/max-height/min-width/min-height
17
- Ignored Terms : table cell
17
+ Ignored Terms : table cell, stretch
18
18
At Risk : ''last-baseline''
19
19
</pre>
20
20
@@ -280,7 +280,7 @@ Baseline Alignment: the ''baseline'' and ''last-baseline'' keywords</h3>
280
280
<dl dfn-type=value dfn-for="justify-content, justify-self, justify-items, align-content, align-self, align-items">
281
281
<dt> <dfn>baseline</dfn>
282
282
<dd>
283
- Indicates <dfn>first-baseline alignment</dfn> :
283
+ Indicates <dfn dfn >first-baseline alignment</dfn> :
284
284
aligns one of the box's <a>first baselines</a>
285
285
with the corresponding <a>first baselines</a>
286
286
of all the boxes in its <a>baseline-sharing group</a> .
@@ -291,7 +291,7 @@ Baseline Alignment: the ''baseline'' and ''last-baseline'' keywords</h3>
291
291
292
292
<dt> <dfn>last-baseline</dfn>
293
293
<dd>
294
- Indicates <dfn>last-baseline alignment</dfn> :
294
+ Indicates <dfn dfn >last-baseline alignment</dfn> :
295
295
aligns one of the box's <a>last baselines</a>
296
296
with the corresponding <a>last baselines</a>
297
297
of all the boxes in its <a>baseline-sharing group</a> .
@@ -301,17 +301,27 @@ Baseline Alignment: the ''baseline'' and ''last-baseline'' keywords</h3>
301
301
(Content that has no <a>last baselines</a> is thus end-aligned.)
302
302
</dl>
303
303
304
+ These values give a box a <dfn>baseline alignment preference</dfn> :
305
+ either "first" or "last", respectively.
306
+
304
307
When specified for 'align-content' /'justify-content' ,
305
308
these values trigger <a>baseline content-alignment</a> ,
306
309
shifting the content of the box within the box,
307
310
and may also affect the sizing of the box itself.
308
- See <a section href=" #baseline-align-content"></a> .
311
+ See [ #baseline-align-content] .
309
312
310
313
When specified for 'align-self' /'justify-self' ,
311
314
these values trigger <a>baseline self-alignment</a> ,
312
315
shifting the entire box within its container,
313
316
which may affect the sizing of its container.
314
- See <a section href="#baseline-align-self"></a> .
317
+ See [#baseline-align-self] .
318
+
319
+ If both <a>baseline content-alignment</a> <em> and</em> <a>baseline self-alignment</a> are specified in the same axis,
320
+ only <a>baseline self-alignment</a> is honored in that axis;
321
+ the content-alignment in that axis must be treated as ''self-start'' .
322
+
323
+ Issue: The previous paragraph is fairly arbitrary.
324
+ Need some experience to make sure it's the correct choice out of the two possibilities.
315
325
316
326
<p class='issue'> Add example images.
317
327
@@ -325,9 +335,10 @@ Baseline Alignment: the ''baseline'' and ''last-baseline'' keywords</h3>
325
335
This is possible only if they
326
336
327
337
<ul>
328
- <li> share an <a>alignment context</a> whose axis is parallel to their <i> inline axis</i>
329
- <li> have the same <a>block flow direction</a> and <a>line orientation</a> ,
330
- <li> participate in the same type of baseline alignment (first- vs. last-line, content- vs. self-alignment)
338
+ <li> share an <a>alignment context</a> whose axis is parallel to their <a>inline axis</a>
339
+ <li> either have the same <a>block flow direction</a> and <a>baseline alignment preference</a> ,
340
+ or have opposite <a>block flow direction</a> and opposite <a>baseline alignment preference</a>
341
+ (in other words, the baselines that want to align are on the same side of the alignment context).
331
342
</ul>
332
343
333
344
Boxes <dfn title="shared alignment context|alignment context">share an alignment context</dfn> along a particular axis when they are:
@@ -919,7 +930,7 @@ Block/Cross-Axis Alignment: the 'align-items' property</h3>
919
930
<h2 id='baseline-rules'>
920
931
Determining the Baseline of a Box</h2>
921
932
922
- The <dfn title="baselines of a box"></dfn><dfn> first baselines</dfn> (and <dfn>last baselines</dfn> ) of a box
933
+ The <dfn export title="first baselines|baselines of a box">first baselines</dfn> (and <dfn export >last baselines</dfn> ) of a box
923
934
for a given axis
924
935
are a set of baselines (alphabetic, central, etc.)
925
936
nominally associated with the first (last) line of text within the box.
@@ -928,15 +939,15 @@ Determining the Baseline of a Box</h2>
928
939
(See 'alignment-baseline' .)
929
940
Note that boxes might not have baselines in a particular axis.
930
941
931
- The first and last <i > baselines of a box</i >
942
+ The first and last <a >baselines of a box</a >
932
943
are determined differently based on the layout model, as follows:
933
944
934
945
<dl>
935
946
<dt> block containers
936
947
<dd>
937
948
The first (last) inline-axis baselines of a block container
938
- are generated from the dominant baseline of the first (last) in-flow line box in the block container,
939
- or are taken from the first (last) in-flow block-level child in the block container that contributes a set of baselines,
949
+ are <a> generated</a> from the dominant first (last) baseline of the first (last) in-flow line box in the block container,
950
+ or are taken from the first (last) in-flow block-level child in the block container that contributes a set of first (last) baselines,
940
951
whichever comes first (last).
941
952
If there is no such line box or child,
942
953
then the block container has no baselines.
@@ -949,23 +960,23 @@ Determining the Baseline of a Box</h2>
949
960
<dt> tables
950
961
<dd>
951
962
The first (last) inline-axis baselines of a table box are
952
- the baselines of its first (last) row.
963
+ the first (last) baselines of its first (last) row.
953
964
954
965
When finding the baselines of an inline-block,
955
966
any baselines contributed by table boxes must be skipped.
956
967
(This quirk is a legacy behavior from [[CSS21]] .)
957
968
958
- The block-axis baselines of a table box are the baselines of its first (last) column.
969
+ The first (last) block-axis baselines of a table box are the first (last) baselines of its first (last) column.
959
970
960
971
<dt> table rows
961
972
<dd>
962
973
If any cells in the row participate in ''baseline'' (''last-baseline'' ) alignment along the row axis,
963
974
the first (last) inline-axis baselines of the row
964
- are generated from their shared <a>alignment baseline</a>
975
+ are <a> generated</a> from their shared <a>alignment baseline</a>
965
976
and the row's <a>first available font</a> ,
966
977
after alignment has been performed.
967
978
Otherwise, the first (last) inline-axis baselines of the row
968
- are synthesized from the lowest and highest content edges of the cells in the row.
979
+ are <a> synthesized</a> from the lowest and highest content edges of the cells in the row.
969
980
[[!CSS21]]
970
981
971
982
A table row has no block-axis baselines.
@@ -975,11 +986,11 @@ Determining the Baseline of a Box</h2>
975
986
If any cells in the column participate in ''baseline'' (''last-baseline'' ) alignment
976
987
along the column axis (by having a writing mode perpendicular to that of the table),
977
988
the first (last) block-axis baselines of the column
978
- are generated from their shared <a>alignment baseline</a>
989
+ are <a> generated</a> from their shared <a>alignment baseline</a>
979
990
and the column's <a>first available font</a> ,
980
991
after alignment has been performed.
981
992
Otherwise, the the first (last) inline-axis baselines of the row
982
- are synthesized from the extreme content edges of the cells in the row.
993
+ are <a> synthesized</a> from the extreme content edges of the cells in the row.
983
994
[[!CSS21]]
984
995
985
996
A table column has no inline-axis baselines.
@@ -993,10 +1004,10 @@ Determining the Baseline of a Box</h2>
993
1004
See <a href="http://www.w3.org/TR/css3-grid-layout/#grid-baselines">Grid Baselines</a> in [[!CSS3-GRID-LAYOUT]] .
994
1005
</dl>
995
1006
996
- To <dfn>generate baselines</dfn> for a box from a single baseline,
1007
+ To <dfn local-title=generate|generated >generate baselines</dfn> for a box from a single baseline,
997
1008
use the baseline table from the font settings and <a>first available font</a> of that box.
998
1009
999
- To <dfn>synthesize baselines</dfn> from a rectangle (or two parallel lines),
1010
+ To <dfn local-title=synthesize|synthesized >synthesize baselines</dfn> from a rectangle (or two parallel lines),
1000
1011
synthesize the alphabetic baseline from the lower line
1001
1012
and the central baseline by averaging the positions of the upper and lower lines.
1002
1013
0 commit comments