Skip to content

Commit 1902adb

Browse files
committed
[css-align] Markup fixes, better linking, specify how to resolve a conflict between self and content baseline alignment on the same box.
--HG-- extra : rebase_source : de45114ffa146314fa1f97f7a4c8eba53dfbeed4
1 parent b5aee9b commit 1902adb

File tree

2 files changed

+373
-346
lines changed

2 files changed

+373
-346
lines changed

css-align/Overview.bs

+31-20
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ Previous Version: http://www.w3.org/TR/2012/WD-css3-align-20120612/
1414
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]].)
1515
!Issue Tracking: <a href="http://www.w3.org/Style/CSS/Tracker/products/39">http://www.w3.org/Style/CSS/Tracker/products/39</a>
1616
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
1818
At Risk: ''last-baseline''
1919
</pre>
2020

@@ -280,7 +280,7 @@ Baseline Alignment: the ''baseline'' and ''last-baseline'' keywords</h3>
280280
<dl dfn-type=value dfn-for="justify-content, justify-self, justify-items, align-content, align-self, align-items">
281281
<dt><dfn>baseline</dfn>
282282
<dd>
283-
Indicates <dfn>first-baseline alignment</dfn>:
283+
Indicates <dfn dfn>first-baseline alignment</dfn>:
284284
aligns one of the box's <a>first baselines</a>
285285
with the corresponding <a>first baselines</a>
286286
of all the boxes in its <a>baseline-sharing group</a>.
@@ -291,7 +291,7 @@ Baseline Alignment: the ''baseline'' and ''last-baseline'' keywords</h3>
291291

292292
<dt><dfn>last-baseline</dfn>
293293
<dd>
294-
Indicates <dfn>last-baseline alignment</dfn>:
294+
Indicates <dfn dfn>last-baseline alignment</dfn>:
295295
aligns one of the box's <a>last baselines</a>
296296
with the corresponding <a>last baselines</a>
297297
of all the boxes in its <a>baseline-sharing group</a>.
@@ -301,17 +301,27 @@ Baseline Alignment: the ''baseline'' and ''last-baseline'' keywords</h3>
301301
(Content that has no <a>last baselines</a> is thus end-aligned.)
302302
</dl>
303303

304+
These values give a box a <dfn>baseline alignment preference</dfn>:
305+
either "first" or "last", respectively.
306+
304307
When specified for 'align-content'/'justify-content',
305308
these values trigger <a>baseline content-alignment</a>,
306309
shifting the content of the box within the box,
307310
and may also affect the sizing of the box itself.
308-
See <a section href="#baseline-align-content"></a>.
311+
See [#baseline-align-content].
309312

310313
When specified for 'align-self'/'justify-self',
311314
these values trigger <a>baseline self-alignment</a>,
312315
shifting the entire box within its container,
313316
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.
315325

316326
<p class='issue'>Add example images.
317327

@@ -325,9 +335,10 @@ Baseline Alignment: the ''baseline'' and ''last-baseline'' keywords</h3>
325335
This is possible only if they
326336

327337
<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).
331342
</ul>
332343

333344
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>
919930
<h2 id='baseline-rules'>
920931
Determining the Baseline of a Box</h2>
921932

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
923934
for a given axis
924935
are a set of baselines (alphabetic, central, etc.)
925936
nominally associated with the first (last) line of text within the box.
@@ -928,15 +939,15 @@ Determining the Baseline of a Box</h2>
928939
(See 'alignment-baseline'.)
929940
Note that boxes might not have baselines in a particular axis.
930941

931-
The first and last <i>baselines of a box</i>
942+
The first and last <a>baselines of a box</a>
932943
are determined differently based on the layout model, as follows:
933944

934945
<dl>
935946
<dt>block containers
936947
<dd>
937948
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,
940951
whichever comes first (last).
941952
If there is no such line box or child,
942953
then the block container has no baselines.
@@ -949,23 +960,23 @@ Determining the Baseline of a Box</h2>
949960
<dt>tables
950961
<dd>
951962
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.
953964

954965
When finding the baselines of an inline-block,
955966
any baselines contributed by table boxes must be skipped.
956967
(This quirk is a legacy behavior from [[CSS21]].)
957968

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.
959970

960971
<dt>table rows
961972
<dd>
962973
If any cells in the row participate in ''baseline'' (''last-baseline'') alignment along the row axis,
963974
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>
965976
and the row's <a>first available font</a>,
966977
after alignment has been performed.
967978
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.
969980
[[!CSS21]]
970981

971982
A table row has no block-axis baselines.
@@ -975,11 +986,11 @@ Determining the Baseline of a Box</h2>
975986
If any cells in the column participate in ''baseline'' (''last-baseline'') alignment
976987
along the column axis (by having a writing mode perpendicular to that of the table),
977988
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>
979990
and the column's <a>first available font</a>,
980991
after alignment has been performed.
981992
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.
983994
[[!CSS21]]
984995

985996
A table column has no inline-axis baselines.
@@ -993,10 +1004,10 @@ Determining the Baseline of a Box</h2>
9931004
See <a href="http://www.w3.org/TR/css3-grid-layout/#grid-baselines">Grid Baselines</a> in [[!CSS3-GRID-LAYOUT]].
9941005
</dl>
9951006

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,
9971008
use the baseline table from the font settings and <a>first available font</a> of that box.
9981009

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),
10001011
synthesize the alphabetic baseline from the lower line
10011012
and the central baseline by averaging the positions of the upper and lower lines.
10021013

0 commit comments

Comments
 (0)