@@ -115,11 +115,12 @@ Module interactions</h3>
115
115
or <code> ::first-letter</code> pseudo-elements.
116
116
117
117
<h3 id="values">
118
- Values </h3>
118
+ Value Definitions </h3>
119
119
120
- This specification follows the <a href="https://www.w3.org/TR/CSS21/about.html#property-defs">CSS property definition conventions</a> from [[!CSS2]] .
121
- Value types not defined in this specification are defined in CSS Values & Units [[!CSS-VALUES-3]] .
122
- Other CSS modules may expand the definitions of these value types.
120
+ This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from [[!CSS2]]
121
+ using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from [[!CSS-VALUES-3]] .
122
+ Value types not defined in this specification are defined in CSS Values & Units [[!CSS-VALUES-3]] .
123
+ Combination with other CSS modules may expand the definitions of these value types.
123
124
124
125
In addition to the property-specific values listed in their definitions,
125
126
all properties defined in this specification
@@ -614,7 +615,9 @@ Baseline Alignment: the ''baseline'' keyword and ''first''/''last'' modifiers</h
614
615
of its [=baseline-sharing group=] .
615
616
See [[#align-by-baseline]] for more details.
616
617
617
- The <a>fallback alignment</a> for ''first baseline'' is ''start'' .
618
+ The <a>fallback alignment</a> for ''first baseline'' is
619
+ ''safe self-start'' (for [=self-alignment=] )
620
+ or ''safe start'' (for [=content-distribution=] ).
618
621
619
622
<dt> <dfn lt="last baseline | last">last baseline</dfn>
620
623
<dd>
@@ -624,7 +627,9 @@ Baseline Alignment: the ''baseline'' keyword and ''first''/''last'' modifiers</h
624
627
of its [=baseline-sharing group=] .̣
625
628
See [[#align-by-baseline]] for more details.
626
629
627
- The <a>fallback alignment</a> for ''last baseline'' is ''safe end'' .
630
+ The <a>fallback alignment</a> for ''last baseline'' is
631
+ ''safe self-end'' (for [=self-alignment=] )
632
+ or ''safe end'' (for [=content-distribution=] ).
628
633
</dl>
629
634
630
635
When specified for 'align-content' ,
@@ -1340,7 +1345,7 @@ Inline-Axis (or Main-Axis) Alignment: the 'justify-self' property</h3>
1340
1345
<th> Other Details
1341
1346
<td>
1342
1347
In terms of CSS2.1 block-level formatting [[!CSS2]] ,
1343
- the rules for “over-constrained” computations in <a href="https://www.w3.org/TR/CSS21 /visudet.html#blockwidth">section 10.3.3</a>
1348
+ the rules for “over-constrained” computations in <a href="https://www.w3.org/TR/CSS2 /visudet.html#blockwidth">section 10.3.3</a>
1344
1349
are ignored in favor of alignment as specified here
1345
1350
and the used value of the margin properties are therefore not adjusted to correct for the over-constraint.
1346
1351
@@ -1397,12 +1402,12 @@ Inline-Axis (or Main-Axis) Alignment: the 'justify-self' property</h3>
1397
1402
<th> Other Details
1398
1403
<td>
1399
1404
In terms of CSS2.1 formatting [[!CSS2]] ,
1400
- the rules for “over-constrained” computations in <a href="https://www.w3.org/TR/CSS21 /visudet.html#abs-non-replaced-width">section 10.3.7</a>
1405
+ the rules for “over-constrained” computations in <a href="https://www.w3.org/TR/CSS2 /visudet.html#abs-non-replaced-width">section 10.3.7</a>
1401
1406
are ignored in favor of alignment as specified here,
1402
1407
and the used value of the inset properties are not adjusted to correct for the over-constraint.
1403
1408
1404
1409
Values other than ''justify-self/stretch'' or ''justify-self/normal''
1405
- cause <a href="https://www.w3.org/TR/CSS21 /visudet.html#abs-non-replaced-width">non-replaced absolutely-positioned boxes</a>
1410
+ cause <a href="https://www.w3.org/TR/CSS2 /visudet.html#abs-non-replaced-width">non-replaced absolutely-positioned boxes</a>
1406
1411
to use <a>fit-content sizing</a> for calculating ''width/auto'' sizes
1407
1412
in the affected axis.
1408
1413
@@ -1411,7 +1416,7 @@ Inline-Axis (or Main-Axis) Alignment: the 'justify-self' property</h3>
1411
1416
just as non-replaced ones do.
1412
1417
1413
1418
Note: If only one inset property is ''top/auto'' ,
1414
- the computations in <a href="https://www.w3.org/TR/CSS21 /visudet.html#abs-non-replaced-width">CSS2 section 10.3.7</a>
1419
+ the computations in <a href="https://www.w3.org/TR/CSS2 /visudet.html#abs-non-replaced-width">CSS2 section 10.3.7</a>
1415
1420
fully determine its size and position,
1416
1421
and 'justify-self' has no effect.
1417
1422
(If both are ''top/auto'' ,
@@ -1565,12 +1570,12 @@ Block-Axis (or Cross-Axis) Alignment: the 'align-self' property</h3>
1565
1570
<th> Other Details
1566
1571
<td>
1567
1572
In terms of CSS2.1 formatting [[!CSS2]] ,
1568
- the rules for "over-constrained" computations in <a href="https://www.w3.org/TR/CSS21 /visudet.html#abs-non-replaced-height">section 10.6.4</a>
1573
+ the rules for "over-constrained" computations in <a href="https://www.w3.org/TR/CSS2 /visudet.html#abs-non-replaced-height">section 10.6.4</a>
1569
1574
are ignored in favor of alignment as specified here
1570
1575
and the used value of the inset properties are not adjusted to correct for the over-constraint.
1571
1576
1572
1577
Values other than ''justify-self/stretch'' or ''justify-self/normal''
1573
- cause <a href="https://www.w3.org/TR/CSS21 /visudet.html#abs-non-replaced-height">non-replaced absolutely-positioned boxes</a>
1578
+ cause <a href="https://www.w3.org/TR/CSS2 /visudet.html#abs-non-replaced-height">non-replaced absolutely-positioned boxes</a>
1574
1579
to use <a>fit-content sizing</a> for calculating ''height/auto'' sizes
1575
1580
in the affected axis.
1576
1581
@@ -1579,7 +1584,7 @@ Block-Axis (or Cross-Axis) Alignment: the 'align-self' property</h3>
1579
1584
just as non-replaced ones do.
1580
1585
1581
1586
Note: If only one inset property is ''top/auto'' ,
1582
- the computations in <a href="https://www.w3.org/TR/CSS21 /visudet.html#abs-non-replaced-height">CSS2 section 10.6.4</a>
1587
+ the computations in <a href="https://www.w3.org/TR/CSS2 /visudet.html#abs-non-replaced-height">CSS2 section 10.6.4</a>
1583
1588
fully determine its size and position,
1584
1589
and 'align-self' has no effect.
1585
1590
(If both are ''top/auto'' ,
@@ -1706,7 +1711,7 @@ Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</h3
1706
1711
the <a>available space</a> for calculating the <a>inline size</a>
1707
1712
is also affected by alignment.
1708
1713
1709
- In [[CSS2]] , this is keyed off of the the 'direction' property
1714
+ Note: In [[CSS2]] , the [=available space=] is keyed off of the the 'direction' property
1710
1715
of the <a>static-position containing block</a> .
1711
1716
(See <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width">CSS2§10.3.7</a>
1712
1717
and <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width">CSS2§10.3.8</a> .)
@@ -1715,20 +1720,29 @@ Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</h3
1715
1720
to the corresponding edge of the <a>static position rectangle</a>
1716
1721
and the other to the corresponding edge of the <a>containing block</a>
1717
1722
(i.e. set the inset to zero).
1718
-
1719
1723
Just as the <a>self-alignment properties</a>
1720
- replace the <a>containing block</a> ’s 'direction' for placement,
1721
- they also replace this lookup for sizing.
1724
+ replace the <a>containing block</a> ’s 'direction' lookup for placement,
1725
+ they also replace this lookup for sizing,
1726
+ as specified here.
1727
+
1722
1728
Thus,
1723
1729
when interpreting the rules in
1724
1730
<a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width">CSS2§10.3.7</a>
1725
1731
and <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width">CSS2§10.3.8</a> ,
1726
1732
wherever the 'direction' property of the <a>static-position containing block</a> is referenced,
1727
1733
instead reference the value of the 'align-self' or 'justify-self' property
1728
1734
(whichever is defined to apply to the relevant axis),
1729
- treating ''justify-content/normal'' as ''start''
1735
+ treating left-equivalent alignment as defined for ''ltr''
1736
+ and right-equivalent alignment as defined for ''rtl'' .
1737
+ Treat ''justify-self/normal'' as ''start''
1730
1738
and any <a>distributed alignment</a> value as its <a>fallback alignment</a> .
1731
1739
1740
+ In the case of ''justify-self/center'' alignment,
1741
+ the [=available space=] for the box is
1742
+ double the distance between the center of the [=static position rectangle=]
1743
+ and the closest edge of the [=containing block=]
1744
+ in the relevant axis.
1745
+
1732
1746
<figure>
1733
1747
<img src="images/place-content-abspos.svg" width=480 height=330
1734
1748
alt="Start alignment sizes into the space between
@@ -1741,7 +1755,8 @@ Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</h3
1741
1755
Instead of always sizing
1742
1756
within the available space between
1743
1757
the <a>inline-start</a> <a>static position</a>
1744
- and the <a>inline-end</a> <a>containing block</a> edge,
1758
+ and the <a>inline-end</a> <a>containing block</a> edge
1759
+ as specified in [[CSS2]] ,
1745
1760
an absolutely-positioned element with ''left/auto'' insets
1746
1761
will be sized with reference to
1747
1762
the <a>static position rectangle</a> ’s edge(s)
@@ -1771,6 +1786,10 @@ Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets</h3
1771
1786
with <a>stretch-fit sizing</a> (consuming all of the <a>available space</a> ).
1772
1787
This is an independent effect from the available space adjustment here.
1773
1788
1789
+ Note: This only affect how [=available space=] is calculated
1790
+ for sizing the absolutely-positioned box;
1791
+ its alignment is as specified in previous sections.
1792
+
1774
1793
<!--
1775
1794
████ ████████ ████████ ██ ██ ██████
1776
1795
██ ██ ██ ██ ██ ███ ███ ██ ██
@@ -2291,19 +2310,19 @@ Appendix A: Static Position Terminology</h2>
2291
2310
are defined in [[CSS2]] Chapter 10.
2292
2311
The <a>static position rectangle</a> is a zero-thickness rectangle spanning between
2293
2312
the inline-axis sides of the box’s <a>static-position containing block</a>
2294
- (see <a href="https://www.w3.org/TR/CSS21 /visudet.html#abs-non-replaced-width">CSS2§10.3.7</a> );
2313
+ (see <a href="https://www.w3.org/TR/CSS2 /visudet.html#abs-non-replaced-width">CSS2§10.3.7</a> );
2295
2314
and positioned at its <a>block-start</a> <a>static position</a>
2296
- (see <a href="https://www.w3.org/TR/CSS21 /visudet.html#abs-non-replaced-height">CSS2§10.6.4).
2315
+ (see <a href="https://www.w3.org/TR/CSS2 /visudet.html#abs-non-replaced-height">CSS2§10.6.4</a> ).
2297
2316
2298
2317
<dt> Inline Layout
2299
2318
<dd>
2300
- The <a>static positions</a> of a <a>inline-level box</a>
2319
+ The <a>static positions</a> of an <a>inline-level box</a>
2301
2320
are defined in [[CSS2]] Chapter 10.
2302
2321
The <a>static position rectangle</a> is a zero-thickness rectangle spanning between
2303
2322
the <a>line-over</a> /<a>line-under</a> sides of the <a>line box</a>
2304
2323
that would have contained its “hypothetical box”
2305
- (see <a href="https://www.w3.org/TR/CSS21 /visudet.html#abs-non-replaced-width">CSS2§10.3.7</a> );
2306
- and positioned at its <a>inline-start</a> <a>static position</a>
2324
+ (see <a href="https://www.w3.org/TR/CSS2 /visudet.html#abs-non-replaced-width">CSS2§10.3.7</a> );
2325
+ and positioned at its <a>inline-start</a> <a>static position</a> .
2307
2326
2308
2327
<dt> Flex Layout
2309
2328
<dd>
@@ -2318,7 +2337,7 @@ Appendix A: Static Position Terminology</h2>
2318
2337
However, if that <a>grid container</a> also establishes
2319
2338
the box’s actual <a>containing block</a> ,
2320
2339
then the <a>grid area</a> specified by the <a>grid-placement properties</a>
2321
- instead establishes its <a>static position rectangle</a> .
2340
+ establishes its <a>static position rectangle</a> instead .
2322
2341
See the <a href="https://www.w3.org/TR/css-grid-1/#static-position">static position of a grid container child</a> in [[!CSS-GRID-1]] .
2323
2342
</dl>
2324
2343
0 commit comments