[css-anchor-position-1] Add 'dialog' alignment value. w3c#10258

Author: tabatkins

css-anchor-position-1/Overview.bs

@@ -772,107 +772,6 @@ It serializes in the order given in the grammar (above),
 with the logical keywords serialized in their short forms
 (e.g. ''start start'' instead of ''block-start inline-start'').
 
-<h4 id=position-area-alignment>
-Area-specific Default Alignment</h4>
-
-Each <<position-area>> also implies a default [=self-alignment=],
-which will be used if the [=self-alignment property=] on the box
-is ''align-self/normal'':
-
-* If the only the center track in an axis is selected,
-	the default alignment in that axis is ''align-self/center''.
-* If all three tracks are selected,
-	the default alignment in that axis is ''align-self/anchor-center''.
-* Otherwise, the default alignment in that axis
-	is toward the non-specified side track:
-	if it's specifying the “start” track of its axis,
-	the default alignment in that axis is ''align-self/end''; etc.
-
-<div class=example>
-	For example, assuming an English-equivalent writing mode (horizontal-tb, ltr),
-	then the value ''span-x-start top'' resolves to
-	the ''position-area/start'' region of the vertical axis,
-	and the ''position-area/start'' and ''position-area/center'' regions of the horizontal axis,
-	so the default alignments will be ''align-self: end''
-	(making the box's bottom [=margin edge=] flush with the bottom of the ''position-area/top'' region)
-	and ''justify-self: end''
-	(making the box's end-side [=margin edge=] flush with the end side of the ''position-area/span-start'' region).
-</div>
-
-<div class=note>
-	If the box overflows its [=inset-modified containing block=],
-	but would still fit within its [=original containing block=],
-	by default it will “shift” to stay within its [=original containing block=],
-	even if that violates its normal alignment.
-	See [[css-align-3#overflow-values]] for details.
-
-	This behavior makes it more likely
-	that positioned boxes remain visible
-	and within their intended bounds,
-	even when their [=containing block=]
-	ends up smaller than anticipated.
-
-	For example, a ''position-area: bottom span-right'' value
-	lets the positioned box stretch
-	from its anchor's left edge
-	to its containing block's right edge,
-	and left-aligns it in that space by default.
-	But if the positioned box is larger than that space
-	(such as if the anchor is very close to the right edge of the screen),
-	it will shift leftwards to stay visible.
-</div>
-
-
-<!-- Big Text: a-center
-
- ███▌         ███▌  █████▌ █    █▌ █████▌ █████▌ ████▌
-▐█ ▐█        █▌  █▌ █▌     █▌   █▌   █▌   █▌     █▌  █▌
-█▌  █▌       █▌     █▌     ██▌  █▌   █▌   █▌     █▌  █▌
-█▌  █▌ ████▌ █▌     ████   █▌▐█ █▌   █▌   ████   ████▌
-█████▌       █▌     █▌     █▌  ██▌   █▌   █▌     █▌▐█
-█▌  █▌       █▌  █▌ █▌     █▌   █▌   █▌   █▌     █▌ ▐█
-█▌  █▌        ███▌  █████▌ █▌   ▐▌   █▌   █████▌ █▌  █▌
--->
-
-Centering on the Anchor: the ''anchor-center'' alignment value {#anchor-center}
---------------------------------------------------------------
-
-<pre class=propdef>
-Name: justify-self, align-self, justify-items, align-items
-New Values: anchor-center
-</pre>
-
-The [=self-alignment properties=] allow an [=absolutely positioned box=]
-to align itself within the [=inset-modified containing block=].
-The existing values,
-plus carefully chosen [=inset properties=],
-are usually enough for useful alignment,
-but a common case for anchored positioning--
-centering over the [=anchor box=]--
-requires careful and somewhat complex set-up to achieve.
-
-The new <dfn value for="justify-self, align-self, justify-items, align-items">anchor-center</dfn> value
-makes this case extremely simple:
-if the positioned box has a [=default anchor box=],
-then it is centered (insofar as possible)
-over the [=default anchor box=]
-in the relevant axis.
-
-Additionally,
-any ''top/auto'' [=inset properties=] resolve to ''0''.
-
-If the box is not [=absolutely positioned=],
-or does not have a [=default anchor box=],
-this value behaves as ''<self-position>/center''
-and has no additional effect on how [=inset properties=] resolve.
-
-Note: When using ''anchor-center'', by default
-if the anchor is too close to the edge of the box's
-[=original containing block=],
-it will “shift” from being purely centered,
-in order to remain within the [=original containing block=].
-See [[css-align-3#overflow-values]] for more details.
-
 <!-- Big Text: anchor()
 
  ███▌  █    █▌  ███▌  █▌  █▌  ███▌  ████▌    ██ ██  
@@ -1389,6 +1288,157 @@ depending on some commonly needed layout conditions.
 	rather than <em>also</em> floating in a nonsensical location.
 </div>
 
+
+<!-- Big Text: Alignment
+
+ ███▌  █▌    ████  ███▌  █    █▌ █     █ █████▌ █    █▌ █████▌
+▐█ ▐█  █▌     ▐▌  █▌  █▌ █▌   █▌ ██   ██ █▌     █▌   █▌   █▌
+█▌  █▌ █▌     ▐▌  █▌     ██▌  █▌ █▌█ █▐█ █▌     ██▌  █▌   █▌
+█▌  █▌ █▌     ▐▌  █▌ ██▌ █▌▐█ █▌ █▌ █ ▐█ ████   █▌▐█ █▌   █▌
+█████▌ █▌     ▐▌  █▌  █▌ █▌  ██▌ █▌   ▐█ █▌     █▌  ██▌   █▌
+█▌  █▌ █▌     ▐▌  █▌  █▌ █▌   █▌ █▌   ▐█ █▌     █▌   █▌   █▌
+█▌  █▌ █████ ████  ███▌  █▌   ▐▌ █▌   ▐█ █████▌ █▌   ▐▌   █▌
+-->
+
+Anchor-Based Alignment {#alignment}
+======================
+
+
+
+<h3 id=position-area-alignment>
+Area-specific Default Alignment</h3>
+
+When using 'position-area',
+the behavior of the ''align-self/normal'' [=self-alignment=] value
+changes depending on the <<position-area>> value,
+to align the box towards the anchor:
+
+* If the only the center track in an axis is selected,
+	the default alignment in that axis is ''align-self/center''.
+* If all three tracks are selected,
+	the default alignment in that axis is ''align-self/anchor-center''.
+* Otherwise, the default alignment in that axis
+	is toward the non-specified side track:
+	if it's specifying the “start” track of its axis,
+	the default alignment in that axis is ''align-self/end''; etc.
+
+<div class=example>
+	For example, assuming an English-equivalent writing mode (horizontal-tb, ltr),
+	then the value ''span-x-start top'' resolves to
+	the ''position-area/start'' region of the vertical axis,
+	and the ''position-area/start'' and ''position-area/center'' regions of the horizontal axis,
+	so the default alignments will be ''align-self: end''
+	(making the box's bottom [=margin edge=] flush with the bottom of the ''position-area/top'' region)
+	and ''justify-self: end''
+	(making the box's end-side [=margin edge=] flush with the end side of the ''position-area/span-start'' region).
+</div>
+
+<div class=note>
+	If the box overflows its [=inset-modified containing block=],
+	but would still fit within its [=original containing block=],
+	by default it will “shift” to stay within its [=original containing block=],
+	even if that violates its normal alignment.
+	See [[css-align-3#overflow-values]] for details.
+
+	This behavior makes it more likely
+	that positioned boxes remain visible
+	and within their intended bounds,
+	even when their [=containing block=]
+	ends up smaller than anticipated.
+
+	For example, a ''position-area: bottom span-right'' value
+	lets the positioned box stretch
+	from its anchor's left edge
+	to its containing block's right edge,
+	and left-aligns it in that space by default.
+	But if the positioned box is larger than that space
+	(such as if the anchor is very close to the right edge of the screen),
+	it will shift leftwards to stay visible.
+</div>
+
+
+<!-- Big Text: a-center
+
+ ███▌         ███▌  █████▌ █    █▌ █████▌ █████▌ ████▌
+▐█ ▐█        █▌  █▌ █▌     █▌   █▌   █▌   █▌     █▌  █▌
+█▌  █▌       █▌     █▌     ██▌  █▌   █▌   █▌     █▌  █▌
+█▌  █▌ ████▌ █▌     ████   █▌▐█ █▌   █▌   ████   ████▌
+█████▌       █▌     █▌     █▌  ██▌   █▌   █▌     █▌▐█
+█▌  █▌       █▌  █▌ █▌     █▌   █▌   █▌   █▌     █▌ ▐█
+█▌  █▌        ███▌  █████▌ █▌   ▐▌   █▌   █████▌ █▌  █▌
+-->
+
+Centering on the Anchor: the ''anchor-center'' alignment value {#anchor-center}
+--------------------------------------------------------------
+
+<pre class=propdef>
+Name: justify-self, align-self, justify-items, align-items
+New Values: anchor-center
+</pre>
+
+The [=self-alignment properties=] allow an [=absolutely positioned box=]
+to align itself within the [=inset-modified containing block=].
+The existing values,
+plus carefully chosen [=inset properties=],
+are usually enough for useful alignment,
+but a common case for anchored positioning--
+centering over the [=anchor box=]--
+requires careful and somewhat complex set-up to achieve.
+
+The new <dfn value for="justify-self, align-self, justify-items, align-items">anchor-center</dfn> value
+makes this case extremely simple:
+if the positioned box has a [=default anchor box=],
+then it is centered (insofar as possible)
+over the [=default anchor box=]
+in the relevant axis.
+
+Additionally,
+any ''top/auto'' [=inset properties=] resolve to ''0''.
+
+If the box is not [=absolutely positioned=],
+or does not have a [=default anchor box=],
+this value behaves as ''<self-position>/center''
+and has no additional effect on how [=inset properties=] resolve.
+
+Note: When using ''anchor-center'', by default
+if the anchor is too close to the edge of the box's
+[=original containing block=],
+it will “shift” from being purely centered,
+in order to remain within the [=original containing block=].
+See [[css-align-3#overflow-values]] for more details.
+
+<!-- Big Text: dialog
+
+████▌  ████  ███▌  █▌     ███▌   ███▌
+█▌  █▌  ▐▌  ▐█ ▐█  █▌    █▌  █▌ █▌  █▌
+█▌  █▌  ▐▌  █▌  █▌ █▌    █▌  █▌ █▌
+█▌  █▌  ▐▌  █▌  █▌ █▌    █▌  █▌ █▌ ██▌
+█▌  █▌  ▐▌  █████▌ █▌    █▌  █▌ █▌  █▌
+█▌  █▌  ▐▌  █▌  █▌ █▌    █▌  █▌ █▌  █▌
+████▌  ████ █▌  █▌ █████  ███▌   ███▌
+-->
+
+Conditional Centering: the ''dialog'' alignment value {#conditional-centering}
+-----------------------------------------------------
+
+<pre class=propdef>
+Name: justify-self, align-self, justify-items, align-items
+New Values: dialog
+</pre>
+
+Dialog boxes are often displayed centered on the screen,
+unless they are anchored to some other element.
+
+The new <dfn value for="justify-self, align-self, justify-items, align-items">dialog</dfn> value
+allows this behavior to be specified:
+if the box is [=absolutely positioned=]
+and its 'position-area' value is not ''position-area/none'',
+it is aligned as per ''align-self/normal''
+(see [[#position-area-alignment]]);
+otherwise,
+it is aligned as per ''align-self/center''.
+
+
 <!-- Big Text: a-size()
 
  ███▌         ███▌  ████ █████▌ █████▌   ██ ██