css-anchor-position-ja.html

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">
<title>CSS Anchor Positioning （日本語訳）</title>
<link rel="stylesheet" href="common.css" type="text/css">
<link rel="stylesheet" href="common-css.css" type="text/css">
<script src="common0.js"></script>
<script src="common1.js" async></script>

<script>
Util.ready = function(){
	const source_data = {
		generate: expand,
	};
	Util.switchWordsInit(source_data);
}

function expand(){
	const class_map = this.class_map;
	const tag_map = this.tag_map;
	const link_map = this.link_map;

	return this.html.replace(
		/%[\w\-~一-鿆あ-ん]+|`(.*?)([$@^])(\w*)/g,
		create_html
	);

	function create_html(match, key, indicator, klass){

if(!indicator) {//%
	return `<var>${match.slice(1)}</var>`;
}

let href = '';
let href1 = '';
{
	const n = key.indexOf('＠');
	if(n > 0) {
		href1 = key.slice(n + 1);
		key = key.slice(0, n);
	}
}
let text = key;

switch(klass){
case 'r':
	text = `[${key}]`;
	href = `#biblio-${key.toLowerCase()}`;
	break;
case 'p':
	{
		const i = key.indexOf(':');
		if(i > 0) {
			key = text.slice(0, i);
			text = `${key}: <code class="value">${text.slice(i + 1)}</code>`;
		}
	}
	break;
case 't':
	text = `&lt;${key}&gt;`;
	key = key.replace(/\s*\[.+/, '');
	break;
case 'tp':
	text = `&lt;'<code class="property">${key}</code>'&gt;`;
	href = link_map[`p.${key}`];
	break;
case 'pe':
	text = `::${key}`;
	break;
case 'f':
	text = `${key}()`;
	break;
case 'at':
	text = `@${key}`;
	break;
case 'ptD':
	href = `#dom-csspositiontrydescriptors-${key.toLowerCase()}`;
	break;
case 'en':
	text = `<span lang="en">${key}</span>`;
	break;
case 'issue':
	href = `~CSSissue/${key}`;
	text = `課題 #${key}`;
	break;
}

let tag = tag_map[klass];
if(tag) {
	let classname = class_map[klass];
	classname = classname ? ` class="${classname}"` : '';
	text = `<${tag}${classname}>${text}</${tag}>`;
}

if(indicator !== '^'){
	href = href1 || link_map[ klass ? `${klass}.${key}` : key ] || href;
	if(!href){
		console.log(match); // check error
		return match;
	}

	switch(indicator){
	case '$':
		text = `<a href="${href}">${text}</a>`;
		break;
	case '@':
		text = `<dfn id="${href.slice(1)}">${text}</dfn>`;
		break;
	default:
		console.log(match);
		return match;
	}
}

return text;

	}
}
</script>

<script type="text/plain" id="_source_data">
●●options

spec_title:CSS Anchor Positioning
spec_date:2024-11-18
trans_update:2024-10-25
source_checked:240308
page_state_key:CSS
original_url:https://drafts.csswg.org/css-anchor-position-1/
	abbr_url:CSSANCHOR
spec_status:ED
ref_id_prefix:biblio-
ref_id_lowercase:true
site_nav:layouts,css
conformance:css
copyright:2024,permissive
trans_1st_pub:2023-03-06

●●class_map
p:property
at:at-rule
t:type
tp:type
v:value
vA:value
vI:value
vS:value
vOp:value
vOd:value
vPa:value
f:func
pe:pseudo
css:css
e:element
a:attr

●●tag_map
p:code
t:var
tp:var
v:code
vA:code
vI:code
vS:code
vOp:code
vOd:code
vPa:code
css:code
at:code
pe:code
e:code
a:code
c:code
f:code
m:code
ptD:code
I:code
cite:cite
em:em

●●original_id_map

●●mdn_urls
	propdef-position-anchor:CSS/position-anchor
	propdef-anchor-name:CSS/anchor-name

●●link_map

	●IDL
Exposed:~WEBIDLjs#Exposed
CSSOMString:~CSSOM1#cssomstring
SameObject:~WEBIDLjs#SameObject
PutForwards:~WEBIDLjs#PutForwards

I.CSSGroupingRule:~CSSOM1#cssgroupingrule
I.CSSRule:~CSSOM1#cssrule
I.CSSStyleDeclaration:~CSSOM1#cssstyledeclaration
I.CSSPositionTryDescriptors:#csspositiontrydescriptors
I.CSSPositionTryRule:#csspositiontryrule
I.ResizeObserver:~CSSWG/resize-observer-1/#resizeobserver

m.cssText:~CSSOM1#dom-cssstyledeclaration-csstext
m.name:#dom-csspositiontryrule-name
m.style:#dom-csspositiontryrule-style

	●css
at.position-try:#at-ruledef-position-try


p.position-anchor:#propdef-position-anchor
p.position-visibility:#propdef-position-visibility
p.anchor-name:#propdef-anchor-name
p.anchor-scope:#propdef-anchor-scope
p.position-area:#propdef-position-area

p.position-try:#propdef-position-try
p.position-try-fallbacks:#propdef-position-try-fallbacks
p.position-try-order:#propdef-position-try-order

p.align-items:~CSSALIGN#propdef-align-items
p.align-self:~CSSALIGN#propdef-align-self
p.bottom:~CSSPOS#propdef-bottom
p.content-visibility:~CSSCONTAIN#propdef-content-visibility
p.display:~CSSDISP#propdef-display
p.inset-block-end:~CSSPOS#propdef-inset-block-end
p.inset-block-start:~CSSPOS#propdef-inset-block-start
p.justify-items:~CSSALIGN#propdef-justify-items
p.justify-self:~CSSALIGN#propdef-justify-self
p.left:~CSSPOS#propdef-left
p.margin-block-end:~CSSLOGICAL#propdef-margin-block-end
p.margin-block-start:~CSSLOGICAL#propdef-margin-block-start
p.margin-inline-start:~CSSLOGICAL#propdef-margin-inline-start
p.margin-left:~CSSBOX#propdef-margin-left
p.margin-top:~CSSBOX#propdef-margin-top
p.margin-bottom:~CSSBOX#propdef-margin-bottom
p.max-height:~SIZING#propdef-max-height
p.overflow:~CSSOVERFLOW3#propdef-overflow
p.position:~CSSPOS#propdef-position
p.right:~CSSPOS#propdef-right
p.top:~CSSPOS#propdef-top
p.transform:~TRANSFORM#propdef-transform
p.visibility:~CSSDISP#propdef-visibility
p.width:~SIZING#propdef-width
p.height:~SIZING#propdef-height

f.anchor-size:#funcdef-anchor-size
f.anchor:#funcdef-anchor
f.env:~CSSENV#funcdef-env
f.var:~CSSVAR#funcdef-var
f.random:~CSSVAL5#funcdef-random

t.position-area:#typedef-position-area
t.anchor-name:#typedef-anchor-name
t.anchor-side:#typedef-anchor-side
t.anchor-size:#typedef-anchor-size
t.try-size:#typedef-try-size
t.try-tactic:#typedef-position-try-fallbacks-try-tactic
t.dashed-ident:~CSSVAL#typedef-dashed-ident
	t.dashed-ident:#valdef-anchor-dashed-ident
	t.dashed-ident:#valdef-anchor-name-dashed-ident
t.declaration-list:~CSSSYN#typedef-declaration-list
t.length-percentage:~CSSVAL#typedef-length-percentage
t.percentage:~CSSVAL#percentage-value
	t.percentage:#valdef-anchor-percentage
t.length:~CSSVAL#length-value
t.self-position:~CSSALIGN#typedef-self-position
t.baseline-position:~CSSALIGN#typedef-baseline-position

v.block:#valdef-anchor-size-block
v.height:#valdef-anchor-size-height
v.inline:#valdef-anchor-size-inline
v.self-block:#valdef-anchor-size-self-block
v.self-inline:#valdef-anchor-size-self-inline
v.width:#valdef-anchor-size-width

v.~noneN:#valdef-anchor-name-none

v.auto:~CSSPOS#valdef-top-auto
vS.normal:~CSSALIGN#valdef-align-self-normal
vS.anchor-center:#valdef-justify-self-anchor-center
vS.start:~CSSALIGN#valdef-self-position-start
vS.center:~CSSALIGN#valdef-self-position-center
vS.end:~CSSALIGN#valdef-self-position-end
	v.auto:~CSSALIGN#valdef-justify-self-auto

	t.position-area:#valdef-position-area-position-area
vI.none:#valdef-position-area-none
vI.span-all:#valdef-position-area-span-all
vI.start:#valdef-position-area-start
vI.end:#valdef-position-area-end
vI.self-start:#valdef-position-area-self-start
vI.self-end:#valdef-position-area-self-end
vI.center:#valdef-position-area-center
vI.top:#valdef-position-area-top
vI.bottom:#valdef-position-area-bottom
vI.left:#valdef-position-area-left
vI.right:#valdef-position-area-right
vI.x-start:#valdef-position-area-x-start
vI.x-end:#valdef-position-area-x-end
vI.x-self-start:#valdef-position-area-x-self-start
vI.x-self-end:#valdef-position-area-x-self-end
vI.y-start:#valdef-position-area-y-start
vI.y-end:#valdef-position-area-y-end
vI.y-self-start:#valdef-position-area-y-self-start
vI.y-self-end:#valdef-position-area-y-self-end
vI.block-start:#valdef-position-area-block-start
vI.block-end:#valdef-position-area-block-end
vI.block-self-start:#valdef-position-area-block-self-start
vI.block-self-end:#valdef-position-area-block-self-end
vI.inline-start:#valdef-position-area-inline-start
vI.inline-end:#valdef-position-area-inline-end
vI.inline-self-start:#valdef-position-area-inline-self-start
vI.inline-self-end:#valdef-position-area-inline-self-end
vI.span-start:#valdef-position-area-span-start
vI.span-end:#valdef-position-area-span-end
vI.span-top:#valdef-position-area-span-top
vI.span-bottom:#valdef-position-area-span-bottom
vI.span-y-start:#valdef-position-area-span-y-start
vI.span-y-end:#valdef-position-area-span-y-end
vI.span-x-start:#valdef-position-area-span-x-start
vI.span-x-end:#valdef-position-area-span-x-end
vI.span-block-start:#valdef-position-area-span-block-start
vI.span-block-end:#valdef-position-area-span-block-end
vI.span-inline-start:#valdef-position-area-span-inline-start
vI.span-inline-end:#valdef-position-area-span-inline-end

	t.anchor-name:#valdef-position-anchor-anchor-name
vA.auto:#valdef-position-anchor-auto
vA.inside:#valdef-anchor-inside
vA.outside:#valdef-anchor-outside
vA.bottom:#valdef-anchor-bottom
vA.center:#valdef-anchor-center
vA.end:#valdef-anchor-end
vA.left:#valdef-anchor-left
vA.right:#valdef-anchor-right
vA.self-end:#valdef-anchor-self-end
vA.self-start:#valdef-anchor-self-start
vA.start:#valdef-anchor-start
vA.top:#valdef-anchor-top

v.none:#valdef-anchor-scope-none
v.all:#valdef-anchor-scope-all
	t.dashed-ident:#valdef-anchor-scope-dashed-ident

v.always:#valdef-position-visibility-always
v.anchors-valid:#valdef-position-visibility-anchors-valid
v.anchors-visible:#valdef-position-visibility-anchors-visible
v.no-overflow:#valdef-position-visibility-no-overflow

vOp.none:#valdef-position-try-fallbacks-none
vOp.flip-block:#valdef-position-try-fallbacks-flip-block
vOp.flip-inline:#valdef-position-try-fallbacks-flip-inline
vOp.flip-start:#valdef-position-try-fallbacks-flip-start
	t.dashed-ident:#valdef-position-try-fallbacks-dashed-ident
	t.try-tactic:#valdef-position-try-fallbacks-try-tactic
	#valdef-position-try-fallbacks-dashed-ident--try-tactic

vOd.normal:#valdef-position-try-order-normal
vOd.most-width:#valdef-position-try-order-most-width
vOd.most-height:#valdef-position-try-order-most-height
vOd.most-block-size:#valdef-position-try-order-most-block-size
vOd.most-inline-size:#valdef-position-try-order-most-inline-size

v.revert:~CASCADE#valdef-all-revert
v.revert-layer:~CASCADE#valdef-all-revert-layer

pe.part():~CSSSHADOWPARTS#selectordef-part

e.input:~HEinput#the-input-element
e.li:~HEgrouping#the-li-element

	●用語
~anchor要素:#anchor-element
~anchor~box:#anchor-box
~anchor参照:#anchor-reference
~anchor候補:#_possible-anchor
既定の~anchor要素:#default-anchor-element
既定の~anchor~box:#default-anchor-box
~anchor関数:#anchor-functions
~anchor名:#anchor-name
~anchor位置決め:#anchor-positioning
~anchor指定子:#anchor-specifier
妥当な~anchor関数:#valid-anchor-function
妥当な~anchor~size関数:#valid-anchor-size-function
暗黙的な~anchor要素:#implicit-anchor-element
要求される~anchor参照:#required-anchor-reference
介在している~boxにより切取られて:#clipped-by-intervening-boxes
強く隠される:#strongly-hidden

~styleを入替える:#swap-due-to-a-try-tactic
位置~option~list:#position-options-list
位置~option:#position-option
位置~optionを適用する:#apply-a-position-option
最後の成功裡な位置~option:#last-successful-position-option
位置~fallback~style群を決定する:#determine-position-fallback-styles
~target~anchor要素:#target-anchor-element
~anchor先:#target-anchor-element
受容-可能な~anchor要素:#acceptable-anchor-element
記憶した~scroll~offset:#remembered-scroll-offset
~scroll補償:#compensate-for-scroll
~scrollに対する既定のズレ:#default-scroll-shift
~anchor再~計算:#anchor-recalculation-point

受容される~prop:#accepted-position-try-properties

位置~区画~用の格子:#position-area-grid
位置~区画:#_position-area
位置~fallback出自:#position-fallback-origin
~styleと~layoutの差挟み:#style--layout-interleave

	●用語（ CSS
~math関数:~CSSVAL#math-function
算出d長さ:~CSSVAL#computed-length

~prop:~CASCADE#css-property
算出d値:~CASCADE#computed-value
使用~値:~CASCADE#used-value
設定し直すのみ:~CASCADE#reset-only-sub-property
出自:~CASCADE#origin
作者~出自:~CASCADE#cascade-origin-author
~animation出自:~CASCADE#cascade-origin-animation
利用者~出自:~CASCADE#cascade-origin-user

全部的に~style可能な疑似要素:~CSSPSEUDO#fully-styleable
	~treeに留まる疑似要素:~CSSPSEUDO#tree-abiding
断片化-:~CSSBREAK#fragmentation
	:~CSSBREAK#fragment
断片:~CSSBREAK#box-fragment

元の包含塊:~CSSPOS#original-containing-block
~insetで改変された包含塊:~CSSPOS#inset-modified-containing-block

自己-整列:~CSSALIGN#self-align
自己-整列~prop:~CSSALIGN#self-alignment-properties
旧来の位置決め~mode:~CSSALIGN#legacy-positioning-mode

包含塊~連鎖:~CSSDISP#containing-block-chain
包含塊:~CSSDISP#containing-block
要素:~CSSDISP#elements
首要~box:~CSSDISP#principal-box
初期~包含塊:~CSSDISP#initial-containing-block
~box~tree:~CSSDISP#box-tree
~inset~prop:~CSSPOS#inset-properties
	~inset~prop:~CSSLOGICAL#inset-properties

~margin~prop:~CSSBOX#margin-properties
~margin~box:~CSSBOX#margin-box
~border~box:~CSSBOX#border-box
~margin辺:~CSSBOX#margin-edge

書字~mode:~CSSWM#writing-mode
始端:~CSSWM#css-start
終端:~CSSWM#css-end
塊-始端:~CSSWM#block-start
行内-始端:~CSSWM#inline-start
塊-終端:~CSSWM#block-end
行内-終端:~CSSWM#inline-end
横~軸:~CSSWM#x-axis
縦~軸:~CSSWM#y-axis
塊-軸:~CSSWM#block-axis
行内-軸:~CSSWM#inline-axis

~sizing~prop:~SIZING#sizing-property
最後に記憶した~size:~SIZING4#last-remembered
絶対~位置決め:~CSSPOS#absolute-position
固定d位置決め:~CSSPOS#fixed-position
絶対的に位置され:~CSSPOS#absolute-position
有位置:~CSSPOS#positioned-box
上端~層:~CSSPOS4#document-top-layer
より高い上端~層~内:~CSSPOS4#in-a-higher-top-layer
同じ上端~層~内:~CSSPOS4#in-the-same-top-layer

平坦~tree:~CSSSCOPING#flat-tree
~tree視野な参照:~CSSSCOPING#css-tree-scoped-reference
~tree視野な名前:~CSSSCOPING#css-tree-scoped-name

~scroll容器:~CSSOVERFLOW3#scroll-container
~scroll~offset:~CSSOVERFLOW3#scroll-offset
初期~scroll位置:~CSSOVERFLOW3#initial-scroll-position
~ink~overflow矩形:~CSSOVERFLOW3#ink-overflow-rectangle
~overflow切取n辺:~CSSOVERFLOW3#overflow-clip-edge

疑似要素:~SELECTORS4#pseudo-element
出自の要素:~SELECTORS4#originating-element

~style封込め:~CSSCONTAIN#style-containment
~layout封込め:~CSSCONTAIN#layout-containment
塗り封込め:~CSSCONTAIN#paint-containment
封込め:~CSSCONTAIN#containment
飛ばされた内容:~CSSCONTAIN#skips-its-contents
内容は飛ばされ:~CSSCONTAIN#skips-its-contents
利用者に関連する:~CSSCONTAIN#relevant-to-the-user

~query容器:~CSSCOND5#query-container
容器~query:~CSSCOND5#container-query
容器~query長さ単位:~CSSCOND5#container-query-length

任意-代入~関数:~CSSVAL5#arbitrary-substitution-function
任意-代入~関数たちへ代入する:~CSSVAL5#substitute-arbitrary-substitution-function
算出d値の時点で無効:~CSSVAL5#invalid-at-computed-value-time

環境~変数:~CSSENV#css-environment-variable

~CSS宣言~block:~CSSOM1#css-declaration-block
dB.算出-済みか:~CSSOM1#cssstyledeclaration-computed-flag
dB.読専か:~CSSOM1#cssstyledeclaration-readonly-flag
dB.宣言~群:~CSSOM1#cssstyledeclaration-declarations
dB.親~CSS規則:~CSSOM1#cssstyledeclaration-parent-css-rule
dB.所有者~node:~CSSOM1#cssstyledeclaration-owner-node
指定d順序:~CSSOM1#concept-declarations-specified-order

	●用語（他
根:~DOM4#concept-tree-root
~tree:~DOM4#concept-tree
~tree順序:~DOM4#concept-tree-order
~shadow~tree:~DOM4#concept-shadow-tree
広義-先祖:~DOM4#concept-tree-inclusive-ancestor

~popover要素:~HTMLpopover#_popover-element

●●words_table1
SIZING4:https://drafts.csswg.org/css-sizing-4/
CSSSCROLLANCHORING:css-scroll-anchoring-ja.html
CSSENV:https://drafts.csswg.org/css-env-1/

noneN:none
noneF:none
noneS:none

●●words_table

	●名称
ARIA:
	~view遷移$cite:View Transitions
	~popover~API^cite:Popover API
	~anchor位置決め^cite:Anchor Positioning

	●幾何
限界:bounding::~
限界域:bounds::~
矩形:rectangle:~
	矩形:rect
中央:center::~
	中央に寄せ:center
	中央~寄せ:centering
	中央:purely centered
ズラす:shiftする:ずらす
ズラされ:shiftされ:ずらされ
ズレ:shift:ずれ
	ズラシ:shift:ずらし
縦方向:vertical::~
横方向:horizontal::~
横:horizontal::~
縦:vertical::~
側:side:~
隅:corner:~
対角線:diagonal:~
反対-:opposite:~
	反対-側:opposing side
	反対-側:opposite side
	反対-側にある:opposing
	ある辺とその対~辺:opposite edges
	反対-向き:opposing
	もう一方の:opposite
左方:leftward:~

	縦幅:tall
	幅広:wide
	横幅:wide
	の距離を成す:separating
	を挟んで鏡写しに:mirroring across 〜 line
	~MINUS:minus

	●layout
首要:principal::主要
収まら:fitし:~
収まる:fitする:~
	揃う:line up
scrolling::::スクロール処理
	~scroll用の:scrolling
	~scrolling以外による:non-scrolling
固定d:fixed::固定
格子:grid::~::グリッド
線:line:~
反転-:reverse:~
埋める:fillする:~
伸張-:stretch::~
浮動-:float:~
接合-:flush:~

	`~scroll容器$:scroller
	~scroll調整-済み:scroll-adjusted
	~scrollされて外へ出た:scrolled off
	〜へ整列するよう:-aligning
	軸が揃えられた:axis-aligned
	移転-:flip
	固定d位置決め:fixpos
	内容~box:content-box
	縦横とも 3 分された:3x3
	~screen外:offscreen
	~screen外:off screen
	~screen内に収ま:fit on-screen
	-sizeは 0 になる:zero-sized
	占める:occupy
	占める:-
	占める:span
	も占めることを除いて…:Two rows or columns, depending…
	寄りに:-ward
	位置~区画:position-area
	位置~区画:the region
	改変される前の:pre-modification
	改変される前の:pre-modified
	包含塊:CB
	-:AbsPos
	^em:magic
	空間を 〜 限り広くとる:to have as much space as
	広くなり過ぎる:getting too wide
	~overflowするか否か:overflowing status
	居続ける:stay
	あり続ける:stay
	~anchorに基づいて位置され:anchor-positioned

	●塗り
塗り:paint:~
積層:stacking::~
積層-:stack::~
	そこへ積層され:stacking up on top of each other
重合する:overlapする:重なり合う
ink::::インク
切取られ:clipされ::切り取られ
切取る:clipする::切り取る
切取n:clip::切り取り

隠す:hideする:~
隠され:hideされ:~

	●CSS
視野な:scopedな::~
	~tree視野な:tree-scoped
	視野が絞られ:scoped
導入部:prelude:~
横組み:horizontal writing mode::~
書字:writing::~
捕捉-:capture:~
変形:transform::~
出自の:originating::~
封込め:containment::封じ込め
出自:origin::~
任意-:arbitrary:~

	~~巻戻す:reverts back to
	~anchor先:anchor
	~anchor先:anchored
	~anchor法:anchoring
	~anchor先に:anchoring
	~anchor先:is anchoring to
	^en:style-contained

	●UI
tooltip::::ツールチップ
hover:
popover:
popup::::ポップアップ
呼出元:invoker:呼び出し元
reader::::リーダ
知覚:perception:~
瞬時:instant:~
滑らか:smooth:~
動き:movement:~

	~access可能でない:inaccessible
	~UItab~UIkeyで巡回する:tabbing

	●処理
切詰める:clampする:切り詰める
安定:stable::~
	安定に:stably
変形n:transformation::変形
遡及的:retroactive:~
決着-:settle:~
検索:lookup:~
入替える:swapする:入れ替える
入替えて:swapして:入れ替えて
入替えら:swapさ:入れ替えら
代入-:substitute::~
代入:substitution::~
組成-:composite::~
	組成-用:compositing
新規:fresh:~
記憶した:rememberした:~
記憶され:memorizeされ:~
最新:up-to-date:~
仮の:hypotheticalな:~
仮に:hypotheticalに:~

	指数関数的に:in exponential
	この上限:total product
	深過ぎる:get too deep
	-:stuck
	-:exit
	上書き用の:overriding
	“後戻りしない”:does not "go backward"
	〜を経る:〜 pass
	生じさせる:gain
	やり直して:to go back
	やり直:re-
	決定し直-:re-determine
	設定し直す:remove
	計算し直-:recalculate
	再~計算:recalculation
	再~計算:recalc
	変更-前における:the old
	そのまま:unchanged
	し続ける:continue

	●変数
	%~query要素:query el
	%~anchor候補:possible anchor
	%有位置な要素:positioned el
	%要素:el
	%~anchor:anchor
	%~anchor:anchor element
	%~anchor:-
	%~anchor群:-
	%~anchor名:-
	%既定の~anchor:-
	%調整-済み~style群:adjusted styles
	%指定子:anchor spec
	%新たな~style群:new styles
	%要素~矩形:el rect
	%包含塊~矩形:cb rect
	%~option:option
	`絶対的に位置され$た~box %~box:abspos
	%~box:-
	%~box:abspos
	%要素:abspos
	%包含塊:-
	%軸:-
	%先祖:-
	%~style群:styles
	%現在の~style群:current styles
	%A:-
	%B:-
	%二つの方向:directions
	%反対-向きか:-

	●仕様
