@@ -107,11 +107,11 @@ Determining the Anchor {#determining}
107107<!-- Big Text: a-name
108108
109109 ███▌ █ █▌ ███▌ █ █ █████▌
110- ▐█ ▐█ █▌ █▌ ▐█ ▐█ ██ ██ █▌
111- █▌ █▌ ██▌ █▌ █▌ █▌ █▌█ █▐█ █▌
112- █▌ █▌ ████▌ █▌▐█ █▌ █▌ █▌ █▌ █ ▐█ ████
113- █████▌ █▌ ██▌ █████▌ █▌ ▐█ █▌
114- █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█ █▌
110+ ▐█ ▐█ █▌ █▌ ▐█ ▐█ ██ ██ █▌
111+ █▌ █▌ ██▌ █▌ █▌ █▌ █▌█ █▐█ █▌
112+ █▌ █▌ ████▌ █▌▐█ █▌ █▌ █▌ █▌ █ ▐█ ████
113+ █████▌ █▌ ██▌ █████▌ █▌ ▐█ █▌
114+ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█ █▌
115115█▌ █▌ █▌ ▐▌ █▌ █▌ █▌ ▐█ █████▌
116116-->
117117
@@ -280,12 +280,12 @@ or nothing (a missing specifier).
280280<!-- Big Text: default
281281
282282████▌ █████▌ █████▌ ███▌ █▌ █▌ █▌ █████▌
283- █▌ █▌ █▌ █▌ ▐█ ▐█ █▌ █▌ █▌ █▌
284- █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
285- █▌ █▌ ████ ████ █▌ █▌ █▌ █▌ █▌ █▌
286- █▌ █▌ █▌ █▌ █████▌ █▌ █▌ █▌ █▌
287- █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
288- ████▌ █████▌ █▌ █▌ █▌ ███▌ █████ █▌
283+ █▌ █▌ █▌ █▌ ▐█ ▐█ █▌ █▌ █▌ █▌
284+ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
285+ █▌ █▌ ████ ████ █▌ █▌ █▌ █▌ █▌ █▌
286+ █▌ █▌ █▌ █▌ █████▌ █▌ █▌ █▌ █▌
287+ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
288+ ████▌ █████▌ █▌ █▌ █▌ ███▌ █████ █▌
289289-->
290290
291291<h3 id=anchor-default>
@@ -352,8 +352,8 @@ to explicitly refer to edges of an [=anchor element=].
352352
353353<!-- Big Text: inset-area
354354
355- ████ █ █▌ ███▌ █████▌ █████▌ ███▌ ████▌ █████▌ ███▌
356- ▐▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█ ▐█ █▌ █▌ █▌ ▐█ ▐█
355+ ████ █ █▌ ███▌ █████▌ █████▌ ███▌ ████▌ █████▌ ███▌
356+ ▐▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█ ▐█ █▌ █▌ █▌ ▐█ ▐█
357357 ▐▌ ██▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
358358 ▐▌ █▌▐█ █▌ ███▌ ████ █▌ ████▌ █▌ █▌ ████▌ ████ █▌ █▌
359359 ▐▌ █▌ ██▌ █▌ █▌ █▌ █████▌ █▌▐█ █▌ █████▌
@@ -384,27 +384,27 @@ Its syntax is:
384384
385385<pre class=prod>
386386<dfn><inset-area></dfn> = [
387- [ left | center | right | center -left | center -right
388- | x-start | x-end | center -x-start | center -x-end
389- | x-self-start | x-self-end | center -x-self-start | center -x-self-end
390- | all ]
387+ [ left | center | right | span -left | span -right
388+ | x-start | x-end | span -x-start | span -x-end
389+ | x-self-start | x-self-end | span -x-self-start | span -x-self-end
390+ | span- all ]
391391 ||
392- [ top | center | bottom | center -top | center -bottom
393- | y-start | y-end | center -y-start | center -y-end
394- | y-self-start | y-self-end | center -y-self-start | center -y-self-end
395- | all ]
392+ [ top | center | bottom | span -top | span -bottom
393+ | y-start | y-end | span -y-start | span -y-end
394+ | y-self-start | y-self-end | span -y-self-start | span -y-self-end
395+ | span- all ]
396396|
397- [ block-start | center | block-end | center -block-start | center -block-end
398- | self-block-start | self-block-end | center -self-block-start | center -self-block-end
399- | all ]
397+ [ block-start | center | block-end | span -block-start | span -block-end
398+ | self-block-start | self-block-end | span -self-block-start | span -self-block-end
399+ | span- all ]
400400 ||
401- [ inline-start | center | inline-end | center -inline-start | center -inline-end
402- | self-inline-start | self-inline-end | center -self-inline-start | center -self-inline-end
403- | all ]
401+ [ inline-start | center | inline-end | span -inline-start | span -inline-end
402+ | self-inline-start | self-inline-end | span -self-inline-start | span -self-inline-end
403+ | span- all ]
404404|
405- [ start | center | end | center -start | center -end | all ]{1,2}
405+ [ start | center | end | span -start | span -end | span- all ]{1,2}
406406|
407- [ self-start | center | self-end | center -self-start | center -self-end | all ]{1,2}
407+ [ self-start | center | self-end | span -self-start | span -self-end | span- all ]{1,2}
408408]
409409</pre>
410410
@@ -483,28 +483,28 @@ with each of the two keywords specifying one of them:
483483 are identical,
484484 but refer to the element's own writing mode.
485485
486- : <dfn>center -start</dfn> , <dfn>center -end</dfn>
487- : <dfn>center -top</dfn> , <dfn>center -bottom</dfn>
488- : <dfn>center -y-start</dfn> , <dfn>center -y-end</dfn>
489- : <dfn>center -x-start</dfn> , <dfn>center -x-end</dfn>
490- : <dfn>center -block-start</dfn> , <dfn>center -block-end</dfn>
491- : <dfn>center -inline-start</dfn> , <dfn>center -inline-end</dfn>
486+ : <dfn>span -start</dfn> , <dfn>span -end</dfn>
487+ : <dfn>span -top</dfn> , <dfn>span -bottom</dfn>
488+ : <dfn>span -y-start</dfn> , <dfn>span -y-end</dfn>
489+ : <dfn>span -x-start</dfn> , <dfn>span -x-end</dfn>
490+ : <dfn>span -block-start</dfn> , <dfn>span -block-end</dfn>
491+ : <dfn>span -inline-start</dfn> , <dfn>span -inline-end</dfn>
492492 :: Two rows or columns,
493493 depending on which axis this keyword is specifying:
494494 the center row/column,
495495 and the row/column corresponding to the other half of the keyword
496496 as per the single-track keywords.
497497
498- (For example, ''center -top'' spans the first two rows--
498+ (For example, ''span -top'' spans the first two rows--
499499 the center row and the top row.)
500500
501- : <dfn>all</dfn>
501+ : <dfn>span- all</dfn>
502502 :: All three rows or columns,
503503 depending on which axis this keyword is specifying.
504504</dl>
505505
506506Some keywords are ambiguous about what axis they refer to:
507- ''inset-area/center'' , ''inset-area/all'' ,
507+ ''inset-area/center'' , ''inset-area/span- all'' ,
508508and the ''inset-area/start'' /etc keywords that don't specify the block or inline axis explicitly.
509509If the other keyword is unambiguous about its axis,
510510then the ambiguous keyword is referring to the opposite axis.
@@ -513,13 +513,13 @@ the ''inset-area/center'' keyword is referring to the inline axis.)
513513If both keywords are ambiguous, however,
514514then the first refers to the block axis of the element's [=containing block=] ,
515515and the second to the inline axis.
516- (For example, ''all start'' is equivalent to ''all inline-start'' .)
516+ (For example, ''span- all start'' is equivalent to ''span- all inline-start'' .)
517517
518518If only a single keyword is given,
519- it behaves as if the second keyword is ''inset-area/all''
519+ it behaves as if the second keyword is ''inset-area/span- all''
520520if the given keyword is unambigous about its axis;
521521otherwise, it behaves as if the given keyword was repeated.
522- (For example, ''inset-area/top'' is equivalent to ''top all'' ,
522+ (For example, ''inset-area/top'' is equivalent to ''top span- all'' ,
523523but ''inset-area/center'' is equivalent to ''center center'' .)
524524
525525<hr>
@@ -536,15 +536,15 @@ is ''align-self/normal'':
536536
537537<div class=example>
538538 For example, assuming an English-equivalent writing mode (horizontal-tb, ltr),
539- then the value ''center -x-start top'' resolves to
539+ then the value ''span -x-start top'' resolves to
540540 the "start" region of the vertical axis,
541541 and the "start" and "center" regions of the horizontal axis,
542542 so the default alignments will be ''align-self: end;'' and ''justify-self: anchor-center;''
543543
544544 <figure>
545545 <img src="images/inset-area-example.png" width=400>
546546 <figcaption>
547- An example of ''inset-area: center -x-start top'' positioning.
547+ An example of ''inset-area: span -x-start top'' positioning.
548548 </figcaption>
549549</div>
550550
@@ -555,13 +555,13 @@ some of the [=inset-area grid's=] rows or columns can be zero-sized.
555555
556556<!-- Big Text: anchor()
557557
558- ███▌ █ █▌ ███▌ █▌ █▌ ███▌ ████▌ ██ ██
559- ▐█ ▐█ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█
558+ ███▌ █ █▌ ███▌ █▌ █▌ ███▌ ████▌ ██ ██
559+ ▐█ ▐█ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█
560560█▌ █▌ ██▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█
561561█▌ █▌ █▌▐█ █▌ █▌ █████▌ █▌ █▌ ████▌ █▌ ▐█
562562█████▌ █▌ ██▌ █▌ █▌ █▌ █▌ █▌ █▌▐█ █▌ ▐█
563- █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█ █▌ ▐█
564- █▌ █▌ █▌ ▐▌ ███▌ █▌ █▌ ███▌ █▌ █▌ ██ ██
563+ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█ █▌ ▐█
564+ █▌ █▌ █▌ ▐▌ ███▌ █▌ █▌ ███▌ █▌ █▌ ██ ██
565565-->
566566
567567The ''anchor()'' Function {#anchor-pos}
@@ -740,12 +740,12 @@ as if by an additional ''translate()'' transform.
740740
741741<!-- Big Text: a-center
742742
743- ███▌ ███▌ █████▌ █ █▌ █████▌ █████▌ ████▌
743+ ███▌ ███▌ █████▌ █ █▌ █████▌ █████▌ ████▌
744744▐█ ▐█ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
745745█▌ █▌ █▌ █▌ ██▌ █▌ █▌ █▌ █▌ █▌
746- █▌ █▌ ████▌ █▌ ████ █▌▐█ █▌ █▌ ████ ████▌
747- █████▌ █▌ █▌ █▌ ██▌ █▌ █▌ █▌▐█
748- █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█
746+ █▌ █▌ ████▌ █▌ ████ █▌▐█ █▌ █▌ ████ ████▌
747+ █████▌ █▌ █▌ █▌ ██▌ █▌ █▌ █▌▐█
748+ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█
749749█▌ █▌ ███▌ █████▌ █▌ ▐▌ █▌ █████▌ █▌ █▌
750750-->
751751
@@ -790,12 +790,12 @@ and has no additional effect on how [=inset properties=] resolve.
790790
791791<!-- Big Text: scroll
792792
793- ███▌ ███▌ ████▌ ███▌ █▌ █▌
794- █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
795- █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
796- ███▌ █▌ ████▌ █▌ █▌ █▌ █▌
797- █▌ █▌ █▌▐█ █▌ █▌ █▌ █▌
798- █▌ █▌ █▌ █▌ █▌ ▐█ █▌ █▌ █▌ █▌
793+ ███▌ ███▌ ████▌ ███▌ █▌ █▌
794+ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
795+ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
796+ ███▌ █▌ ████▌ █▌ █▌ █▌ █▌
797+ █▌ █▌ █▌▐█ █▌ █▌ █▌ █▌
798+ █▌ █▌ █▌ █▌ █▌ ▐█ █▌ █▌ █▌ █▌
799799 ███▌ ███▌ █▌ █▌ ███▌ █████ █████
800800-->
801801
@@ -892,13 +892,13 @@ it resolves to ''0px''.
892892
893893<!-- Big Text: a-size()
894894
895- ███▌ ███▌ ████ █████▌ █████▌ ██ ██
896- ▐█ ▐█ █▌ █▌ ▐▌ ▐▌ █▌ █▌ ▐█
895+ ███▌ ███▌ ████ █████▌ █████▌ ██ ██
896+ ▐█ ▐█ █▌ █▌ ▐▌ ▐▌ █▌ █▌ ▐█
897897█▌ █▌ █▌ ▐▌ ▐▌ █▌ █▌ ▐█
898898█▌ █▌ ████▌ ███▌ ▐▌ █▌ ████ █▌ ▐█
899899█████▌ █▌ ▐▌ █ █▌ █▌ ▐█
900- █▌ █▌ █▌ █▌ ▐▌ █ █▌ █▌ ▐█
901- █▌ █▌ ███▌ ████ █████▌ █████▌ ██ ██
900+ █▌ █▌ █▌ █▌ ▐▌ █ █▌ █▌ ▐█
901+ █▌ █▌ ███▌ ████ █████▌ █████▌ ██ ██
902902-->
903903
904904Anchor-Based Sizing {#sizing}
@@ -971,11 +971,11 @@ it resolves to ''0px''.
971971<!-- Big Text: fallback
972972
973973█████▌ ███▌ █▌ █▌ ████▌ ███▌ ███▌ █▌ █▌
974- █▌ ▐█ ▐█ █▌ █▌ █▌ █▌ ▐█ ▐█ █▌ █▌ █▌ █▌
975- █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌█▌
976- ████ █▌ █▌ █▌ █▌ █████ █▌ █▌ █▌ ██
977- █▌ █████▌ █▌ █▌ █▌ █▌ █████▌ █▌ █▌█▌
978- █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
974+ █▌ ▐█ ▐█ █▌ █▌ █▌ █▌ ▐█ ▐█ █▌ █▌ █▌ █▌
975+ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌█▌
976+ ████ █▌ █▌ █▌ █▌ █████ █▌ █▌ █▌ ██
977+ █▌ █████▌ █▌ █▌ █▌ █▌ █████▌ █▌ █▌█▌
978+ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
979979█▌ █▌ █▌ █████ █████ ████▌ █▌ █▌ ███▌ █▌ █▌
980980-->
981981
@@ -1105,14 +1105,14 @@ Values have the following meanings:
11051105 with the given value.
11061106</dl>
11071107
1108- <!-- Big Text: -order
1108+ <!-- Big Text: -order
11091109
1110- ███▌ ████▌ ████▌ █████▌ ████▌
1110+ ███▌ ████▌ ████▌ █████▌ ████▌
11111111 █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
11121112 █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
1113- ████▌ █▌ █▌ ████▌ █▌ █▌ ████ ████▌
1114- █▌ █▌ █▌▐█ █▌ █▌ █▌ █▌▐█
1115- █▌ █▌ █▌ ▐█ █▌ █▌ █▌ █▌ ▐█
1113+ ████▌ █▌ █▌ ████▌ █▌ █▌ ████ ████▌
1114+ █▌ █▌ █▌▐█ █▌ █▌ █▌ █▌▐█
1115+ █▌ █▌ █▌ ▐█ █▌ █▌ █▌ █▌ ▐█
11161116 ███▌ █▌ █▌ ████▌ █████▌ █▌ █▌
11171117-->
11181118
@@ -1270,12 +1270,12 @@ it's set to the property's initial value.
12701270<!-- Big Text: @pos-try
12711271
12721272 ████▌ ████▌ ███▌ ███▌ █████▌ ████▌ █ ▐▌
1273- █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐▌ █
1274- █▌▐█ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █ ▐▌
1275- █▌▐█ █▌ ████▌ █▌ █▌ ███▌ ████▌ █▌ ████▌ ▐▌█
1276- █▌ ██▌ █▌ █▌ █▌ █▌ █▌ █▌▐█ █▌
1277- █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█ █▌
1278- ████▌ █▌ ███▌ ███▌ █▌ █▌ █▌ █▌
1273+ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐▌ █
1274+ █▌▐█ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █ ▐▌
1275+ █▌▐█ █▌ ████▌ █▌ █▌ ███▌ ████▌ █▌ ████▌ ▐▌█
1276+ █▌ ██▌ █▌ █▌ █▌ █▌ █▌ █▌▐█ █▌
1277+ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█ █▌
1278+ ████▌ █▌ ███▌ ███▌ █▌ █▌ █▌ █▌
12791279-->
12801280
12811281The ''@position-try'' Rule {#fallback-rule}
@@ -1344,15 +1344,15 @@ without using ''@position-try'' at all.
13441344
13451345
13461346
1347- <!-- Big Text: apply
1347+ <!-- Big Text: apply
13481348
13491349 ███▌ ████▌ ████▌ █▌ █ ▐▌
1350- ▐█ ▐█ █▌ █▌ █▌ █▌ █▌ ▐▌ █
1351- █▌ █▌ █▌ █▌ █▌ █▌ █▌ █ ▐▌
1352- █▌ █▌ ████▌ ████▌ █▌ ▐▌█
1353- █████▌ █▌ █▌ █▌ █▌
1354- █▌ █▌ █▌ █▌ █▌ █▌
1355- █▌ █▌ █▌ █▌ █████ █▌
1350+ ▐█ ▐█ █▌ █▌ █▌ █▌ █▌ ▐▌ █
1351+ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █ ▐▌
1352+ █▌ █▌ ████▌ ████▌ █▌ ▐▌█
1353+ █████▌ █▌ █▌ █▌ █▌
1354+ █▌ █▌ █▌ █▌ █▌ █▌
1355+ █▌ █▌ █▌ █▌ █████ █▌
13561356-->
13571357
13581358Applying Position Fallback {#fallback-apply}
0 commit comments