@@ -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 i
13C5
s 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<
3FE1
/code>
13581358Applying Position Fallback {#fallback-apply}
0 commit comments