策:strategy:~
柔軟性:flexibility:~
普通の:ordinaryな:~
流儀:fashion:~
提起-:raise:~
循環依存に:circularに:~
	循環依存になる:is cyclic
循環依存:circularity:~
	循環依存:cyclicly
切替える:switchする:切り替える
切替わっ:switchされた:切り替わっ
過度:excess:~
見出法:finding:見出し方
各利用:usage:~
協調:coordination:~
保つ:keepする:~
素描:sketch:~
機能:function:~
扱い:treatment:~
関連性:relevance:~
為す:makeする:~
着地-:land:~
見当外れ:nonsensical:見当はずれ
見越され:anticipateされ:~
基礎的:fundamental:~
拡げた:expandした:~
詰めた:expandした:~
高価:expensive:~
理論:theory:~
自由度:freedom:~
解けな:solveできな:~

	ようになり:end up
	ようになった:end up with
	〜とする:say
	し易く:make it easier
	アリ性:possibility
	他では:otherwise
	〜を除いて:save that
	課す:impose
	~~改善:ameliorate
	~~採用:taken as the winner
	優先される:"wins"
	選ぶ:choice
	選んで:chooseして
	選べる:chooseでき
	選ばれ:chosen
	言い直:rephrase
	関わることなく:without regard to
	別として:beside
	気にする:worry
	-:aka
	満たす:satisfy
	十分:enough
	極めて:extremely
	に加えて:plus
	設定-法:set-up
	（未策定）:TBD
	-:TODO
	捉えれる:can be thought
	できるようにする:let
	`CSS-POSITION-3$r の:CSS Position
	今の所は:for now
	足りる:suffice
	ある程度まで:to some extent
	仕様:spec
	詳細を詰める:way more details filled in
	明らかに:obviously
	~~最善でも:at best
	~~最悪，:at worst
	問わず:without regard for
	あり得る:..., potentially
	どうにか:somehow
	ときには該当する:sometimes
	どのみち:anyway
	の類:sorts of
	に類するもの:sort of
	介して:using
	助け:help
	~~協同で:in concert with
	アリでなく:impossible
	~~留意すること:It’s important to remember
	でない:non-
	来たる:upcoming
	伝えれ:can tell
	なるべく:more likely
	~~任意で~~選ぶ:opt into
	〜によっては:There are some
	〜以外においては:otherwise
	無効~化:invalidate
	による悪さ:poor
	`CSS-ALIGN-3$r :Align
	~accessibility:a11y
	ある目的で:purposely
	貫き続ける:stick to
	要は:the gist is
	注意を払う:pay attention
	も:go ahead

	●未分類
参照r:refer:参照
	に基づく:refer
math:
補償:compensatation:~
	補償:compensate
補償-:compensate:~
時機:timing:~
上限:limit:~
総和:sum:~
付され:attachされ:~
構成-:compose:~
英語:English:~
付-:attach:~
維持-:retain:~
生来:natural:~
差挟み:interleaving:差し挟み
差挟まれ:interleaveされ:差し挟まれ
component::::コンポーネント
衝突:clash:~
介在-:intervene:~
広義-:inclusive:~
線形:linear:~
	線形でない:non-linear
稼働:running:~
差:difference:~

	~item:entry
	引き出す:draw
	の距離を成す:separating
	~library:libs
	同時に:at once
	1000:1k
	識別子:ident
	直前の~blockを適用した結果:the previous 〜 successive one
	直前にある:last 〜 before
	住まう:living
	現れる:appearする
	現れな:appearしな
	一部でも:partially or fully
	無い:none
	以上:at least
	次に，Next,
	来ている:come from
	計算し直す:recalc
	近い:close
	近過ぎる:too close
	最も近い:closest
	最も近い:nearest
	順に 1 つずつ:one by one
	時点:point
	多数の:bunch of
	3 個目の:final
	最後に:Finally,
	に~~達する前まで:up to but not including
	-:in turn
	-:grandchild
	置く:putting
	Chrome
	^en:make a CQ
	量:amount
	探す:look for
	箇所:place
	どこに在ってもよい:can live anywhere
	~EQ ε:was not passed
	ε:nothing
	基準に:against
	~anchor~size:anchor-size
	最~小:smallest
	より小さく:smaller
	最~大:largest
	より大きい:larger
	接頭辞を伴わない:plain
	~~保ったまま:as
	軸を指定する〜:unambigous
	他の場合:ambigous
	はみ出る:partially or completely outside of
	今や:now
	所与の:the previous
	当の要素の:its
	時点:at time
	-:variant
	~~後続の:later
	最後の:final
	まるごと:as a whole
	〜間は:as long as
	ある:lie
	他の何か:anything else
	類似な:similar sort of
	隣に:next to
	最終的に:finally
	次の:next
	“同類” :the associated
	後に:late
	〜後の:post-
	より前に在る:earlier
	急に:suddenly
	何か:thing
	後で:later
	回:time
	総:total
	に依存する:dependent
	離れるよう:away
	し始める:begin
	すなわち:aka
	一回だけ:once
	それまでの:earlier
	ようになる:getting
	であり続ける:stay
	何であれ:regardless of what
	その結果として:The end result is that
	“そのとおりに働く”:"just work"
	その時点における:current
	表示されるか否かが変化した:stops being displayed and starts again
	速く:fast

●●images
＠css-anchor-position/
position-area-example｜width:400px｜｜.png


●●ref_normative

[CSS-ALIGN-3]
    Elika Etemad; Tab Atkins Jr.. ＜CSS Box Alignment Module Level 3＞. URL: https://drafts.csswg.org/css-align/
[CSS-BOX-4]
    Elika Etemad. ＜CSS Box Model Module Level 4＞. URL: https://drafts.csswg.org/css-box-4/
[CSS-BREAK-4]
    Rossen Atanassov; Elika Etemad. ＜CSS Fragmentation Module Level 4＞. URL: https://drafts.csswg.org/css-break-4/
[CSS-CASCADE-5]
    Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. ＜CSS Cascading and Inheritance Level 5＞. URL: https://drafts.csswg.org/css-cascade-5/
[CSS-CASCADE-6]
    Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. ＜CSS Cascading and Inheritance Level 6＞. URL: https://drafts.csswg.org/css-cascade-6/
[CSS-CONTAIN-2]
    Tab Atkins Jr.; Florian Rivoal; Vladimir Levin. ＜CSS Containment Module Level 2＞. URL: https://drafts.csswg.org/css-contain-2/
[CSS-DISPLAY-3]
    Elika Etemad; Tab Atkins Jr.. ＜CSS Display Module Level 3＞. URL: https://drafts.csswg.org/css-display/
[CSS-DISPLAY-4]
    Elika Etemad; Tab Atkins Jr.. ＜CSS Display Module Level 4＞. URL: https://drafts.csswg.org/css-display/
[CSS-ENV-1]
    ＜CSS Environment Variables Module Level 1＞. Editor's Draft. URL: https://drafts.csswg.org/css-env-1/
[CSS-LOGICAL-1]
    Rossen Atanassov; Elika Etemad. ＜CSS Logical Properties and Values Level 1＞. URL: https://drafts.csswg.org/css-logical-1/
[CSS-OVERFLOW-3]
    Elika Etemad; Florian Rivoal. ＜CSS Overflow Module Level 3＞. URL: https://drafts.csswg.org/css-overflow-3/
[CSS-OVERFLOW-4]
    David Baron; Florian Rivoal; Elika Etemad. ＜CSS Overflow Module Level 4＞. URL: https://drafts.csswg.org/css-overflow-4/
[CSS-POSITION-3]
    Elika Etemad; Tab Atkins Jr.. ＜CSS Positioned Layout Module Level 3＞. URL: https://drafts.csswg.org/css-position-3/
[CSS-POSITION-4]
    ＜CSS Positioned Layout Module Level 4＞. Editor's Draft. URL: https://drafts.csswg.org/css-position-4/
[CSS-PSEUDO-4]
    Daniel Glazman; Elika Etemad; Alan Stearns. ＜CSS Pseudo-Elements Module Level 4＞. URL: https://drafts.csswg.org/css-pseudo-4/
[CSS-SCOPING-1]
    Tab Atkins Jr.; Elika Etemad. ＜CSS Scoping Module Level 1＞. URL: https://drafts.csswg.org/css-scoping/
[CSS-SIZING-3]
    Tab Atkins Jr.; Elika Etemad. ＜CSS Box Sizing Module Level 3＞. URL: https://drafts.csswg.org/css-sizing-3/
[CSS-SYNTAX-3]
    Tab Atkins Jr.; Simon Sapin. ＜CSS Syntax Module Level 3＞. URL: https://drafts.csswg.org/css-syntax/
[CSS-TRANSFORMS-1]
    Simon Fraser; et al. ＜CSS Transforms Module Level 1＞. URL: https://drafts.csswg.org/css-transforms/
[CSS-VALUES-3]
    Tab Atkins Jr.; Elika Etemad. ＜CSS Values and Units Module Level 3＞. URL: https://drafts.csswg.org/css-values-3/
[CSS-VALUES-4]
    Tab Atkins Jr.; Elika Etemad. ＜CSS Values and Units Module Level 4＞. URL: https://drafts.csswg.org/css-values-4/
[CSS-VALUES-5]
    Tab Atkins Jr.; Elika Etemad; Miriam Suzanne. ＜CSS Values and Units Module Level 5＞. URL: https://drafts.csswg.org/css-values-5/
[CSS-VARIABLES-2]
    ＜CSS Custom Properties for Cascading Variables Module Level 2＞. Editor's Draft. URL: https://drafts.csswg.org/css-variables-2/
[CSS-WRITING-MODES-4]
    Elika Etemad; Koji Ishii. ＜CSS Writing Modes Level 4＞. URL: https://drafts.csswg.org/css-writing-modes-4/
[CSS2]
    Bert Bos; et al. ＜Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification＞. URL: https://drafts.csswg.org/css2/
[CSSOM-1]
    Daniel Glazman; Emilio Cobos Álvarez. ＜CSS Object Model (CSSOM)＞. URL: https://drafts.csswg.org/cssom/
[DOM]
    Anne van Kesteren. ＜DOM Standard＞. Living Standard. URL: https://dom.spec.whatwg.org/
[INFRA]
    Anne van Kesteren; Domenic Denicola. ＜Infra Standard＞. Living Standard. URL: https://infra.spec.whatwg.org/
[RESIZE-OBSERVER-1]
    Aleks Totic; Greg Whitworth. ＜Resize Observer＞. URL: https://drafts.csswg.org/resize-observer/
[RFC2119]
    S. Bradner. ＜Key words for use in RFCs to Indicate Requirement Levels＞. March 1997. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
[SELECTORS-4]
    Elika Etemad; Tab Atkins Jr.. ＜Selectors Level 4＞. URL: https://drafts.csswg.org/selectors/
[STREAMS]
    Adam Rice; et al. ＜Streams Standard＞. Living Standard. URL: https://streams.spec.whatwg.org/
[WEBIDL]
    Edgar Chen; Timothy Gu. ＜Web IDL Standard＞. Living Standard. URL: https://webidl.spec.whatwg.org/

●●ref_informative

[CSS-CONDITIONAL-5]
    Chris Lilley; et al. ＜CSS Conditional Rules Module Level 5＞. URL: https://drafts.csswg.org/css-conditional-5/
[CSS-SHADOW-PARTS-1]
    Tab Atkins Jr.; Fergal Daly. ＜CSS Shadow Parts＞. URL: https://drafts.csswg.org/css-shadow-parts/
[CSS-SIZING-4]
    Tab Atkins Jr.; Elika Etemad; Jen Simmons. ＜CSS Box Sizing Module Level 4＞. URL: https://drafts.csswg.org/css-sizing-4/
[HTML]
    Anne van Kesteren; et al. ＜HTML Standard＞. Living Standard. URL: https://html.spec.whatwg.org/multipage/
[WEB-ANIMATIONS-1]
    Brian Birtles; et al. ＜Web Animations＞. URL: https://drafts.csswg.org/web-animations-1/


●●trans_metadata
<p>
~THIS_PAGEは、~W3Cにより編集者草案として公開された
<a href="~SPEC_URL">CSS Anchor Positioning</a>
を日本語に翻訳したものです。
~PUB
</p>

●●spec_metadata

最新公表バージョン
	https://www.w3.org/TR/css-anchor-position-1/
公表履歴
	https://www.w3.org/standards/history/css-anchor-position-1/
フィードバック
	<a href="https://github.com/w3c/csswg-drafts/labels/css-anchor-position-1">CSSWG Issues Repository</a>
編集
	<a href="http://xanthir.com/contact/">Tab Atkins-Bittner</a> (Google)
	<a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (Apple)
	Ian Kilpatrick (Google)

前任編集者
	<a href="https://twitter.com/jh3yy">Jhey Tompkins</a> (Google)
Suggest an Edit for this Spec
	<a href="https://github.com/w3c/csswg-drafts/blob/main/css-anchor-position-1/Overview.bs">GitHub Editor</a>
commit 履歴
	https://github.com/w3c/csswg-drafts/commits/main/css-anchor-position-1
</script>

</head><body>

<header>
	<hgroup>
<h1 title="CSS Anchor Positioning">CSS アンカー位置決め</h1>
<p>CSS Anchor Positioning</p>
	</hgroup>
</header>

<div id="MAIN" hidden>

	<section id="abstract">
◎要約

<p>
この仕様は、
`~anchor位置決め$を定義する。
そこでは、
有位置な要素†が［
~page上の他所にある 1 個以上の “~anchor要素”
］に相対的に，自身を~sizeして位置できる。
◎
This specification defines anchor positioning, where a positioned element can size and position itself relative to one or more “anchor elements” elsewhere on the page.
</p>

<p class="trans-note">【†
この仕様における`有位置$な［
要素／~box
］は、
実際には，（より限定的な）`絶対的に位置され$た［
要素／~box
］の略称である。
】</p>

~CSSisaLANG

	</section>
	<section id="sotd">
◎位置付け

<p>
これは、
編集者草案の公な複製です…
【以下、この節の他の内容は，~SOTD-CSSに移譲。】
</p>

	</section>

<main id="MAIN0">

	<section id="_conventions">
<h2>【この訳に特有な表記規約】</h2>

◎表記記号

	</section>
	<section id="intro">
<h2 title="Introduction">1. 序論</h2>

<p>
~CSSの`絶対~位置決め$は、
~boxを~page上のどこにでも
— ~boxの包含塊は別として，他の~boxの~layoutに関わることなく —
配置することを作者に許容する。
この柔軟性は、
ごく有用になり得るが，ごく制限されてもいる
— ~boxを他の`何らか^emの~boxに相対的に位置するよう求まれることは多い。
`~anchor位置決め@
は、［
`position-anchor$p, `position-area$p
］~propや
`~anchor関数@
— `anchor$f, `anchor-size$f の総称 —
を介して，これを達成することを作者に許容する
— それは、
ある`絶対的に位置され$た~boxを
~page上の他の 1 個以上の［
当の~boxの
`~anchor参照@
により参照rされる要素
`~anchor候補@
†
］を “~anchor先に” しながら，［
他と重合する／~overflowする
］ことを避ける “最良な” ものを見出すよう［
いくつかのアリな位置を試行する
］ことを許容する。
◎
CSS absolute positioning allows authors to place boxes anywhere on the page, without regard to the layout of other boxes besides their containing block. This flexibility can be very useful, but also very limiting—often you want to position relative to some other box. Anchor positioning (via the position-anchor and position-area properties and/or the anchor functions anchor() and anchor-size()) allows authors to achieve this, “anchoring” an absolutely positioned box to one or more other boxes on the page (its anchor references, while also allowing them to try several possible positions to find the “best” one that avoids overlap/overflow.
</p>

<p class="trans-note">【
何が`~anchor参照$を成すのかは，原文には定義されていないが、
具体的には`~anchor指定子$が該当しよう。
】【†
`~anchor候補$は、
この訳にて導入した用語
— 原文は、［
`~anchor参照$, それらが参照rするもの
］を一緒くたにして述べているので。
】【
`既定の~anchor要素$も`~anchor候補$に含まれるかどうかは、
はっきりしない
（原文には、
どちらを示唆する記述もある）。
】</p>

<div class="example">
<p>
作者は、
ある~tooltip【 `.tooltip^css 】を ~targetにされた要素【 `.anchor^css 】の中央かつ上に
— ただし、
そうすると~screen外に配置される事例では，下に —
位置するよう求めることもあろう。
これは、
次の~CSSで行える：
◎
For example, an author might want to position a tooltip centered and above the targeted element, unless that would place the tooltip offscreen, in which case it should be below the targeted element. This can be done with the following CSS:
</p>

<pre class="lang-css">
.anchor {
  /* <span class="comment">
【`--tooltip^v と命名された`~anchor要素$。】
</span> */
  anchor-name: --tooltip;
}
.tooltip {
  /* <span class="comment">
`固定d位置決め$は、
包含塊の関係性を気にする必要は無いことを意味する
— 当の~tooltipは、
~DOM内のどこに在ってもよい。
◎
Fixpos means we don’t need to worry about containing block relationships; the tooltip can live anywhere in the DOM.
</span> */
  position: fixed;

  /* <span class="comment">
~anchor法の挙動は、
すべて，既定では `--tooltip^v と命名された~anchorを参照rするようにする。
◎
All the anchoring behavior will default to referring to the --tooltip anchor.
</span> */
  position-anchor: --tooltip;

  /* <span class="comment">
~tooltipの下端を~anchorの上端に整列させる。
これはまた、
既定では，~tooltipと~anchorを横方向において中央に整列させる（横組みにおいては）。
◎
Align the tooltip’s bottom to the top of the anchor; this also defaults to horizontally center-aligning the tooltip and the anchor (in horizontal writing modes).
</span> */
  position-area: block-start;

  /* <span class="comment">
~UIwindowを~overflowする場合、
~tooltipの上端が~anchorの下端に整列するよう，自動的に入替える。
◎
Automatically swap if this overflows the window so the tooltip’s top aligns to the anchor’s bottom instead.
</span> */
  position-try: flip-block;

  /* <span class="comment">
広くなり過ぎるのを防止する。
◎
Prevent getting too wide
</span> */
  max-inline-size: 20em;
</pre>
</div>

		<section id="values">
<h3 title="Value Definitions">1.1. 値~定義</h3>

<p class="trans-note">【
この節を成す他の内容は `~CSS日本語訳 共通~page＠~CSScommon#values$に移譲。
】</p>

<p>
この仕様における特能は、［
選択子の照合-法は別として，~CSSにおける ほとんどの演算
］と同様に，`平坦~tree$に対し演算する。
◎
Like most operations in CSS besides selector matching, features in this specification operate over the flattened element tree.
</p>

		</section>
	</section>
	<section id="determining">
<h2 title="Determining the Anchor">2. ~anchorの決定-法</h2>

		<section id="name">
<h3 title="Creating an Anchor: the anchor-name property">2.1. ~anchorの作成-法： `anchor-name^p ~prop</h3>

◎名 `anchor-name@p
◎値 `~noneN$v | `dashed-ident$t#
◎初 `~noneN$v
◎適 `首要~box$を生成するすべての要素
◎継 されない
◎百 受容しない
◎算 指定されたとおり
◎順 文法に従う
◎ア 離散的
◎表終

<p>
`anchor-name$p ~propは、
当の要素は
`~anchor要素@
になり，その`首要~box$は
`~anchor~box@
になるものと宣言する。
当の要素は、
この~propに与えた~listを成す各
`~anchor名@
を通して~targetにされる。
各種 値は、
次に従って定義される：
◎
The anchor-name property declares that an element is an anchor element, whose principal box is an anchor box, and gives it a list of anchor names to be targeted by. Values are defined as follows:
</p>

<dl class="valdef">
	<dt>`~noneN@v</dt>
	<dd>
この~propによる効果は無い。
◎
The property has no effect.
</dd>

	<dt id="valdef-anchor-name-dashed-ident">`dashed-ident$t#</dt>
	<dd>
当の要素は、
`首要~box$を生成するならば，
`~anchor要素$になり、
所与の~listを成す`~anchor名$たちを伴う。
各`~anchor名$は、
`~tree視野な名前$になる。
◎
If the element generates a principal box, the element is an anchor element, with a list of anchor names as specified. Each anchor name is a tree-scoped name.
</dd>
	<dd>
他の場合、
この~propによる効果は無い。
◎
Otherwise, the property has no effect.
</dd>
</dl>

<p>
`~anchor名$は、
一意になる必要はない。
すべての要素が［
所与の~boxの`~target~anchor要素$になる能力を有する
］とは限らないので、
各利用に対する視野が適切に絞られていれば，同じ名前を複数の箇所で再利用できる。
◎
Anchor names do not need to be unique. Not all elements are capable of being the target anchor element of a given box. Thus a name can be reused in multiple places if the usages are scoped appropriately.
</p>

<p class="note">注記：
複数個の要素が同じ`~anchor名$を共有していて，
それらが所与の有位置な~boxから可視になる場合、
`~target~anchor要素$は，それらのうち`~tree順序$【！~DOM順序】で最後のものになる。
`anchor-scope$p ~propを利用すれば、
どの`~anchor名$が所与の［
それを参照している~box
］から可視になるかを更に制限できる。
◎
Note: If multiple elements share an anchor name and are all visible to a given positioned box, the target anchor element will be the last one in DOM order. The anchor-scope property can be used to further limit what names are visible to a given referencing box.
</p>

<p>
`~anchor名$は、
既定では，`封込め$により視野が絞られる`ことはない^em。
要素が［
`~style封込め$／`~layout封込め$
］（あるいは、
それらに類似な封込め）
を伴う場合でも、
その子孫の`~anchor名$は，~page内の他所にある要素からは可視になる。
◎
Anchor names are not scoped by containment by default; even if an element has style or layout containment (or any similar sort of containment), the anchor names of its descendants are visible to elements elsewhere in the page.
</p>

<p class="note">注記：
要素は、
別の要素の`飛ばされた内容$内に在る間は
（一例として， `content-visibility$p に因り），
`受容-可能な~anchor要素$にはならない
— その間は、
実質的に，~anchor名【！名前】が無かったかのように動作する。
◎
Note: While an element is in the skipped contents of another element (due to content-visibility: hidden, for instance), it’s not an acceptable anchor element, effectively acting as if it had no names.
</p>

			<section id="implicit">
<h4 title="Implicit Anchor Elements">2.1.1. 暗黙的な~anchor要素</h4>

<p>
一部の仕様は、
ある種の状況下で［
特定0の要素が，別の要素~用の
`暗黙的な~anchor要素@
になる
］ものと定義し得る。
◎
Some specifications can define that, in certain circumstances, a particular element is an implicit anchor element for another element.
</p>

<p class="example">
新たな［
`~popover＠~HTMLpopover$に関係する詳細
］を伴う例で，ここを埋める
（~HTML仕様において，それが最終的に着地したなら【`参照＠https://github.com/whatwg/html/pull/9144$】）。
◎
TODO: Fill in an example new popover-related details (once that finally lands in the HTML spec).
</p>

<div>
<p>
`暗黙的な~anchor要素$は、
何らかの `anchor-name$p 値【`~anchor名$】ではなく，
次に挙げるいずれかにより参照され得る：
</p>
<ul>
	<li>
`position-anchor$p において，~keyword `auto$vA を利用する
</li>
	<li>
`~anchor関数$において，~anchor参照【 `anchor-name$t 】を省略する
</li>
</ul>
◎
Implicit anchor elements can be referenced with the auto keyword in position-anchor, or by omitting the anchor reference in anchor functions.
</div>

<p>
`疑似要素$の`暗黙的な~anchor要素$は、
他が指定されない限り，その`出自の要素$のそれと同じになるとする。
◎
Pseudo-elements have the same implicit anchor element as their originating element, unless otherwise specified.
</p>

<p class="note">注記：
これらの疑似要素は，他の仕様により~access可能でないことが多いので、
このようにしないと，これらを`暗黙的な~anchor要素$で位置することができなくなる。
◎
Note: Without this, these pseudo-elements, which are often inaccessible by other specifications, cannot be positioned with implicit anchor elements.
</p>

			</section>
			<section id="determining-position">
<h4 title="The Anchor’s Position">2.1.2. ~anchorの位置</h4>

<p>
この仕様を成すいくつかの特能は、
`~anchor~box$の位置と~sizeを参照rする。
この［
位置, ~size
］は，~layoutより後に決定され、
`position$p に基づく調整
（ `position:relative^p や `position:sticky^p など）も，この目的に含まれる。
◎
Several features of this specification refer to the position and size of an anchor box. The anchor box’s position and size is determined after layout, and for these purposes includes position-based adjustments (such as position: relative or position: sticky).
</p>

<p>
`transform$p などの~layout後の効果は、
`~anchor~box$の位置には影響しない。
◎
Post-layout effects, such as transform, do not affect the anchor box’s position.
</p>

<p class="note">注記：
将来においては、
~anchorに対し［
`transform$p や類似な~propによる効果を含める
］よう［
~~任意で~~選ぶこと
］も許容されるかもしれない。
◎
Note: Allowing an anchor to opt into including the effects of transform or similar properties might be allowed in the future.
</p>

			</section>
		</section>
		<section id="anchor-scope">
<h3 title="Scoping Anchor Names: the anchor-scope property">2.2. ~anchor名の視野-法： `anchor-scope^p ~prop</h3>

◎名 `anchor-scope@p
◎値 `none^v | `all^v | `dashed-ident$t#
◎初 `none^v
◎適 すべての要素
◎継 されない
◎百 受容しない
◎算 指定されたとおり
◎順 文法に従う
◎ア 離散的
◎表終

<p>
この~propは、
指定された`~anchor名$たちの視野を絞る
— 【 `none^v 以外が指定された場合には、】その検索を当の要素の下位treeに限るよう。
`§ ~anchorの決定-法＠#determining$
を見よ。
◎
This property scopes the specified anchor names, and lookups for these anchor names, to this element’s subtree. See § 2 Determining the Anchor.
</p>

<p>
各種 値の意味は：
◎
Values have the following meanings:
</p>

<dl class="valdef">
	<dt>`none@v</dt>
	<dd>
`~anchor名$の視野における変更は無い。
◎
No changes in anchor name scope.
</dd>

	<dt>`all@v</dt>
	<dd>
<p>
［
当の要素, その各~子孫
］により定義される どの`~anchor名$ %~anchor名 に対しても：
</p>
		<ul>
			<li>
<p>
%~anchor名 を視野に入れるものは†、
当の要素の子孫に限るものと指定する
— %~anchor名 の視野が［
すでに，ある子孫により `anchor-scope$p を利用して制限されていない
］ならば。
</p>

<p class="trans-note">【†
すなわち、
%~anchor名 を通して［
当の要素／その子孫
］を~targetにするもの。
】【
言い換えれば、
所与の %要素 に対し，
`~target~anchor要素$( %要素, %~anchor名 )
の結果が［
当の要素／その子孫
］になるならば、
%要素 は当の要素の子孫になる。
】</p>
			</li>
			<li>
<p>
当の要素の子孫が %~anchor名 を照合する対象†は、
当の要素の下位treeの中††にある`~anchor要素$に限るよう制限する。
</p>

<p class="trans-note">【†
すなわち、
子孫が %~anchor名 を通して~targetにするもの。
】【††
当の要素も含まれる。
】【
言い換えれば、
`~target~anchor要素$( 子孫, %~anchor名 )
の結果は，［
当の要素／その子孫
］になる。
】</p>
			</li>
		</ul>
◎
Specifies that all anchor names defined by this element or its descendants—​whose scope is not already limited by a descendant using anchor-scope—​to be in scope only for this element’s descendants; and limits descendants to only match anchor names to anchor elements within this subtree.
</dd>

	<dt id="valdef-anchor-scope-dashed-ident">`dashed-ident$t#</dt>
	<dd>
対象になる`~anchor名$が［
所与の `dashed-ident$t いずれかに合致するもの
］に限られることを除いて，
`all$v と同じにふるまう。
◎
Specifies that a matching anchor name defined by this element or its descendants—​whose scope is not already limited by a descendant using anchor-scope—​to be in scope only for this element’s descendants; and limits descendants to only match these anchor names to anchor elements within this subtree.
</dd>
</dl>

<p>
この~propには、
`暗黙的な~anchor要素$に対する効果は無い。
◎
This property has no effect on implicit anchor elements.
</p>

<div class="example">
<p>
ある設計~patternが再利用され，
互いに一致する複数の~componentがあるとき、
`anchor-scope$p は，それらに またがる命名の衝突を防止できる。
例えば、
ある~listが各~list~itemの中に有位置な要素を包含していて，
それらの要素は［
各自が属する~list~itemに相対的に位置する
］よう求まれるとする：
◎
When a design pattern is re-used, anchor-scope can prevent naming clashes across identical components. For example, if a list contains positioned elements within each list item, which want to position themselves relative to the list item they’re in,
</p>

<pre class="lang-css">
li {
  anchor-name: --list-item;
  anchor-scope: --list-item;
}
li .positioned {
  position: absolute;
  position-anchor: --list-item;
  position-area: inline-start;
}
</pre>

<p>
`anchor-scope$p を伴わない下では、
どの `li$e 要素も，
【それに指定された`~anchor名$は】これら有位置な要素~すべてから可視になる
— その結果、
すべてが`最後の^em `li$e に相対的に位置され，そこへ積層される。
◎
Without anchor-scope, all of the li elements would be visible to all of the positioned elements, and so they’d all positioned themselves relative to the final li, stacking up on top of each other.
</p>
</div>

		</section>
		<section id="target">
<h3 title="Finding an Anchor">2.3. ~anchorの見出法</h3>

<p>
この仕様~内のいくつかのものは、
所与の`~anchor指定子$から`~target~anchor要素$を見出す。
`~anchor指定子@
は、［
ε （指定子は欠落である）／
`auto$vA ／
`dashed-ident$t
］である。
`dashed-ident$t は、
~page上の他所における `anchor-name$p 値に合致するべき名前であり，
`~tree視野な参照$である。
◎
Several things in this specification find a target anchor element, given an anchor specifier, which is either a &lt;dashed-ident&gt; (and a tree-scoped reference) that should match an anchor-name value elsewhere on the page, or the keyword auto, or nothing (a missing specifier).
</p>

<p class="note">注記：
これらの【~target~anchor要素を見出すための】条件は、［
ある要素が，それを~anchorとして参照するよう求める有位置な~boxの`~target~anchor要素$になり得る
］のは［
当の有位置な~boxが~lay-outされる前に，
当の要素の自前の~boxが全部的に~lay-outされる場合に限られる
］とする一般~規則を捕捉する。
~CSSの~layout規則は、
このことについて，いくつか有用な保証を
— 当の［
~anchor, 有位置な~box
］の［
互いの関係性, 包含塊
］に依存して —
供する。
以下に挙げる条件は、［
~anchor位置決めが循環依存になるアリ性
］は無いことを確保するよう，［
積層~文脈~用の規則のうち，この目的に関連なもの
］だけを正確に言い直す。
◎
Note: The general rule captured by these conditions is that an element can only be a positioned box’s target anchor element if its own box is fully laid out before the positioned box that wants to reference it is laid out. CSS’s layout rules provide some useful guarantees about this, depending on the anchor and positioned box’s relationship with each other and their containing blocks. The list of conditions below exactly rephrases the stacking context rules into just what’s relevant for this purpose, ensuring there is no possibility of circularity in anchor positioning.
</p>

<div class="algo">
<p>
`~target~anchor要素@
【略して “~anchor先（ `anchored^en ）” とも称される】
を決定する
~algoは、
所与の
( 【`絶対的に位置され$た】~queryしている要素 %~query要素, `~anchor指定子$ %指定子 （省略時は ε ） )
に対し，［
ある`~anchor要素$ ／ ε（ “無し” ）
］を返す：
◎
To determine the target anchor element given a querying element query el and an optional anchor specifier anchor spec:
</p>
<ol>
	<li>
~IF［
%指定子 ~EQ ε
］
⇒
~RET ［
%~query要素 用の`既定の~anchor要素$は存在するならば それ／
~ELSE_ ε
］
◎
If anchor spec was not passed, return the default anchor element if it exists, otherwise return nothing.
</li>
	<li>
<p>
~IF［
%指定子 ~EQ `auto$vA
］：
◎
If anchor spec is auto:
</p>
		<ol>
			<li>
<p>
~IF［
`~popover~API^cite †は、
%~query要素 用に`暗黙的な~anchor要素$ %~anchor を定義している
］~AND［
%~anchor は %~query要素 用に`受容-可能な~anchor要素$である
］
⇒
~RET %~anchor
◎
If the Popover API defines an implicit anchor element for query el which is an acceptable anchor element for query el, return that element.
</p>

<p class="trans-note">【†
特定的には、
`HTML$r に定義される`~popover＠~HTMLpopover$用の~API
— `showPopover()^c, `hidePopover()^c, `togglePopover()^c 。
“%~anchor を定義している” とは、
それらの~methodを介して，
（それらが呼出す~algo内で， %~query要素 の）
暗黙的な~anchor要素が ~NULL 以外に設定されたことを意味する。
】</p>

			</li>
			<li>
~RET ε
◎
Otherwise, return nothing.
</li>
		</ol>

<p class="note">注記：
【上では `~popover~API^cite に限って取扱っているが、】
将来の~APIは、
暗黙的な~anchor要素を定義するかもしれない。
そうなったときは、
他との協調を確保するよう，
この~algo内で明示的に取扱われることになる。
◎
Note: Future APIs might also define implicit anchor elements. When they do, they’ll be explicitly handled in this algorithm, to ensure coordination.
</p>

	</li>
	<li>
~Assert：
%指定子 は `dashed-ident$t である。
◎
Otherwise, anchor spec is a &lt;dashed-ident&gt;.＼
</li>
	<li>
<p>
%~anchor群 ~LET 次を満たす`~anchor要素$ %~anchor たちが成す集合
⇒
［
%指定子 ~IN %~anchor の`~anchor名$たちが成す集合
］~AND［
%~anchor の`~anchor名$たちに結付けられた`~tree$【！の`根$】
~EQ
%指定子 に結付けられた`~tree$【！の`根$】
］
</p>

<p class="note">注記：
`~anchor名$は`~tree視野な名前$である一方、
%指定子 は`~tree視野な参照$である。
</p>
◎
Return the last element el in tree order that satisfies the following conditions:
• el is an anchor element with an anchor name of anchor spec.
• el’s anchor name and anchor spec are both associated with the same tree root.
• Note: The anchor name is a tree-scoped name, while anchor spec is a tree-scoped reference.
• el is an acceptable anchor element for query el.
</li>
	<li>
%~anchor群 を成す
~EACH( %~anchor )
に対し，`~tree順序$の逆順で
⇒
~IF［
%~anchor は %~query要素 用の`受容-可能な~anchor要素$である
］
⇒
~RET %~anchor
◎
↑</li>
	<li>
<p>
~RET ε
◎
If no element satisfies these conditions, return nothing.
</p>

<p class="note">注記：
`anchor-scope$p は、
ある種の`~anchor名$の可視性を制約し得る
— それは、
所与の検索において，どの要素が`~anchor要素$になり得るかに影響し得る。
◎
Note: anchor-scope can restrict the visibility of certain anchor names, which can affect what elements can be anchor elements for a given lookup.
</p>

<p class="trans-note">【
この注記は、
この手続きの中では，
“〜に結付けられた`~tree$”
として反映されているものと見受けられる。
】</p>
	</li>
</ol>
</div>

<p class="note">注記：
ある`~shadow~tree$内の~style内の `anchor-name$p により定義された`~anchor名$は、
異なる`~shadow~tree$内の~style内の`~anchor関数$からは見えない
（~capsule化を保全するため）。
しかしながら，異なる`~shadow~tree$内にある`要素どうし^emであっても、［
`~anchor名$, `~anchor関数$
］どちらも
— ある~shadowの内側にある要素を `part()$pe を利用して~styleするなどにより —
同じ~tree内の~styleから来ているならば，互いに他を~anchorできる。
（`暗黙的な~anchor要素$は，内在的には単独の~treeに制限されないが、
その詳細は，それをアテガっている~APIに依存することになる。）
◎
Note: An anchor-name defined by styles in one shadow tree won’t be seen by anchor functions in styles in a different shadow tree, preserving encapsulation. However, elements in different shadow trees can still anchor to each other, so long as both the anchor-name and anchor function come from styles in the same tree, such as by using ::part() to style an element inside a shadow. (Implicit anchor elements also aren’t intrinsically limited to a single tree, but the details of that will depend on the API assigning them.)
</p>

<div class="algo">
<p>
ある要素 %~anchor候補 は ある`絶対的に位置され$た要素 %有位置な要素 用の
`受容-可能な~anchor要素@
であるとは、
~AND↓ が満たされることをいう：
◎
An element possible anchor is an acceptable anchor element for an absolutely positioned element positioned el if all of the following are true:
</p>
<ul>
	<li>
%~anchor候補 は［
`要素$／`全部的に~style可能な疑似要素$【！不要：`~treeに留まる疑似要素$】
］である
◎
possible anchor is either an element or a fully styleable tree-abiding pseudo-element.
</li>
	<li>
%~anchor候補 は、
%有位置な要素 の ある`広義-先祖$の `anchor-scope$p の効果により，
%有位置な要素 の視野に入る
◎
possible anchor is in scope for positioned el, per the effects of anchor-scope on positioned el or its ancestors.
</li>
	<li>
<p>
以下の記述においては
⇒＃
%要素~塊 は %有位置な要素 の`包含塊$を指すとする。
%~anchor塊 は %~anchor候補 の`包含塊$を指すとする。
◎
↓</p>

<p>
%~anchor候補 は厳密に %有位置な要素 よりも前に~lay-outされる
— すなわち， ~OR↓：
◎
possible anchor is laid out strictly before positioned el, aka one of the following is true:
</p>
		<ul>
			<li>
%有位置な要素 は %~anchor候補 `より高い上端~層~内$に在る
◎
positioned el is in a higher top layer than possible anchor
</li>
			<li>
<p>
~AND↓：
◎
↓</p>
				<ul>
					<li>
( %有位置な要素, %~anchor候補 )
は`同じ上端~層~内$に在る
◎
Both elements are in the same top layer
</li>
					<li>
%要素~塊 ~NEQ %~anchor塊
◎
but have different containing blocks,＼
</li>
					<li>
<p>
`包含塊~連鎖$において %要素~塊 は %~anchor塊 の先祖である
— すなわち， ~OR↓：
◎
and positioned el’s containing block is an ancestor of possible anchor’s containing block in the containing block chain, aka one of the following:
</p>
						<ul>
							<li>
<p>
~AND↓：
</p>
								<ul>
									<li>
%要素~塊 ~EQ 表示域
</li>
									<li>
%~anchor塊 ~NEQ 表示域
</li>
								</ul>
◎
positioned el’s containing block is the viewport,＼
and possible anchor’s containing block isn’t.
</li>
							<li>
<p>
~AND↓：
</p>
								<ul>
									<li>
%要素~塊 ~EQ `初期~包含塊$
</li>
									<li>
%~anchor塊 は ある要素により生成される
</li>
								</ul>
◎
positioned el’s containing block is the initial containing block,＼
and possible anchor’s containing block is generated by an element,
</li>
							<li>
<p>
~AND↓ を満たす［
要素 %A, 要素 %B
］が在る：
</p>
								<ul>
									<li>
%要素~塊 は %A により生成される
</li>
									<li>
%~anchor塊 は %B により生成される
</li>
									<li>
%A は`平坦~tree$において【！that of？】 %B の先祖である
</li>
								</ul>
◎
both elements' containing blocks are generated by elements,＼
and positioned el’s containing block is an ancestor in the flat tree to that of possible anchor’s containing block.
</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
<p>
~AND↓：
◎
↓</p>
				<ul>
					<li>
( %有位置な要素, %~anchor候補 )
は`同じ上端~層~内$に在る
◎
Both elements are in the same top layer＼
</li>
					<li>
%要素~塊 ~EQ %~anchor塊
◎
and have the same containing block,＼
</li>
					<li>
［
%有位置な要素, %~anchor候補
］は、
どちらも`絶対的に位置され$ている
◎
and are both absolutely positioned,＼
</li>
					<li>
`平坦~tree$における順序で %~anchor候補 は %有位置な要素 より前に在る
◎
and possible anchor is earlier in flat tree order than positioned el.
</li>
				</ul>
			</li>
			<li>
<p>
~AND↓：
◎
↓</p>
				<ul>
					<li>
( %有位置な要素, %~anchor候補 )
は`同じ上端~層~内$に在る
◎
Both elements are in the same top layer＼
</li>
					<li>
%要素~塊 ~EQ %~anchor塊
◎
and have the same containing block,＼
</li>
					<li>
%~anchor候補 は`絶対的に位置され$ていない
◎
but possible anchor isn’t absolutely positioned.
</li>
				</ul>
			</li>
		</ul>
	</li>
	<li>
<p>
%~anchor候補 が ある要素の`飛ばされた内容$内に在るならば、
%有位置な要素 も同じ内容~内に在る
◎
If possible anchor is in the skipped contents of another element, then positioned el is in the skipped contents of that same element.
</p>

<div class="note">
<p>注記：
このことは、
次を意味する：
◎
Note: In other words, positioned el can anchor to possible anchor if they’re both in the same skipped "leaf", but it can’t anchor "across" leafs. This means＼
</p>
		<ul>
			<li>
［
有位置な要素, その~anchor先
］両方を包含する要素【の内容？】が飛ばされても，
有位置な要素が急に別の~anchorへ移動することはない。
◎
skipping an element that contains both of them won’t suddenly cause the positioned el to move to another anchor,＼
</li>
			<li>
同じ~page内の`他所^em【飛ばされない内容~内】に在る有位置な要素の~anchor先が飛ばされた【内容~内に在る？】要素になることを防止する。
◎
but still prevents positioned elements elsewhere in the page from anchoring to the skipped element.
</li>
		</ul>
</div>
	</li>
</ul>
</div>

		</section>
		<section id="position-anchor">
<h3 title="Default Anchors: the position-anchor property">2.4. 既定の~anchor： `position-anchor^p ~prop</h3>

◎名 `position-anchor@p
◎値 `auto$vA | `anchor-name$t
◎初 `auto^v
◎適 `絶対的に位置され$た~box
◎継 されない
◎百 受容しない
◎算 指定されたとおり
◎順 文法に従う
◎ア 離散的
◎表終

<p>
`position-anchor$p ~propは、
【当の［要素／~box］用の】
`既定の~anchor要素@
を指定する
— それは、
当の~box【！this element】に適用される［
`position-area$p ~prop,
`position-try$p ~prop,
（既定では）すべての`~anchor関数$
］により利用される。
◎
The position-anchor property specifies the default anchor element, which is used by position-area, position-try, and (by default) all anchor functions applied to this element.＼
</p>

<p>
`position-anchor$p ~propは、
`position$p ~propの`設定し直すのみ$な下位propである。
◎
position-anchor is a reset-only sub-property of position.
</p>

<dl>
	<dt>`auto@vA</dt>
	<dd>
当の要素~用の`暗黙的な~anchor要素$は存在するならば、
それを利用する
— 他の場合、
当の~box用の`既定の~anchor要素$は無い。
◎
Use the implicit anchor element if it exists; otherwise the box has no default anchor element.
</dd>

	<dt id="valdef-position-anchor-anchor-name">`anchor-name$t</dt>
	<dd>
当の~box用の`既定の~anchor要素$は、
指定された `anchor-name$t により選定される`~target~anchor要素$になる。
◎
The target anchor element selected by the specified &lt;anchor-name&gt; is the box’s default anchor element.
</dd>
</dl>

<p>
所与の`絶対的に位置され$た~boxの
`既定の~anchor~box@
は、
当の~box用の`既定の~anchor要素$は在るならば，その`首要~box$を指す
— 無い場合は ε とする。
◎
The principal box of the default anchor element is the box’s default anchor box.
</p>

<div class="example">
<p>
例えば，次の~codeにおける［
`.foo^css, `.bar^css
］要素は、
各自が参照rしている~anchor要素だけを変更しながら，
どちらにも同じ位置決め~propたちを利用できる：
◎
For example, in the following code both .foo and .bar elements can use the same positioning properties, just changing the anchor element they’re referring to:
</p>

<pre class="lang-css">
.anchored {
  position: absolute;
  top: calc(.5em + anchor(outside));
  /* <span class="comment">
この `anchor^f は、
`~anchor名$【`~anchor指定子$】を指定していないので，
自動的に`既定の~anchor~box$を参照rする。
◎
Since no anchor name was specified, this automatically refers to the default anchor box.
</span> */
}

.foo.anchored {
  position-anchor: --foo;
}
.bar.anchored {
  position-anchor: --bar;
}
</pre>
</div>

		</section>
		<section id="anchor-relevance">
<h3 title="Anchor Relevance">2.5. ~anchorの関連性</h3>

<div>
<p>
所与の要素 %要素 は、［
~AND↓ を満たす［
%~box, %~anchor
］が在る
］ならば，`利用者に関連する$ものと見なすモノトスル：
</p>
<ul>
	<li>
%~box は`絶対的に位置され$た~boxである
</li>
	<li>
%~anchor は %要素 の子孫である
</li>
	<li>
%~anchor は %~box 用の`~target~anchor要素$である
</li>
	<li>
%~box の`内容は飛ばされ$ていない
</li>
	<li>
%~box の包含塊を確立しているものは［
%要素 ／ %要素 のある子孫
］でない
</li>
</ul>
◎
When determining whether an element el is relevant to the user, if a descendant of el is a target anchor element for a positioned box (which itself is not skipped and whose containing block is not el or a descendant of el), then el must be considered relevant to the user.
</div>

<p class="note">注記：
このことは、
例えば， %要素 が `content-visibility:auto$p を伴う場合でも、
%~anchor に依拠している %~box の`内容は飛ばされ$ていない間は，
%要素 の`内容は飛ばされ$なくなることを意味する
（ %~box も %要素 の下位tree内にある場合を除いて
— %~anchor, %~box が互いに他方を可視に保つような循環依存は生じ得ない）。
◎
Note: This means that, for example, an anchor in a content-visibility: auto subtree will prevent its subtree from skipping its contents as long as the positioned box relying on it is also not skipped. (Unless the anchor and the positioned box are both under the same content-visibility: auto element; they can’t cyclicly keep each other visible.)
</p>

		</section>
	</section>
	<section id="positioning">
<h2 title="Anchor-Based Positioning">3. ~anchorに基づく位置決め</h2>

<p>
`絶対的に位置され$た~boxは、
自身を~pageの 1 個以上の`~anchor~box$に相対的に位置できる。
◎
An absolutely positioned box can position itself relative to one or more anchor boxes on the page.
</p>

<p>
`position-area$p ~propは、
`既定の~anchor~box$に相対的な位置決め用に，簡便な格子に基づく概念を提供する。
対して，［
より複階的な位置決め／
複数個の~boxに相対的な位置決め
］用には、
`~inset~prop$において［
`~anchor~box$の辺を明示的に参照rする `anchor$f 関数
］を利用できる。
◎
The position-area property offers a convenient grid-based concept for positioning relative to the default anchor box; for more complex positioning or positioning relative to multiple boxes, the anchor() function can be used in the inset properties to explicitly refer to edges of an anchor box.
</p>

		<section id="position-area">
<h3 title="The position-area Property">3.1. `position-area^p ~prop</h3>

◎名 `position-area@p
◎値 `none$vI | `position-area$t
◎初 `none$vI
◎適 `既定の~anchor~box$を伴う有位置な~box
◎継 されない
◎百 受容しない
◎算 指定されたとおり
◎順 文法に従う
◎ア （未策定）
◎表終

<p>
`~anchor位置決め$に共通的な利用事例では、
所与の有位置な~box %~box に対し，［
%~box の`包含塊$の各~辺,
%~box の`既定の~anchor~box$の各~辺
］以外は懸念する必要がない場合がほとんどである。
これらの線（辺）は、
縦横とも 3 分された格子
— `位置~区画~用の格子$ —
を定義しているものと捉えれる。
`position-area$p は、
`位置~区画$
— %~box を，この格子を成す どの区画~内に~lay-outするか —
を容易に指定できるようにする。
その構文は：
◎
Most common use-cases of anchor positioning are only concerned with the edges of the positioned box’s containing block and the edges of the default anchor box. These lines can be thought of as defining a 3×3 grid; position-area lets you easily specify what area of this position-area grid to lay out the positioned box in. Its syntax is:
</p>

<pre class="prod">
`position-area@t
	= [Ⓐ] || [Ⓑ]
	| [Ⓒ] || [Ⓓ]
	| [Ⓔ] || [Ⓕ]
	| [Ⓖ]{1,2}
	| [Ⓗ]{1,2}

Ⓐ
	= left
	| center
	| right
	| span-left
	| span-right
	| x-start
	| x-end
	| span-x-start
	| span-x-end
	| x-self-start
	| x-self-end
	| span-x-self-start
	| span-x-self-end
	| span-all
Ⓑ
	= top
	| center
	| bottom
	| span-top
	| span-bottom
	| y-start
	| y-end
	| span-y-start
	| span-y-end
	| y-self-start
	| y-self-end
	| span-y-self-start
	| span-y-self-end
	| span-all
Ⓒ
	= block-start
	| center
	| block-end
	| span-block-start
	| span-block-end
	| span-all
Ⓓ
	= inline-start
	| center
	| inline-end
	| span-inline-start
	| span-inline-end
	| span-all
Ⓔ
	= self-block-start
	| center
	| self-block-end
	| span-self-block-start
	| span-self-block-end
	| span-all
Ⓕ
	= self-inline-start
	| center
	| self-inline-end
	| span-self-inline-start
	| span-self-inline-end
	| span-all
Ⓖ
	= start
	| center
	| end
	| span-start
	| span-end
	| span-all
Ⓗ
	= self-start
	| center
	| self-end
	| span-self-start
	| span-self-end
	| span-all
</pre>

<p class="trans-note">【
ⒶⒷⒸⒹⒺⒻⒼⒽは、
簡明にするための，この訳による追加。
】【
Ⓔ を成す `self-block-start^v 等々（ `span-^v が接頭されたものも含む）は、
`block-self-start$vI 等々の誤記と思われる。
Ⓕ を成す `self-inline-*^v も同様に誤記と思われる。
】</p>

<dl class="valdef">
	<dt>`none@vI</dt>
	<dd>
この~propによる効果は無い。
◎
The property has no effect.
</dd>

	<dt id="valdef-position-area-position-area">`position-area$t</dt>
	<dd>
<p>
当の~boxが ~OR↓ を満たす場合、
この値による効果は無い：
</p>
		<ul>
			<li>
その`既定の~anchor~box$ ~EQ ε
</li>
			<li>
`絶対的に位置され$ていない
</li>
		</ul>
◎
If the box does not have a default anchor box, or is not an absolutely positioned box, this value has no effect.
</dd>
	<dd>
<p>
他の場合の効果は：
◎
Otherwise, it has the following effects:
</p>
		<ul>
			<li>
<p>
`位置~区画$を指定する
— それが、
当の~boxの`包含塊$になる。
詳細は、
<a href="#resolving-spans">§ `position-area^t の解決-法</a>
を見よ。
◎
The property selects a region of the position-area grid, and makes that the box’s containing block. See § 3.1.1 Resolving &lt;position-area&gt;s for details.
</p>

<div class="note">
<p>注記：
このことは、
次を意味する：
</p>
				<ul>
					<li>
`~inset~prop$は、
`位置~区画$からの~offsetを指定する。
</li>
					<li>
一部の~prop用の一部の値
— `max-height: 100%$p など —
は、
`位置~区画$に相対的になる
</li>
				</ul>
◎
Note: This means that the inset properties specify offsets from the position-area, and some property values, like max-height: 100%, will be relative to the position-area as well.
</div>
			</li>
			<li>
`自己-整列~prop$用の値 `normal$vS は、
当の~box用に良い既定の整列を与えるため，［
`start$vS,
`end$vS,
`anchor-center$vS
］いずれかとして挙動する
（`位置~区画$が占める位置に依存する）。
詳細は、
<a href="#resolving-spans">§ `position-area^t の解決-法</a>
を見よ。
◎
The normal value for the self-alignment properties behaves as either start, end, or anchor-center, depending on the positioning of the region, to give a good default alignment for the positioned box. Again, see § 3.1.1 Resolving &lt;position-area&gt;s for details.
</li>
			<li>
`~inset~prop$用の値 `auto$v は `0^v に解決される。
◎
Any auto inset properties resolve to 0.
</li>
			<li>
<p>
当の要素は、
どちらの軸においても，旧来の整列~mode†ではないものと見なされる。
</p>

<p class="trans-note">【†
`CSS-ALIGN-3$r にて定義されていた “旧来の位置決め~mode” を指すと見受けられるが、
その用語も廃され，同~仕様の `§ 絶対的に位置された~box用の自己-整列＠~CSSALIGN#auto-safety-position$
に転換された
— が、
その内容は，下の注記に合致していない。
】</p>
◎
The element is not considered to be in a legacy alignment mode in either axis.
</li>
		</ul>
	</dd>
</dl>

<div class="note">
<p>注記：
当の~boxが［
その`~insetで改変された包含塊$を~overflowする
］が，それでも［
その`元の包含塊$の中には収まる
］場合、
既定では，`元の包含塊$の中に居続けるよう “ズラされる”
— そうすると，通常の整列に違反する場合でも。
詳細は、
`CSS-ALIGN-3$r `§ ~overflow時の整列＠~CSSALIGN#overflow-values$
を見よ。
◎
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 Box Alignment 3 § 4.4 Overflow Alignment: the safe and unsafe keywords and scroll safety limits for details.
</p>

<p>
この挙動は、
有位置な~box %~box を なるべく［
【 %~box 全体が】可視になるよう，意図される限界域の中にあり続ける
］ようにする
— %~box の`包含塊$が見越される~sizeより小さいときでも。
◎
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.
</p>

<p>
例えば， `position-area$p 用の値 `bottom span-right^v は、
%~box を その~anchor先 %~anchor の左端~辺から自身の包含塊の右端~辺まで伸張できるようにする
— %~box は、［
既定では，この空間~内で %~anchor の左端に整列する
］が［
%~box が この空間より大きい場合には
（ %~anchor が~screenの右端~辺に ごく近いときなど），
可視であり続けるよう左方へズラされる
］ことになる。
◎
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.
</p>
</div>

			<section id="resolving-spans">
<h4 title="Resolving &lt;position-area&gt;s">3.1.1. `position-area^t の解決-法</h4>

<p>
所与の~box %~box の
`位置~区画~用の格子@
は、
縦横とも 3 分された格子である
— それは、
軸ごとに，次に挙げる 4 本の線から
（および，`包含塊$の`書字~mode$を利用して）
構成される：
◎
The position-area grid is a 3×3 grid, composed of four grid lines in each axis. In order (and using the writing mode of the containing block):
</p>
<ul>
	<li>
<p>
次のうち，より`始端$寄りにある方：
</p>
		<ul>
			<li>
%~box の［
改変される前の`包含塊$
］の始端~辺
</li>
			<li>
%~box の`既定の~anchor~box$の始端~辺
</li>
		</ul>
◎
the start edge of the box’s pre-modification containing block, or the start edge of the default anchor box if that is more start-ward
</li>
	<li>
%~box の`既定の~anchor~box$の始端~辺
◎
the start edge of the default anchor box
</li>
	<li>
%~box の`既定の~anchor~box$の終端~辺
◎
the end edge of the default anchor box
</li>
	<li>
<p>
次のうち，より`終端$寄りにある方：
</p>
		<ul>
			<li>
%~box の［
改変される前の`包含塊$
］の終端~辺
</li>
			<li>
%~box の`既定の~anchor~box$の終端~辺
</li>
		</ul>
◎
the end edge of the box’s pre-modification containing block, or the end edge of the default anchor box if that is more end-ward.
</li>
</ul>

<p>
`position-area$t は、
この格子を成すある領域
—
`位置~区画@
—
を［
それが占める［
~rowたち, ~colたち
］を指定する
］ことにより選定する
【区画は，それらの交差域になる】。
各~keywordは、［
~row（たち）, ~col（たち）
］どちらかを指定する：
◎
A &lt;position-area&gt; selects a region of this grid by specifying the rows and columns the region occupies, with each of the two keywords specifying one of them:
</p>

<dl>
	<dt>`start@vI</dt>
	<dt>`end@vI</dt>
	<dt>`self-start@vI</dt>
	<dt>`self-end@vI</dt>

	<dt>`top@vI</dt>
	<dt>`bottom@vI</dt>
	<dt>`left@vI</dt>
	<dt>`right@vI</dt>

	<dt>`y-start@vI</dt>
	<dt>`y-end@vI</dt>
	<dt>`y-self-start@vI</dt>
	<dt>`y-self-end@vI</dt>

	<dt>`x-start@vI</dt>
	<dt>`x-end@vI</dt>
	<dt>`x-self-start@vI</dt>
	<dt>`x-self-end@vI</dt>

	<dt>`block-start@vI</dt>
	<dt>`block-end@vI</dt>
	<dt>`block-self-start@vI</dt>
	<dt>`block-self-end@vI</dt>

	<dt>`inline-start@vI</dt>
	<dt>`inline-end@vI</dt>
	<dt>`inline-self-start@vI</dt>
	<dt>`inline-self-end@vI</dt>

	<dt>`center@vI</dt>
	<dd>
<p>
1 個の［
~row／~col
］を占める：
</p>
		<ul>
			<li>
<p>
参照rする軸（［
~row, ~col
］どちらを占めるか）は：
</p>
				<ul>
					<li>
当の~keywordが ある軸を指定する場合、
それになる
（例： `block-start$vI は、
`塊-軸$を参照rする）。
</li>
					<li>
他の場合、
下に述べる。
</li>
				</ul>
			</li>
			<li>
3 個ある［
~row／~col
］のうち どれを占めるかは、
当の~keywordにより指示される
（例： ~keywordが `start^v を含むなら “始端”, 等々）。
</li>
			<li>
<p>
どの側が［
“始端” ／ “終端”
］とされるかは、
次に基づく：
</p>
				<ul>
					<li>
`self-^v を含む~keyword用には、
当の~boxの【！own】`書字~mode$
</li>
					<li>
他~keyword用には、
当の~boxの`包含塊$の`書字~mode$
</li>
				</ul>
			</li>
		</ul>
◎
The single corresponding row or column, depending on which axis this keyword is specifying.
◎
Like in anchor(), the plain logical keywords (start, end, etc) refer to the writing mode of the box’s containing block. The x-start/etc determine their direction in the same way, but in the specified physical axis.
◎
The self-* logical keywords (self-start, x-self-end, etc) are identical, but refer to the box’s own writing mode.
</dd>

	<dt>`span-start@vI</dt>
	<dt>`span-end@vI</dt>

	<dt>`span-top@vI</dt>
	<dt>`span-bottom@vI</dt>

	<dt>`span-y-start@vI</dt>
	<dt>`span-y-end@vI</dt>

	<dt>`span-x-start@vI</dt>
	<dt>`span-x-end@vI</dt>

	<dt>`span-block-start@vI</dt>
	<dt>`span-block-end@vI</dt>

	<dt>`span-inline-start@vI</dt>
	<dt>`span-inline-end@vI</dt>
	<dd>
中央にある［
~row／~col
］も占めることを除いて，［
当の~keywordから `span-^v を除去した~keyword
］と同じになる
（例： `span-top$vI は、 { “中央”, “上端” } を占める）。
◎
Two rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords.
◎
(For example, span-top spans the first two rows—​the center row and the top row.)
</dd>

	<dt>`span-block-self-start^vI</dt>
	<dt>`span-block-self-end^vI</dt>
	<dt>`span-inline-self-start^vI</dt>
	<dt>`span-inline-self-end^vI</dt>
	<dd class="trans-note">【
これら（上の Ⓔ, Ⓕ を成す）は、
原文には挙げられていないが，
上に挙げられた `span-start$vI その他の~keywordと同様に定義されよう。
】</dd>

	<dt>`span-all@vI</dt>
	<dd>
3 個~すべての［
~row／~col
］を占める。
◎
All three rows or columns,＼
↓↓ depending on which axis this keyword is specifying.
</dd>
</dl>

<div class="p">
<p>
~keywordには、
どの軸を参照rするか多義的なものがある
（ `center$vI, `span-all$vI, `start$vI, 等々）
— それらが参照rする軸は：
</p>
<ul>
	<li>
他方の~keywordが ある軸を指定する場合
⇒
もう一方の軸になる
（例： `block-start center^v を成す~keyword `center^v は、
`行内-軸$を参照rする）。
</li>
	<li>
他の場合
⇒
順に，当の~boxの`包含塊$の［
`塊-軸$, `行内-軸$
］を参照rする
（例：`span-all start^v は `span-all inline-start^v と等価になる）。
</li>
</ul>
◎
Some keywords are ambiguous about what axis they refer to: center, span-all, and the start/etc keywords that don’t specify the block or inline axis explicitly. If the other keyword is unambiguous about its axis, then the ambiguous keyword is referring to the opposite axis. (For example, in block-start center, the center keyword is referring to the inline axis.) If both keywords are ambiguous, however, then the first refers to the block axis of the box’s containing block, and the second to the inline axis. (For example, span-all start is equivalent to span-all inline-start.)
</div>

<div class="p">
<p>
~keywordが 1 個だけ与えられた場合：
</p>
<ul>
	<li>
所与の~keywordが ある軸を指定する場合
⇒
2 個目の~keywordは `span-all$vI であったかのように挙動する
（例： `top$vI は `top span-all^v と等価になる）。
</li>
	<li>
他の場合
⇒
所与の~keywordが繰返されたかのように挙動する
（例： `center$vI は `center center^v と等価になる）。
</li>
</ul>
◎
If only a single keyword is given, it behaves as if the second keyword is span-all if the given keyword is unambigous about its axis; otherwise, it behaves as if the given keyword was repeated. (For example, top is equivalent to top span-all, but center is equivalent to center center.)
</div>

<hr>

<p>
`position-area$t は、
既定の`自己-整列$も含意する
— それは、
当の~boxの`自己-整列~prop$が `normal$vS をとる場合に利用されることになる。
すなわち、
所与の軸 %軸 における既定の整列は，
%軸 において選定された`位置~区画$に応じて：
◎
The &lt;position-area&gt; also implies a default self-alignment, which will be used if the self-alignment property on the box is normal:
</p>
<ul>
	<li>
［
“中央” 領域のみ ／ 3 個の領域~すべて
］を占める場合
⇒
`anchor-center$vS になる。
◎
If the only the center region in an axis is selected, or all three regions are selected, the default alignment in that axis is anchor-center.
</li>
	<li>
他の場合
⇒
`位置~区画$が占めない領域がある側になる
— “始端” 領域が指定されたならば `end$vS になる，等々。
◎
Otherwise, the default alignment in that axis is toward the non-specified side region: if it’s specifying the "start" region of its axis, the default alignment in that axis is end; etc.
</li>
</ul>

<div class="example">
<div>
<p>
例えば，`書字~mode$が英語と等価である（ `horizontal-tb^v, `ltr^v ）と見做すなら、
値 `span-x-start top^v により指定される`位置~区画$は：
</p>
<ul>
	<li>
縦~軸においては、
【 `top^v により指定され，】
“始端（上端）” 【！`start$vI 】領域に解決される。
なので、
既定の整列は `align-self:end$p になる
（当の~boxの下端`~margin辺$と “上端” 領域の下端~側が接合するようになる）。
</li>
	<li>
横~軸においては、
【 `span-x-start^v により指定され，】
{ “始端（左端）”, “中央” } 領域
］に解決される。
なので、
既定の整列は
`justify-self:anchor-center$p になる
（当の~boxの終端`~margin辺$と { “始端”, “中央” } 領域の終端~側が接合するようになる）。
</li>
</ul>
◎
For example, assuming an English-equivalent writing mode (horizontal-tb, ltr), then the value span-x-start top resolves to the start region of the vertical axis, and the start and 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 top region) and justify-self: end (making the box’s end-side margin edge flush with the end side of the span-start region).
</div>

<figure>
<figcaption id="_dgm-position-area-example">
`position-area:span-x-start top$p による位置決めの例。
◎
An example of position-area: span-x-start top positioning. 
</figcaption></figure></div>

<p class="note">注記：
`既定の~anchor~box$が当の~boxの［
改変される前の`包含塊$
］を はみ出るときは、
`位置~区画~用の格子$を成す一部の［
~row／~col
］の~sizeは， 0 になることもある。
◎
Note: When the default anchor box is partially or completely outside of the pre-modified containing block, some of the position-area grid’s rows or columns can be zero-sized.
</p>

			</section>
		</section>
		<section id="anchor-pos">
<h3 title="The anchor() Function">3.2. `anchor^f 関数</h3>

<p>
`絶対的に位置され$た~boxは、
自身の`~inset~prop$の値として
`anchor@f
関数を利用することにより，［
1 個以上の`~anchor~box$
］の位置を参照rできる。
`anchor$f 関数は、
`length$t に解決される。
その利用が妥当になるのは、
`~inset~prop$に限られる。
◎
An absolutely positioned box can use the anchor() function as a value in its inset properties to refer to the position of one or more anchor boxes. The anchor() function resolves to a &lt;length&gt;. It is only valid to be used in the inset properties.
</p>

◎名 `top$p, `left$p, `right$p, `bottom$p
◎新値 `anchor$f
◎表終

<pre class="prod">
`anchor()^t
	= anchor( `anchor-name$t? &amp;&amp; `anchor-side$t, `length-percentage$t? )
`anchor-name@t
	= `dashed-ident$t
`anchor-side@t
	= `inside$vA
	| `outside$vA
	| `top$vA
	| `left$vA
	| `right$vA
	| `bottom$vA
	| `start$vA
	| `end$vA
	| `self-start$vA
	| `self-end$vA
	| `percentage$t
	| `center$vA
</pre>

<p>
`anchor$f 関数は、
3 個の引数をとる
— 以下における %~box は、
この関数を利用している`絶対的に位置され$た~boxを指すとする：
◎
The anchor() function has three arguments:
</p>
<ul>
	<li>
<p>
`anchor-name$t は、
`~anchor要素$を見出す方法を指定する
【すなわち、`~anchor指定子$を与える】。
%~box の位置決め情報は、
それにより見出された`~anchor要素$
【すなわち，`~target~anchor要素$】
から引き出されることになる：
◎
the &lt;anchor-name&gt; value specifies how to find the anchor element it will be drawing positioning information from. Its possible values are:
</p>
		<ul>
			<li id="valdef-anchor-dashed-ident">
`dashed-ident$t が指定された場合
⇒
`~anchor要素$のうち［
所与の識別子を`~anchor名$に伴うもの
］を探す。
この名前は、
`~tree視野な参照$になる。
◎
&lt;dashed-ident&gt;
• Specifies the anchor name it will look for. This name is a tree-scoped reference.
</li>
			<li>
省略された場合
⇒
アリなら，
%~box 用に定義された`既定の~anchor要素$を選定する。
◎
omitted
• Selects the default anchor element defined for the box, if possible.
</li>
		</ul>
<p>
詳細は、
`~target~anchor要素$を見よ。
◎
See target anchor element for details.
</p>
	</li>
	<li>
<p>
`anchor-side$t は、
`~target~anchor要素$の［
その値に対応している側
］を位置として参照rする。
以下における %~prop は、
この関数を利用している`~inset~prop$を指すとする。
アリな値は：
◎
the &lt;anchor-side&gt; value refers to the position of the corresponding side of the target anchor element. Its possible values are:
</p>
		<dl class="valdef">
			<dt>`inside@vA</dt>
			<dt>`outside@vA</dt>
			<dd>
`inside$vA は、
`~anchor~box$の各~側のうち，
%~prop と同じ側を参照rする
（ %~box を当の`~anchor~box$の “内側” に付する）
よう解決される。
`outside$vA は、
その反対-側†を参照rするよう解決される。
◎
Resolves to one of the anchor box’s sides, depending on which inset property it’s used in. inside refers to the same side as the inset property (attaching the positioned box to the "inside" of the anchor box), while outside refers to the opposite.
</dd>
			<dd class="trans-note">【†
~keywordの意味から、
“内側” の反対を表す “外側” を意味すると思われる
— %~prop が指示する側と反対（例： %~prop が `top^p なら下端）を意味するかもしれないが。
】</dd>

			<dt>`top@vA</dt>
			<dt>`right@vA</dt>
			<dt>`bottom@vA</dt>
			<dt>`left@vA</dt>
			<dd>
`~anchor~box$の［
所与の~keywordにより指定された側
］を参照rする。
◎
Refers to the specified side of the anchor box.
</dd>
			<dd class="note">注記：
これらの~keywordが利用-可能になるのは、
~keywordが属する軸が %~prop が属する軸と合致している場合に限られる。
例えば， `left$vA を利用-可能な~propは、
横~軸に属する`~inset~prop$
— `left$p, `right$p, これらと同じ側に対応する~flow相対な~prop —
に限られる。
◎
Note: These are only usable in the inset properties in the matching axis. For example, left is usable in left, right, or the logical inset properties that refer to the horizontal axis.
</dd>
			<dd class="trans-note">【
これらは、
“物理-~keyword” とも総称される。
】</dd>

			<dt>`start@vA</dt>
			<dt>`end@vA</dt>
			<dt>`self-start@vA</dt>
			<dt>`self-end@vA</dt>
			<dd>
`~anchor~box$の各~側のうち，
%~prop と同じ軸に属するいずれかを参照rする
【例： %~prop が `top$p ならば上端か下端】
— 所与の~keywordに応じて，
⇒＃
［ `self-start$vA ／ `self-end$vA ］ならば， %~box ／
［ `start$vA ／ `end$vA ］ならば， %~box の`包含塊$
◎終
の`書字~mode$を基準に解決することにより。
◎
Refers to one of the sides of the anchor box in the same axis as the inset property it’s used in, by resolving the keyword against the writing mode of either the positioned box (for self-start and self-end) or the positioned box’s containing block (for start and end).
</dd>
			<dd class="trans-note">【
これらは、
“論理-~keyword” とも総称される。
】</dd>

			<dt id="valdef-anchor-percentage">`percentage$t</dt>
			<dt>`center@vA</dt>
			<dd>
［
`start$vA 側, `end$vA 側
］の合間における所与の百分率に対応する位置を参照rする
— ［
`0%^v ／ `100%^v
］は［
`start^v ／ `end^v
］と等価になる。
◎
Refers to a position a corresponding percentage between the start and end sides, with 0% being equivalent to start and 100% being equivalent to end.
</dd>
			<dd>
`center$vA は、
`50%^v と等価になる。
◎
center is equivalent to 50%.
</dd>
		</dl>
	</li>
	<li>
省略可能な 3 個目の引数 `length-percentage$t は、
~fallback値を与える。
これは、
当の `anchor$f が`妥当な~anchor関数$でない場合に，何に解決するべきかを指定する。
◎
the optional &lt;length-percentage&gt; final argument is a fallback value, specifying what the function should resolve to if it’s an invalid anchor function.
</li>
</ul>

<p>
`anchor$f 関数は、
`妥当な~anchor関数$を表現しているならば，
（`~styleと~layoutの差挟み$を介して）
`算出d値$の時点で `length$t に解決される
— ［
当の有位置な~boxの`~insetで改変された包含塊$
］の［
当の関数が現れる~propに対応している辺
］を［
`~target~anchor要素$の指定された~border辺
］に整列するような。
そのときには、［
`~target~anchor要素$と当の有位置な~boxの`包含塊$の合間にある`~scroll容器$
］は，どれも［
各自の初期~scroll位置に~scrollされている
］と見做される
（が、
`§ ~scrollの織り込み法＠#scroll$
を見よ）。
◎
An anchor() function representing a valid anchor function resolves at computed value time (using style &amp; layout interleaving) to the &lt;length&gt; that would align the edge of the positioned boxes' inset-modified containing block corresponding to the property the function appears in with the specified border edge of the target anchor element, assuming that all scroll containers between the target anchor element and the positioned box’s containing block are scrolled to their initial scroll position (but see § 3.4 Taking Scroll Into Account).
</p>

<p class="note">注記：
このことは、
`~anchor関数$を利用している~propの［
`遷移＠~WANIM#_animation-class-css-transition$／`~animation＠~WANIM#_animation-class-css-animation$【！~WANIM#concept-animation】
］は，［
アリなすべての類の変化に対し， “期待されるとおり” に働くようになる
］ことを意味する
⇒＃
`~anchor~box$が移動されたとき,
`~anchor要素$が文書に追加されたとき,
`~anchor要素$が文書から除去されたとき,
`~anchor要素$の `anchor-name$p ~propの値が変化したとき,
等々
◎
Note: This means that transitions or animations of a property using an anchor function will work "as expected" for all sorts of possible changes: the anchor box moving, anchor elements being added or removed from the document, the anchor-name property being changed on anchors, etc.
</p>

<p>
`~target~anchor要素$が`断片化-$された場合、［
各`断片$の`~border~box$
］たちが成す限界~矩形
— それらの~boxと軸が揃えられた矩形 —
が代わりに利用される。
◎
If the target anchor element is fragmented, the axis-aligned bounding rectangle of the fragments' border boxes is used instead.
</p>

<div class="example">
<p>
例えば，
`.bar { inset-block-start: anchor(--foo block-start); }^css
においては、
`anchor$f は，［
`.bar^css 要素の塊-始端~辺と`~anchor要素$ `--foo^v の塊-始端~辺が揃うような長さ
］に解決されることになる。
◎
For example, in .bar { inset-block-start: anchor(--foo block-start); }, the anchor() will resolve to the length that’ll line up the .bar element’s block-start edge with the --foo anchor’s block-start edge. 
</p>

<p>
他方，
`.bar { inset-block-end: anchor(--foo block-start); }^css
においては、［
`.bar^css 要素 の`塊-終端~辺^emと`~anchor要素$ `--foo^v の塊-終端~辺が揃うような長さ
］に解決されることになる。
◎
On the other hand, in .bar { inset-block-end: anchor(--foo block-start); }, it will instead resolve to the length that’ll line up the .bar element’s block-end edge with the --foo anchor’s block-start edge.
</p>

<p>
［
`inset-block-start$p,
`inset-block-end$p
］の値は，異なる辺
（要素の`包含塊$の［
塊-始端, 塊-終端
］辺）
からの~insetを指定するので、
双方の `anchor$f は同じでも，それらを解決した結果の長さは異なることになる。
◎
Since inset-block-start and inset-block-end values specify insets from different edges (the block-start and block-end of the element’s containing block, respectively), the same anchor() will usually resolve to different lengths in each.
</p>
</div>

<div class="example">
<p>
`anchor$f 関数は、
`length$t に解決されるので，他の長さと同様に`~math関数$内でも利用できる。
◎
Because the anchor() function resolves to a &lt;length&gt;, it can be used in math functions like any other length.
</p>

<p>
例えば，次は、［
要素の`~insetで改変された包含塊$
］が［
`~anchor~box$上で中央に寄せられ，
要素の`包含塊$を~overflowしない~~範囲でアリな限り幅広になる
］よう，要素を設定しておくことになる：
◎
For example, the following will set up the element so that its inset-modified containing block is centered on the anchor box and as wide as possible without overflowing the containing block:
</p>

<pre class="lang-css">
.centered-message {
  position: fixed;
  max-width: max-content;
  justify-self: center;

  --center: anchor(--x 50%);
  --half-distance: min(
    abs(0% - var(--center)),
    abs(100% - var(--center))
  );
  left: calc(var(--center) - var(--half-distance));
  right: calc(var(--center) - var(--half-distance));
  bottom: anchor(--x top);
}
</pre>

<p>
これは例えば、
`input$e 要素に対する~error~message用に適切になることもあろう
— 中央に寄せたことにより，当の~messageが どの入力を参照rしているか発見し易くなるので。
◎
This might be appropriate for an error message on an input element, for example, as the centering will make it easier to discover which input is being referred to.
</p>
</div>

		</section>
		<section id="anchor-center">
<h3 title="Centering on the Anchor: the anchor-center value">3.3. ~anchor上での中央~寄せ： `anchor-center^v 値</h3>

◎名 `justify-self$p, `align-self$p, `justify-items$p, `align-items$p
◎新値 `anchor-center$vS
◎表終

<p>
`自己-整列~prop$は、
`絶対的に位置され$た~boxが［
その`~insetで改変された包含塊$の中で自身を整列する
］ことを許容する。
通例的には，［
既存の値に加えて，`~inset~prop$を注意深く選ぶこと
］で有用な整列~用には十分になるが、
~anchor先での位置決め用に共通的な事例
— `~anchor~box$上で中央に寄せること —
を達成するためには、
注意深い, いくぶん複階的な設定-法が要求される。
◎
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.
</p>

<div>
<p>
新たな値
`anchor-center@vS
は、
この事例を極めて単純にする
— 所与の~box %~box が ~AND↓ を満たす場合…
</p>
<ul>
	<li>
`絶対的に位置され$ている
</li>
	<li>
その`既定の~anchor~box$ %~anchor ~NEQ ε
</li>
</ul>

<p>
…場合、
関連な軸
【この値を利用している~propが対象にする軸】
において：
</p>
◎
The new anchor-center value makes this case extremely simple: if the positioned box has a default anchor box,＼
</div>

<ul>
	<li>
%~box は %~anchor 上で（アリな限り）中央に寄せられるようになる。
◎
then it is centered (insofar as possible) over the default anchor box in the relevant axis.
</li>
	<li>
%~box の`~inset~prop$用の値 `auto$v は `0^v に解決される。
◎
Additionally, any auto inset properties resolve to 0.
</li>
</ul>

<p>
%~box が上の条件を満たさない場合、
`anchor-center$vS は `center$vS として挙動する
— `~inset~prop$の解決-法に対する追加的な効果は無い。
◎
If the box is not absolutely positioned, or does not have a default anchor box, this value behaves as center and has no additional effect on how inset properties resolve.
</p>

<p class="note">注記：
`anchor-center$vS を利用しているときは、
`position-area$p と類似に：
%~anchor が %~box の`元の包含塊$ %包含塊 の辺に近過ぎる場合には、
%包含塊 の中にあり続けるようにするため，
既定では中央から “ズラされる” ことになる。
詳細は、
`CSS-ALIGN-3$r `§ ~overflow時の整列＠~CSSALIGN#overflow-values$
を見よ。
◎
Note: Similar to position-area, when using anchor-center, if the anchor is too close to the edge of the box’s original containing block, by default it will “shift” from being purely centered, in order to remain within the original containing block. See CSS Box Alignment 3 § 4.4 Overflow Alignment: the safe and unsafe keywords and scroll safety limits for more details.
</p>

		</section>
		<section id="scroll">
<h3 title="Taking Scroll Into Account">3.4. ~scrollの織り込み法</h3>

<p>
処理能の理由から、
各~実装は，通例的に~scrollingを別々な［
~scroll／“組成-” 
］用の~threadで遂行する
— それが有する能力は，ごく制限されるので
（単純な動きや変形, 等々であり，~layoutや それに類似な高価な演算を伴わない）、
~scrollingが［
ヒトの知覚からは “瞬時” と見なされるほど十分~速く応答する
］ことに依拠できる。
◎
For performance reasons, implementations usually perform scrolling on a separate scrolling/"compositing" thread, which has very limited capabilities (simple movement/transforms/etc., but no layout or similar expensive operations) and thus can be relied upon to respond to scrolling fast enough to be considered "instant" to human perception.
</p>

<p>
~scrollingが ある~anchorへ位置された有位置な要素 %要素 を`移動させるだけ^emならば、
理論~上は，課題は無い
— 当の動きは，~scroll用の~threadで遂行できるので、
%要素 は，~scrollしている内容と伴に滑らかに移動する。
しかしながら、
`~anchor位置決め$は， %要素 の自前の［
ある辺, その対~辺
］の位置が`異なる^em~scroll用の文脈における何かに依存するようになる
］ことを許容する。
それは、
~scrollingが %要素 の`片方の辺だけ^em移動し得ることを意味する
— その結果、
%要素 の~sizeが変化して，~scroll用の~threadでは遂行できない~layoutを遂行させる。
◎
If scrolling just causes an anchor-positioned element to move, there is in theory no issue; the movement can be performed on the scrolling thread so the positioned element moves smoothly with the scrolling content. However, anchor positioning allows an element to make the positions of its own opposite edges depend on things in different scrolling contexts, which means scrolling could move just one edge and cause a size change, and thus perform layout. This can’t be performed on the scrolling thread!
</p>

<p>
アリな限り様々な要素を~anchor先にする自由度を依然として許容しながら，これを補償するため、
`~anchor位置決め$は，［
`記憶した~scroll~offset$,
`~scroll補償$
］の組合nを利用する。
◎
To compensate for this, while still allowing as much freedom to anchor to various elements as possible, anchor positioning uses a combination of remembered scroll offsets and compensating for scroll.
</p>

<div class="note">
<p>注記：
ここに与える詳細は技術的であるが、
要は，所与の有位置な要素 %要素 に対し：
◎
The details here are technical, but the gist is:
</p>
<ul>
	<li>
<p>
%要素 が［
最初に表示される／`~fallbackを変更する＠#fallback$
］とき、
%要素 の位置は［
%要素 のすべての`~anchor候補$の最新な位置
］に則って正しく計算される。
◎
When a positioned element is first displayed, or when it changes fallbacks, its position is correctly calculated according to the up-to-date position of all anchor references.
</p>

<p>
これらの`~anchor候補$どうしが異なる~scroll文脈~内にある場合、
それらによる総~scroll~offsetが`記憶され^em，
【 %要素 の】~layoutは
— それら【！の要素】が後で~scrollされる場合でも —
この記憶された~offsetを利用して継続される
（~scroll~offsetに限り記憶される
— それらが実際~lay-outされる位置は、
各回に新規に計算され，正確aであり続ける）。
それらは、
%要素 が［
表示されるか否かが変化した場合／
~fallbackを変更した場合
］に限り，計算し直されることになる。
◎
If these anchor references are in a different scroll context, their total scroll offsets are memorized, and layout will continue using those memorized offsets, even if those elements are scrolled later. (Only the scroll offsets are memorized; their actual laid-out positions are freshly calculated each time and remain accurate.) They’ll only recalculate if the positioned element stops being displayed and starts again, or changes fallbacks.
</p>
	</li>
	<li>
唯一の例外は，`既定の~anchor要素$であり、
当の~anchorが その`記憶した~scroll~offset$から離れるよう~scrollされた場合、
%要素 は，それと伴に移動する。
これは，`純粋に^em 位置におけるズレなので、
%要素 の~sizeは変化し得ない
— さもなければ、
それに呼応して~layoutが要求される。
◎
The one exception to this is the default anchor element; if it’s scrolled away from its remembered scroll offset, the positioned element moves with it. Because this is *purely* a shift in position, the positioned element can’t change size or otherwise require layout in response.
</li>
</ul>

<p>
その結果として，`~anchor位置決め$は、
一般には，%要素 の~anchor先が何であれ “そのとおりに働く” べきであるが、
自身が~scrollingに対し どう応答し得るかにおいては，制限されるかもしれない。
◎
The end result is that anchor positioning should generally "just work", regardless of what the element is anchoring to, but it might be limited in how it can respond to scrolling.
</p>
</div>

<div class="algo">
<p>
`絶対的に位置され$た要素 %要素 用の
`~anchor再~計算@
（ `anchor recalculation point^en ）は：
◎
An anchor recalculation point occurs for an absolutely positioned element＼
</p>
<ul>
	<li>
%要素 が~boxを生成し始めるとき
（すなわち， %要素 の `display$p が［
`none^v ／ `contents^v
］から他の値へ切替わったとき）
に生じる
— %要素 が~CSS~animationの稼働を開始するときと一致するように
【おそらく， `display^p の`~animate法＠~CSSDISP#display-animation$を指す】
。
◎
whenever that element begins generating boxes (aka switches from display:none or display:contents to any other display value), identical to when it starts running CSS animations.
</li>
	<li>
%要素 用に`位置~fallback~style群を決定する$ときにも生じる
— その結果として，~fallback~style群が変化した場合、
%要素 は，選ばれた~fallback~style群に結付けられた`~anchor再~計算$の結果を利用する。
◎
An anchor recalculation point also occurs for an element when determining position fallback styles for that element; if it changes fallback styles as a result, it uses the result of the anchor recalculation point associated with the chosen set of fallback styles.
</li>
	<li>
<p>
それが生じたときは、
%要素 の`首要~box$ %~box の各`~anchor候補$ %~anchor に対し，
`記憶した~scroll~offset@
（ `remembered scroll offset^en ）
を結付ける
— それは、
`その時点における^em，［
%~anchor の先祖である`~scroll容器$のうち，
%~box の`包含塊$に~~達する前までのものすべて
］の`~scroll~offset$の総和に等しい。
`記憶した~scroll~offset$は、
~scrollに依存する他の位置決め変更
— `position:sticky$p など —
も織り込む。
%~box は`既定の~anchor要素$ %既定の~anchor を有する場合、
常に %既定の~anchor 用にも`記憶した~scroll~offset$を計算する
— %~box が %既定の~anchor を指す`~anchor参照$を実際には有さない場合でも。
◎
When an anchor recalculation point occurs for an element abspos, then for every element anchor referenced by one of abspos’s anchor references, it associates a remembered scroll offset equal to the current sum of the scroll offsets of all scroll container ancestors of anchor, up to but not including abspos’s containing block. The remembered scroll offset also accounts for other scroll-dependent positioning changes, such as position: sticky. If abspos has a default anchor element, it always calculates a remembered scroll offset for it, even if abspos doesn’t actually have an anchor reference to it.
</li>
	<li>
すべての`~anchor候補$【の位置？】は、［
すべての`~scroll容器$が各自の`初期~scroll位置$にあって，
各~anchor候補に対し，それに結付けられた`記憶した~scroll~offset$を それらに加算した
］かのように計算される。
◎
All anchor references are calculated as if all scroll containers were at their initial scroll position, and then have their associated remembered scroll offset added to them.
</li>
</ul>

<p class="issue">
変形には~scrollingと同じ課題【この節の冒頭に述べた課題】があるので、
類似に，`~anchor位置決め^citeは、
通常は，それらに対し注意を払わない【？】。
ここに変形の効果も組入れることはできるか？
◎
Transforms have the same issue as scrolling, so Anchor Positioning similarly doesn’t pay attention to them normally. Can we go ahead and incorporate the effects of transforms here?
</p>
</div>

<p>
上述は、
有位置な要素 %要素 に対し，［
%要素 の`~anchor候補$たちの~scroll位置【の変化？】に対し`一回だけ^em応答する
］ことを許容するが、
それらのうちいずれかが~scrollされた場合、
%要素 は，もはや それら【いずれか】へ~anchorされたように現れなくなることになる
（ %要素 は、
~scrolling以外による動きに対しては，応答し続けることになるが）。
この問題は，`一般には^em解けないが、
`1 個^emの`~anchor候補$
— 特定的に，`既定の~anchor要素$ —
の~scrollingに対しては`応答できる^em：
◎
The above allows a positioned element to respond to the scroll positions of its anchor references once, but if any of them are scrolled, the positioned element will no longer appear to be anchored to them (tho it will continue to respond to their non-scrolling movement). While this problem can’t be solved in general, we can respond to the scrolling of one anchor reference; specifically, the default anchor element:
</p>

<div class="algo">
<p>
`絶対的に位置され$た~box %~box は，所与の［
横~軸／縦~軸
］ %軸 において
`~scroll補償@
を有する（ `compensates for scroll^en ）とは、
~AND↓ が満たされることをいう：
◎
An absolutely positioned box abspos compensates for scroll in the horizontal or vertical axis if both of the following conditions are true:
</p>
<ul>
	<li>
%~box の`既定の~anchor~box$ ~NEQ ε
— 以下， %既定の~anchor と記す。
◎
abspos has a default anchor box.
</li>
	<li>
<p>
~OR↓
（ %~box の`~anchor参照$のうちいずれかは、
%既定の~anchor か，同じ~scrolling文脈~内にある何かを指している）：
◎
abspos has an anchor reference to its default anchor box or at least to something in the same scrolling context, aka at least one of:
</p>
		<ul>
			<li>
%~box の［
%軸 に属する`自己-整列~prop$
］の`使用~値$ ~EQ `anchor-center$vS
◎
abspos’s used self-alignment property value in that axis is anchor-center;
</li>
			<li>
%~box の `position-area$p の値 ~NEQ `none$vI
◎
abspos has a non-none value for position-area
</li>
			<li>
<p>
( ある `anchor$f 関数 %関数, ある`~anchor要素$ %~anchor )
に関して，
~AND↓ が満たされる：
</p>
				<ul>
					<li>
%~box の［
%軸 に属する`~inset~prop$
］のうちいずれかの`使用~値$は %関数 を利用している
</li>
					<li>
%~anchor ~EQ `~target~anchor要素$( %~box, %関数 内に指定された `anchor-name$t )
</li>
					<li>
［
%~anchor の先祖である`~scroll容器$のうち %~anchor に最も近いもの
］ ~EQ ［
%既定の~anchor の先祖である`~scroll容器$のうち %既定の~anchor に最も近いもの
］
</li>
				</ul>
◎
at least one anchor() function on abspos’s used inset properties in the axis refers to a target anchor element with the same nearest scroll container ancestor as abspos’s default anchor box.
</li>
		</ul>
	</li>
</ul>

<p class="note">注記：
%~box の`位置~option~list$は空でない【！has】場合、
それにより適用された~fallback~styleも，
ある軸において`~scroll補償$を有するかどうかに影響する。
◎
Note: If abspos has a position options list, then whether it compensates for scroll in an axis is also affected by the applied fallback style.
</p>
</div>

<div class="algo">
<p>
`絶対的に位置され$た~box %~box の
`~scrollに対する既定のズレ@
（ `default scroll shift^en ）は、
2 個の長さ
— 順に［
横~軸, 縦~軸
］用のそれ —
が成す~pairである。
これらの長さは、
各 %軸 に対し，次に従って計算される：
◎
abspos’s default scroll shift is a pair of lengths for the horizontal and vertical axises, respectively. Each length is calculated as:
</p>
<ol>
	<li>
~IF［
%~box は %軸 において`~scroll補償$を有する
］
⇒
~RET 次に挙げる 2 つの［
%軸 における差
］
⇒＃
`既定の~anchor要素$の`記憶した~scroll~offset$,
現在の`記憶した~scroll~offset$を計算し直したとするときの結果
◎
If abspos is compensating for scroll in the axis, then the length is the difference between the remembered scroll offset of the default anchor element and what its current remembered scroll offset would be if it were recalculated.
</li>
	<li>
~RET 0
◎
Otherwise, the length is 0.
</li>
</ol>
</div>

<p>
%~box は、
それ用に~layoutが遂行された後に，`~scrollに対する既定のズレ$により追加的にズラされる
— ある変形【！~STREAMS#generictransformstream-transform】により影響されたかのように
（他の変形よりも前に【？】）。
◎
After layout has been performed for abspos, it is additionally shifted by the default scroll shift, as if affected by a transform (before any other transforms).
</p>

<p class="issue">
【`~scrollに対する既定のズレ$を】
~snapshotする精確な時機を定義する必要がある
— 各【描画】~frameごとに，~styleの再~計算より前に更新されるよう。
◎
Define the precise timing of the snapshot: updated each frame, before style recalc.
</p>

<p class="issue">
`記憶した~scroll~offset$と類似に、
`既定の~anchor要素$に対する変形に対しても，注意を払えるか？
◎
Similar to remembered scroll offset, can we pay attention to transforms on the default anchor element?
</p>

<p class="note">注記：
`記憶した~scroll~offset$は，
`anchor$f 関数の値に影響する一方で、
`~scrollに対する既定のズレ$は，
当の要素を直にズラす
— 当の要素に対し［
`~inset~prop$の値を決定する, 整列を適用する, 等々
］より`後^emに。
これは，`通例的^emには判別-不能になるが、
`round(anchor(outside), 50px)＠~CSSVAL#funcdef-round$v の様な事例では，
`既定の~anchor要素$の位置を線形でない流儀で変形するので、
挙動における相違を公開することになる。
◎
Note: While remembered scroll offsets affect the value of anchor() functions, default scroll shift directly shifts the element, after determining the value of its inset properties, applying alignment, etc. This is usually indistinguishable, but cases like round(anchor(outside), 50px), which transform the default anchor element’s position in a non-linear fashion, will expose the difference in behavior.
</p>

		</section>
		<section id="anchor-valid">
<h3 title="Validity">3.5. 妥当性</h3>

<p>
`anchor$f 関数 %関数 は、
~AND↓ を満たす場合に限り，
`妥当な~anchor関数@
になる：
◎
An anchor() function is a valid anchor function only if all the following conditions are true:
</p>
<ul>
	<li>
%関数 は、
`絶対的に位置され$た~box %~box の ある`~inset~prop$ %~prop にて利用されている。
◎
It’s being used in an inset property on an absolutely positioned box.
</li>
	<li>
%関数 の `anchor-side$t が物理-~keywordを指定している場合、
それは， %~prop が属する軸に属する。
（例えば， `left$vA を利用し得る~propは、
横~軸に属する`~inset~prop$
— `left$p, `right$p, これらと同じ側に対応する~flow相対な~prop —
に限られる。）
◎
If its &lt;anchor-side&gt; specifies a physical keyword, it’s being used in an inset property in that axis. (For example, left can only be used in left, right, or a logical inset property in the horizontal axis.)
</li>
	<li>
`~target~anchor要素$( %~box, %関数 内に指定された `anchor-name$t ) ~NEQ ε
◎
The result of determining the target anchor element is not nothing when given the querying element as the element it’s used on, and the anchor specifier as the &lt;anchor-name&gt; value specified in the function.
</li>
</ul>

<p>
これらいずれかの条件が満たされない場合、
%関数 は
⇒＃
~fallback値（ 3 個目の引数）が指定されていた場合，それに解決される／
他の場合，それを参照している宣言は`算出d値の時点で無効$になる
◎
If any of these conditions are false, the anchor() function resolves to its specified fallback value. If no fallback value is specified, it makes the declaration referencing it invalid at computed-value time.
</p>

		</section>
		<section id="position-visibility">
<h3 title="Conditional Hiding: the position-visibility property">3.6. 条件付きで隠す： `position-visibility^p ~prop</h3>

◎名 `position-visibility@p
◎値 `always$v | [ `anchors-valid$v || `anchors-visible$v || `no-overflow$v ]
◎初 `anchors-visible$v
◎適 `絶対的に位置され$た~box
◎継 されない
◎百 受容しない
◎算 指定されたとおり
◎順 文法に従う
◎ア 離散的
◎表終

<p>
`絶対的に位置され$た~boxは、
条件によっては，表示してもイミを成さないかもしれない。
この~propは、
そのような~boxが条件付きで
— 何らかの共通的に必要になる~layout条件に依存して —
可視になることを許容する。
◎
There are some conditions in which it might not make sense to display an absolutely positioned box. This property allows such boxes to be made conditionally visible, depending on some commonly needed layout conditions.
</p>

<dl>
	<dt>`always@v</dt>
	<dd>
この~propによる効果は無い
（当の~boxは、［
その~anchor先／自身が~overflowするか否か
］を問わず，表示される）。
◎
This property has no effect. (The box is displayed without regard for its anchors or its overflowing status.)
</dd>

	<dt>`anchors-valid@v</dt>
	<dd>
次が満たされるならば、
当の~boxは`強く隠される$
⇒
当の~boxに`要求される~anchor参照$のうち いずれかが`~target~anchor要素$に解決されない
◎
If any of the box’s required anchor references do not resolve to a target anchor element, the box is strongly hidden.
</dd>
	<dd class="issue">
`要求される~anchor参照@
とは何か：
`anchor$f 関数のうち~fallback値を伴わないものか？
既定の~anchorも ときには該当するのか？
ここには、
もっと詳細が必要である。
◎
What is a required anchor reference? anchor() functions that don’t have a fallback value; the default anchor *sometimes*? Need more detail here.
</dd>
	<dd class="issue">†
“いずれか” に代えて “すべて” とするか？
どちらにも利用事例があり得る。
どちらにするか裁定を為すよう求まれるのか？
あるいは，どうにかそれを制御-可能にするか？
◎
Any anchors are missing, or all anchors are missing? I can see use-cases for either, potentially. Do we want to make a decision here, or make it controllable somehow?
</dd>

	<dt>`anchors-visible@v</dt>
	<dd>
次が満たされるならば、
当の~boxは`強く隠される$
⇒
当の~boxの`既定の~anchor~box$ %~anchor は次を満たす
⇒
［
%~anchor ~NEQ ε
］~OR［
%~anchor は`介在している~boxにより切取られて$いる
］
◎
If the box has a default anchor box but that anchor box is clipped by intervening boxes, this box is also strongly hidden.
</dd>

	<dt>`no-overflow@v</dt>
	<dd>
次が満たされるならば、
当の~boxは`強く隠される$
⇒
当の~boxは、
`position-try$p を適用した後においても，
自身の`~insetで改変された包含塊$を~overflowする
◎
If the box overflows its inset-modified containing block even after applying position-try, then the box is strongly hidden.
</dd>
</dl>

<div class="algo">
<p>
`~anchor~box$ %~anchor が，
それに依拠している`絶対的に位置され$た【！有位置な】~box %~box に相対的に
`介在している~boxにより切取られて@
いるとは、
~AND↓ を満たす~box %先祖 が在ることをいう：
◎
An anchor box anchor is clipped by intervening boxes relative to a positioned box abspos relying on it if＼
</p>

<p class="trans-note">【
“依拠している” とは、［
%~box の`~target~anchor要素$の`首要~box$ ~EQ %~anchor
］か［
%~box の`既定の~anchor~box$ ~EQ %~anchor
］のどちらを意味するのか，はっきりしない。
】</p>
<div>
<ul>
	<li>
%先祖 は %~anchor の先祖である
</li>
	<li>
%先祖 は %~box の`包含塊$【を確立した~box】の子孫である
</li>
	<li>
%~anchor の`~ink~overflow矩形$は %先祖 により全部的に切取られている†
</li>
</ul>
◎
anchor’s ink overflow rectangle is fully clipped by a box which is an ancestor of anchor but a descendant of abspos’s containing block.＼
</div>

<p>†
この事例における “切取られている” は、［
`overflow$p その他（`塗り封込め$など）による`~overflow切取n辺$で切取る効果
］に因るものに限られる。
◎
Clipping in this case refers only to clipping due to overflow, or other effects (such as paint containment) that clip to the overflow clip edge.
</p>

<p class="note">注記：
このことは、
例えば， %~box が~DOM内で %~anchor の隣にある【それらを生成した要素どうしは同胞である】場合、
%~box は，［
%~box 用の`既定の~anchor要素$が~scrollされて外へ出た場合でも可視であり続ける
］ことを意味する
— それは、
どのみち，同じ~scroll容器により切取られるので。
◎
Note: This means that if an abspos is next to its anchor in the DOM, for example, it’ll remain visible even if its default anchor is scrolled off, since it’s clipped by the same scroller anyway.
</p>

<p class="issue">
この “切取られている” の定義は、
`~view遷移＠~CSSVT$cite と整合する必要がある
— それにも、
類似な概念が求まれる。
◎
Make sure this definition of clipped is consistent with View Transitions, which wants a similar concept.
</p>

<p>
%~anchor も、
自身が `position-visibility$p により`強く隠される$場合には，
`介在している~boxにより切取られて$いるものと見なされる。
◎
anchor is also considered clipped by intervening boxes if it is strongly hidden by position-visibility.
</p>

<p class="note">注記：
これは、
“~anchorが連鎖する” 状況
— ある`絶対的に位置され$た~box %A の~anchor先は別のそれ %B であり，
%B にも~anchor先 %C がある状況 —
において，
%B が（ %C が~scrollされて外へ出たことに因り）この~propに因り隠された場合には、
%A も
— 見当外れな所在に浮動させることなく —
隠されるようになることを確保する。
◎
Note: This ensures that in a "chained anchor" situation, if the first abspos is hidden due to this property (due to its anchor being scrolled off), then another abspos using it as an anchor will also be hidden, rather than also floating in a nonsensical location.
</p>
</div>

<p>
`強く隠される@
~boxは、［
自身, その子孫~すべての `visibility$p が
— それらの実際の値が何かに関わらず —
`hidden^v であった
］かのように動作するとする。
◎
A box that is strongly hidden acts as if it and all of its descendants were visibility: hidden, regardless of what their actual visibility value is.
</p>

		</section>
		<section id="accessibility">
<h3 title="Accessibility Implications">3.7. ~accessibilityに関する含意</h3>

<p>
`~anchor位置決め^cite は［
有位置な~box, その~anchor先
］の間に［
意味論上の関係性を自動的に確立するもの
］ではないことに~~留意すること
— それは、
多くの異なる仕方で利用されるので。
作者は、
要素どうしを意味論的に一緒に~linkする際に，もっぱら［
位置決めにより含意される`視覚的^emな接続
］に依拠してはナラナイ
— ~DOMにおける要素どうしの有意義な関係性は，
追加的な助けを伴わずには`得られない^emことが多いので、
それらを~screen~readerの様な視覚的でない~UAにおいて利用することは，
困難になるかアリでなくなる。
◎
It’s important to remember that Anchor Positioning does not automatically establish any semantic relationship between a positioned box and any of its anchors, because it can be used in many different ways. Authors must not rely solely on a visual connection implied by the positioning to link elements together semantically; without additional help, the elements often have no meaningful DOM relationship, making them difficult or impossible to use in non-visual user agents, like screen readers.
</p>

<p>
~web~platformの多くの［
既存の／来たる
］特能は、
そのような接続を［
視覚的でない~UAでも便益を得られるよう，明示的に確立する
］ことを許容する。
◎
Many features on the web platform, both existing and upcoming, allow establishing such connections explicitly, so that non-visual user agents can also benefit.
</p>

<p>
例えば，~HTMLにおける `~popover~API^cite は、
呼出元~buttonを`~popover要素$へ自動的に~linkする
— ~UItab~UIkeyで巡回する順序を自動的に調整することも含めて。
`それはまた^em、
呼出元~buttonを［
当の~popover用の`暗黙的な~anchor要素$として確立する
］ことにより，
`~anchor位置決め^cite にも利用することを容易にする。
◎
For example, the Popover API in HTML automatically links the invoker button to the popover element, including automatically adjusting tabbing order; it also establishes the invoker button as the implicit anchor element for the popover, making it easy to use Anchor Positioning as well.
</p>

<p>
より一般な事例においては、
~anchor要素の［
`aria-details＠~ARIA1#aria-details$a,
`aria-describedby＠~ARIA1#aria-describedby$a
］属性などの~ARIA特能が，この情報【関係性】を
— 有位置な要素の `role＠~ARIA1#host_general_role$a 属性との~~協同で，少し手動な流儀で —
供せる。
それにより、
視覚的でない~UAは，［
それらの要素どうしの関係性について利用者に伝えれる
］ようになり［
それらの要素~間で自動的に~navigateできる
］ようになる。
◎
In more general cases, ARIA features such as the aria-details or aria-describedby attributes on an anchor element can provide this information in a slightly more manual fashion; in concert with the role attribute on the positioned element, non-visual user agents can tell their users about the relationship between the elements and let them automatically navigate between them.
</p>

		</section>
	</section>
	<section id="sizing">
<h2 title="Anchor-Based Sizing">4. ~anchorに基づく~sizing</h2>

<p>
`絶対的に位置され$る~boxは、［
自身の`~sizing~prop$において
`anchor-size@f
関数を利用する
］ことにより［
1 個以上の`~anchor~box$の~size
］を参照rできる。
この関数は、
`length$t に解決される。
この関数は、
`position-try^at に`受容される~prop$において【かつ `position-try$at 規則の中で？】利用された場合に限り，妥当になる。
◎
An absolutely positioned box can use the anchor-size() function in its sizing properties to refer to the size of one or more anchor boxes. The anchor-size() function resolves to a &lt;length&gt;. It is only valid to be used in the accepted @position-try properties.
</p>

		<section id="anchor-size-fn">
<h3 title="The anchor-size() Function">4.1. `anchor-size^f 関数</h3>

<pre class="prod">
anchor-size()
	= anchor-size( [ `anchor-name$t || `anchor-size$t ]?, `length-percentage$t? )
`anchor-size@t
	= `width$v
	| `height$v
	| `block$v
	| `inline$v
	| `self-block$v
	| `self-inline$v
</pre>

<p>
`anchor-size$f 関数は、
`anchor$f と類似する
— それは、［
`anchor-side$t が `anchor-size$t に置換される
【かつ省略可能である】
］ことを除いて，同じ引数をとる。
◎
The anchor-size() function is similar to anchor(), and takes the same arguments, save that the &lt;anchor-side&gt; keywords are replaced with &lt;anchor-size&gt;,＼
</p>

<p>
`anchor-size$t は、
反対-側にある 2 辺の距離を参照rする：
◎
referring to the distance between two opposing sides.
</p>
<dl>
	<dt>`width@v</dt>
	<dt>`height@v</dt>
	<dd>
これらの物理-~keywordは、
順に，`~target~anchor要素$の［
横幅, 縦幅
］を参照rする。
`anchor$f と違って、
軸が合致しなければならない制約は無い
— 例えば、
`width: anchor-size(--foo height)$p は妥当になる。
◎
The physical &lt;anchor-size&gt; keywords (width and height) refer to the width and height, respectively, of the target anchor element. Unlike anchor(), there is no restriction on having to match axises; for example, width: anchor-size(--foo height); is valid.
</dd>

	<dt>`block@v</dt>
	<dt>`inline@v</dt>
	<dt>`self-block@v</dt>
	<dt>`self-inline@v</dt>
	<dd>
<p>
これらの論理-~keywordは、
次に依存して，
いずれか適切な方の物理-~keywordに対応付けられる：
</p>
		<ul>
			<li>
［
`self-block$v ／ `self-inline$v
］用には、
当の~boxの`書字~mode$
</li>
			<li>
［
`block$v ／ `inline$v
］用には、
当の~boxの`包含塊$の`書字~mode$
</li>
		</ul>
◎
The logical &lt;anchor-size&gt; keywords (block, inline, self-block, and self-inline) map to one of the physical keywords according to either the writing mode of the box (for self-block and self-inline) or the writing mode of the box’s containing block (for block and inline).
</dd>
</dl>

<p>
`anchor-size$t ~keywordが省略された場合の既定では、
何であれ［
`anchor-size$f を利用した~propが対象にする軸に合致する~keyword†
］が指定されたかのように挙動する
（例えば、
`width:anchor-size()$p は，
`width: anchor-size(width)^p と等価になる）。
◎
If the &lt;anchor-size&gt; keyword is omitted, it defaults to behaving as whatever keyword matches the axis of the property that anchor-size() is used in. (For example, width: anchor-size() is equivalent to width: anchor-size(width).)
</p>

<p class="trans-note">【†
対象にする軸が，例えば塊~軸である場合、
`block^v, `self-block^v どちらも合致し得るが，
どちらなのかは指定されていない（前者？）。
】</p>

<p>
`anchor-size$f 関数は、
`妥当な~anchor~size関数$を表現しているならば，
（`~styleと~layoutの差挟み$を介して）`算出d値$の時点で［
`~target~anchor要素$の関連な 2 つの~border辺
— 横幅を参照するならば左端と右端／
縦幅を参照するならば上端と下端 —
の距離
］を成す `length$t に解決される。
◎
An anchor-size() function representing a valid anchor-size function resolves at computed value time (via style &amp; layout interleaving) to the &lt;length&gt; separating the relevant border edges (either left and right, or top and bottom, whichever is in the specified axis) of the target anchor element.
</p>

		</section>
		<section id="anchor-size-valid">
<h3 title="Validity">4.2. 妥当性</h3>

<p>
`anchor-size$f 関数 %関数 は、［
ある~box %~box に関して ~AND↓ が満たされる場合
］に限り，
`妥当な~anchor~size関数@
になる：
◎
An anchor-size() function is a valid anchor-size function only if all the following conditions are true:
</p>
<ul>
	<li>
%~box は`絶対的に位置され$ている
◎
↓</li>
	<li>
<p>
%関数 は %~box の［
`~sizing~prop$／`~inset~prop$／`~margin~prop$
］に利用されている。
◎
It’s being used in a sizing property, an inset property, or a margin property＼
on an absolutely positioned box.＼
</p>

<p class="note">注記：
これらは、
`受容される~prop$であって，長さを許容するものである。
◎
(These are the accepted @position-try properties that allow lengths.)
</p>
	</li>
	<li>
`~target~anchor要素$( %~box, %関数 内に指定された `anchor-name$t ) ~NEQ ε
◎
There is a target anchor element for the box it’s used on, and the &lt;anchor-name&gt; value specified in the function.
</li>
</ul>

<p>
他の場合、
%関数 は
⇒＃
~fallback値（ 3 個目の引数）が指定されていた場合，それに解決される／
他の場合，それを参照している宣言は`算出d値の時点で無効$になる
◎
If any of these conditions are false, the anchor-size() function resolves to its specified fallback value. If no fallback value is specified, it makes the declaration referencing it invalid at computed-value time.
</p>

		</section>
	</section>
	<section id="fallback">
<h2 title="Overflow Management">5. ~overflowの管理</h2>

<p>
~anchor位置決めは、
強力ではあるが，予測-不能にもなり得る。
`~anchor~box$は，~page上のどこにでも~~現れ得るので、
ある有位置な~boxを特定0の流儀（当の~anchorの上や右端など）で位置した結果、
当の~boxは，［
自身の`包含塊$を~overflowする／
部分的に~screen外に位置される
］かもしれない。
◎
Anchor positioning, while powerful, can also be unpredictable. The anchor box might be anywhere on the page, so positioning a box in any particular fashion (such as above the anchor, or the right of the anchor) might result in the positioned box overflowing its containing block or being positioned partially off screen.
</p>

<p>
これを~~改善するため、
`絶対的に位置され$る~boxは，
`position-try-fallbacks$p ~propを利用して，［
当の~boxが初期~位置では~overflowする場合に，~UAが試行できる~option
］たちを参照rできる。
各~optionは、［
位置決め／整列
］~prop【宣言】たち
（当の~boxの既存の~styleから生成されるもの／
`position-try$at 規則~内に指定されたもの）
が成す集合を与える。
各~optionは、
順に 1 つずつ当の~boxに適用され，［
その結果，要素が自身の`包含塊$を~overflowしない最初のもの
］が~~採用されることになる。
◎
To ameliorate this, an absolutely positioned box can use the position-try-fallbacks property to refer to several variant sets of positioning/alignment properties (generated from the box’s existing styles, or specified in @position-try rules) that the UA can try if the box overflows its initial position. Each is applied to the box, one by one, and the first that doesn’t cause the box to overflow its containing block is taken as the winner.
</p>

<p>
`position-try-order$p は、［
何らかの宣言された順序に厳密に従うよりも，
当の~box用の空間をアリな限り広くとる方が重要な場合
］に，追加的に［
それが定義する可用な空間に基づいて，~optionたちを~sortする
］ことを許容する。
◎
position-try-order allows these options to additional be sorted by the available space they define, if it’s more important for the box to have as much space as possible rather than strictly follow some declared order.
</p>

		<section id="position-try-fallbacks">
<h3 title="Giving Fallback Options: the position-try-fallbacks property">5.1. ~fallback~optionの与え方： `position-try-fallbacks^p ~prop</h3>

◎名 `position-try-fallbacks@p
◎値 `none^v | [ [`dashed-ident$t || `try-tactic$t] | `position-area$tp ]# 
◎初 `none^v
◎適 `絶対的に位置され$た~box
◎継 されない
◎百 受容しない
◎算 指定されたとおり
◎順 文法に従う
◎ア 離散的
◎表終

<p>
この~propは、
`位置~option~list@
を供する
— それは、［
`絶対的に位置され$た~boxが その`~insetで改変された包含塊$を~overflowするときに試行する代替-位置決め~style
］たちからなり，
初期~時は空とする。
◎
This property provides a list of alternate positioning styles to try when the absolutely positioned box overflows its inset-modified containing block. This position options list is initially empty.
</p>

<p>
当の~listを成す（~commaで分離された）各~itemは、
別々な~optionを次に挙げるいずれかとして与える：
◎
Each comma-separated entry in the list is a separate option: either＼
</p>
<ul>
	<li>
ある `position-try$at ~blockの名前
◎
the name of a @position-try block,＼
</li>
	<li>
ある `try-tactic$t
— それは、
当の~boxの既存の算出d~styleに対する自動的な変形nを表現する
◎
or a &lt;try-tactic&gt; representing an automatic transformation of the box’s existing computed style.
</li>
</ul>

<p>
各種 値の意味は：
◎
Values have the following meanings:
</p>

<dl class="valdef">
	<dt>`none@vOp</dt>
	<dd>
この~propによる効果は無い。
当の~boxの`位置~option~list$は空になる。
◎
The property has no effect; the box’s position options list is empty.
</dd>

	<dt id="valdef-position-try-fallbacks-dashed-ident">`dashed-ident$t</dt>
	<dd>
所与の名前を伴う `position-try$at 規則が在る場合、
それに結付けられた`位置~option$が`位置~option~list$に追加される。
◎
If there is a @position-try rule with the given name, its associated position option is added to the position options list.
</dd>
	<dd>
そのような規則は無い場合、
この値による効果は無い。
◎
Otherwise, this value has no effect.
</dd>

	<dt id="valdef-position-try-fallbacks-try-tactic">`try-tactic$t</dt>
	<dd>
<p>
当の~boxの算出d~styleから`位置~option$を自動的に作成する
— ［
指定された~keywordに則って，当の~boxの`~styleを入替える$
］ことにより構築された`位置~option$を［
当の~boxの`位置~option~list$に追加する
］ことにより。
【！and adds it ...重複】
◎
Automatically creates a position option from the box’s computed style, by swapping due to a try-tactic according to the specified keyword, and adding the constructed position option to the box’s position options list. and adds it to the position options list.
</p>

<pre class="prod">
`try-tactic@t
	= flip-block
	|| flip-inline
	|| flip-start
</pre>

		<dl class="valdef">
			<dt>`flip-block@vOp</dt>
			<dd>
`塊-軸$に関する~propたち
（例： `margin-block-start$p と `margin-block-end$p ）
の値どうしを入替える
— 本質的に，`行内-軸$を挟んで鏡写しになるよう。
◎
swaps the values in the block axis (between, for example, margin-block-start and margin-block-end), essentially mirroring across an inline-axis line.
</dd>

			<dt>`flip-inline@vOp</dt>
			<dd>
`行内-軸$に関する~propたちの値どうしを入替える
— 本質的に，`塊-軸$を挟んで鏡写しになるよう。
◎
swaps the values in the inline axis, essentially mirroring across a block-axis line.
</dd>

			<dt>`flip-start@vOp</dt>
			<dd>
［
`始端$に関する~prop, `終端$に関する~prop
］
（例： `margin-block-start$p と `margin-inline-start$p ）
の値どうしを入替える
— 本質的に，［
`塊-始端$, `行内-始端$
］にある隅から［
`塊-終端$, `行内-終端$
］にある隅へ描かれる対角線を挟んで鏡写しになるよう。
◎
swaps the values of the start properties with each other, and the end properties with each other (between, for example, margin-block-start and margin-inline-start), essentially mirroring across a diagonal drawn from the start-start corner to the end-end corner.
</dd>
		</dl>
	</dd>
	<dd>
複数個の~keywordが与えられた場合、
それらによる変形nは，単独の`位置~option$を生産するよう構成される。
◎
If multiple keywords are given, the transformations are composed in order to produce a single position option.
</dd>

	<dt id="valdef-position-try-fallbacks-dashed-ident--try-tactic">`dashed-ident$t || `try-tactic$t</dt>
	<dd>
所与の `dashed-ident^t を名前に伴う `position-try$at 規則は在る場合
⇒
［
当の規則の`位置~option$を当の~boxの基底~styleに適用した結果
］を［
指定された `try-tactic$t に則って変形した結果
］を当の~boxの`位置~option~list$に追加する。
◎
Combines the effects of the previous two options:＼
• if there is a @position-try rule with the given name, applies its position option to the base style, then transforms it according to the specified &lt;try-tactic&gt; and adds the result to the box’s position options list.
</dd>
	<dd>
他の場合、
何もしない。
◎
• Otherwise, does nothing.
</dd>

	<dt id="valdef-position-try-fallbacks-position-area">`position-area$tp</dt>
	<dd>
もっぱら，所与の値を伴う `position-area$p ~propで構成される`位置~option$を自動的に作成する。
◎
Automatically creates a position option composed solely of a position-area property with the given value.
</dd>
</dl>

<div class="algo">
<p>
`~styleを入替える@
~algoは、
所与の
⇒＃
【！~box’s 】要素 %要素,
`try-tactic$t が指示する 2 個の（上下左右）方向 %二つの方向
◎終
に対し，［
%二つの方向 に対応する %要素 の “同類” な~propどうしの値
］を適切に入替えて得られる~styleたちが成す集合を返す：
◎
To swap due to a try-tactic the styles of a box’s element el between two directions directions, returning a set of styles:
</p>
<ol>
	<li>
%反対-向きか ~LET ~IS［
%二つの方向 は同じ軸に沿って反対-向きである
］
【すなわち，`try-tactic$t は `flip-block$vOp か `flip-inline$vOp 】
◎
If directions are opposites along the same axis, they are “opposing”. Otherwise (when they are specifying different axises), they are “perpendicular”.
</li>
	<li>
%~style群 ~LET %要素 の各`受容される~prop$の指定d値を決定した結果
◎
Determine the specified values of the accepted @position-try properties on el, and let styles be the result.
</li>
	<li>
<p>
%~style群 を成す各~propに対し
⇒
その値~内の`任意-代入~関数たちへ代入する$
【！／`代入する＠~CSSENV#substitute-an-env$】
◎
Substitute variables, env() functions, and similar arbitrary substitution functions in styles.
</p>

<p>
`任意-代入~関数$が `env$f 関数であって，それが参照する`環境~変数$には ある［
方向／軸
］が結付けられている場合には
（ `safe-area-inset-top＠~CSSENV#valdef-env-safe-area-inset-top$v など），
当の環境~変数を %二つの方向 【を成す当の［方向／軸］ではない方？】に対応するものへ切替える。
◎
For env() functions, if the referenced environment variable is associated with a direction or axis (such as safe-area-inset-top), switch the referenced environment variable corresponding to directions.
</p>

<div class="example">
<p>
例えば、
`top: env(safe-area-inset-top)$p が指定されていて，
%二つの方向 は { 上, 左 } ならば、
`env$f は［
代わりに `env(safe-area-inset-left)^v が指定された
］かのように解決されることになる
（それから、
次~段において，実際に `left$p ~propと入替えることになる）。
◎
For example, if top: env(safe-area-inset-top); is specified, and directions are up and left, the env() will resolve as if env(safe-area-inset-left) had been specified instead. (And then, in the next step, will actually swap into the left property.)
</p>
</div>
	</li>
	<li>
<p>
%~style群 を成す［
%二つの方向 に対応する “同類” な~prop
］どうしで値を入替える。
◎
Swap the values of the styles between the associated properties corresponding to directions.
</p>

<p class="example">
例えば，［
上端, 左端
］が入替えらている場合、［
`margin-top$p, `margin-left$p
］どうし, ［
`width$p, `height$p
］どうし, 等々で，互いの値を入替える。
◎
For example, if "top" and "left" are being swapped, then the values of margin-top and margin-left are swapped, width and height are swapped, etc.
</p>

<p class="note">注記：
一部の~prop（`width$p や `align-self$p など）は、
%反対-向きか ~EQ ~T の下では，入替えられない
— それ自身が，
%二つの方向 に対応する互いに “同類” な~propを成すので。
それでも、
それらの値は，次の段により変更され得る。
◎
Note: If the directions are opposites along the same axis, some properties (like width or align-self) wont' swap, since they’re associated with themselves across the two directions, but their values might be changed by the next step.
</p>
	</li>
	<li>
<p>
前~段にて入替えられた各~propの値を以下に従って改変する
— ~propに応じて：
◎
Modify the values of the properties as they swap to match the new directions, as follows:
</p>
		<dl class="switch">
			<dt>
`~inset~prop$：
◎
For inset properties,＼
</dt>
			<dd>
<p>
各~値に利用された `anchor$f 関数~内に指定された側を変更する
— 新たな方向においても，変更-前における相対的な関係性を保守するよう
◎
change the specified side in anchor() functions to maintain the same relative relationship to the new direction that they had to the old.
</p>

<p class="example">
例えば，［
上端, 左端
］が入替えられている場合、
`margin-top:anchor(bottom)$p は，
`margin-left:anchor(right)$p になる。
◎
↓</p>
			</dd>
			<dd>
<p>
%反対-向きか ~EQ ~T の場合
⇒
各~値に利用された `percentage$t を ( `100%^v ~MINUS 元の百分率 ) に変更する
◎
If a &lt;percentage&gt; is used, and directions are opposing, change it to 100% minus the original percentage.
</p>

<p class="example">
例えば，［
上端, 下端
］が入替えられている場合、
`margin-top:anchor(20%)$p は，
`margin-bottom:anchor(80%)$p になる。
◎
↑ For example, if "top" and "left" are being swapped, then margin-top: anchor(bottom) will become margin-left: anchor(right).
◎
If "top" and "bottom" are being swapped, then margin-top: anchor(20%) will become margin-bottom: anchor(80%).
</p>
			</dd>

			<dt>
`~sizing~prop$：
◎
For sizing properties,＼
</dt>
			<dd>
<p>
各~値に利用された `anchor$f 関数~内に指定された軸を変更する
— 新たな方向においても，変更-前における相対的な関係性を保守するよう
◎
change the specified axis in anchor-size() functions to maintain the same relative relationship to the new direction that they had to the old.
</p>

<p class="example">
例えば，［
上端, 左端
］が入替えられている場合、
`width:anchor-size(width)$p は，
`height:anchor-size(height)$p になる。
◎
For example, if "top" and "left" are being swapped, then width: anchor-size(width) will become height: anchor-size(height).
</p>
			</dd>

			<dt>
`自己-整列~prop$：
◎
For the self-alignment properties,＼
</dt>
			<dd>
<p>
%反対-向きか ~EQ ~T の場合
⇒
指定された値が［
`self-position$t ／ `left^v ／ `right^v
］ならば、
それを変更する
— 新たな方向においても，変更-前における相対的な関係性を保守するよう
◎
if directions are opposing, change the specified &lt;self-position&gt; (or left/right keywords), if any, to maintain the same relative relationship to the new direction that they had to the old.
</p>

<div class="example">
<p>
例えば，［
上端, 下端
］が入替えられている場合、
`align-self:start$p は，
`align-self:end$p になる。
◎
For example, if "top" and "bottom" are being swapped, then align-self: start will become align-self: end.
</p>

<p>
しかしながら、
`align-self:center$p は，そのままであり続けることになる
— どちらの方向も関係性は前と同じなので。
◎
However, align-self: center will remain unchanged, as it has the same relationship to both directions.
</p>

<p>
類似に， `align-self:first$p は、
`self-position$t ではなく `baseline-position$t なので，そのままであり続ける。
◎
Similarly, align-self: first baseline will remain unchanged, as it’s a &lt;baseline-position&gt; rather than a &lt;self-position&gt;.
</p>
</div>
			</dd>

			<dt>
`position-area$p ~prop：
◎
For position-area,＼
</dt>
			<dd>
<p>
値を変更する
— 新たな方向においても，変更-前における［
`位置~区画~用の格子$を成す選定された［
~row／~col
］たち
］の相対的な関係性を保守するよう
◎
change the value so that the selected rows/columns of the position-area grid maintain the same relative relationship to the new direction that they had to the old.
</p>

<div>
<p class="example">
例えば，［
上端, 左端
］が入替えられている場合、
`position-area:left span-bottom$p は，
`position-area:top span-right^p になる。
◎
For example, if "top" and "left" are being swapped, then position-area: left span-bottom will become position-area: top span-right.
</p>
</div>
			</dd>
		</dl>
	</li>
	<li>
~RET %~style群
◎
Return styles.
</li>
</ol>
</div>

		</section>
		<section id="position-try-order-property">
<h3 title="Determining Fallback Order: the position-try-order property">5.2. ~fallback順序の決定-法： `position-try-order^p ~prop</h3>

◎名 `position-try-order@p
◎値 `normal^v | `try-size$t
◎初 `normal^v
◎適 `絶対的に位置され$た~box
◎継 されない
◎百 受容しない
◎算 指定されたとおり
◎順 文法に従う
◎ア 離散的
◎表終

<p>
この~propは、
`位置~option~list$を成す`位置~option$たちが試行されることになる順序を指定する。
◎
This property specifies the order in which the position options list will be tried.
</p>

<pre class="prod">
`try-size@t
	= most-width
	| most-height
	| most-block-size
	| most-inline-size
</pre>

<dl class="valdef">
	<dt>`normal@vOd</dt>
	<dd>
`position-try-fallbacks$p により指定された順序で`位置~option$を試行する。
◎
Try the position options in the order specified by position-try-fallbacks.
</dd>

	<dt>`most-width@vOd</dt>
	<dt>`most-height@vOd</dt>
	<dt>`most-block-size@vOd</dt>
	<dt>`most-inline-size@vOd</dt>
	<dd>
まず、
`位置~option~list$を成す各`位置~option$に対し，
当の~boxに その`位置~optionを適用する$
— その結果を成す~style群により指定される`~insetで改変された包含塊$の~sizeを見出す。
次に、
`位置~option~list$を これらの~size†に則って
— 最~大なものが最初に来るよう —
安定に††~sortする。
◎
For each entry in the position options list, apply that position option to the box, and find the specified inset-modified containing block size that results from those styles. Stably sort the position options list according to this size, with the largest coming first.
</dd>
	<dd class="trans-note">【†
縦横どちらの寸法かは、
当の~keywordの名前により指示される
— `most-width^v なら横幅, 等々。
】【††
すなわち，~sizeが同じものどうしは元の順序に従う。
】</dd>
</dl>

<div class="example">
<p>
例えば，次の~styleは、
初期~時は，
~popup~list【 `.list^css 】を その~anchor先【 `.anchor^css 】の下に位置させるが、
~overflowする場合には，［
どの~optionが最も空間を与えるかに依存して，
当の~popup~listを~anchorの下に保つか上へ移動するか裁定する
］ことになる。
◎
For example, the following styles will initially position the popup list below its anchoring button, but if that overflows, will decide whether to keep the popup list below the anchor or move it above, depending on which option gives it the most space.
</p>

<pre class="lang-css">
.anchor { anchor-name: --foo; }
.list {
  position: fixed;
  position-anchor: --foo;
  position-area: block-end span-inline-end;
  align-self: start;
  position-try-fallbacks: --bottom-scrollable, flip-block, --top-scrollable;
  position-try-order: most-height;
}
@position-try --bottom-scrollable {
  align-self: stretch;
}
@position-try --top-scrollable {
  position-area: block-start span-inline-end;
  align-self: stretch;
}
</pre>

<p>
【 `position-try-fallbacks$p に指定された各~optionのうち】［
`flip-block$vOp
（これは，【`位置~option$を】自動-生成する）,
`--top-scrollable^v
］は、
常に，同じ可用な縦幅を見出すことになる
— どちらも包含塊の上端~辺から~anchorの上端へ縦方向に伸張するので。
なので、
それらは，指定された順序を維持することになる
【 `--bottom-scrollable^v は、それらより後になる】。
【初期~時の~styleが~overflowする場合，】
これは、
まず，当の~boxを
— その生来な縦幅を~~保ったまま —
~anchorに対し整列するよう【 `flip-block^v を】試行させるが
（基底~style【 `align-self:start^p 】から自動-反転された `align-self: end$p を利用して）、
それも~overflowする場合には，代わりに［
空間を埋めるだけになり，
~scroll可能になる【各 `*-scrollable^v を試行する】よう~fall-backする
］ことになる。
◎
The flip-block auto-generated option and the --top-scrollable option will always find the same available height, since both of them stretch vertically from the top edge of the containing block to the top of the anchor, so they’ll retain their specified order. This causes the box to first try to align against the anchor at its natural height (using align-self: end, auto-reversed from the base styles), but if that also causes overflow, it’ll fall back to just filling the space and being scrollable instead.
</p>
</div>

		</section>
		<section id="position-try-prop">
<h3 title="The position-try Shorthand">5.3. `position-try^p 略式~prop</h3>

◎名 `position-try@p
◎値 `position-try-order$tp? `position-try-fallbacks$tp
◎初 個々の~propを見よ
◎適 個々の~propを見よ
◎継 個々の~propを見よ
◎百 個々の~propを見よ
◎算 個々の~propを見よ
◎順 文法に従う
◎ア 個々の~propを見よ
◎表終

<p>
この略式~propは、
その下位prop［
`position-try-fallbacks$p, `position-try-order$p
］を設定する。
`position-try-order$tp が省略された場合、
`position-try-fallbacks$p ~propは，その初期~値に設定される。
◎
This shorthand sets both position-try-fallbacks and position-try-order. If &lt;'position-try-order'&gt; is omitted, it’s set to the property’s initial value.
</p>

		</section>
		<section id="fallback-rule">
<h3 title="The @position-try Rule">5.4. `position-try^at 規則</h3>

<p>
`position-try@at
規則は、
所与の名前を伴う
`位置~option@
を定義する。
各`位置~option$は、
ある［
位置決め~prop【の ( 名前, 値 ) が成す組】たちが成す集合
］を指定する。
`位置~option$たちは、
`position-try-fallbacks$p を介して~boxに適用できる。
◎
The @position-try rule defines a position option with a given name, specifying one or more sets of positioning properties that can be applied to a box via position-try-fallbacks,
</p>

<p>
`position-try$at 規則の構文は：
◎
The syntax of the @position-try rule is:
</p>

<pre class="prod">
@position-try `dashed-ident$t {
  `declaration-list$t
}
</pre>

<p>
導入部にて指定された `dashed-ident$t が，当の規則の名前になる。
同じ名前を伴う複数個の `position-try$at 規則が宣言された場合、
文書~順序で最後のものが優先される。
◎
The &lt;dashed-ident&gt; specified in the prelude is the rule’s name. If multiple @position-try rules are declared with the same name, the last one in document order "wins".
</p>

<p>
`position-try$at 規則に
`受容される~prop@
は、
次に挙げる`~prop$に限られる：
◎
The @position-try rule only accepts the following properties:
</p>

<ul>
	<li>
`~inset~prop$
◎
inset properties
</li>
	<li>
`~margin~prop$
◎
margin properties
</li>
	<li>
`~sizing~prop$
◎
sizing properties
</li>
	<li>
`自己-整列~prop$
◎
self-alignment properties
</li>
	<li>
`position-anchor$p
</li>
	<li>
`position-area$p
</li>
</ul>

<p>
`declaration-list$t 内の~propに `!important^css を利用することは、
妥当でない。
その場合、
それを利用した~propは無効になるが，
`property-try^at 規則をまるごと無効~化することはない。
◎
It is invalid to use !important on the properties in the &lt;declaration-list&gt;. Doing so causes the property it is used on to become invalid, but does not invalidate the @property-try rule as a whole.
</p>

<p>
`position-try$at 内の~propすべては、
`位置~fallback出自$の一部を成すものとして当の~boxに適用される。
`位置~fallback出自@
は、
`作者~出自$と`~animation出自$の合間にある，
この仕様にて新たに定義される【！新たな】`出自$である。
◎
All of the properties in a @position-try are applied to the box as part of the Position Fallback Origin, a new cascade origin that lies between the Author Origin and the Animation Origin.
</p>

<p>
値 `revert$v が利用された場合、
`~animation出自$と類似に，［
当の~propは`作者~出自$の一部を成していた
］かのように動作する
（`利用者~出自$へ~~巻戻すようになる）。
（しかしながら、
`revert-layer$v には，特別な挙動は無い
— それは、
`~animation出自$と同じく，指定されたとおりに動作する。）
◎
Similar to the Animation Origin, use of the revert value acts as if the property was part of the Author Origin, so that it instead reverts back to the User Origin. (As with the Animation Origin, however, revert-layer has no special behavior and acts as specified.)
</p>

<p class="note">注記：
`position-try^at に`受容される~prop$は、［
~boxの~sizeと位置だけに影響し，それ以外は~boxの内容や~style付けを変更しない~prop
］たちが成す最~小な~groupを成す。
これは、
位置~fallbackの実装を有意に単純~化する一方で，
基礎的な必要
— ~anchorに基づいて位置された~boxを可用な空間に呼応して移動すること —
に取組む。
`position-try^at 【！these】規則は，`作者~出自$内の通常の宣言を上書きするので、
これは，［
`position-try$at 宣言
］と［
他の~propの通常の~cascade法と継承
］の相互作用による悪さも制限する。
`容器~query$に対する将来の拡張は、［
要素を［
それが利用している位置~fallback
］に基づいて~queryする
］ことを許容して，［
この制約された~listでは許容されない，条件付きな~style付けに類するもの
］を可能化することが期待される。
◎
Note: The accepted @position-try properties are the smallest group of properties that affect just the size and position of the box itself, without otherwise changing its contents or styling. This significantly simplifies the implementation of position fallback while addressing the fundamental need to move an anchor-positioned box in response to available space. Since these rules override normal declarations in the Author Origin, this also limits the poor interactions of @position-try declarations with the normal cascading and inheritance of other properties. It is expected that a future extension to container queries will allow querying an element based on the position fallback it’s using, enabling the sort of conditional styling not allowed by this restricted list.
</p>

<p class="note">注記：
異なる~anchorを利用している複数の~boxが，［
各自の~anchor要素に，同じ相対的な~fallback位置決めを利用する
］よう求めるなら、
`anchor$f 内の `anchor-name$t を省略して，
代わりに `position-anchor$p により各~box用の~anchorを指定すること。
◎
Note: If multiple boxes using different anchors want to use the same fallback positioning, just relative to their own anchor elements, omit the &lt;anchor-name&gt; in anchor() and specify each box’s anchor in position-anchor instead.
</p>

<p class="note">注記：
最も共通的な~fallback位置決め
（有位置な~boxを通常は~anchorの一方の側に置くが，必要なら反対-側へ移転する）
は、
`position-try-fallbacks$p 内の~keywordを利用して
— `position-try$at をまったく利用することなく —
自動的に行える。
◎
Note: The most common types of fallback positioning (putting the positioned box on one side of the anchor normally, but flipping to the opposite side if needed) can be done automatically with keywords in position-try-fallbacks, without using @position-try at all.
</p>

		</section>
		<section id="fallback-apply">
<h3 title="Applying Position Fallback">5.5. 位置~fallbackの適用-法</h3>

<p>
（自身の`~scrollに対する既定のズレ$によりズラされた）
有位置な~boxは、［
自身の`~insetで改変された包含塊$を~overflowする
］かつ［
その`位置~option~list$は空でない
］ときは，［
`位置~fallback~style群を決定する$
］ことにより［
~overflowを避ける~optionを見出す
］よう試みる。
◎
When a positioned box (shifted by its default scroll shift) overflows its inset-modified containing block, and has a non-empty position options list, it determines position fallback styles to attempt to find an option that avoids overflow.
</p>

<p>
これらの改変された~style群は，`~styleと~layoutの差挟み$を介して要素に適用されるので、
~layoutや`使用~値$に依存するとしても，`算出d値$に影響する
（その結果，遷移, 等々を誘発し得る）。
◎
These modified styles are applied to the element via interleaving, so they affect computed values (and can trigger transitions/etc) even though they depend on layout and used values.
</p>

<p>
各~要素は、
`最後の成功裡な位置~option@
を有する
— それは、［
ある`位置~option$ ／ ε
］であり，初期~時は ε とする。
【この段落は、この訳による補完。】
◎
↑</p>

<div class="algo">
<p>
`位置~optionを適用する@
~algoは、
所与の
( 【！box’s】 要素 %要素, `位置~option$ %新たな~style群 )
に対し：
◎
To apply a position option to a box’s element el, given a position option new styles:
</p>
<ol>
	<li>
<p>
%新たな~style群 を~cascadeの中へ
— `位置~fallback出自$内に —
挿入する下で~cascadeを解決する
— その結果を利用して，［
%要素 の各~styleの`使用~値$を決定するに十分な~layout
］を遂行する
◎
With new styles inserted into the cascade in the position fallback origin, resolve the cascade, and perform enough layout to determine el’s used styles.
</p>

<p>
これらの~styleを計算する目的においては、
`仮の^em `~anchor再~計算$が行われる
— 結果の仮の`記憶した~scroll~offset$は、
%要素 の~style群を決定するために利用される。
◎
For the purpose of calculating these styles, a hypothetical anchor recalculation point is calculated, and the resulting hypothetical remembered scroll offsets are used to determine el’s styles.
</p>
	</li>
	<li>
~RET %要素 の［
`使用~値$を伴う~style群
］
◎
Return el’s used styles.
</li>
</ol>
</div>

<div class="algo">
<p>
要素 %要素【！abspos】 用の
`位置~fallback~style群を決定する@
~algoは：
◎
To determine position fallback styles for an element abspos:
</p>
<ol>
	<li>
%現在の~style群 ~LET %要素 にて利用されている現在の~style群
（それは、
それまでの~fallbackの結果かもしれない。）
◎
Let current styles be the current used styles of abspos (which might be the result of earlier fallback).
</li>
	<li>
<p>
%要素 の`位置~option~list$を成す
~EACH( %~option )
に対し：
◎
For each option in the position options list:
</p>
		<ol>
			<li>
~IF［
%~option ~EQ %要素 の`最後の成功裡な位置~option$
【この比較が何に基づくのかは、定義されていない】
］
⇒
~CONTINUE
◎
If option is currently abspos’s last successful position option, continue.
</li>
			<li>
%調整-済み~style群 ~LET `位置~optionを適用する$( %要素, %~option )
◎
Let adjusted styles be the result of applying a position option option to abspos.
</li>
			<li>
%要素~矩形 ~LET ~sizeと位置が次に一致する矩形
⇒
%調整-済み~style群 で~lay-outしたとするときの %要素 の`~margin~box$
◎
Let el rect be the size and position of abspos’s margin box,＼
</li>
			<li>
%包含塊~矩形 ~LET ~sizeと位置が次に一致する矩形
⇒
%調整-済み~style群 で~lay-outしたとするときの %要素 の`~insetで改変された包含塊$
◎
and cb rect be the size and position of abspos’s inset-modified containing block, when laid out with adjusted styles.
</li>
			<li>
<p>
~IF［
どちらかの軸において、
%包含塊~矩形 の~sizeは，負になったため 0 に正された
］
⇒
~CONTINUE
◎
If cb rect was negative-size in either axis and corrected into zero-size, continue.
</p>

<p class="note">注記：
これは、
%要素~矩形 が［
その~sizeが 0 のときでも，~sizeが負な %包含塊~矩形 の “内側にある”
］と見なされ，［
成功裡な~optionとして選定される
］ようになることを防止する。
◎
Note: This prevents a zero-size el rect from still being considered "inside" a negative-size cb rect and getting selected as a successful option.
</p>
			</li>
			<li>
~IF［
%要素~矩形 は %包含塊~矩形 の中に全部的に包含されていない
］
⇒
~CONTINUE
◎
If el rect is not fully contained within cb rect, continue.
</li>
			<li>
%調整-済み~style群 に次を結付ける
⇒
それら【 %要素 の各`~anchor候補$】用に仮に計算された`記憶した~scroll~offset$たちが成す集合
◎
Return adjusted styles, along with the associated set of remembered scroll offsets that were hypothetically calculated for them.
</li>
			<li>
~RET %調整-済み~style群
◎
↑</li>
		</ol>
	</li>
	<li>
~Assert：
前~段は~overflowを避ける`位置~option$を見出すことなく完遂した。
◎
Assert: The previous step finished without finding a position option that avoids overflow.
</li>
	<li>
~RET %現在の~style群
◎
Return current styles.
</li>
</ol>

<p class="note">注記：
%要素【！%el】 を~overflowしている子孫は、
この計算【 %要素~矩形 】には影響しない
— 影響するものは %要素【！%el】 の`~margin~box$に限られる。
◎
Note: Descendants overflowing el don’t affect this calculation, only el’s own margin box.
</p>

<p class="note">注記：
この~algoは，現在~効果がある`位置~option$【`最後の成功裡な位置~option$】を ある目的で飛ばすので、
それ用に`記憶した~scroll~offset$は更新されない
— 他の~fallback【 %~option 】には働くものが無く， %現在の~style群 を貫き続ける場合、
`記憶した~scroll~offset$は，すべて同じであり続ける。
◎
Note: Because we purposely skip the position option currently in effect, it doesn’t get its remembered scroll offsets updated; if none of the other fallbacks work and we stick with the current styles, all the remembered scroll offsets stay the same.
</p>
</div>

<p>
全部的な~layoutを経る間に，
ある~boxの~fallback~styleを決定したなら
（あるいは、
それを利用しないものと決定したなら）、
この裁定は，~~後続の~boxを~lay-outする際に変更されることはない。
◎
During a full layout pass, once a box has determined its fallback styles (or determined it’s not using any), laying out later boxes cannot change this decision.
</p>

<div class="example">
<p>
例えば、
2 個の有位置な~box %A, %B があって，
%A は %B より前に~lay-outされるとする。
%B が~overflowして，
%A の包含塊に~scrollbarを生じさせる結果になったとしても、
%A を~overflowさせない試みを やり直して，
%A の~fallback~styleを決定し直す`ことはない^em。
（さもなければ、
~~最善でも，~layoutの~costは指数関数的になり、
~~最悪，循環依存になり，~layoutは決して決着しなくなる。）
◎
For example, say you have two positioned boxes, A and B, with A laid out before B. If B overflows and causes A’s containing block to gain scrollbars, this does not cause A to go back and re-determine its fallback styles in an attempt to avoid overflowing. (At best, this can result in exponential layout costs; at worst, it’s cyclic and will never settle.)
</p>

<p>
言い換えれば、
~layoutは “後戻りしない” 。
◎
Layout does not "go backward", in other words.
</p>
</div>

<div class="algo">
<p>
`ResizeObserver$I ~eventが決定され, 送達された時点で
【当の `ResizeObserver^I が観測している ~EACH( `作動中な~target＠~CSSWG/resize-observer-1/#dom-resizeobserver-activetargets-slot$が表現する要素 %要素 ) に対し，次を遂行するとする】：
◎
At the time that ResizeObserver events are determined and delivered:
</p>
<ol>
	<li>
~IF［
%要素 【！box el】は`絶対的に位置され$ている
］
⇒
%要素 の`最後の成功裡な位置~option$ ~SET %要素 が現在~利用している`受容される~prop$（および, その値）たちが成す集合
◎
If a box el is absolutely positioned, set its last successful position option to the set of accepted @position-try properties (and values) that it’s currently using.
</li>
	<li>
<p>
~ELIF［
%要素 の`最後の成功裡な位置~option$ ~NEQ ε
］~AND［
~OR↓
］
◎
Otherwise, if el has a last successful position option and if any of the following are true of it, remove its last successful position option:
</p>
		<ul>
			<li>
%要素 は`絶対的に位置され$ていない
◎
el is not absolutely positioned
</li>
			<li>
%要素 の `position-try-fallbacks$p の算出d値は変化した
◎
el’s computed value for position-try-fallbacks has changed
</li>
			<li>
%要素 の `position-try-fallbacks$p により参照される `position-try$at 規則として［
追加された／除去された／変異した
］ものがある
◎
Any of the @position-try rules referenced by el’s position-try-fallbacks have been added, removed, or mutated.
</li>
		</ul>
<p>
…ならば：
◎
↑</p>
		<ol>
			<li>
%要素 の`最後の成功裡な位置~option$ ~SET ε
◎
↑</li>
			<li>
%要素 用の`位置~fallback~style群を決定する$
◎
Then, determine position fallback styles for el＼
</li>
			<li>
%要素 の`最後の成功裡な位置~option$ ~SET 現在~利用している`受容される~prop$（および, その値）たちが成す集合
◎
and set its last successful position option to the set of accepted @position-try properties (and values) that it’s now using.
</li>
		</ol>
	</li>
</ol>

<p class="note">注記：
この【最後の成功裡な位置~optionを】［
記録する／除去する
］時機は、
意図的に，`最後に記憶した~size$の扱いと一致するようにしてある。
◎
Note: The timing of this recording/removal is intentionally identical to the treatment of last remembered sizes.
</p>
</div>

<p>
実装は、［
~layout作業に要求され得る量が過度なとき，それを制限する
］ためとして，［
`位置~option~list$の長さに対し，実装定義な上限を課す
］ことを選んでもヨイ。
この上限は、
5 `以上^emにするモノトスル。
◎
Implementations may choose to impose an implementation-defined limit on the length of position options lists, to limit the amount of excess layout work that may be required. This limit must be at least five.
</p>

<div class="example">
<p>
例えば，次の~CSSは、
ある “~popover”† を，まずは［
~buttonの下に位置させ, 
左端と~buttonの左端を整列する
］ようと試みるが、
~screenに収まらない場合には，順に［
上, 左端
］, ［
下, 右端
］, ［
上, 右端
］を試みるよう切替えることになる。
【† 何らかの動作（この例では、~button上の~hoverなど）に呼応して，他のものの上層に表示される様な~UI。】
◎
For example, the following CSS will first attempt to position a "popover" below the element, but if it doesn’t fit on-screen will switch to being above; it defaults to left-aligning, but will switch to right-aligning if that doesn’t fit.
</p>

<pre class="lang-css">
#myPopover {
  position: fixed;
  top: anchor(--button bottom);
  left: anchor(--button left);
  position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;

  /* <span class="comment">
~popoverの横幅を~buttonの横幅~以上にする
◎
The popover is at least as wide as the button
</span> */
  min-width: anchor-size(--button width);

  /* <span class="comment">
~popoverの縦幅を［
~menu~item 2 個分
］以上にする
◎
The popover is at least as tall as 2 menu items
</span> */
  min-height: 6em;
}
</pre>
</div>

		</section>
	</section>
	<section id="interfaces">
<h2 title="DOM Interfaces">6. ~DOM~interface</h2>

		<section id="position-fallback-rule">
<h3 title="The CSSPositionTryRule interface">6.1. `CSSPositionTryRule^I ~interface</h3>

<p>
`CSSPositionTryRule$I ~interfaceは、
`position-try$at 規則を表現する：
◎
The CSSPositionTryRule interface represents the @position-try rule:
</p>

<pre class="idl">
[`Exposed$=Window]
interface `CSSPositionTryRule@I : `CSSRule$I {
  readonly attribute `CSSOMString$ `name$m;
  [`SameObject$, `PutForwards$=`cssText$m] readonly attribute `CSSPositionTryDescriptors$I `style$m;
};

[`Exposed$=Window]
interface `CSSPositionTryDescriptors@I : `CSSStyleDeclaration$I {
  attribute `CSSOMString$ `margin@ptD;
  attribute `CSSOMString$ `marginTop@ptD;
  attribute `CSSOMString$ `marginRight@ptD;
  attribute `CSSOMString$ `marginBottom@ptD;
  attribute `CSSOMString$ `marginLeft@ptD;
  attribute `CSSOMString$ `marginBlock@ptD;
  attribute `CSSOMString$ `marginBlockStart@ptD;
  attribute `CSSOMString$ `marginBlockEnd@ptD;
  attribute `CSSOMString$ `marginInline@ptD;
  attribute `CSSOMString$ `marginInlineStart@ptD;
  attribute `CSSOMString$ `marginInlineEnd@ptD;
  attribute `CSSOMString$ `margin-top@ptD;
  attribute `CSSOMString$ `margin-right@ptD;
  attribute `CSSOMString$ `margin-bottom@ptD;
  attribute `CSSOMString$ `margin-left@ptD;
  attribute `CSSOMString$ `margin-block@ptD;
  attribute `CSSOMString$ `margin-block-start@ptD;
  attribute `CSSOMString$ `margin-block-end@ptD;
  attribute `CSSOMString$ `margin-inline@ptD;
  attribute `CSSOMString$ `margin-inline-start@ptD;
  attribute `CSSOMString$ `margin-inline-end@ptD;
  attribute `CSSOMString$ `inset@ptD;
  attribute `CSSOMString$ `insetBlock@ptD;
  attribute `CSSOMString$ `insetBlockStart@ptD;
  attribute `CSSOMString$ `insetBlockEnd@ptD;
  attribute `CSSOMString$ `insetInline@ptD;
  attribute `CSSOMString$ `insetInlineStart@ptD;
  attribute `CSSOMString$ `insetInlineEnd@ptD;
  attribute `CSSOMString$ `top@ptD;
  attribute `CSSOMString$ `left@ptD;
  attribute `CSSOMString$ `right@ptD;
  attribute `CSSOMString$ `bottom@ptD;
  attribute `CSSOMString$ `inset-block@ptD;
  attribute `CSSOMString$ `inset-block-start@ptD;
  attribute `CSSOMString$ `inset-block-end@ptD;
  attribute `CSSOMString$ `inset-inline@ptD;
  attribute `CSSOMString$ `inset-inline-start@ptD;
  attribute `CSSOMString$ `inset-inline-end@ptD;
  attribute `CSSOMString$ `width@ptD;
  attribute `CSSOMString$ `minWidth@ptD;
  attribute `CSSOMString$ `maxWidth@ptD;
  attribute `CSSOMString$ `height@ptD;
  attribute `CSSOMString$ `minHeight@ptD;
  attribute `CSSOMString$ `maxHeight@ptD;
  attribute `CSSOMString$ `blockSize@ptD;
  attribute `CSSOMString$ `minBlockSize@ptD;
  attribute `CSSOMString$ `maxBlockSize@ptD;
  attribute `CSSOMString$ `inlineSize@ptD;
  attribute `CSSOMString$ `minInlineSize@ptD;
  attribute `CSSOMString$ `maxInlineSize@ptD;
  attribute `CSSOMString$ `min-width@ptD;
  attribute `CSSOMString$ `max-width@ptD;
  attribute `CSSOMString$ `min-height@ptD;
  attribute `CSSOMString$ `max-height@ptD;
  attribute `CSSOMString$ `block-size@ptD;
  attribute `CSSOMString$ `min-block-size@ptD;
  attribute `CSSOMString$ `max-block-size@ptD;
  attribute `CSSOMString$ `inline-size@ptD;
  attribute `CSSOMString$ `min-inline-size@ptD;
  attribute `CSSOMString$ `max-inline-size@ptD;
  attribute `CSSOMString$ `placeSelf@ptD;
  attribute `CSSOMString$ `alignSelf@ptD;
  attribute `CSSOMString$ `justifySelf@ptD;
  attribute `CSSOMString$ `place-self@ptD;
  attribute `CSSOMString$ `align-self@ptD;
  attribute `CSSOMString$ `justify-self@ptD;
  attribute `CSSOMString$ `positionAnchor@ptD;
  attribute `CSSOMString$ `position-anchor@ptD;
  attribute `CSSOMString$ `positionArea@ptD;
  attribute `CSSOMString$ `position-area@ptD;
</pre>

<p>
`name@m
属性は、
当の~at-規則の導入部にて宣言された名前を表現する。
◎
Its name attribute represents the name declared in the rule’s prelude.
</p>

<div class="algo">
<p>
`style@m
属性は、
当の~at-規則の本体~内で宣言された~propたちを指定された順序で表現する。
◎
Its style attribute represents the properties declared in the rule’s body, in the specified order.＼
</p>

<p>
その取得子~手続きは
⇒
~RET コレが表現する `position-try$at ~at-規則~用の［
次を伴う`~CSS宣言~block$
］を表現する `CSSPositionTryDescriptors$I ~obj
⇒＃
`算出-済みか$dB ~SET ~F,
`読専か$dB ~SET ~F,
`宣言~群$dB ~SET 当の規則の中で宣言された記述子たちが成す`指定d順序$による~list,
`親~CSS規則$dB ~SET コレ,
`所有者~node$dB ~SET ~NULL
◎
On getting, it must return a CSSPositionTryDescriptors object for the @position-try at-rule, with the following properties:
computed flag
• Unset
readonly flag
• Unset
declarations
• The declared descriptors in the rule, in specified order.
parent CSS rule
• The context object
owner node
</p>
</div>

		</section>
	</section>
	<section id="interleaving">
<h2 title="Appendix: Style &amp; Layout Interleaving">~styleと~layoutの差挟み</h2>

<p>
`~styleと~layoutの差挟み@
は、
~layout処理nの間に下位tree上で~style更新が生じ得るようにして，
要素の`算出d値$を遡及的に更新するための技法である。
◎
Style &amp; layout interleaving is a technique where a style update can occur on a subtree during the layout process, resulting in retroactive updates to elements’ computed styles.
</p>

<p class="issue">
この概念は、
この仕様ではなく，おそらく `CSS-CASCADE-5$r にて定義されるべきだが、
その素描を参照rするために，ここにある。
◎
This is not the correct spec for this concept, it should probably go in Cascade, but I need a sketch of it to refer to.
</p>

<p class="note">注記：
`~styleと~layoutの差挟み$は、
すでに［
`容器~query$, `容器~query長さ単位$
］で利用されている。
`10cqw^v の様な長さは、
`~query容器$の~sizeについての~layout情報を利用して`算出d長さ$へ解決される
— したがって、
~layoutが変化するに伴い当の容器の~sizeが変化するとき，`遷移＠~TRANSITION$を誘発し得る。
◎
Note: Style &amp; layout interleaving is already used with container queries and container query lengths. A length like 10cqw is resolved into a computed length using layout information about the query container’s size, which can thus trigger transitions when the container changes size between layouts.
</p>

<p>
`position-try$at に`受容される~prop$も，~fallbackを解決するときに差挟まれる
（ `position-try$p を見よ）。
◎
The accepted @position-try properties are also interleaved when resolving fallback (see position-try).
</p>

<p class="issue">
これは，明らかに もっと詳細を詰める必要があるが、
今の所は， “容器~query用にすでに行われている様に動作する” ことで足りる。
その挙動も未定義だが、
少なくとも，その挙動と（ある程度までは？）相互運用可能である。
◎
Obviously this needs way more details filled in, but for now "act like you already do for container queries" suffices. That behavior is also undefined, but at least it’s interoperable (to some extent?).
</p>

	</section>
	<section id="sec">
<h2 title="Security Considerations">~securityの考慮点</h2>

<p>
この文書に対し提起された~securityの課題は無い。
◎
No Security issues have been raised against this document.
</p>

	</section>
	<section id="priv">
<h2 title="Privacy Considerations">~privacyの考慮点</h2>

<p>
この文書に対し提起された~privacyの課題は無い。
◎
No Privacy issues have been raised against this document.
</p>

	</section>
	<section id="changes">
<h2 title="Changes">10. 変更点</h2>

<dl>
	<dt>
`2024年 3月 26日 作業草案＠~TR/2024/WD-css-anchor-position-1-20240326/$
からの有意な変更点
◎
Significant changes since the 26 March 2024 Working Draft:
</dt>
	<dd>
`inset-area^p を `position-area$p に改称した。
◎
Renamed inset-area to position-area
</dd>
	<dd>
`position-anchor$p に［
`既定の~anchor要素$として`暗黙的な~anchor要素$を利用するための値 `auto^v
］を追加した。
◎
Added position-anchor: auto to use the implicit anchor element as the default anchor element
</dd>
	<dd>
`受容-可能な~anchor要素$の定義に上端~層に関する詳細を追加した。
◎
Added top-layer details to the acceptable anchor element definition
</dd>
	<dd>
`~anchor関数$から~keyword `implicit^v を除去した
（同じことは、
~anchor名を省略することで行える）。
◎
Removed the implicit keyword from the anchor functions (omitting an anchor name does the same thing)
</dd>
	<dd>
`anchor-center$vS から “可用な空間の~sizeを抑制する” 挙動を除去した。
~overflowを避けるためにズラす方法は、
今や `CSS-ALIGN-3$r が定義する。
◎
Removed the "reduce the size of the available space" behavior from anchor-center, now that Align defines how to shift to avoid overflow.
</dd>
	<dd>
一部の事例で有位置な要素を隠すため， `position-visibility$p を追加した。
◎
Added position-visibility, to hide the positioned element in some cases.
</dd>
	<dd>
`~accessibilityに関する指導＠#accessibility$を追加した。
◎
Added a11y guidance (§ 3.7 Accessibility Implications)
</dd>
	<dd>
`anchor-size$f を利用し得る~propたちが成す集合を拡げた
（`position-try^at に`受容される~prop$のうち，関連なもの すべてに）。
◎
Expanded the set of properties that anchor-size() is used in (to all the relevant accepted @position-try properties).
</dd>
	<dd>
`position-try-options^p を `position-try-fallbacks$p に改称した。
◎
Renamed position-try-options to position-try-fallbacks
</dd>
	<dd>
`position-try-fallbacks$p から `inset-area^f 関数を除去した
（今や， `position-area$p 用の値を直に利用するだけで済む）。
◎
Removed the inset-area() function from position-try-fallbacks (you just use a position-area value directly now).
</dd>
	<dd>
`try-tactic$t に因り`~styleを入替える$方法を定義した。
◎
Defined how to swap due to a try-tactic.
</dd>
	<dd>
`位置~fallback~style群を決定する$方法の詳細を詰めた。
◎
Expanded the details of how to determine position fallback styles.
</dd>
</dl>

	</section>
</main></div>