HTML-rendering-ja.html

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">
<title>HTML Standard — Rendering（日本語訳）</title>

<link rel="stylesheet" href="common.css" type="text/css">
<link rel="stylesheet" href="common-whatwg.css" type="text/css">

<style>

#case-insensitive-value-attr > li {
	display: inline;
}
#case-insensitive-value-attr > li::after {
	content: ' | ';
}
#case-insensitive-value-attr > li:last-child::after {
	content: '';
}

.obsolete {
	outline: thin solid var(--R-color);
	outline-offset: 0.2em;
}

.switch-obsolete .obsolete {
	display: none;
}
#_ex-fieldset-layout-model {
	position: relative;
	width: 450px;
	height: 300px;
	white-space:nowrap;
	background: var(--W-color);
}
#_ex-fieldset-layout-model > div {
	left:40px; right:40px; top:40px; bottom:40px;
	border: dashed 2px var(--K-color);
}
#_ex-fieldset-layout-model > svg {
	position: absolute;
	width: 450px;
	height: 300px;
}

#_ex-fieldset-layout-model div {
	position: absolute;
}

#_ex-fieldset-layout-model path {
	marker-end: url(#_arrow-head);
	stroke-width: 2;
}

#_ex-sample-progress {
	width: 16.5em;
	height: 10em;
	position: relative;
	border: solid thin var(--pale-color);
}

#_ex-sample-progress > div {
	position: absolute;
}
#_ex-sample-progress > div > div {
	border: solid thin var(--N-color);
}
</style>

<script src="common0.js" ></script>
<script src="common1.js" async></script>

<script>

Util.ready = function(){
	const source_data = {
		toc_main: 'rendering',
		generate: expand
	};
	Util.switchWordsInit(source_data);

	E('_switch-obsolete').addEventListener('click', function(){
		Util.switchView(function(){
			document.body.classList.toggle('switch-obsolete');
		})
	}, false);
}

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

	let context_element = '';

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

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

if(!key) {//%
	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;
let classname = class_map[klass];
let tag = tag_map[klass];

switch(klass){
case '':
	break;
case 'r':
	text = `[${key}]`;
	href = `HTML-references.html#refs${key}`;
	break;
case 'e':
	context_element = key;
	break;
case 'A':
	klass = `a-${context_element}`;
	break;
case 'input':
case 'iframe':
case 'tdth':
	classname = 'attr';
	tag = 'code';
	break;
case 'ps':
	text = `:${key}`;
	break;
case 'PS': // pseudo-class
	text = '参照';
	href = `~SELECTORS4#${key}-pseudo`
	break;
case 'pe':
	text = `::${key}`;
	break;
case 'l':
	text = `"<code class="literal">${text}</code>"`;
	break;
case 'U':
	text = `U+${key}`
	break;
case 'en':
	return `<span lang="en">${key}</span>`;
	break;
}

if(tag) {
	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;
	}
}

return text;


	}
}

function testBidirectionalAlert(ltr){
	let s = 'لا أفهم';
	if(s = prompt('名前を記入してください。', s)) {
		alert(
			(ltr ? '\u200E' : '' ) + 
			s + '様ですね。森田様、' +
			s + '様、木田様がご同行になります。'
		);
	}
}

</script>


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


●●options

spec_date:2025-03-14
trans_update:2025-03-15
source_checked:231006
page_state_key:CSS
spec_status:LS
original_url:https://html.spec.whatwg.org/multipage/rendering.html
	abbr_url:HTMLrendering
site_nav:html,selector,css
nav_prev:HTMLxml
nav_next:HTMLobs
trans_1st_pub:2015-11-28


●●class_map
e:element
a:attr
A:attr
st:attr-state
ps:pseudo
pe:pseudo
v:value
p:property
et:event-type
css:css
U:code-point
cn:cp-name

●●tag_map
c:code
s:samp
e:code
a:code
A:code
m:code
st:i
p:code
v:code
ps:code
pe:code
I:code
et:code
css:code
i:i
em:em
cite:cite
U:span
cn:span
sub:sub


●●original_id_map


	widgets:bindings


●●words_table1


●●words_table

MathML:
WebVTT:
XLink:
	CSS-specific
	CSS2:
	PDF:

	●UI
	Local:
	Button:
	Search:
	Telephone:
	Text:
	Time:
	Date:
	Email:
	Image:
	Password:
	Help:
	Upload:
alert:::
	^en:look-and-feel
	animate化:animated:::
radio::::ラジオ
	回転するspinner:::
	回転子
slider::::スライダ
picker:::選択 UI
palette::::パレット
pan::::パン
仮入力:placeholder:~
pointing::::ポインタ指示
popup::::ポップアップ
停めれ:snapでき:~
字幕:subtitle:~
刻印:tick mark:~
textarea::::テキストエリア
tooltip::::ツールチップ
tT:text track:::テキストトラック
色環:color wheel:~
欄:field::~::フィールド
bleep:::ピー音
caret::::キャレット
checkbox::::チェックボックス
color-well::color-well
drop-down::::ドロップダウン
gauge::::ゲージ
legend:
fieldset:
poster:
	~~巡回tab around
tab-stop::::タブ停
bitmap::::ビットマップ
強調:highlighting:~

	行lの終端~方向に 0 でない~~距離にあるnon-zero horizontal shift
	開閉:disclosure／shown or hidden
表面化-:surface:~
編集中の:editing::~
編集-:edit::~
	編集-用:editing
touch::::タッチ
読上げる:readする:読み上げる
指示音:audio cue::~
縦横比:aspect ratio::~
再生:playback::~
再生-:play::~
図形:shape:~
複数行:multiline:~
選択-:select::~
	複-選択-:multi-select
	単-選択-:single-select
選択:selection::~
選択状態:selectedness::~
	~focus可能:focusable
	~focusされ:focused
丸括弧:parenthesis:~
候補d:suggested:候補
図画化-:depict:~
	図画化-:depiction:~
一行分:one-line:~

	より大きい:greater
	より大きい:larger
	-:smaller
	~~途切れ:disrupt
	〜の向きdirection in which the slider operates
	~scroll法:scrolling

	●layout
	rtl
	塊~化:blockified
両端揃え:full-justify::~
中央-:center::中央寄せに
中央寄せ:center::~
右寄せ:right-align::~
左寄せ:left-align::~
行-:line-::~
横方向:horizontal::~
縦方向:vertical::~
縦方向の:vertical::~
横-:horizontal::~
縦-:vertical::~
側:side::~
収まる:fitする::~
	内容が収まる:fit-content
拡縮-:scale::~
相殺-:collapse::~
確定的:determinate:~
基底線:baseline::~::ベースライン
堆積:stacking::~
矩形:rectangle:~
分配-:distribute:~
書字:writing::~
横組み:horizontal writing mode::横組み
縦組み:vertical writing mode::縦組み
割振られ:allocateされ:割り振られ
最小-:min-::~
最大-:max-::~
最大:最大
	最大:maximum
	最~大な:largest
最小:minimum:~
	最小~化:minimize
	最小限:at minimum

	拘束され過ぎ:over-constrained
	開始し直す:restart
	広い方:greater of
	過ぎて:past
	溢れる:spill out
	~~位置する:on
	終端方向に 〜 に揃うように:horizontal shift that lines up

	●塗り／変形
変形:transform:~
黒:black::~
塗らな:paintしな::~
背後:behind:~

	~screen外にある:off-screen
	上層に重ねる:overlay
	上層:over

	●CSS
非置換:non-replaced::~
詳細度:specificity::~
	zero-specificity
実効:effective:~
解像度:resolution::~
比率:ratio::~
実数:number:~
委譲-:devolve:~
生来:natural::~

	~style無し:unstyled
	styled:::
	媒体:medium
	~UA~levelの:user-agent-level
	~keyword `normal^v が指定された:'line-height: normal'

	●構造
要素間:inter-element::~

	●text
ruby::::ルビ
	LEFT-TO-RIGHT
	RIGHT-TO-LEFT:
	MARK
	ISO-8859-8:
	LINE FEED
	LF
	CHARACTER
	TABULATION
	SPACE
	P2
	P3
字下げ:indent::~
双向:bidi::~
双方向-:bidirectional::~
左横書き:left-to-right::~
右横書き:right-to-left::~
用字系:script::~
約物:punctuation::~
方向性有り:directionality-capable::~

	●仕様
略記:shorthand:~
最終的:eventual:~
警告:warning:~
規範性:normativity:~
流儀:fashion:~
普通の:ordinaryな:~
指名-:designate:~
	指す:designate
見出し:heading:~
	~~見出し:header
順応-:adapt:~
伝える:informする:~
誤誘導-:mislead:~
企図-:contrive:~
翻訳-:translate:~
究明-:investigate:~
選抜-:qualify:~
無視r:disregard:無視することに
分類-:classify:~

	等価な何か:some equivalent
	-:situation
	-:successful
	accordingly
	単に:simply
	足る:sufficient
	必要なら:when necessary
	およそ〜ものと~~見込まれる:likely
	逆に，to the contrary
	それでも:nonetheless
	特に:notably
	選ばれたこと:choice
	選ばれ:chosen
	何であれ:irrespective of
	気付かせる:aware
	導く:lead する
	しないようにする:prevent
	選ぶ:choose
	〜か否か:state
	whether:〜か否か
	特に〜になる:particularity of
	必要yでない:not necessarily

	●未分類

phishing::::フィッシング
聴取:auditing::~
接触-:contact:~
reader::読取り器::リーダ
span:
	spanning
切替える:switchする:切り替える
欠く:lackする:~
現れる:appearする:~
隠され:hideされ:~
隠蔽-:obscure:~

Hebrew:::ヘブライ語
blank:
substantial:
locale::::ロケール
	locale-specific:
section::::セクション
選択肢:option::~::オプション
	~part
句ng:phrasing::句::フレージング
	~platformに~nativeな:platform-native
zero::::ゼロ
不定:indeterminate:~
処理命令:processing instruction::~
平均:average:~
平方:square:~
種類:kind:~
連なり:run::~
序数:ordinal:~
時機:timing:~
近似-:approximate:~
	近似する何か:approximations for
生の:raw:~


	-:insert
	debug用:debugging
	切り刻まれる:unintended mess
	~~現れる:come up
	come
	左右を入れ替えるflip-around:
	-／従う:follow
	:followed
	後続するfollowing
	先行する
	:found
	:get
	:jump
	:marking
	:mark
	minus
	見つからない:missing
	say
	近い:resemble
	:preceding
	:consist
	示す:show
	示され:shown
	:stop
	:go
	:asking
	始め:beginning
	消される:disappear
	示-:mention
	読み得る:readable
	得る:achieve
	:type
	指定されていない:absence
	-:original
	:date
	:closely
	:cycle
	深く:deep に
	:mildly
	:plus
	~PLUS:plus
	なり得る:potentially
	:taller
	vary
	羅列:wall
	各種:domain-specific:
	白色:white
	:maybe
	:dom
	指先:finger
	並び:sequence
	数:number
	真:true
	短い:short
	高い:high
	高さ:high
	幅:wide
	note
	やがて:in due course
	:widest possible value
	現時点では
	:alongside
	:around
	:later
	最低:lowest
	一群:group／set
	地点:point
	~~目的の:target
	以前の:previous
	何か:somewhat
	次:next
	直近の:least-recent
	nothing
	vice versa
	方:whichever
	下回らない:no smaller than

●●link_map

	●CSS

	行内~塊:~CSSDISP#inline-block
v.inline-block:~CSSDISP#valdef-display-inline-block
	~CSS2J#value-def-inline-block
v.ruby-base:~CSSRUBY#valdef-display-ruby-base
v.textfield:~CSSUI#valdef-appearance-textfield
v.menulist-button:~CSSUI#valdef-appearance-menulist-button
v.content:~CSSUI#valdef-field-sizing-content

ps.active:~HTMLselectors#selector-active
ps.visited:~HTMLselectors#selector-visited
ps.link:~HTMLselectors#selector-link
	~SELECTORS4#active-pseudo
	~SELECTORS4#visited-pseudo
	~SELECTORS4#link-pseudo
pe.details-content:~CSSPSEUDO#selectordef-details-content
	pe.details-content:~CSSPSEUDO#details-content-pseudo
pe.file-selector-button:~CSSPSEUDO#selectordef-file-selector-button
	pe.file-selector-button:~CSSPSEUDO#file-selector-button-pseudo

p.align-self:~CSSALIGN#propdef-align-self
p.appearance:~CSSUI#propdef-appearance
	~CSSUI#appearance-switching
p.aspect-ratio:~SIZING#propdef-aspect-ratio
p.background-color:~CSSBG#propdef-background-color
p.background-image:~CSSBG#propdef-background-image
p.border:~CSSBG#propdef-border
p.border-bottom-color:~CSSBG#propdef-border-bottom-color
p.border-bottom-style:~CSSBG#propdef-border-bottom-style
p.border-bottom-width:~CSSBG#propdef-border-bottom-width
p.border-left-color:~CSSBG#propdef-border-left-color
p.border-left-style:~CSSBG#propdef-border-left-style
p.border-left-width:~CSSBG#propdef-border-left-width
p.border-right-color:~CSSBG#propdef-border-right-color
p.border-right-style:~CSSBG#propdef-border-right-style
p.border-right-width:~CSSBG#propdef-border-right-width
p.border-top-color:~CSSBG#propdef-border-top-color
p.border-top-style:~CSSBG#propdef-border-top-style
p.border-top-width:~CSSBG#propdef-border-top-width
p.clear:~CSS2J#propdef-clear
p.color:~CSSCOLOR#propdef-color
	~CSSCOLOR#the-color-property
p.content-visibility:~CSSCONTAIN#propdef-content-visibility
p.counter-reset:~CSSLIST#propdef-counter-reset
p.counter-set:~CSSLIST#propdef-counter-set
p.cursor:~CSSUI#propdef-cursor
p.direction:~CSSWM#propdef-direction
p.display:~CSSDISP#propdef-display
p.field-sizing:~CSSUI#propdef-field-sizing
	p.field-sizing:~CSSUI#field-sizing

	p.font-family:~CSSFONT#propdef-font-family
	p.font-size:~CSSFONT#propdef-font-size

p.inline-size:~CSSLOGICAL#propdef-inline-size
p.letter-spacing:~CSSTEXT#propdef-letter-spacing
p.line-height:~CSS2J#propdef-line-height
p.margin-top:~CSSBOX#propdef-margin-top
p.margin-bottom:~CSSBOX#propdef-margin-bottom
p.margin-left:~CSSBOX#propdef-margin-left
p.margin-right:~CSSBOX#propdef-margin-right
p.overflow:~CSSOVERFLOW3#propdef-overflow
p.padding-bottom:~CSSBOX#propdef-padding-bottom
p.padding-left:~CSSBOX#propdef-padding-left
p.padding-right:~CSSBOX#propdef-padding-right
p.padding-top:~CSSBOX#propdef-padding-top

p.margin-inline-start:~CSSLOGICAL#propdef-margin-inline-start
p.margin-inline-end:~CSSLOGICAL#propdef-margin-inline-end
p.margin-block-start:~CSSLOGICAL#propdef-margin-block-start
p.margin-block-end:~CSSLOGICAL#propdef-margin-block-end

p.border-spacing:~CSS2TABLE#propdef-border-spacing
p.text-align:~CSSTEXT#propdef-text-align
p.unicode-bidi:~CSSWM#propdef-unicode-bidi
p.writing-mode:~CSSWM#propdef-writing-mode
p.vertical-align:~CSSINLINE#propdef-vertical-align
p.white-space:~CSSTEXT#propdef-white-space
p.width:~CSS2J#propdef-width
p.height:~CSS2J#propdef-height

p.align-content:~CSSALIGN#propdef-align-content
p.align-items:~CSSALIGN#propdef-align-items

p.border-radius:~CSSBG#propdef-border-radius
p.column-count:~CSSMCOL#propdef-column-count
p.column-fill:~CSSMCOL#propdef-column-fill
p.column-gap:~CSSALIGN#propdef-column-gap
p.column-rule:~CSSMCOL#propdef-column-rule
p.column-width:~CSSMCOL#propdef-column-width

p.flex-direction:~CSSFLEX#propdef-flex-direction
p.flex-wrap:~CSSFLEX#propdef-flex-wrap

p.grid-auto-columns:~CSSGRID#propdef-grid-auto-columns
p.grid-auto-flow:~CSSGRID#propdef-grid-auto-flow
p.grid-auto-rows:~CSSGRID#propdef-grid-auto-rows
p.grid-column-gap:~CSSGRID#propdef-grid-column-gap
p.grid-row-gap:~CSSGRID#propdef-grid-row-gap
p.grid-template-areas:~CSSGRID#propdef-grid-template-areas
p.grid-template-columns:~CSSGRID#propdef-grid-template-columns
p.grid-template-rows:~CSSGRID#propdef-grid-template-rows

p.text-overflow:~CSSOVERFLOW3#propdef-text-overflow
p.border-block-start-width:~CSSLOGICAL#propdef-border-block-start-width
p.justify-self:~CSSALIGN#propdef-justify-self
p.justify-content:~CSSALIGN#propdef-propdef-justify-content
p.justify-items:~CSSALIGN#propdef-propdef-justify-items
p.block-size:~CSSLOGICAL#propdef-block-size
p.float:~CSS2J#propdef-float
p.position:~CSSPOS#propdef-position


	●href attr
a.background:~HTMLobs#attr-background
a.title:~HTMLdom#attr-title
a.style:~HTMLdom#attr-style
a.dir:~HTMLdom#attr-dir
a.hidden:~HTMLinteraction#attr-hidden
a.open:~HEinteractive#attr-details-open
a.height:~HEembed#attr-dim-height
a.width:~HEembed#attr-dim-width

a-body.alink:~HTMLobs#attr-body-alink
a-body.bgcolor:~HTMLobs#attr-body-bgcolor
a-body.bottommargin:~HTMLobs#attr-body-bottommargin
a-body.leftmargin:~HTMLobs#attr-body-leftmargin
a-body.link:~HTMLobs#attr-body-link
a-body.marginheight:~HTMLobs#attr-body-marginheight
a-body.marginwidth:~HTMLobs#attr-body-marginwidth
a-body.rightmargin:~HTMLobs#attr-body-rightmargin
a-body.text:~HTMLobs#attr-body-text
a-body.topmargin:~HTMLobs#attr-body-topmargin
a-body.vlink:~HTMLobs#attr-body-vlink
a-canvas.width:~HEcanvas#attr-canvas-width
a-canvas.height:~HEcanvas#attr-canvas-height
a-col.span:~HEtables#attr-col-span
a-col.width:~HTMLobs#attr-col-width
a-colgroup.span:~HEtables#attr-colgroup-span
a-center.align:~HTMLobs#attr-div-align
a-div.align:~HTMLobs#attr-div-align
a-hr.color:~HTMLobs#attr-hr-color
a-hr.noshade:~HTMLobs#attr-hr-noshade
a-hr.size:~HTMLobs#attr-hr-size
a-hr.width:~HTMLobs#attr-hr-width
a-optgroup.label:~HEforms#attr-optgroup-label
a-select.multiple:~HEforms#attr-select-multiple
a-select.size:~HEforms#attr-select-size
a-table.border:~HTMLobs#attr-table-border
a-table.bordercolor:~HTMLobs#attr-table-bordercolor
a-table.cellpadding:~HTMLobs#attr-table-cellpadding
a-table.cellspacing:~HTMLobs#attr-table-cellspacing
a-table.height:~HTMLobs#attr-table-height
a-table.width:~HTMLobs#attr-table-width
a-tbody.height:~HTMLobs#attr-tbody-height
a-tr.height:~HTMLobs#attr-tr-height
a-textarea.placeholder:~HEforms#attr-textarea-placeholder
a-textarea.cols:~HEforms#attr-textarea-cols
a-textarea.rows:~HEforms#attr-textarea-rows
a-textarea.wrap:~HEforms#attr-textarea-wrap
a-li.value:~HEgrouping#attr-li-value
a-ol.reversed:~HEgrouping#attr-ol-reversed
a-ol.start:~HEgrouping#attr-ol-start

iframe.marginheight:~HTMLobs#attr-iframe-marginheight
iframe.marginwidth:~HTMLobs#attr-iframe-marginwidth
iframe.frameborder:~HTMLobs#attr-iframe-frameborder
input.size:~HEinput#attr-input-size
input.type:~HEinput#attr-input-type
input.value:~HEinput#attr-input-value
input.list:~HEinput#attr-input-list
input.placeholder:~HEinput#attr-input-placeholder
tdth.colspan:~HEtables#attr-tdth-colspan
tdth.height:~HTMLobs#attr-tdth-height
tdth.nowrap:~HTMLobs#attr-tdth-nowrap
tdth.rowspan:~HEtables#attr-tdth-rowspan
tdth.width:~HTMLobs#attr-tdth-width

	th.abbr:~HEtables#attr-th-abbr
	br.clear:~HTMLobs#attr-br-clear
	details.open:~HEinteractive#attr-details-open
	legend.align:~HTMLobs#attr-legend-align
	dir.auto:~HTMLdom#attr-dir-auto

	●要素
e.area:~HEimages#the-area-element
e.blockquote:~HEgrouping#the-blockquote-element
e.menu:~HEgrouping#the-menu-element
e.body:~HEsections#the-body-element
e.br:~HEtextlevel#the-br-element

e.button:~HEforms#the-button-element
e.fieldset:~HEforms#the-fieldset-element
e.forms:~HEforms#the-form-element
e.input:~HEinput#the-input-element
e.legend:~HEforms#the-legend-element
e.meter:~HEforms#the-meter-element
e.optgroup:~HEforms#the-optgroup-element
e.option:~HEforms#the-option-element
e.progress:~HEforms#the-progress-element
e.select:~HEforms#the-select-element
e.textarea:~HEforms#the-textarea-element

e.details:~HEinteractive#the-details-element
e.summary:~HEinteractive#the-summary-element

e.canvas:~HEcanvas#the-canvas-element

e.div:~HEgrouping#the-div-element
e.dl:~HEgrouping#the-dl-element
e.hr:~HEgrouping#the-hr-element
e.li:~HEgrouping#the-li-element
e.ol:~HEgrouping#the-ol-element
e.p:~HEgrouping#the-p-element
e.pre:~HEgrouping#the-pre-element
e.ul:~HEgrouping#the-ul-element

e.q:~HEtextlevel#the-q-element
e.rp:~HEtextlevel#the-rp-element
e.rt:~HEtextlevel#the-rt-element
e.ruby:~HEtextlevel#the-ruby-element
e.wbr:~HEtextlevel#the-wbr-element

e.del:~HEedits#the-del-element
e.ins:~HEedits#the-ins-element

e.h1:~HEsections#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
e.h2:~HEsections#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
e.h3:~HEsections#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
e.h4:~HEsections#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
e.h5:~HEsections#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
e.h6:~HEsections#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements

e.link:~HEmetadata#the-link-element
e.style:~HEmetadata#the-style-element

e.img:~HEimages#the-img-element
e.embed:~HEembed#the-embed-element
e.iframe:~HEembed#the-iframe-element
e.object:~HEembed#the-object-element
e.audio:~HEmedia#the-audio-element
e.video:~HEmedia#the-video-element

e.col:~HEtables#the-col-element
e.colgroup:~HEtables#the-colgroup-element
e.caption:~HEtables#the-caption-element
e.table:~HEtables#the-table-element
e.tbody:~HEtables#the-tbody-element
e.td:~HEtables#the-td-element
e.tfoot:~HEtables#the-tfoot-element
e.th:~HEtables#the-th-element
e.thead:~HEtables#the-thead-element
e.tr:~HEtables#the-tr-element

e.slot:~HEscripting#the-slot-element

e.marquee:~HTMLobs#the-marquee-element
e.dir:~HTMLobs#dir
e.font:~HTMLobs#font
e.frame:~HTMLobs#frame
e.frameset:~HTMLobs#frameset
e.plaintext:~HTMLobs#plaintext
e.xmp:~HTMLobs#xmp
e.center:~HTMLobs#center
e.listing:~HTMLobs#listing

et.select:~HTMLindex#event-select

I.Document:~HTMLdom#document
文書:~HTMLdom#the-document-object
l.subtitles:~HEtrack#dom-texttrack-kind-subtitles
l.captions:~HEtrack#dom-texttrack-kind-captions

	●用語
	示唆:#_suggestion
呈示~用~hint:#presentational-hints
呈示~用~hintとして扱う:#_maps-to-property
呈示~用~hintになる:#_maps-to-a-presentational-hints

~animationを開始し直す:#restart-the-animation
物理-形を得する:#obtain-a-physical-form
子孫を整列する:#align-descendants
整列-:#align-descendants
具現化されて:#being-rendered
具現化され:#being-rendered
その具現化を子へ委任して:#delegating-its-rendering-to-its-children
表示域に交差-:#intersect-the-viewport
表示域に交差して:#intersect-the-viewport
容器~frame要素:#container-frame-element
文字~数から~pixel単位へ変換する:#converting-a-character-width-to-pixels
既定の~marginを伴う:#concept-rendering-elements-with-margins

	未訳箇所（frame／frameset）
	frame border color:#frame-border-colour
	has a border:#has-a-border
	convert a list of dimensions to a list of pixel values:#convert-a-list-of-dimensions-to-a-list-of-pixel-values

対応付け規則:#_mapping-rule
~pixel長さに対応付ける:#maps-to-the-pixel-length-property
寸法に対応付ける:#maps-to-the-dimension-property
~zeroは無視しつつ寸法に対応付ける:#maps-to-the-dimension-property-(ignoring-zero)
縦横比に対応付ける:#map-to-the-aspect-ratio-property
寸法~規則を利用して縦横比に対応付ける:#map-to-the-aspect-ratio-property-(using-dimension-rules)
負でない整数に対応付ける:#_maps-to-non-negative-integer
色~値に対応付ける:#_maps-to-legacy-color-value
	#rules-for-parsing-a-legacy-colour-value
絶対~URLに対応付ける:#_maps-to-absolute-url
整列~keywordに対応付ける:#_maps-to-alignment-keyword

~borderが~zeroに等価でない場合に限る:#magic-border-selector
具現化される~legend:#rendered-legend
匿名な~fieldset内容~box:#anonymous-fieldset-content-box

	'content'~propを設定する規則:#br-wbr-content
~substantial:#concept-rendering-substantial
~blank:#concept-rendering-blank
~textarea実効~縦幅:#textarea-effective-height
~textarea実効~横幅:#textarea-effective-width
双向~含意:#bidi-rendering
~style無し文書:#unstyled-document
~style無し文書~view:#an-unstyled-document-view
最大~label幅:#width-of-the-select's-labels

~button~layout:#button-layout-2
匿名な~button内容~box:#anonymous-button-content-box

~list~box:#list-box
~drop-down~box:#drop-down-box

横組み:#horizontal-writing-mode
縦組み:#vertical-writing-mode

既定の要約:#default-summary

	●用語（HTML
行数:~HEforms#attr-textarea-rows-value
一行分の字数:~HEforms#attr-textarea-cols-value
生の値:~HEforms#concept-textarea-raw-value

~button:~HEforms#concept-button

st.Button:~HEinput#button-state-(type=button)
st.Checkbox:~HEinput#checkbox-state-(type=checkbox)
st.Color:~HEinput#color-state-(type=color)
st.Date:~HEinput#date-state-(type=date)
st.Email:~HEinput#email-state-(type=email)
st.File:~HEinput#file-upload-state-(type=file)
st.Image:~HEinput#image-button-state-(type=image)
st.Hidden:~HEinput#hidden-state-(type=hidden)
st.Datetime-local:~HEinput#local-date-and-time-state-(type=datetime-local)
st.Month:~HEinput#month-state-(type=month)
st.Number:~HEinput#number-state-(type=number)
st.Range:~HEinput#range-state-(type=range)
st.Password:~HEinput#password-state-(type=password)
st.Radio:~HEinput#radio-button-state-(type=radio)
st.Reset:~HEinput#reset-button-state-(type=reset)
st.Search:~HEinput#text-(type=text)-state-and-search-state-(type=search)
st.Submit:~HEinput#submit-button-state-(type=submit)
st.Tel:~HEinput#telephone-state-(type=tel)
st.Text:~HEinput#text-(type=text)-state-and-search-state-(type=search)
st.Time:~HEinput#time-state-(type=time)
st.Url:~HEinput#url-state-(type=url)
st.Week:~HEinput#week-state-(type=week)

fe.値:~HTMLforms#concept-fe-value
表示~size:~HEforms#concept-select-size
opt.~label:~HEforms#concept-option-label
opt.選択状態:~HEforms#concept-option-selectedness
選択肢~list:~HEforms#concept-select-option-list
仮入力~label選択肢:~HEforms#placeholder-label-option
選択された~file~list:~HEinput#concept-input-type-file-selected


~HTML要素:~HTMLINFRA#html-elements
~plugin:~HTMLINFRA#plugin
	示唆された既定の具現化を~supportする:~HTMLINFRA#renderingUA

~URLを符号化法の下で相対的に構文解析する:~HTMLurl#encoding-parsing-a-url
	~HTMLurl#encoding-parsing-and-serializing-a-url → ~HTMLurl#encoding-parsing-a-url, ~URL1#concept-url-serializer

旧来の色~値として構文解析する:~HTMLcms#rules-for-parsing-a-legacy-colour-value
寸法~値として構文解析する:~HTMLcms#rules-for-parsing-dimension-values
負でない整数として構文解析する:~HTMLcms#rules-for-parsing-non-negative-integers
非~zero寸法~値として構文解析する:~HTMLcms#rules-for-parsing-non-zero-dimension-values
整数として構文解析する:~HTMLcms#rules-for-parsing-integers


画像は可用:~HEimages#img-available
寸法~属性~source:~HEimages#concept-img-dimension-attribute-source

寸法~属性:~HEembed#dimension-attributes
~UIを公開し:~HEmedia#expose-a-user-interface-to-the-user
画像~map:~HEimages#image-map
~cell:~HEtables#concept-cell

示されている:~HEtrack#text-track-showing
~tT:~HEtrack#text-track
tT.種類:~HEtrack#text-track-kind
~tT~list:~HEtrack#list-of-text-tracks
~tTの具現化を更新するための規則:~HEtrack#rules-for-updating-the-text-track-rendering

助言的~情報:~HTMLdom#advisory-information
属性の方向性:~HTMLdom#directionality-of-the-attribute
方向性有りな属性:~HTMLdom#directionality-capable-attribute
埋込d内容:~HTMLdom#embedded-content-category
要素間~空白:~HTMLdom#inter-element-whitespace
表現-:~HTMLdom#represents
方向性:~HTMLdom#the-directionality
句ng内容:~HTMLdom#phrasing-content-2
~flow内容:~HTMLdom#flow-content-2

編集中の~host:~HTMLinteraction#editing-host

~focus可能:~HTMLinteraction#focusable
~focus可能な区画:~HTMLinteraction#focusable-area
~focusされ:~HTMLinteraction#focused

~hyperlink:~HTMLlinks#hyperlink
~hyperlink聴取:~HTMLlinks#hyperlink-auditing
序数~値:~HEgrouping#ordinal-value

~navigable:~HTMLds#navigable
~node~navigable:~HTMLds#node-navigable
nav.容器:~HTMLds#nav-container
子~navigable:~HTMLds#child-navigable
内容~navigable:~HTMLds#content-navigable
全部的に作動中:~HTMLds#fully-active

~window:~WINDOW#the-window-object
結付けられた文書:~WINDOW#concept-document-window

生成元:~ORIGIN#concept-origin

~navigate:~HTMLnav#navigate
~navi:~HTMLnav#navigate

利用者~対話~task~source:~WAPI#user-interaction-task-source
要素~taskを~queueする:~WAPI#queue-an-element-task
~script:~WAPI#concept-script
sC.設定群~obj:~WAPI#settings-object
enV.大域~obj:~WAPI#concept-settings-object-global

c.window.alert():~HTMLGAPI#dom-window-alert
~table:~HEtables#concept-table


	●用語（ CSS
疑似類:~SELECTORS4#pseudo-class
詳細度:~SELECTORS4#specificity
~style属性:~CSSSTYLEATTR#style-attribute

作者~level:~CASCADE#cascade-origin-author
~UA~level:~CASCADE#cascade-origin-ua
使用~値:~CASCADE#used-value
算出d値:~CASCADE#computed-value

~pixel単位:~CSSVAL#px
比率:~CSSVAL#ratio

表示~型:~CSSDISP#display-type
外縁~表示~型:~CSSDISP#outer-display-type
内縁~表示~型:~CSSDISP#inner-display-type
塊-~level:~CSSDISP#block-level
塊~容器:~CSSDISP#block-container
整形~文脈:~CSSDISP#formatting-context
塊~整形~文脈:~CSSDISP#block-formatting-context
行内~整形~文脈:~CSSDISP#inline-formatting-context
置換d要素:~CSSDISP#replaced-element
~CSS~box:~CSSDISP#box
匿名:~CSSDISP#anonymous
塊~化:~CSSDISP#blockify

絶対的に位置され:~CSSPOS#absolute-position

内在的~size:~SIZING#intrinsic-size
内容が収まる行内~size:~SIZING#fit-content-inline-size
最大-内容 行内~size:~SIZING#max-content-inline-size
最小-内容 行内~size:~SIZING#min-content-inline-size

~margin~box:~CSSBOX#margin-box
~border~box:~CSSBOX#border-box
内容~box:~CSSBOX#content-box

書字~mode:~CSSWM#writing-mode
行-左端:~CSSWM#line-left
行-右端:~CSSWM#line-right
塊~軸:~CSSWM#block-axis
塊-始端:~CSSWM#block-start
塊-終端:~CSSWM#block-end
塊~size:~CSSWM#block-size
行内~軸:~CSSWM#inline-axis
行内-始端:~CSSWM#inline-start
行内-終端:~CSSWM#inline-end
行内~size:~CSSWM#inline-size

生来な寸法:~CSSIMAGE#natural-dimensions

透明な黒:~CSSCOLOR#transparent-black

~scroll容器:~CSSOVERFLOW3#scroll-container

表示域:~CSS2J#viewport
行内~levelの~box:~CSSDISP#inline-level-box
挟むように相殺-:~CSS2J#collapse-through

~list~item:~CSSLIST#list-item

~widget:~CSSUI#widget
~nativeな外観:~CSSUI#native-appearance
~primitiveな外観:~CSSUI#primitive-appearance
委譲-可能な~widget:~CSSUI#devolvable
委譲-不能な~widget:~CSSUI#non-devolvable
委譲され:~CSSUI#devolved
既定の選好d~sizeを伴う要素:~CSSUI#element-with-default-preferred-size


	●用語（外部
実装定義:~INFRA#implementation-defined

~HTML名前空間:~INFRA#html-namespace
~MathML名前空間:~INFRA#mathml-namespace
~SVG名前空間:~INFRA#svg-namespace
~ASCII大小無視:~INFRA#ascii-case-insensitive
sub.大小無視:~INFRA#ascii-case-insensitive
~ASCII小文字~化する:~INFRA#ascii-lowercase

~node文書:~DOM4#concept-node-document
子:~DOM4#concept-tree-child
~eventを発火する:~DOM4#concept-event-fire

m.bubbles:~DOM4#dom-event-bubbles

過去互換~mode:~DOM4#concept-document-quirks
~HTML文書:~DOM4#html-document
~shadow~tree:~DOM4#concept-shadow-tree

絶対~URL:~URL1#absolute-url-string
~URLを直列化する:~URL1#concept-url-serializer

作動中な範囲:~EXEC-COMMAND#active-range

~WebVTT~tTの表示を更新するための規則:https://w3c.github.io/webvtt/#rules-for-updating-the-display-of-webvtt-text-tracks

	処理命令

●●images
＠HTML-resources/
	sample-progress｜height:160px｜＋｜.svg → _ex-sample-progress
drop-down-rendering｜height:105px｜上の例の描画見本｜bidiselect.png

●●trans_metadata
<p>
~THIS_PAGEは、~WHATWGによる
HTML 仕様の
<a href="~SPEC_URL">§ Rendering</a>
を日本語に翻訳したものです。
~PUB
</p>

</script>
<body>

<div hidden>
<span id="_optional_controls">
<input
	id="_switch-obsolete"
	type="button"
	value="廃用"
	accesskey="O"
/>
</span>
</div>

<header>
	<hgroup>
<h1>HTML — 具現化</h1>
	</hgroup>
</header>

<main id="MAIN" hidden>

	<section id="rendering">
<h2 title="Rendering">15. 具現化</h2>

<p>
~UAには、
~HTML文書を特定0の仕方で呈示することは要求されていない。
しかしながら，この節は、
~HTML文書を具現化するための，一群の`示唆^em（ `suggestion^en ）を供する
— それに従えば、
およそ，文書~作者が意図する体験に近い利用者~体験へ導くものと~~見込まれるような。
この節では、
この体験へ導くような挙動を指示するため
— 規範性に関する混同を避けるため，
“〜するモノトスル（ `must^en ）”
は利用しない代わりに —
用語
“`期待される^em（ `expected^en ）”
が利用される。
適合性の目的においては、
`示唆された既定の具現化を~supportするものと指名された~UA＠~HTMLINFRA#renderingUA$に対しては、
この節における用語
“期待される”
には，
“〜するモノトスル（ `must^en ）”
と同じ適合性が含意される。
◎
User agents are not required to present HTML documents in any particular way. However, this section provides a set of suggestions for rendering HTML documents that, if followed, are likely to lead to a user experience that closely resembles the experience intended by the documents' authors. So as to avoid confusion regarding the normativity of this section, "must" has not been used. Instead, the term "expected" is used to indicate behavior that will lead to this experience. For the purposes of conformance for user agents designated as supporting the suggested default rendering, the term "expected" in this section has the same conformance implications as "must".
</p>

<p class="trans-note">【
“期待される” 対象は常に~UAなので、
この訳では，その文脈における語~UAは省略する。
】</p>

		<section id="introduction-16">
<h3 title="Introduction">15.1. 序論</h3>

<p>
この節における各~示唆は、
一般に，~CSS用語で表出される。
~UAには、
~CSSを~supportするか，さもなければ［
この節に与える各~CSS規則を，他の仕組みによる呈示に近似する何かに翻訳する
］ことが期待される。
◎
The suggestions in this section are generally expressed in CSS terms. User agents are expected to either support CSS, or translate from the CSS rules given in this section to approximations for other presentation mechanisms.
</p>

<p>
逆に，~style層の規則
（例： `作者~level$の~stylesheet）
が無い下で要素を具現化するときは、［
当の要素が，この仕様に述べる意味を`表現-$している
］ことを利用者に伝達することが期待される。
◎
In the absence of style-layer rules to the contrary (e.g. author style sheets), user agents are expected to render an element so that it conveys to the user the meaning that the element represents, as described by this specification.
</p>

<p>
この節における各~示唆は、
一般に，［
視覚的な出力~媒体の解像度は、
96dpi 以上である
］ものと見做しているが、
~HTMLは，~~多様な媒体に適用されるものと意図されている
（それは、
`媒体に依存しない^em言語である）。
~UAの実装者には、
この節における各~示唆を，~~目的の媒体に順応させることが奨励される。
◎
The suggestions in this section generally assume a visual output medium with a resolution of 96dpi or greater, but HTML is intended to apply to multiple media (it is a media-independent language). User agent implementers are encouraged to adapt the suggestions in this section to their target media.
</p>

<hr>

<p>
何らかの［
~CSS~layout~box ／
~SVG~layout~box ／
他の~style付け言語による等価な何か
］が結付けられた要素は、
`具現化されて@
いる（ `being rendered^en ）とされる。
◎
An element is being rendered if it has any associated CSS layout boxes, SVG layout boxes, or some equivalent in other styling languages.
</p>

<p class="note">注記：
~screen外にあるだけでは、
要素は`具現化されて$いないことにはならない。
また， `hidden$a 属性が在ることは、
通常は，要素は`具現化されて$いないことを意味するが、
これは~stylesheetにより上書きされ得る。
◎
Just being off-screen does not mean the element is not being rendered. The presence of the hidden attribute normally means the element is not being rendered, though this might be overridden by the style sheets.
</p>

<p class="note">注記：
文書が`全部的に作動中$か否かは、
要素が`具現化されて$いるか否かには影響しない。
文書は`全部的に作動中$でなく，利用者にまったく示されていない場合でも、
その中の要素は “具現化されている” ものとして選抜され得る。
◎
The fully active state does not affect whether an element is being rendered or not. Even if a document is not fully active and not shown at all to the user, elements within it can still qualify as "being rendered".
</p>

<p>
要素は、
次を満たす間は
`表示域に交差して@
いるとされる
⇒
［
`具現化されて$いる
］~AND［
要素に結付けられた~CSS~layout~boxは`表示域$に交差している
］
◎
An element is said to intersect the viewport when it is being rendered and its associated CSS layout box intersects the viewport.
</p>

<p class="note">注記：
`具現化されて$いるか否かと類似に、
`全部的に作動中$でない文書~内の要素であっても、
`表示域に交差-$し得る。
`表示域$は、
文書~間で共有されないことに加え，常に利用者に示されるとは限らないので、
`全部的に作動中$でない文書~内の要素であっても，当の文書に結付けられた`表示域$には交差し得る。
◎
Similar to the being rendered state, elements in non-fully active documents can still intersect the viewport. The viewport is not shared between documents and might not always be shown to the user, so an element in a non-fully active document can still intersect the viewport associated with its document.
</p>

<p class="note">注記：
この仕様は、
交差がいつ~testされるかについて，精確な時機は定義しないが、
その時機は
`Intersection Observer API^cite のそれに合致することが示唆される。
`INTERSECTIONOBSERVER$r
◎
This specification does not define the precise timing for when the intersection is tested, but it is suggested that the timing match that of the Intersection Observer API. [INTERSECTIONOBSERVER]
</p>

<p>
所与の要素 %要素 が
`その具現化を子へ委任して@
いるとは、
~AND↓ を満たすことをいう：
◎
An element is delegating its rendering to its children if＼
</p>
<ul>
	<li>
%要素 は`具現化されて$いない
◎
it is not being rendered but＼
</li>
	<li>
%要素 の子~群は、
【 %要素 に子が無い場合でも】もし在れば，
次の結果として`具現化され$るようになり得る
⇒
%要素 の `display$p は `contents^v をとる `CSSDISPLAY$r，
あるいは~CSS以外の~style付け言語における等価な何か
◎
its children (if any) could be rendered, as a result of CSS 'display: contents', or some equivalent in other styling languages. [CSSDISPLAY]
</li>
</ul>

<hr>

<p>
`作者~level$の~stylesheetを尊守しない~UAは、
それでも，以下の各~節に与えられる~CSS規則を［
この仕様と，関連な~CSS, ~Unicode仕様に整合な方式
］で適用したかのように動作することが期待される。
`CSS$r `UNICODE$r `BIDI$r
◎
User agents that do not honor author-level CSS style sheets are nonetheless expected to act as if they applied the CSS rules given in these sections in a manner consistent with this specification and the relevant CSS and Unicode specifications. [CSS] [UNICODE] [BIDI]
</p>

<p class="note">注記：
これはとりわけ ［
`display$p,
`unicode-bidi$p,
`direction$p
］~propに関係している課題に重要である。
◎
This is especially important for issues relating to the 'display', 'unicode-bidi', and 'direction' properties.
</p>

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

◎表記記号

<p>
加えて、
この~pageの
⇒＃
語 “属性” は、（~IDL属性ではなく）要素の内容~属性を意味する。
語 “~prop” は、~CSS~propを意味する。
語 “~pixel” は、~CSS~pixel単位を意味する。
</p>

			<section id="_obsoleted-features">
<h4>廃用にされた特能に関係する記述</h4>

<p class="obsolete" style="display: block;">
`廃用にされた特能＠~HTMLobs#non-conforming-features$（主に属性）のみに関係する記述は、
この段落と同じ~styleが適用されている。
（そのような特能であっても、
一部には，~securityの含意を伴うものがあることに注意。）
</p>

【！ switch-obsolete 】
<p>
~UIwindow下端の “~~廃用” ~buttonで、
これらの記述の表示の有無を切り替えることもできる。
</p>

			</section>
		</section>
		<section id="the-css-user-agent-style-sheet-and-presentational-hints">
<h3 title="The CSS user agent style sheet and presentational hints">15.2. ~CSS~UA~stylesheetと呈示~用~hint</h3>

<p>
以下の各~節に与えられる~CSS規則は、
`~HTML要素$を包含する どの文書に対しても
— 他が指定されない限り —
`~UA~level$の~stylesheetの一部を成す既定として利用することが期待される。
◎
The CSS rules given in these subsections are, except where otherwise specified, expected to be used as part of the user-agent level style sheet defaults for all documents that contain HTML elements.
</p>

<p>
一部の~CSS規則は、
~CSS~cascadeにおける
`呈示~用~hint@
（ `presentational hint^en ）
— `作者~level$の, `詳細度$は~zero【 ( 0, 0, 0 ) 】にされる規則
【`参照＠~CASCADE#preshint$】
—
になるものと意図される。
◎
Some rules are intended for the author-level zero-specificity presentational hints part of the CSS cascade; these are explicitly called out as presentational hints.
</p>

<p>
`対応付け規則@
とは、
所与の属性~値（たち†）に対し，［
何らかの~prop用の妥当な値, または
値が妥当でないことを意味する特殊~値 ε
］を返す手続きである。
</p>

<p>
所与の［
要素 %E の属性（たち†） %A
］を，所与の`対応付け規則$ %R の下で，所与の~propたちが成す集合 %P 用の
`呈示~用~hintとして扱う@
とは：
</p>
<ul>
	<li>
［
%E は属性 %A を有する, かつ
%A の値に %R を適用した結果は ε でない
］ならば、［［
%P を成す各~propの値を， %R の結果に設定する
］ような`呈示~用~hint$
］として扱うことを意味する。
</li>
	<li>
この文脈において，
`呈示~用~hintになる@
と記されたときは、
~UAが実際に`呈示~用~hint$として扱う（前項の条件が満たされる）ことを意味する。
</li>
	<li>
~propたちが成す集合 %P は、［
1 つだけ, かつ %E のそれ
］が指定される場合が多いが，［
複数個, あるいは他の要素（たち）の~prop
］が指定される場合もある。
</li>
	<li>†
一部の`対応付け規則$（例：`縦横比に対応付ける$）は、
複数個の値からなる組を受容する
— その事例では、
%A は，対応する複数個の属性からなる組として与えられる
（現時点では、
2 個までに限られ，数箇所（ “属性~pair” と記される箇所）しかないが）。
</li>
</ul>

<p class="trans-note">【
本文を簡潔に, 見通しよく, 一貫した形で述べるため、
上で定義した “`対応付け規則$” 以下の各種用語は，
原文による定義をより汎用に利用できる形に定義し直して導入している。
以下に挙げる対応付け規則のうち一部も、
その一環として導入している。
】</p>

<hr>

<p>
次に挙げる各~手続きは、
`対応付け規則$（または，その一部）としても利用される：
</p>
<ul>
	<li class="obsolete">
所与の %値 を
`~pixel長さに対応付ける@
~algoは
⇒
~RET
`負でない整数として構文解析する$( %値 )
の結果に応じて
⇒＃
`失敗^i ならば ε ／
~ELSE_ `~pixel単位$による結果
◎
When the text below says that an attribute attribute on an element element maps to the pixel length property (or properties) properties, it means that if element has an attribute attribute set, and parsing that attribute's value using the rules for parsing non-negative integers doesn't generate an error, then the user agent is expected to use the parsed value as a pixel length for a presentational hint for properties.
</li>
	<li>
所与の %値 を
`寸法に対応付ける@
~algoは
⇒
~RET
`寸法~値として構文解析する$( %値 )
の結果に応じて
⇒＃
`失敗^i ならば ε ／
~ELSE_ 結果の種別に応じて⇒＃
`長さ^i ならば 結果を`~pixel単位$に換算した結果 ／
`百分率^i ならば 百分率~値としての結果
◎
When the text below says that an attribute attribute on an element element maps to the dimension property (or properties) properties, it means that if element has an attribute attribute set, and parsing that attribute's value using the rules for parsing dimension values doesn't generate an error, then the user agent is expected to use the parsed dimension as the value for a presentational hint for properties, with the value given as a pixel length if the dimension was a length, and with the value given as a percentage if the dimension was a percentage.
</li>
	<li class="obsolete">
所与の %値 を
`~zeroは無視しつつ寸法に対応付ける@
~algoは
⇒
~RET
`非~zero寸法~値として構文解析する$( %値 )
の結果に応じて
⇒＃
`失敗^i ならば ε ／
~ELSE_ 結果の種別に応じて⇒＃
`長さ^i ならば 結果を`~pixel単位$に換算した結果 ／
`百分率^i ならば 百分率~値としての結果
◎
When the text below says that an attribute attribute on an element element maps to the dimension property (ignoring zero) (or properties) properties, it means that if element has an attribute attribute set, and parsing that attribute's value using the rules for parsing nonzero dimension values doesn't generate an error, then the user agent is expected to use the parsed dimension as the value for a presentational hint for properties, with the value given as a pixel length if the dimension was a length, and with the value given as a percentage if the dimension was a percentage.
</li>
	<li>
<p>
所与の~pair
( %w, %h )
を
`縦横比に対応付ける@
~algoは：
</p>
		<ol>
			<li>
%横幅 ~LET `負でない整数として構文解析する$( %w )
</li>
			<li>
%縦幅 ~LET `負でない整数として構文解析する$( %h )
</li>
			<li>
~IF［
%横幅 ~EQ `失敗^i
］~OR［
%縦幅 ~EQ `失敗^i
］
⇒
~RET ε
</li>
			<li>
~RET <code class="value">%横幅 / %縦幅</code> の形による`比率$
</li>
		</ol>
◎
When the text below says that a pair of attributes w and h on an element element map to the aspect-ratio property, it means that if element has both attributes w and h, and parsing those attributes' values using the rules for parsing non-negative integers doesn't generate an error for either, then the user agent is expected to use the parsed integers as a presentational hint for the 'aspect-ratio' property of the form auto w / h.
</li>
	<li>
<p>
所与の~pair
( %w, %h )
を
`寸法~規則を利用して縦横比に対応付ける@
~algoは：
</p>
		<ol>
			<li>
%横幅 ~LET `寸法~値として構文解析する$( %w )
</li>
			<li>
%縦幅 ~LET `寸法~値として構文解析する$( %h )
</li>
			<li>
~IF［
%横幅 ~EQ `失敗^i
］~OR［
%横幅 の種別 ~EQ `百分率^i
］~OR［
%縦幅 ~EQ `失敗^i
］~OR［
%縦幅 の種別 ~EQ `百分率^i
］
⇒
~RET ε
</li>
			<li>
~RET <code class="value">%横幅 / %縦幅</code> の形による`比率$
</li>
		</ol>
◎
When the text below says that a pair of attributes w and h on an element element map to the aspect-ratio property (using dimension rules), it means that if element has both attributes w and h, and parsing those attributes' values using the rules for parsing dimension values doesn't generate an error or return a percentage for either, then the user agent is expected to use the parsed dimensions as a presentational hint for the 'aspect-ratio' property of the form auto w / h.
</li>
	<li class="obsolete">
所与の %値 を
`色~値に対応付ける@
~algoは
⇒
~RET
`旧来の色~値として構文解析する$( %値 )
の結果に応じて
⇒＃
`失敗^i ならば ε ／
~ELSE_ 結果
</li>
	<li class="obsolete">
<p>
所与の %要素 の属性~値 %値 を
`絶対~URLに対応付ける@
~algoは：
</p>
		<ol>
			<li>
~IF［
%値 は空である
］
⇒
~RET ε
</li>
			<li>
%~URL ~LET `~URLを符号化法の下で相対的に構文解析する$( %値, %要素 の`~node文書$ )
【！#encoding-parsing-and-serializing-a-url】
</li>
			<li>
~IF［
%~URL ~EQ `失敗^i
］
⇒
~RET ε
</li>
			<li>
~RET `~URLを直列化する$( %~URL )
</li>
		</ol>
	</li>
	<li>
所与の %値 を
`負でない整数に対応付ける@
~algoは
⇒
~RET
`負でない整数として構文解析する$( %値 )
の結果に応じて
⇒＃
`失敗^i ならば ε ／
~ELSE_ 結果
</li>
	<li class="obsolete">
<p>
所与の %値 を
`整列~keywordに対応付ける@
~algoは：
</p>
		<ol>
			<li>
%値 ~LET `~ASCII小文字~化する$( %値 )
</li>
			<li>
~IF［
%値 ~EQ `middle^l
］
⇒
~RET `center^v
</li>
			<li>
<p>
~IF［
%値 ~IN { `center^l, `left^l, `right^l, `justify^l }
］
⇒
~RET %値 と同じ文字列による~CSS~keyword
</p>

<p>
（これらの値は、
順に，自身の中で~textを［
中央寄せ, 左寄せ, 右寄せ, 両端揃え
］にすることを意味する。）
</p>
			</li>
			<li>
~RET ε
</li>
		</ol>
	</li>
</ul>

<div class="obsolete">
<p>
~UAが，~nodeの
`子孫を整列する@
ときは、
次に従うことが期待される：
◎
When a user agent is to align descendants of a node, the user agent＼
</p>
<ul>
	<li>
<p>
~AND↓ を満たす子孫に限り整列する：
</p>
		<ul>
			<li>
`margin-inline-start$p,
`margin-inline-end$p
`CSSLOGICAL$r
両~propとも非 `auto^v 値に算出される
</li>
			<li>
前項により，拘束され過ぎになり、
その結果 2 つの~marginいずれかの`使用~値$は，より大きい値に強制される
</li>
			<li>
子孫~自身に適用-可能な `align^a 属性は無い
</li>
		</ul>
◎
is expected to align only those descendants that have both their 'margin-inline-start' and 'margin-inline-end' properties computing to a value other than 'auto', that are over-constrained and that have one of those two margins with a used value forced to a greater value, and that do not themselves have an applicable align attribute.＼
</li>
	<li>
複数個の要素を特定0の子孫に`整列-$するときは、
そのような要素のうち最も深く入子にされたものが，他を上書きする。
◎
When multiple elements are to align a particular descendant, the most deeply nested such element is expected to override the others.＼
</li>
	<li>
整列される各~要素に対しては、
その［
`行-左端$, `行-右端$ `CSSWM$r
］側~marginの`使用~値$を以上に則って設定することにより，整列する。
◎
Aligned elements are expected to be aligned by having the used values of their margins on the line-left and line-right sides be set accordingly. [CSSLOGICAL] [CSSWM]
</li>
</ul>
</div>【！obs】

		</section>
		<section id="non-replaced-elements">
<h3 title="Non-replaced elements">15.3. 非置換~要素</h3>

			<section id="hidden-elements">
<h4 title="Hidden elements">15.3.1. `hidden^a 属性を有する要素</h4>

<pre class="lang-css">
@namespace "http://www.w3.org/1999/xhtml";

area,
base,
basefont,
datalist,
head,
link,
meta,
noembed,
noframes,
param,
rp,
script,
style,
template,
title {
  display: none;
}

<span id="hiddenCSS">[hidden]:not([hidden=until-found i]):not(embed)</span> {
  display: none;
}

[hidden=until-found i]:not(embed) {
  content-visibility: hidden;
}

embed[hidden] {
  display: inline;
  height: 0;
  width: 0;
}

input[type=hidden i] {
  display: none !important;
}

@media (scripting) {
  noscript {
    display: none !important;
  }
}
</pre>

			</section>
			<section id="the-page">
<h4 title="The page">15.3.2. ~page</h4>

<pre class="lang-css">
@namespace "http://www.w3.org/1999/xhtml";

html,
body {
  display: block;
}
</pre>

<p>
`body$e 要素 %body に対しては、
%body 上の次に挙げる各~prop %~prop
⇒＃
`margin-top$p,
`margin-bottom$p,
`margin-left$p,
`margin-right$p
◎終
に対し，
`8px^v を %~prop に利用することが期待される
<span class="obsolete">
— 次に与える規則により上書きされる場合を除き：
</span>
◎
For each property in the table below, given a body element,＼
◎
↓</p>

<div class="obsolete">
<div>
<ol>
	<li>
<p>
%行 は、
下の表t内の 1 列目に %~prop が現れる行を指すとする：
</p>

<table><thead>
<tr><th>~prop
<th colspan="3">~sourceを与える属性
<tbody>
<tr><td>`margin-top^p
<td>`marginheight$A
<td>`topmargin$A
<td>`marginheight$iframe

<tr><td>`margin-right$p
<td>`marginwidth$A
<td>`rightmargin$A
<td>`marginwidth$iframe

<tr><td>`margin-bottom$p
<td>`marginheight$A
<td>`bottommargin$A
<td>`marginheight$iframe

<tr><td>`margin-left$p
<td>`marginwidth$A
<td>`leftmargin$A
<td>`marginwidth$iframe
</table>

	</li>
	<li>
<p>
%属性 は、
次で与えられるとする：
</p>
		<ul>
			<li>
%body は %行 の 2 列目に挙げる属性を有するならば，それ
</li>
			<li>
他の場合、
%body は %行 の 3 列目に挙げる属性を有するならば，それ
</li>
			<li>
他の場合、［
%body の`容器~frame要素$が在って，それは %行 の 4 列目に挙げる属性を有する
］ならば，それ
</li>
			<li>
他の場合、
ε
</li>
		</ul>
	</li>
	<li>
%属性 ~NEQ ε ならば、
%属性 に対し，
次の`対応付け規則$の下で %~prop 用の`呈示~用~hintとして扱う$ことが期待される
⇒
先ず，`~pixel長さに対応付ける$
— その結果に応じて，次を返す
⇒＃
ε ならば `8px^v ／
~ELSE_ 結果
</li>
</ol>
◎
the first attribute that exists maps to the pixel length property on the body element. If none of the attributes for a property are found, or if the value of the attribute that was found cannot be parsed successfully, then a default value of 8px is expected to be used for that property instead.
◎
Property｜Source
'margin-top'｜
• The body element's marginheight attribute
• The body element's topmargin attribute
• The body element's container frame element's marginheight attribute
'margin-right'｜
• The body element's marginwidth attribute
• The body element's rightmargin attribute
• The body element's container frame element's marginwidth attribute
'margin-bottom'｜
• The body element's marginheight attribute
• The body element's bottommargin attribute
• The body element's container frame element's marginheight attribute
'margin-left'｜
• The body element's marginwidth attribute
• The body element's leftmargin attribute
• The body element's container frame element's marginwidth attribute 
</div>

<p>
`body$e 要素 %body の
`容器~frame要素@
は、［
%body 【！不要：の`~node文書$】の`~node~navigable$ %N は`子~navigable$である
］~AND［
%N の`容器$navは［
`frame$e ／ `iframe$e
］要素である
］ならば それ／
他の場合は無いとする。
◎
If the body element's node document's node navigable is a child navigable, and the container of that navigable is a frame or iframe element, then the container frame element of the body element is that frame or iframe element. Otherwise, there is no container frame element.
</p>

<p class="warning">
上の要件は、
ある~pageは、
別の~page（別の`生成元$に属するものも含む）の~marginを
— 例えば `iframe$e を利用して —
変更し得ることを含意する。
これは，一部の事例では、
~securityの~riskになり得る
— それは、［
~pageが作者が意図したとおりに具現化されない状況
］を［
~phishingその他，利用者を誤誘導する目的
］で企図する攻撃を許容するので。
◎
The above requirements imply that a page can change the margins of another page (including one from another origin) using, for example, an iframe. This is potentially a security risk, as it might in some cases allow an attack to contrive a situation in which a page is rendered not as the author intended, possibly for the purposes of phishing or otherwise misleading the user.
</p>
</div>

<hr>

<p>
`文書$の`~node~navigable$が`子~navigable$である場合、
当の~navigableの［
`表示域$ %表示域,
`容器$nav %容器
］は，次に従うことが期待される：
◎
↓</p>
<ul>
	<li>
%容器 は`具現化されて$いるならば、
%表示域 の~sizeと位置を［
%容器 の`内容~box$の内側
］に収まるようにする。
他の場合、
%表示域 の~sizeを縦横とも 0 にする。
◎
If a Document's node navigable is a child navigable, then it is expected to be positioned and sized to fit inside the content box of the container of that navigable. If the container is not being rendered, the navigable is expected to have a viewport with zero width and zero height.
</li>
	<li>
<p>
%容器 が ~AND↓ を満たすならば…
</p>
		<ul>
			<li>
［
`frame$e ／ `iframe$e
］要素である
</li>
			<li>
`scrolling^a 属性を有していて，
その値 ~IN`大小無視$sub { `off^l, `noscroll^l, `no^l }
</li>
		</ul>
<p>
…ならば
⇒
%表示域 には~scrollbarを示さないようにする
— %表示域 に `overflow$p ~propが適用されるかどうかに関わらず。
</p>
◎
If a Document's node navigable is a child navigable, the container of that navigable is a frame or iframe element, that element has a scrolling attribute, and that attribute's value is an ASCII case-insensitive match for the string "off", "noscroll", or "no", then the user agent is expected to prevent any scrollbars from being shown for the viewport of the Document's node navigable, regardless of the 'overflow' property that applies to that viewport.
</li>
</ul>

<hr>

<div class="obsolete">
<p>
`body$e 要素の `background$a 属性は、
`絶対~URLに対応付ける$下で，要素の
`background-image$p ~prop用の`呈示~用~hintとして扱う$ことが期待される。
◎
When a body element has a background attribute set to a non-empty value, the new value is expected to be encoding-parsed-and-serialized relative to the element's node document, and if that does not return failure, the user agent is expected to treat the attribute as a presentational hint setting the element's 'background-image' property to the return value.
</p>

<p>
`body$e 要素の `bgcolor$A 属性は、
`色~値に対応付ける$下で，要素の
`background-color$p ~prop用の`呈示~用~hintとして扱う$ことが期待される。
◎
When a body element has a bgcolor attribute set, the new value is expected to be parsed using the rules for parsing a legacy color value, and if that does not return failure, the user agent is expected to treat the attribute as a presentational hint setting the element's 'background-color' property to the resulting color.
</p>

<p>
下の表tの 1 列目に示される `body$e 要素の属性は、
`色~値に対応付ける$下で，［
同じ行の 2 列目に示される すべての要素
］の
`color$p ~prop用の`呈示~用~hintとして扱う$ことが期待される：
◎
↓</p>

<table><thead>
<tr><th>属性
<th>対象の要素
<tbody>

<tr><td>`text$A
<td>
`body$e 要素~自身
◎
When a body element has a text attribute, its value is expected to be parsed using the rules for parsing a legacy color value, and if that does not return failure, the user agent is expected to treat the attribute as a presentational hint setting the element's 'color' property to the resulting color.

<tr><td>`link$A
<td>
同じ`文書$内の `link$ps `疑似類$に合致するもの
◎
When a body element has a link attribute, its value is expected to be parsed using the rules for parsing a legacy color value, and if that does not return failure, the user agent is expected to treat the attribute as a presentational hint setting the 'color' property of any element in the Document matching the :link pseudo-class to the resulting color.

<tr><td>`vlink$A
<td>
同じ`文書$内の `visited$ps `疑似類$に合致するもの
◎
When a body element has a vlink attribute, its value is expected to be parsed using the rules for parsing a legacy color value, and if that does not return failure, the user agent is expected to treat the attribute as a presentational hint setting the 'color' property of any element in the Document matching the :visited pseudo-class to the resulting color.

<tr><td>`alink$A
<td>
<p>
同じ`文書$内の ~AND↓ を満たすもの：
</p>
<ul>
	<li>
`active$ps `疑似類$に合致する
</li>
	<li>
［
`link$ps, `visited$ps
］`疑似類$いずれかに合致する
</li>
</ul>
◎
When a body element has an alink attribute, its value is expected to be parsed using the rules for parsing a legacy color value, and if that does not return failure, the user agent is expected to treat the attribute as a presentational hint setting the 'color' property of any element in the Document matching the :active pseudo-class and either the :link pseudo-class or the :visited pseudo-class to the resulting color.

</table>
</div>【！obs】

			</section>
			<section id="flow-content-3">
<h4 title="Flow content">15.3.3. `~flow内容$</h4>

<pre class="lang-css">
@namespace "http://www.w3.org/1999/xhtml";

address,
blockquote,
center,
dialog,
div,
figure,
figcaption,
footer,
form,
header,
hr,
legend,
listing,
main,
p,
plaintext,
pre,
search,
xmp {
  display: block;
}

blockquote,
figure,
listing,
p,
plaintext,
pre,
xmp {
  margin-block: 1em;
}

blockquote,
figure {
  margin-inline: 40px;
}

address {
  font-style: italic;
}

listing,
plaintext,
pre,
xmp {
  font-family: monospace;
  white-space: pre;
}

dialog:not([open]) {
  display: none;
}
dialog {
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  border: solid;
  padding: 1em;
  background-color: Canvas;
  color: CanvasText;
}
dialog:modal {
  position: fixed;
  overflow: auto;
  inset-block: 0;
  max-width: calc(100% - 6px - 2em);
  max-height: calc(100% - 6px - 2em);
}
dialog::backdrop {
  background: rgba(0,0,0,0.1);
}

[popover]:not(:popover-open):not(dialog[open]) {
  display:none;
}

dialog:popover-open {
  display:block;
}

[popover] {
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  border: solid;
  padding: 0.25em;
  overflow: auto;
  color: CanvasText;
  background-color: Canvas;
}

:popover-open::backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none !important;
  background-color: transparent;
}

slot {
  display: contents;
}
</pre>

<p>
次の規則も`呈示~用~hint$として適用することが期待される：
◎
The following rules are also expected to apply, as presentational hints:
</p>

<pre class="lang-css">
@namespace "http://www.w3.org/1999/xhtml";

pre[wrap] {
  white-space: pre-wrap;
}
</pre>

<p>
`過去互換~mode$の下では、
次の規則も適用することが期待される：
◎
In quirks mode, the following rules are also expected to apply:
</p>

<pre class="lang-css">
@namespace "http://www.w3.org/1999/xhtml";

form {
  margin-block-end: 1em;
}
</pre>

<hr>

<div class="obsolete">
<p>
`center$e 要素の `align$A 属性に対しては、
次に従うことが期待される：
</p>
<ul>
	<li>
次の`対応付け規則$の下で，要素の
`text-align$p ~prop用の`呈示~用~hintとして扱う$
⇒
先ず，`整列~keywordに対応付ける$
— その結果に応じて，次を返す
⇒＃
`center^v ならば `center^v ／
他の場合は ε
</li>
	<li>
加えて，`呈示~用~hintになる$場合は、
中央寄せに`子孫を整列する$。
</li>
</ul>

<p>
`div$e 要素の `align$A 属性に対しては、
次に従うことが期待される：
</p>
<ul>
	<li>
`整列~keywordに対応付ける$下で，
要素の `text-align$p ~prop用の`呈示~用~hintとして扱う$
</li>
	<li>
加えて，`呈示~用~hintになる$場合は、
対応付けた結果の~CSS~keyword［
`center^v ／ `left^v ／ `right^v ／ `justify^v
］に応じて［
中央寄せ ／ 左端 ／ 右端 ／ 左端†
］に`子孫を整列する$。
【† 両端揃えでないことに注意。】
</li>
</ul>

◎
The center element, and the div element when it has an align attribute whose value is an ASCII case-insensitive match for either the string "center" or the string "middle", are expected to center text within themselves, as if they had their 'text-align' property set to 'center' in a presentational hint, and to align descendants to the center.
◎
The div element, when it has an align attribute whose value is an ASCII case-insensitive match for the string "left", is expected to left-align text within itself, as if it had its 'text-align' property set to 'left' in a presentational hint, and to align descendants to the left.
◎
The div element, when it has an align attribute whose value is an ASCII case-insensitive match for the string "right", is expected to right-align text within itself, as if it had its 'text-align' property set to 'right' in a presentational hint, and to align descendants to the right.
◎
The div element, when it has an align attribute whose value is an ASCII case-insensitive match for the string "justify", is expected to full-justify text within itself, as if it had its 'text-align' property set to 'justify' in a presentational hint, and to align descendants to the left.
</div>【！obs】

			</section>
			<section id="phrasing-content-3">
<h4 title="Phrasing content">15.3.4. `句ng内容$</h4>

<pre class="lang-css">
@namespace "http://www.w3.org/1999/xhtml";

cite,
dfn,
em,
i,
var {
  font-style: italic;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp,
tt {
  font-family: monospace;
}
big {
  font-size: larger;
}
small {
  font-size: smaller;
}

sub {
  vertical-align: sub;
}
sup {
  vertical-align: super;
}
sub,
sup {
  line-height: normal;
  font-size: smaller;
}

ruby {
  display: ruby;
}
rt {
  display: ruby-text;
}

:link {
  color: #0000EE;
}
:visited {
  color: #551A8B;
}
:link:active,
:visited:active {
  color: #FF0000;
}
:link,
:visited {
  text-decoration: underline;
  cursor: pointer;
}

:focus-visible {
  outline: auto;
}

mark {
  background: yellow;
  color: black;
} /* <span class="comment">
この色は、
単なる示唆であり，実装~feedbackに基づいて変更され得る
◎
this color is just a suggestion and can be changed based on implementation feedback
</span> */

abbr[title],
acronym[title] {
  text-decoration: dotted underline;
}
ins,
u {
  text-decoration: underline;
}
del,
s,
strike {
  text-decoration: line-through;
}

q::before {
  content: open-quote;
}
q::after {
  content: close-quote;
}

<span id="br-wbr-content">br {
  display-outside: newline;
} /* <span class="comment">
これには`双向~含意$もある
◎
this also has bidi implications
</span> */
nobr {
  white-space: nowrap;
}
wbr {
  display-outside: break-opportunity;
} /* <span class="comment">
これには`双向~含意$もある
◎
this also has bidi implications
</span> */
nobr wbr {
  white-space: normal;
}</span>
</pre>

<div class="obsolete">
<p>
次の規則も`呈示~用~hint$として適用することが期待される：
◎
The following rules are also expected to apply, as presentational hints:
</p>

<pre class="lang-css">
@namespace "http://www.w3.org/1999/xhtml";

br[clear=left i] {
  clear: left;
}
br[clear=right i] {
  clear: right;
}
br[clear=all i], br[clear=both i] {
  clear: both;
}
</pre>

</div>【！obs】

<p>
~CSS~ruby~modelの目的においては、
`ruby$e 要素の子のうち，［
`rt$e, `rp$e
］要素でないものからなる連なりは、［
`display$p ~propが値 `ruby-base$v にされた`匿名$な~box
］内に包装することが期待される。
`CSSRUBY$r
◎
For the purposes of the CSS ruby model, runs of children of ruby elements that are not rt or rp elements are expected to be wrapped in anonymous boxes whose 'display' property has the value 'ruby-base'. [CSSRUBY]
</p>

<p>
~rubyの特定0の部分が複数の~ruby注釈を有する場合、
それらの注釈は，~ruby注釈の一方の側への堆積を最小~化するため，
基底~textの両~側に分配するべきである。
◎
When a particular part of a ruby has more than one annotation, the annotations should be distributed on both sides of the base text so as to minimize the stacking of ruby annotations on one side.
</p>

<p class="note">注記：
前述の要件は、
アリな所では，~CSS~rubyの用語で表出するように更新されることになる
（現時点では、
~CSS~rubyは，この意味論を表出する［
入子な `ruby$e 要素 ／ 複数の連列的 `rt$e 要素
］を取扱っていない。）
◎
When it becomes possible to do so, the preceding requirement will be updated to be expressed in terms of CSS ruby. (Currently, CSS ruby does not handle nested ruby elements or multiple sequential rt elements, which is how this semantic is expressed.)
</p>

<p>
正しい~ruby具現化を~supportしない~UAには、
`rp$e 要素が無い下では，
`rt$e 要素の~textの~~前後に丸括弧を具現化することが期待される。
◎
User agents that do not support correct ruby rendering are expected to render parentheses around the text of rt elements in the absence of rp elements.
</p>

<hr>

<p>
行内~要素†の `clear$p ~propに対しては、
<span class="obsolete">
（ `clear＠~HTMLobs#attr-br-clear$a 属性を有する `br$e 要素を具現化するために）
</span>
［
`CSS^cite における この効果に関する規範的でない注記††にて述べられる方式
］で~supportすることが期待される。
◎
User agents are expected to support the 'clear' property on inline elements (in order to render br elements with clear attributes) in the manner described in the non-normative note to this effect in CSS.
</p>

<p class="trans-note">【†
おそらく、
`行内~levelの~box$を生成する要素。
】【††
`clear$p ~propを定義している節の末尾にある。
】</p>

<p>
`color$p ~prop用の初期~値は、
`black^v にすることが期待される。
`background-color$p ~prop用の初期~値は、
`transparent^v にすることが期待される。
~canvasの背景は、
`white^v にすることが期待される。
◎
The initial value for the 'color' property is expected to be black. The initial value for the 'background-color' property is expected to be 'transparent'. The canvas's background is expected to be white.
</p>

<hr>

<p class="trans-note">【
以下、
廃用にされた `font$e 要素~用の記述
— この訳では省略する。
】</p>

			</section>
			<section id="bidi-rendering">
<h4 title="Bidirectional text">15.3.5. 双方向-~text</h4>

<pre class="lang-css">
@namespace "http://www.w3.org/1999/xhtml";

[dir]:dir(ltr),
bdi:dir(ltr),
input[type=tel i]:dir(ltr) {
  direction: ltr;
}
[dir]:dir(rtl),
bdi:dir(rtl) {
  direction: rtl;
}

address,
blockquote,
center,
div,
figure,
figcaption,
footer,
form,
header,
hr,
legend,
listing,
main,
p,
plaintext,
pre,
summary,
xmp,
article,
aside,
h1,
h2,
h3,
h4,
h5,
h6,
hgroup,
nav,
section,
search,
table,
caption,
colgroup,
col,
thead,
tbody,
tfoot,
tr,
td,
th,
dir,
dd,
dl,
dt,
menu,
ol,
ul,
li,
bdi,
output,
[dir=ltr i],
[dir=rtl i],
[dir=auto i] {
  unicode-bidi: isolate;
}

bdo,
bdo[dir] {
  unicode-bidi: isolate-override;
}

input[dir=auto i]:is([type=search i], [type=tel i], [type=url i], [type=email i]),
textarea[dir=auto i],
pre[dir=auto i] {
  unicode-bidi: plaintext;
}
/* <span class="comment">
`type^a 属性が `Text$st 状態にある `input^e 要素については、
注釈文を見よ。
◎
see prose for input elements whose type attribute is in the Text state
</span> */

/* <span class="comment">
［
`br$e ／ `wbr$e
］要素の `content^p ~propを`設定する規則＠#br-wbr-content$には、
双向~含意もある
◎
the rules setting the 'content' property on br and wbr elements also has bidi implications
</span> */
</pre>

<div>
<p>
~AND↓ を満たす `input$e 要素は…
</p>
<ul>
	<li>
その `dir$a 属性の状態 ~EQ `自動＠~HTMLdom#attr-dir-auto-state$st【！~HTMLdom#attr-dir-auto】
</li>
	<li>
その `type$input 属性の状態 ~EQ `Text$st
</li>
</ul>

<p>
…次に従うことが期待される
⇒
`~UA~level$の~stylesheet内に［
当の要素の `unicode-bidi$p ~propを `plaintext^v に設定する規則
］が在るかのように動作する
</p>
◎
When an input element's dir attribute is in the auto state and its type attribute is in the Text state, then the user agent is expected to act as if it had a user-agent-level style sheet rule setting the 'unicode-bidi' property to 'plaintext'.
</div>

<div>
<p>
次に挙げる要素（すなわち，~text入力~欄）は…
</p>
<ul>
	<li>
`textarea$e 要素
</li>
	<li>
次を満たす `input$e 要素
⇒
その `type$input 属性の状態 ~IN {
`Text$st,
`Search$st,
`Tel$st,
`Url$st,
`Email$st
}
</li>
</ul>

<p>
…次に従うことが期待される
⇒
編集-用~UIを呈示する
— その方向性は当の要素の `direction$p ~propに合致する
</p>
◎
Input fields (i.e. textarea elements, and input elements when their type attribute is in the Text, Search, Telephone, URL, or Email state) are expected to present an editing user interface with a directionality that matches the element's 'direction' property.
</div>

<p>
文書の文字~符号化法が `ISO-8859-8＠~ENCODING#iso-8859-8$ `ENCODING$r のときは、
上の規則に加えて，次も適用することが期待される：
◎
When the document's character encoding is ISO-8859-8, the following rules are additionally expected to apply, following those above: [ENCODING]
</p>

<pre class="lang-css">
@namespace "http://www.w3.org/1999/xhtml";

address,
blockquote,
center,
div,
figure,
figcaption,
footer,
form,
header,
hr,
legend,
listing,
main,
p,
plaintext,
pre,
summary,
xmp,
article,
aside,
h1,
h2,
h3,
h4,
h5,
h6,
hgroup,
nav,
section,
search,
table,
caption,
colgroup,
col,
thead,
tbody,
tfoot,
tr,
td,
th,
dir,
dd,
dl,
dt,
menu,
ol,
ul,
li,
[dir=ltr i],
[dir=rtl i],
[dir=auto i],
*|* {
  unicode-bidi: bidi-override;
}
input:not([type=submit i]):not([type=reset i]):not([type=button i]),
textarea {
  unicode-bidi: normal;
}
</pre>

			</section>
			<section id="sections-and-headings">
<h4 title="Sections and headings">15.3.6. ~sectionと見出し</h4>

<pre class="lang-css">
@namespace "http://www.w3.org/1999/xhtml";

article,
aside,
h1,
h2,
h3,
h4,
h5,
h6,
hgroup,
nav,
section {
  display: block;
}

h1 {
  margin-block: 0.67em;
  font-size: 2.00em;
  font-weight: bold;
}
h2 {
  margin-block: 0.83em;
  font-size: 1.50em;
  font-weight: bold;
}
h3 {
  margin-block: 1.00em;
  font-size: 1.17em;
  font-weight: bold;
}
h4 {
  margin-block: 1.33em;
  font-size: 1.00em;
  font-weight: bold;
}
h5 {
  margin-block: 1.67em;
  font-size: 0.83em;
  font-weight: bold;
}
h6 {
  margin-block: 2.33em;
  font-size: 0.67em;
  font-weight: bold;
}
</pre>

<p>
読み易くするため、
次の~CSS~blockにおける記号 %x は，次に与える選択子の略記とする
⇒
`:is(article, aside, nav, section)^css
◎
In the following CSS block, x is shorthand for the following selector: :is(article, aside, nav, section)
</p>

<pre class="lang-css">
@namespace "http://www.w3.org/1999/xhtml";

%x h1 {
  margin-block: 0.83em;
  font-size: 1.50em;
}
%x %x h1 {
  margin-block: 1.00em;
  font-size: 1.17em;
}
%x %x %x h1 {
  margin-block: 1.33em;
  font-size: 1.00em;
}
%x %x %x %x h1 {
  margin-block: 1.67em;
  font-size: 0.83em;
}
%x %x %x %x %x h1 {
  margin-block: 2.33em;
  font-size: 0.67em;
}
</pre>

<p class="note">
◎
The shorthand is used to keep this block at least mildly readable.
</p>

			</section>
			<section id="lists">
<h4 title="Lists">15.3.7. ~list</h4>

<pre class="lang-css">
@namespace "http://www.w3.org/1999/xhtml";

dir,
dd,
dl,
dt,
menu,
ol,
ul {
  display: block;
}
li {
  display: list-item;
  text-align: match-parent;
}

dir,
dl,
menu,
ol,
ul {
  margin-block: 1em;
}

:is(dir, dl, menu, ol, ul) :is(dir, dl, menu, ol, ul) {
  margin-block: 0;
}

dd {
  margin-inline-start: 40px;
}
dir,
menu,
ol,
ul {
  padding-inline-start: 40px;
}

ol,
ul,
menu {
  counter-reset: list-item;
}
ol {
  list-style-type: decimal;
}

dir,
menu,
ul {
  list-style-type: disc;
}
:is(dir, menu, ol, ul) :is(dir, menu, ul) {
  list-style-type: circle;
}
:is(dir, menu, ol, ul) :is(dir, menu, ol, ul) :is(dir, menu, ul) {
  list-style-type: square;
}
</pre>

<p id="decohints">
次の規則も`呈示~用~hint$として適用することが期待される：
◎
The following rules are also expected to apply, as presentational hints:
</p>

<pre class="lang-css">
@namespace "http://www.w3.org/1999/xhtml";

ol[type="1"],
li[type="1"] {
  list-style-type: decimal;
}
ol[type=a s],
li[type=a s] {
  list-style-type: lower-alpha;
}
ol[type=A s],
li[type=A s] {
  list-style-type: upper-alpha;
}
ol[type=i s],
li[type=i s] {
  list-style-type: lower-roman;
}
ol[type=I s],
li[type=I s] {
  list-style-type: upper-roman;
}
ul[type=none i],
li[type=none i] {
  list-style-type: none;
}
ul[type=disc i],
li[type=disc i] {
  list-style-type: disc;
}
ul[type=circle i],
li[type=circle i] {
  list-style-type: circle;
}
ul[type=square i],
li[type=square i] {
  list-style-type: square;
}
</pre>【！obs】

<p>
非~CSS~UAは、
`li$e 要素を次に従って具現化することが期待される
⇒
要素の`序数~値$を利用して，~list~item~marker内の~counterを具現化する
◎
When rendering li elements, non-CSS user agents are expected to use the ordinal value of the li element to render the counter in the list item marker.
</p>

<p id="css-list-rendering">
~CSS~UA用には、
`~list~item$の具現化を成す一部の側面は，
`CSS Lists^cite 仕様 `CSSLISTS$r
にて定義される。
加えて，以下を適用することが期待される：
◎
For CSS user agents, some aspects of rendering list items are defined by the CSS Lists specification. Additionally, the following attribute mappings are expected to apply: [CSSLISTS]
</p>
<ul>
	<li>
`li$e 要素の `value$A 属性に対しては、
次の`対応付け規則$の下で，要素の
`counter-set$p ~prop用の`呈示~用~hintとして扱う$
⇒
先ず，`整数として構文解析する$( 所与の値 )
— その結果 %値 に応じて，次を返す
⇒＃
`失敗^i ならば ε ／
~ELSE_ `list-item <var>値</var>^v
◎
When an li element has a value attribute, and parsing that attribute's value using the rules for parsing integers doesn't generate an error, the user agent is expected to use the parsed value value as a presentational hint for the 'counter-set' property of the form list-item value.
</li>
	<li>
<p>
`ol$e 要素の［
`start$A,
`reversed$A
］属性~pairに対しては、
次の`対応付け規則$の下で，要素の
`counter-reset$p ~prop用の`呈示~用~hintとして扱う$：
◎
When an ol element has a start attribute or a reversed attribute, or both, the user agent is expected to use the following steps to treat the attributes as a presentational hint for the 'counter-reset' property:
</p>
		<ol>
			<li>
%値 ~LET `失敗^i
◎
Let value be null.
</li>
			<li>
~IF［
要素は `start$A 属性を有する
］
⇒
%値 ~SET `整数として構文解析する$( 属性の値 )
◎
If the element has a start attribute, then set value to the result of parsing the attribute's value using the rules for parsing integers.
</li>
			<li>
<p>
~IF［
要素は `reversed$A 属性を有する
］：
</p>
				<ol>
					<li>
~IF［
%値 ~EQ `失敗^i
］
⇒
~RET `reversed(list-item)^v
</li>
					<li>
%値 ~INCBY 1
</li>
					<li>
~RET `reversed(list-item) <var>値</var>^v
</li>
				</ol>
◎
If the element has a reversed attribute, then:
• If value is an integer, then increment value by 1 and return reversed(list-item) value.
• Otherwise, return reversed(list-item).
• Either the start attribute was absent, or parsing its value resulted in an error.
</li>
			<li>
<p>
~ELSE：
</p>
				<ol>
					<li>
~IF［
%値 ~EQ `失敗^i
］
⇒
~RET ε （`呈示~用~hint$は無い）
</li>
					<li>
%値 ~DECBY 1
</li>
					<li>
~RET `list-item <var>値</var>^v
</li>
				</ol>
◎
Otherwise:
• If value is an integer, then decrement value by 1 and return list-item value.
• Otherwise, there is no presentational hint.
</li>
		</ol>
	</li>
</ul>

			</section>
			<section id="tables-2">
<h4 title="Tables">15.3.8. ~table</h4>

<pre class="lang-css">
@namespace "http://www.w3.org/1999/xhtml";

table {
  display: table;
}
caption {
  display: table-caption;
}
colgroup,
colgroup[hidden] {
  display: table-column-group;
}
col,
col[hidden] {
  display: table-column;
}
thead,
thead[hidden] {
  display: table-header-group;
}
tbody,
tbody[hidden] {
  display: table-row-group;
}
tfoot,
tfoot[hidden] {
  display: table-footer-group;
}
tr,
tr[hidden] {
  display: table-row;
}
td,
th {
  display: table-cell;
}

colgroup[hidden],
col[hidden],
thead[hidden],
tbody[hidden],
tfoot[hidden],
tr[hidden] {
  visibility: collapse;
}

table {
  box-sizing: border-box;
  border-spacing: 2px;
  border-collapse: separate;
  text-indent: initial;
}
td,
th {
  padding: 1px;
}
th {
  font-weight: bold;
}

caption {
  text-align: center;
}
thead,
tbody,
tfoot,
table &gt; tr {
  vertical-align: middle;
}
tr,
td,
th {
  vertical-align: inherit;
}

thead,
tbody,
tfoot,
tr {
  border-color: inherit;
}
</pre>

<div class="obsolete">
<p>
（廃用にされた `rules^a, `frame^a 属性に関する~style：）
</p>

<pre class="lang-css">
table[rules=none i],
table[rules=groups i],
table[rules=rows i],
table[rules=cols i],
table[rules=all i],
table[frame=void i],
table[frame=above i],
table[frame=below i],
table[frame=hsides i],
table[frame=lhs i],
table[frame=rhs i],
table[frame=vsides i],
table[frame=box i],
table[frame=border i],
table[rules=none i] &gt; tr &gt; td,
table[rules=none i] &gt; tr &gt; th,
table[rules=groups i] &gt; tr &gt; td,
table[rules=groups i] &gt; tr &gt; th,
table[rules=rows i] &gt; tr &gt; td,
table[rules=rows i] &gt; tr &gt; th,
table[rules=cols i] &gt; tr &gt; td,
table[rules=cols i] &gt; tr &gt; th,
table[rules=all i] &gt; tr &gt; td,
table[rules=all i] &gt; tr &gt; th,
table[rules=none i] &gt; thead &gt; tr &gt; td,
table[rules=none i] &gt; thead &gt; tr &gt; th,
table[rules=groups i] &gt; thead &gt; tr &gt; td,
table[rules=groups i] &gt; thead &gt; tr &gt; th,
table[rules=rows i] &gt; thead &gt; tr &gt; td,
table[rules=rows i] &gt; thead &gt; tr &gt; th,
table[rules=cols i] &gt; thead &gt; tr &gt; td,
table[rules=cols i] &gt; thead &gt; tr &gt; th,
table[rules=all i] &gt; thead &gt; tr &gt; td,
table[rules=all i] &gt; thead &gt; tr &gt; th,
table[rules=none i] &gt; tbody &gt; tr &gt; td,
table[rules=none i] &gt; tbody &gt; tr &gt; th,
table[rules=groups i] &gt; tbody &gt; tr &gt; td,
table[rules=groups i] &gt; tbody &gt; tr &gt; th,
table[rules=rows i] &gt; tbody &gt; tr &gt; td,
table[rules=rows i] &gt; tbody &gt; tr &gt; th,
table[rules=cols i] &gt; tbody &gt; tr &gt; td,
table[rules=cols i] &gt; tbody &gt; tr &gt; th,
table[rules=all i] &gt; tbody &gt; tr &gt; td,
table[rules=all i] &gt; tbody &gt; tr &gt; th,
table[rules=none i] &gt; tfoot &gt; tr &gt; td,
table[rules=none i] &gt; tfoot &gt; tr &gt; th,
table[rules=groups i] &gt; tfoot &gt; tr &gt; td,
table[rules=groups i] &gt; tfoot &gt; tr &gt; th,
table[rules=rows i] &gt; tfoot &gt; tr &gt; td,
table[rules=rows i] &gt; tfoot &gt; tr &gt; th,
table[rules=cols i] &gt; tfoot &gt; tr &gt; td,
table[rules=cols i] &gt; tfoot &gt; tr &gt; th,
table[rules=all i] &gt; tfoot &gt; tr &gt; td,
table[rules=all i] &gt; tfoot &gt; tr &gt; th {
  border-color: black;
}
</pre>

</div>【！obs】

<div class="obsolete">
<p>
次の規則も`呈示~用~hint$として適用することが期待される：
◎
The following rules are also expected to apply, as presentational hints:
</p>

<pre class="lang-css">
@namespace "http://www.w3.org/1999/xhtml";

table[align=left i] {
  float: left;
}
table[align=right i] {
  float: right;
}
table[align=center i] {
  margin-inline-start: auto;
  margin-inline-end: auto;
}
thead[align=absmiddle i],
tbody[align=absmiddle i],
tfoot[align=absmiddle i],
tr[align=absmiddle i],
td[align=absmiddle i],
th[align=absmiddle i] {
  text-align: center;
}

caption[align=bottom i] {
  caption-side: bottom;
}
p[align=left i],
h1[align=left i],
h2[align=left i],
h3[align=left i],
h4[align=left i],
h5[align=left i],
h6[align=left i] {
  text-align: left;
}
p[align=right i],
h1[align=right i],
h2[align=right i],
h3[align=right i],
h4[align=right i],
h5[align=right i],
h6[align=right i] {
  text-align: right;
}
p[align=center i],
h1[align=center i],
h2[align=center i],
h3[align=center i],
h4[align=center i],
h5[align=center i],
h6[align=center i] {
  text-align: center;
}
p[align=justify i],
h1[align=justify i],
h2[align=justify i],
h3[align=justify i],
h4[align=justify i],
h5[align=justify i],
h6[align=justify i] {
  text-align: justify;
}
thead[valign=top i],
tbody[valign=top i],
tfoot[valign=top i],
tr[valign=top i],
td[valign=top i],
th[valign=top i] {
  vertical-align: top;
}
thead[valign=middle i],
tbody[valign=middle i],
tfoot[valign=middle i],
tr[valign=middle i],
td[valign=middle i],
th[valign=middle i] {
  vertical-align: middle;
}
thead[valign=bottom i],
tbody[valign=bottom i],
tfoot[valign=bottom i],
tr[valign=bottom i],
td[valign=bottom i],
th[valign=bottom i] {
  vertical-align: bottom;
}
thead[valign=baseline i],
tbody[valign=baseline i],
tfoot[valign=baseline i],
tr[valign=baseline i],
td[valign=baseline i],
th[valign=baseline i] {
  vertical-align: baseline;
}

td[nowrap],
th[nowrap] {
  white-space: nowrap;
}

table[rules=none i],
table[rules=groups i],
table[rules=rows i],
table[rules=cols i],
table[rules=all i] {
  border-style: hidden;
  border-collapse: collapse;
}
table[border] {
  border-style: outset; /* <span class="comment">
`~borderが~zeroに等価でない場合に限る$
◎
only if border is not equivalent to zero
</span> */
}
table[frame=void i] {
  border-style: hidden;
}
table[frame=above i] {
  border-style: outset hidden hidden hidden;
}
table[frame=below i] {
  border-style: hidden hidden outset hidden;
}
table[frame=hsides i] {
  border-style: outset hidden outset hidden;
}
table[frame=lhs i] {
  border-style: hidden hidden hidden outset;
}
table[frame=rhs i] {
  border-style: hidden outset hidden hidden;
}
table[frame=vsides i] {
  border-style: hidden outset;
}
table[frame=box i],
table[frame=border i] {
  border-style: outset;
}

table[border] &gt; tr &gt; td,
table[border] &gt; tr &gt; th,
table[border] &gt; thead &gt; tr &gt; td,
table[border] &gt; thead &gt; tr &gt; th,
table[border] &gt; tbody &gt; tr &gt; td,
table[border] &gt; tbody &gt; tr &gt; th,
table[border] &gt; tfoot &gt; tr &gt; td,
table[border] &gt; tfoot &gt; tr &gt; th {
  /* <span class="comment">
`~borderが~zeroに等価でない場合に限る$
◎
only if border is not equivalent to zero
</span> */
  border-width: 1px;
  border-style: inset;
}
table[rules=none i] &gt; tr &gt; td,
table[rules=none i] &gt; tr &gt; th,
table[rules=none i] &gt; thead &gt; tr &gt; td,
table[rules=none i] &gt; thead &gt; tr &gt; th,
table[rules=none i] &gt; tbody &gt; tr &gt; td,
table[rules=none i] &gt; tbody &gt; tr &gt; th,
table[rules=none i] &gt; tfoot &gt; tr &gt; td,
table[rules=none i] &gt; tfoot &gt; tr &gt; th,
table[rules=groups i] &gt; tr &gt; td,
table[rules=groups i] &gt; tr &gt; th,
table[rules=groups i] &gt; thead &gt; tr &gt; td,
table[rules=groups i] &gt; thead &gt; tr &gt; th,
table[rules=groups i] &gt; tbody &gt; tr &gt; td,
table[rules=groups i] &gt; tbody &gt; tr &gt; th,
table[rules=groups i] &gt; tfoot &gt; tr &gt; td,
table[rules=groups i] &gt; tfoot &gt; tr &gt; th,
table[rules=rows i] &gt; tr &gt; td,
table[rules=rows i] &gt; tr &gt; th,
table[rules=rows i] &gt; thead &gt; tr &gt; td,
table[rules=rows i] &gt; thead &gt; tr &gt; th,
table[rules=rows i] &gt; tbody &gt; tr &gt; td,
table[rules=rows i] &gt; tbody &gt; tr &gt; th,
table[rules=rows i] &gt; tfoot &gt; tr &gt; td,
table[rules=rows i] &gt; tfoot &gt; tr &gt; th {
  border-width: 1px;
  border-style: none;
}
table[rules=cols i] &gt; tr &gt; td,
table[rules=cols i] &gt; tr &gt; th,
table[rules=cols i] &gt; thead &gt; tr &gt; td,
table[rules=cols i] &gt; thead &gt; tr &gt; th,
table[rules=cols i] &gt; tbody &gt; tr &gt; td,
table[rules=cols i] &gt; tbody &gt; tr &gt; th,
table[rules=cols i] &gt; tfoot &gt; tr &gt; td,
table[rules=cols i] &gt; tfoot &gt; tr &gt; th {
  border-width: 1px;
  border-block-style: none;
  border-inline-style: solid;
}
table[rules=all i] &gt; tr &gt; td,
table[rules=all i] &gt; tr &gt; th,
table[rules=all i] &gt; thead &gt; tr &gt; td,
table[rules=all i] &gt; thead &gt; tr &gt; th,
table[rules=all i] &gt; tbody &gt; tr &gt; td,
table[rules=all i] &gt; tbody &gt; tr &gt; th,
table[rules=all i] &gt; tfoot &gt; tr &gt; td,
table[rules=all i] &gt; tfoot &gt; tr &gt; th {
  border-width: 1px;
  border-style: solid;
}

table[rules=groups i] &gt; colgroup {
  border-inline-width: 1px;
  border-inline-style: solid;
}
table[rules=groups i] &gt; thead,
table[rules=groups i] &gt; tbody,
table[rules=groups i] &gt; tfoot {
  border-block-width: 1px;
  border-block-style: solid;
}

table[rules=rows i] &gt; tr,
table[rules=rows i] &gt; thead &gt; tr,
table[rules=rows i] &gt; tbody &gt; tr,
table[rules=rows i] &gt; tfoot &gt; tr {
  border-block-width: 1px;
  border-block-style: solid;
}
</pre>

</div>【！obs】

<p>
`過去互換~mode$の下では、
次の規則も適用することが期待される：
◎
In quirks mode, the following rules are also expected to apply:
</p>

<pre class="lang-css">
@namespace "http://www.w3.org/1999/xhtml";

table {
  font-weight: initial;
  font-style: initial;
  font-variant: initial;
  font-size: initial;
  line-height: initial;
  white-space: initial;
  text-align: initial;
}
</pre>

<hr>

<p>
~CSS~table~modelの目的においては：
◎
↓</p>
<ul>
	<li>
`col$e 要素は、
その `span$A 属性に`指定された数＠~HTMLcms#rules-for-parsing-non-negative-integers$と同じだけ在るかのように扱うことが期待される。
◎
For the purposes of the CSS table model, the col element is expected to be treated as if it was present as many times as its span attribute specifies.
</li>
	<li>
`colgroup$e 要素のうち， `col$e 要素を包含していないものは、
その `span$A 属性に`指定された数＠~HTMLcms#rules-for-parsing-non-negative-integers$と同じだけ，子 `col^e 要素が在るかのように扱うことが期待される。
◎
For the purposes of the CSS table model, the colgroup element, if it contains no col element, is expected to be treated as if it had as many such children as its span attribute specifies.
</li>
	<li>
［
`td$e ／ `th$e
］要素の
`colspan$tdth, `rowspan$tdth 属性は、
~cellが何本の［
~row, ~col
］に~spanしているかに関する <i>特別な知識</i>を`供する＠~HTMLcms#rules-for-parsing-non-negative-integers$ことが期待される。
◎
For the purposes of the CSS table model, the colspan and rowspan attributes on td and th elements are expected to provide the special knowledge regarding cells spanning rows and columns.
</li>
</ul>

<p>
`~HTML文書$においては、
次の規則も適用することが期待される：
◎
In HTML documents, the following rules are also expected to apply:
</p>

<pre class="lang-css">
@namespace "http://www.w3.org/1999/xhtml";

:is(table, thead, tbody, tfoot, tr) &gt; form {
  display: none !important;
}
</pre>

<hr>

<div class="obsolete">
<h5 id="_table-obsolete-attr">~tableにおける廃用にされた属性</h5>

<p>
次の表tの 1 列目に与える要素に対しては、
同じ行の［
2 列目に与える属性を，
3 列目に与える`対応付け規則$の下で，
4 列目に与える~prop（他が言明されない限り，同じ要素の~prop）
］用の`呈示~用~hintとして扱う$ことが期待される：
◎
↓</p>

<table>
<caption>~tableの廃用にされた属性に対する扱い</caption>
<thead>
<tr><th>要素
<th>属性
<th style="min-width:8em;">`対応付け規則$
<th>~prop

<tbody><tr><td>`table$e
<td>`cellspacing$A
<td>`~pixel長さに対応付ける$
<td>`border-spacing$p

<tr lang="en" class="_en"><td colspan="4">
The table element's cellspacing attribute maps to the pixel length property 'border-spacing' on the element.

<tbody><tr><td>`table$e
<td>`cellpadding$A
<td>`~pixel長さに対応付ける$

<td>
要素に対応する`~table$内のある`~cell$に対応するような，すべての［
`td$e ／ `th$e
］要素の［
`padding-top$p,
`padding-right$p,
`padding-bottom$p,
`padding-left$p
］

<tr lang="en" class="_en"><td colspan="4">
The table element's cellpadding attribute maps to the pixel length properties 'padding-top', 'padding-right', 'padding-bottom', and 'padding-left' of any td and th elements that have corresponding cells in the table corresponding to the table element.

<tbody><tr><td>`table$e
<td>`height$A
<td>`寸法に対応付ける$
<td>`height$p

<tr lang="en" class="_en"><td colspan="4">
The table element's height attribute maps to the dimension property 'height' on the table element.

<tbody><tr><td>`table$e
<td>`width$A
<td>`~zeroは無視しつつ寸法に対応付ける$
<td>`width$p

<tr lang="en" class="_en"><td colspan="4">
The table element's width attribute maps to the dimension property (ignoring zero) 'width' on the table element.

<tbody><tr><td>`col$e
<td>`width$A
<td>`寸法に対応付ける$
<td>`width$p

<tr lang="en" class="_en"><td colspan="4">
<p>
The col element's width attribute maps to the dimension property 'width' on the col element.

<tbody><tr><td>`thead$e, `tbody$e, `tfoot$e
<td><!-- `tbody^e -->`height$A
<td>`寸法に対応付ける$
<td>`height$p

<tr lang="en" class="_en"><td colspan="4">
The thead, tbody, and tfoot elements' height attribute maps to the dimension property 'height' on the element.

<tbody><tr><td>`tr$e
<td>`height$A
<td>`寸法に対応付ける$
<td>`height$p

<tr lang="en" class="_en"><td colspan="4">
The tr element's height attribute maps to the dimension property 'height' on the tr element.

<tbody><tr><td>`td$e, `th$e
<td>`height$tdth
<td>`~zeroは無視しつつ寸法に対応付ける$
<td>`height$p

<tr lang="en" class="_en"><td colspan="4">
The td and th elements' height attributes map to the dimension property (ignoring zero) 'height' on the element.

<tbody><tr><td>`td$e, `th$e
<td>`width$tdth
<td>`~zeroは無視しつつ寸法に対応付ける$
<td>`width$p

<tr lang="en" class="_en"><td colspan="4">
The td and th elements' width attributes map to the dimension property (ignoring zero) 'width' on the element.

<tbody><tr><td rowspan="2">
`thead$e,
`tbody$e,
`tfoot$e,
`tr$e,
`td$e,
`th$e
<td>`align^a
<td>`整列~keywordに対応付ける$
<td>`text-align$p

<tr><td colspan="3">
加えて，`呈示~用~hintになる$場合は、
対応付けた結果の~CSS~keyword［
`center^v ／ `left^v ／ `right^v ／ `justify^v
］に応じて［
中央寄せ ／ 左端 ／ 右端 ／ 両端揃え
］に`子孫を整列する$ことも期待される。

<tr lang="en" class="_en"><td colspan="4">
<p>
The thead, tbody, tfoot, tr, td, and th elements, when they have an align attribute whose value is an ASCII case-insensitive match for either the string "center" or the string "middle", are expected to center text within themselves, as if they had their 'text-align' property set to 'center' in a presentational hint, and to align descendants to the center. 
<p>
The thead, tbody, tfoot, tr, td, and th elements, when they have an align attribute whose value is an ASCII case-insensitive match for the string "left", are expected to left-align text within themselves, as if they had their 'text-align' property set to 'left' in a presentational hint, and to align descendants to the left.
<p>
The thead, tbody, tfoot, tr, td, and th elements, when they have an align attribute whose value is an ASCII case-insensitive match for the string "right", are expected to right-align text within themselves, as if they had their 'text-align' property set to 'right' in a presentational hint, and to align descendants to the right.
<p>
The thead, tbody, tfoot, tr, td, and th elements, when they have an align attribute whose value is an ASCII case-insensitive match for the string "justify", are expected to full-justify text within themselves, as if they had their 'text-align' property set to 'justify' in a presentational hint, and to align descendants to the left.
<p>
User agents are expected to have a rule in their user agent style sheet that matches th elements that have a parent node whose computed value for the 'text-align' property is its initial value, whose declaration block consists of just a single declaration that sets the 'text-align' property to the value 'center'.

<tbody><tr><td>
`table$e,
`thead$e,
`tbody$e,
`tfoot$e,
`tr$e,
`td$e,
`th$e
<td>`background$a
<td>`絶対~URLに対応付ける$
<td>`background-image$p

<tr lang="en" class="_en"><td colspan="4">
When a table, thead, tbody, tfoot, tr, td, or th element has a background attribute set to a non-empty value, the new value is expected to be encoding-parsed-and-serialized relative to the element's node document, and if that does not return failure, the user agent is expected to treat the attribute as a presentational hint setting the element's 'background-image' property to the return value.

<tbody><tr><td>同上
<td>`bgcolor^a
<td>`色~値に対応付ける$
<td>`background-color$p

<tr lang="en" class="_en"><td colspan="4">
When a table, thead, tbody, tfoot, tr, td, or th element has a bgcolor attribute set, the new value is expected to be parsed using the rules for parsing a legacy color value, and if that does not return an error, the user agent is expected to treat the attribute as a presentational hint setting the element's 'background-color' property to the resulting color.

<tbody><tr><td>`table$e
<td>`bordercolor$A
<td>`色~値に対応付ける$
<td>
`border-top-color$p,
`border-right-color$p,
`border-bottom-color$p,
`border-left-color$p

<tr lang="en" class="_en"><td colspan="4">
When a table element has a bordercolor attribute, its value is expected to be parsed using the rules for parsing a legacy color value, and if that does not return an error, the user agent is expected to treat the attribute as a presentational hint setting the element's 'border-top-color', 'border-right-color', 'border-bottom-color', and 'border-left-color' properties to the resulting color.

<tbody><tr><td>`table$e
<td>`border$A
<td>
先ず，値を`~pixel長さに対応付ける$
— その結果に応じて，次を返す
⇒＃
ε ならば `1px^v ／
他の場合は 結果
<td>
`border-top-width$p,
`border-right-width$p,
`border-bottom-width$p,
`border-left-width$p

<tr lang="en" class="_en"><td colspan="4">
The table element's border attribute maps to the pixel length properties 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' on the element. If the attribute is present but parsing the attribute's value using the rules for parsing non-negative integers generates an error, a default value of 1px is expected to be used for that property instead.

</table>

</div>【！obs】

<div>
<p>
`~UA~level$の~stylesheet内には、
次のような規則が在ることが期待される：
</p>
<ul>
	<li>
【その選択子は、】
次を満たす `th$e 要素に合致する
⇒
要素の親~nodeの `text-align$p ~propの`算出d値$は その初期~値である
</li>
	<li>
その宣言~blockは、［
`text-align$p ~propを値 `center^v に設定する
］ような，単独の宣言のみからなる。
</li>
</ul>

◎
↑</div>

<div class="obsolete">
<p>
上の~CSS~blockにて
`~borderが~zeroに等価でない場合に限る@
と記された規則 %規則 は、
~AND↓ を満たす要素 %要素 に限り適用することが期待される：
</p>
<ul>
	<li>
%要素 は %規則 の選択子に合致する
</li>
	<li>
%要素 は（ %規則 の選択子に示された） `border^a 属性を有する
</li>
	<li>
次の結果 ~NIN { ε, 0 }
⇒
%要素 の `border^a 属性の値を`負でない整数に対応付ける$
</li>
</ul>
◎
Rules marked "only if border is not equivalent to zero" in the CSS block above is expected to only be applied if the border attribute mentioned in the selectors for the rule is not only present but, when parsed using the rules for parsing non-negative integers, is also found to have a value other than zero or to generate an error.
</div>【！obs】

<hr>

<div class="obsolete">
<p>
`過去互換~mode$の下では、
`nowrap$tdth 属性を有する［
`td$e ／ `th$e
］要素の `width$tdth 属性 %属性 は、
次の`対応付け規則$の下で，要素の
`white-space$p ~prop用の`呈示~用~hintとして扱う$ことが期待される
⇒
~RET
`非~zero寸法~値として構文解析する$( %属性 の値 )
の結果に応じて
⇒＃
`失敗^i ならば ε ／
~ELSE_ 結果の種別に応じて⇒＃
`百分率^i ならば ε ／
`長さ^i ならば `normal^v
</p>

<p>
これは、
上の~CSS~block内のそれを `nowrap^v に設定する規則
（ `td[nowrap], th[nowrap] { ... }^css ）
を上書きする。
</p>
◎
In quirks mode, a td element or a th element that has a nowrap attribute but also has a width attribute whose value, when parsed using the rules for parsing nonzero dimension values, is found to be a length (not an error or a number classified as a percentage), is expected to have a presentational hint setting the element's 'white-space' property to 'normal', overriding the rule in the CSS block above that sets it to 'nowrap'.
</div>【！obs】

			</section>
			<section id="margin-collapsing-quirks">
<h4 title="Margin collapsing quirks">15.3.9. 過去互換~用の~margin相殺-法</h4>

<p>
`~substantial@
な~nodeとは、［
`要素間~空白$でない~text~node／要素~node
］を指す。
◎
A node is substantial if it is a text node that is not inter-element whitespace, or if it is an element node.
</p>
【！要素間~空白 ／ comment ／ PI ／ doctype ／ frag ／ doc ／ ele】

<p>
`~substantial$な~nodeを包含しない要素は、
`~blank@
であるとされる。
◎
A node is blank if it is an element that contains no substantial nodes.
</p>

<p>
次に挙げる要素は、
`既定の~marginを伴う@
とされる
⇒
`blockquote$e,
`dir$e,
`dl$e,
`h1$e,
`h2$e,
`h3$e,
`h4$e,
`h5$e,
`h6$e,
`listing$e,
`menu$e,
`ol$e,
`p$e,
`plaintext$e,
`pre$e,
`ul$e,
`xmp$e
◎
The elements with default margins are the following elements: blockquote, dir, dl, h1, h2, h3, h4, h5, h6, listing, menu, ol, p, plaintext, pre, ul, xmp
</p>

<p>
`過去互換~mode$の下では，要素のうち［［
`body$e ／ `td$e ／ `th$e
］要素の`子$である, かつ`既定の~marginを伴う$もの
］に対しては、［
次の表tの 1 列目に示される条件を満たす
］ならば，`~UA~level$の~stylesheet内に［
同じ行の 2 列目に示される~margin~propを 0 に設定する規則
］が在ることが期待される：
◎
↓</p>

<table><tbody><tr><td>
先行する`~substantial$な同胞は無い
◎
In quirks mode, any element with default margins that is the child of a body, td, or th element and has no substantial previous siblings is expected to have a user-agent level style sheet rule that sets its 'margin-block-start' property to zero.
<td>`margin-block-start$p

<tr><td>
先行する`~substantial$な同胞は無い, かつ`~blank$である
◎
In quirks mode, any element with default margins that is the child of a body, td, or th element, has no substantial previous siblings, and is blank, is expected to have a user-agent level style sheet rule that sets its 'margin-block-end' property to zero also.
<td>`margin-block-end$p

<tr><td>
後続する`~substantial$な同胞は無い, かつ`~blank$である
◎
In quirks mode, any element with default margins that is the child of a td or th element, has no substantial following siblings, and is blank, is expected to have a user-agent level style sheet rule that sets its 'margin-block-start' property to zero.
<td>`margin-block-start$p

<tr><td>
後続する`~substantial$な同胞は無い, かつ `p$e 要素である
◎
In quirks mode, any p element that is the child of a td or th element and has no substantial following siblings, is expected to have a user-agent level style sheet rule that sets its 'margin-block-end' property to zero.

<td>`margin-block-end$p
</table>

			</section>
			<section id="form-controls">
<h4 title="Form controls">15.3.10. ~form~control</h4>

<pre class="lang-css">
@namespace "http://www.w3.org/1999/xhtml";

input,
select,
button,
textarea {
  letter-spacing: initial;
  word-spacing: initial;
  line-height: initial;
  text-transform: initial;
  text-indent: initial;
  text-shadow: initial;
  appearance: auto;
}

input:not([type=image i],
[type=range i],
[type=checkbox i],
[type=radio i]) {
  overflow: clip !important;
  overflow-clip-margin: 0 !important;
}

input,
select,
textarea {
  text-align: initial;
}

:autofill {
  field-sizing: fixed !important;
}

input:is([type=reset i], [type=button i], [type=submit i]),
button {
  text-align: center;
}

input,
button {
  display: inline-block;
}

input[type=hidden i],
input[type=file i],
input[type=image i] {
  appearance: none;
}

input:is([type=radio i], [type=checkbox i], [type=reset i], [type=button i], [type=submit i], [type=color i], [type=search i]),
select,
button {
  box-sizing: border-box;
}

textarea {
  white-space: pre-wrap;
}
</pre>

<p>
`過去互換~mode$の下では、
次の規則も適用することが期待される：
◎
In quirks mode, the following rules are also expected to apply:
</p>

<pre class="lang-css">
@namespace "http://www.w3.org/1999/xhtml";

input:not([type=image i]),
textarea {
  box-sizing: border-box;
}
</pre>

<p>
各種~form~controlの見かけと感触（ `look and feel^en ）は、
`§ 各種~widget＠#widgets$に述べられる。
◎
Each kind of form control is also described in the Widgets section, which describes the look and feel of the control.
</p>

<p>
次を満たす `input$e 要素は、
その`内縁~表示~型$が `flow-root^v になるものとして動作することが期待される
⇒
［
その `type$input 属性の状態 ~NIN { `Hidden$st, `Image$st }
］~AND［
`具現化されて$いる
］
◎
For input elements where the type attribute is not in the Hidden state or the Image Button state, and that are being rendered, are expected to act as follows:
• The inner display type is always 'flow-root'.
</p>

			</section>
			<section id="the-hr-element-2">
<h4 title="The hr element">15.3.11. `hr^e 要素</h4>

<pre class="lang-css">
@namespace "http://www.w3.org/1999/xhtml";

hr {
  color: gray;
  border-style: inset;
  border-width: 1px;
  margin-block: 0.5em;
  margin-inline: auto;
  overflow: hidden;
}
</pre>

<div class="obsolete">
<p>
次の規則も`呈示~用~hint$として適用することが期待される：
◎
The following rules are also expected to apply, as presentational hints:
</p>

<pre class="lang-css">
@namespace "http://www.w3.org/1999/xhtml";

hr[align=left i] {
  margin-left: 0;
  margin-right: auto;
}
hr[align=right i] {
  margin-left: auto;
  margin-right: 0;
}
hr[align=center i] {
  margin-left: auto;
  margin-right: auto;
}
hr[color],
hr[noshade] {
  border-style: solid;
}
</pre>

<p>
`hr$e 要素の `size$A 属性は：
◎
↓</p>
<ul class="switch">
	<li>
要素は［
`color$A, `noshade$A
］いずれかの属性を有する場合
⇒
次の`対応付け規則$の下で，要素の［
`border-top-width$p,
`border-right-width$p,
`border-bottom-width$p,
`border-left-width$p
］~prop用の`呈示~用~hintとして扱う$ことが期待される
⇒
先ず，`負でない整数に対応付ける$
— その結果に応じて，次を返す
⇒＃
ε ならば ε ／
~ELSE_ `~pixel単位$による，結果を 2 で除算した結果
◎
If an hr element has either a color attribute or a noshade attribute, and furthermore also has a size attribute, and parsing that attribute's value using the rules for parsing non-negative integers doesn't generate an error, then the user agent is expected to use the parsed value divided by two as a pixel length for presentational hints for the properties 'border-top-width', 'border-right-width', 'border-bottom-width', and 'border-left-width' on the element.
</li>
	<li>
<p>
他の場合：
</p>
		<ul>
			<li>
次の`対応付け規則$の下で，要素の
`border-bottom-width$p ~prop用の`呈示~用~hintとして扱う$ことが期待される
⇒
先ず，`負でない整数に対応付ける$
— その結果に応じて，次を返す
⇒＃
1 ならば `0^v ／
~ELSE_ ε
</li>
			<li>
次の`対応付け規則$の下で，要素の
`height$p ~prop用の`呈示~用~hintとして扱う$ことが期待される
⇒
先ず，`負でない整数に対応付ける$
— その結果に応じて，次を返す
⇒＃
ε ならば ε ／
~ELSE_ 結果 ~LTE 1 ならば ε ／ 
~ELSE_ `~pixel単位$による ( 結果 − 2 )
</li>
		</ul>
◎
Otherwise, if an hr element has neither a color attribute nor a noshade attribute, but does have a size attribute, and parsing that attribute's value using the rules for parsing non-negative integers doesn't generate an error, then: if the parsed value is one, then the user agent is expected to use the attribute as a presentational hint setting the element's 'border-bottom-width' to 0; otherwise, if the parsed value is greater than one, then the user agent is expected to use the parsed value minus two as a pixel length for presentational hints for the 'height' property on the element.
</li>
</ul>

<p>
`hr$e 要素の `width$A 属性は、
`寸法に対応付ける$下で，要素の
`width$p ~prop用の`呈示~用~hintとして扱う$ことが期待される。
◎
The width attribute on an hr element maps to the dimension property 'width' on the element.
</p>

<p>
`hr$e 要素の `color$A 属性は、
`色~値に対応付ける$下で，要素の
`color$p ~prop用の`呈示~用~hintとして扱う$ことが期待される。
◎
When an hr element has a color attribute, its value is expected to be parsed using the rules for parsing a legacy color value, and if that does not return failure, the user agent is expected to treat the attribute as a presentational hint setting the element's 'color' property to the resulting color.
</p>

</div>【！obs】

			</section>
			<section id="the-fieldset-and-legend-elements">
<h4 title="The fieldset and legend elements">15.3.12. `fieldset^e, `legend^e 要素</h4>

<pre class="lang-css">
@namespace "http://www.w3.org/1999/xhtml";

fieldset {
  display: block;
  margin-inline: 2px;
  border: groove 2px ThreeDFace;
  padding-block: 0.35em;
  padding-inline: 0.75em;
  min-inline-size: min-content;
}

legend {
  padding-inline: 2px;
}
</pre>

<pre class="lang-css obsolete">
legend[align=left i] {
  justify-self: left;
}

legend[align=center i] {
  justify-self: center;
}

legend[align=right i] {
  justify-self: right;
}
</pre>

<p>
`fieldset$e 要素は、
`~CSS~box$を生成するならば，以下に従って動作することが期待される
— 以下、
%~fieldset はこの~boxを指すとする：
◎
The fieldset element, when it generates a CSS box, is expected to act as follows:
</p>
<ul>
	<li>
%~fieldset は、
新たな`塊~整形~文脈$を確立する。
◎
The element is expected to establish a new block formatting context.
</li>
	<li>
<p>
%~fieldset の `display$p ~propは、［
その`算出d値$による`外縁~表示~型$は `inline^v になるならば `inline-block^v として ／
他の場合は `flow-root^v として
］挙動する。
◎
The 'display' property is expected to act as follows:
• If the computed value of 'display' is a value such that the outer display type is 'inline', then behave as 'inline-block'.
• Otherwise, behave as 'flow-root'.
</p>

<p class="note">注記：
これは、
算出d値を変更しない。
◎
This does not change the computed value.
</p>
	</li>
	<li>
<p>
%~fieldset にて
`具現化される~legend@
は、［
%~fieldset の子~boxのうち， ~AND↓ を満たすもの
］が在るならば，それらのうち最初のもの【が生成する~box】を指すとする：
◎
If the element's box has a child box that matches the conditions in the list below, then the first such child box is the 'fieldset' element's rendered legend:
</p>
		<ul>
			<li>
子は `legend$e 要素である
◎
The child is a legend element.
</li>
			<li>
子の `float$p の使用~値 ~EQ `none^v
◎
The child's used value of 'float' is 'none'.
</li>
			<li>
子の `position$p の使用~値 ~NIN { `absolute^v, `fixed^v }
【この条件から、子は，~DOM~treeにおいても %~fieldset を生成した `fieldset^e 要素の子であることになる。】
◎
The child's used value of 'position' is not 'absolute' or 'fixed'.
</li>
		</ul>
	</li>
	<li>
<p>
以下、
%~legend は %~fieldset にて`具現化される~legend$を指すとする。
%~legend が在る場合、
次に従うことが期待される：
◎
↓</p>
		<ul>
			<li>
%~fieldset の~borderは，次に与える各~辺が成す矩形の背後には塗らない
⇒
%~legend の`~margin~box$の［
`塊-始端$, `塊-終端$
］辺,
%~legend の`~border~box$の［
`行内-始端$, `行内-終端$
］辺
— ここで，各~側は %~fieldset の`書字~mode$の下で解釈する
◎
If the element has a rendered legend, then the border is expected to not be painted behind the rectangle defined as follows, using the writing mode of the fieldset:
• The block-start edge of the rectangle is the smaller of the block-start edge of the rendered legend's margin rectangle at its static position (ignoring transforms), and the block-start outer edge of the fieldset's border.
• The block-end edge of the rectangle is the larger of the block-end edge of the rendered legend's margin rectangle at its static position (ignoring transforms), and the block-end outer edge of the fieldset's border.
• The inline-start edge of the rectangle is the smaller of the inline-start edge of the rendered legend's border rectangle at its static position (ignoring transforms), and the inline-start outer edge of the fieldset's border.
• The inline-end edge of the rectangle is the larger of the inline-end edge of the rendered legend's border rectangle at its static position (ignoring transforms), and the inline-end outer edge of the fieldset's border.
</li>
			<li>
%~fieldset の`~border~box$の塊-始端~側に割振られる空間は、
次のうち広い方にする
⇒＃
%~fieldset の `border-block-start-width$p,
%~legend の`~margin~box$の［ %~fieldset の塊-~flow方向 ］における~size
◎
The space allocated for the element's border on the block-start side is expected to be the element's 'border-block-start-width' or the rendered legend's margin box size in the fieldset's block-flow direction, whichever is greater.
</li>
			<li>
%~fieldset の `block-size$p の使用~値を計算する目的においては、［
その`算出d値$ ~NEQ `auto^v
］であって［
%~legend の~margin~boxが
%~fieldset の~borderを過ぎて溢れる
］場合には、
`block-size$p から溢れる分に割振られる空間を減算した上で，`内容~box$の塊-~sizeが 0 以上になるよう切り上げる。
◎
For the purpose of calculating the used 'block-size', if the computed 'block-size' is not 'auto', the space allocated for the rendered legend's margin box that spills out past the border, if any, is expected to be subtracted from the 'block-size'. If the content box's block-size would be negative, then let the content box's block-size be zero instead.
</li>
			<li>
%~legend は， %~fieldset の最初の子~boxになる。
◎
If the element has a rendered legend, then that element is expected to be the first child box.
</li>
		</ul>
	<li>
<p>
%~fieldset の`匿名な~fieldset内容~box$は、
次に従うことが期待される：
</p>
		<ul>
			<li>
%~legend が在れば それより後に現れる。
</li>
			<li>
%~legend を除く %~fieldset の内容（ `before^pe, `after^pe 疑似要素も含む）が在るならば それを包含する。
</li>
		</ul>
◎
The anonymous fieldset content box is expected to appear after the rendered legend and is expected to contain the content (including the '::before' and '::after' pseudo-elements) of the fieldset element except for the rendered legend, if there is one.
</li>
	<li>
%~fieldset の［
`padding-top$p,
`padding-right$p,
`padding-bottom$p,
`padding-left$p
］~propの使用~値は、
すべて 0 にする。
◎
The used value of the 'padding-top', 'padding-right', 'padding-bottom', and 'padding-left' properties are expected to be zero.
</li>
	<li>
%~fieldset の`最小-内容 行内~size$を計算する目的においては、
次のうち広い方を利用する
⇒＃
%~legend の`最小-内容 行内~size$,
`匿名な~fieldset内容~box$の`最小-内容 行内~size$
◎
For the purpose of calculating the min-content inline size, use the greater of the min-content inline size of the rendered legend and the min-content inline size of the anonymous fieldset content box.
</li>
	<li>
%~fieldset の`最大-内容 行内~size$を計算する目的においては、
次のうち広い方を利用する
⇒＃
%~legend の`最大-内容 行内~size$,
`匿名な~fieldset内容~box$の`最大-内容 行内~size$
◎
For the purpose of calculating the max-content inline size, use the greater of the max-content inline size of the rendered legend and the max-content inline size of the anonymous fieldset content box.
</li>
</ul>

<p>
`fieldset$e 要素が生成する~box %~fieldset にて`具現化される~legend$ %~legend が在る場合、
%~legend は次に従って動作することが期待される：
◎
A fieldset element's rendered legend, if any, is expected to act as follows:
</p>
<ul>
	<li>
%~legend は、
自身の内容~用に新たな`整形~文脈$を確立する。
この整形~文脈の`表示~型$は、
通例通り， %~legend の `display$p 値から決定される。
◎
The element is expected to establish a new formatting context for its contents. The type of this formatting context is determined by its 'display' value, as usual.
</li>
	<li>
<p>
%~legend の `display$p ~propの`算出d値$は、
`塊~化$されたかのように挙動する。
◎
The 'display' property is expected to behave as if its computed value was blockified.
</p>

<p class="note">注記：
これは、
算出d値を変更しない。
◎
This does not change the computed value.
</p>
	</li>
	<li>
%~legend の `inline-size$p の`算出d値$が `auto^v の場合、
`使用~値$は`内容が収まる行内~size$になる。
◎
If the computed value of 'inline-size' is 'auto', then the used value is the fit-content inline size.
</li>
	<li>
%~legend は、
行内~方向においては，通常の塊に対するとき同じように位置する
（例： ~margin, `justify-self$p ~propを織り込む）。
◎
The element is expected to be positioned in the inline direction as is normal for blocks (e.g., taking into account margins and the 'justify-self' property).
</li>
	<li>
<p>
%~legend は、
行内~方向において %~fieldset の行内~sizeで拘束する
— %~fieldset に算出された行内~方向の~paddingを利用しているかのように。
◎
The element's box is expected to be constrained in the inline direction by the inline content size of the fieldset as if it had used its computed inline padding.
</p>

<p class="example">
例えば， %~fieldset の~paddingに `50px^v が指定された場合、
%~legend は行内~方向において %~fieldset の~borderから内へ `50px^v の所に位置することになる。
加えて、
%~fieldset の~paddingは`匿名な~fieldset内容~box$にも
— %~fieldset 自身に代えて —
適用される。
◎
For example, if the fieldset has a specified padding of 50px, then the rendered legend will be positioned 50px in from the fieldset's border. The padding will further apply to the anonymous fieldset content box instead of the fieldset element itself.
</p>

	</li>
	<li>
%~legend の`~border~box$は、
%~fieldset の塊-始端~側の~borderの上層に，塊-~flow方向において中央寄せに位置させる。
◎
The element is expected to be positioned in the block-flow direction such that its border box is centered over the border on the block-start side of the fieldset element.
</li>
</ul>

<p>
`fieldset$e 要素の
`匿名な~fieldset内容~box@
は、
次に従って動作することが期待される：
◎
A fieldset element's anonymous fieldset content box is expected to act as follows:
</p>
<ul>
	<li>
`display$p ~propの使用~値は、
その`算出d値$に応じて，次に与える値にする
⇒＃
`grid^v ならば `grid^v ／
`inline-grid^v ならば `grid^v ／
`flex^v ならば `flex^v ／
`inline-flex^v ならば `flex^v ／
~ELSE_ `flow-root^v
◎
The 'display' property is expected to act as follows:
• If the computed value of 'display' on the fieldset element is 'grid' or 'inline-grid', then set the used value to 'grid'.
• If the computed value of 'display' on the fieldset element is 'flex' or 'inline-flex', then set the used value to 'flex'.
• Otherwise, set the used value to 'flow-root'.
</li>
	<li>
`fieldset$e 要素から，次に挙げる~propを継承する
⇒＃
`align-content$p,
`align-items$p,
`border-radius$p,
`column-count$p,
`column-fill$p,
`column-gap$p,
`column-rule$p,
`column-width$p,
`flex-direction$p,
`flex-wrap$p,
`grid-auto-columns$p,
`grid-auto-flow$p,
`grid-auto-rows$p,
`grid-column-gap$p,
`grid-row-gap$p,
`grid-template-areas$p,
`grid-template-columns$p,
`grid-template-rows$p,
`justify-content$p,
`justify-items$p,
`overflow$p,
`padding-bottom$p,
`padding-left$p,
`padding-right$p,
`padding-top$p,
`text-overflow$p,
`unicode-bidi$p
◎
The following properties are expected to inherit from the fieldset element:
• 'align-content'
• 'align-items'
• 'border-radius'
• 'column-count'
• 'column-fill'
• 'column-gap'
• 'column-rule'
• 'column-width'
• 'flex-direction'
• 'flex-wrap'
• 'grid-auto-columns'
• 'grid-auto-flow'
• 'grid-auto-rows'
• 'grid-column-gap'
• 'grid-row-gap'
• 'grid-template-areas'
• 'grid-template-columns'
• 'grid-template-rows'
• 'justify-content'
• 'justify-items'
• 'overflow'
• 'padding-bottom'
• 'padding-left'
• 'padding-right'
• 'padding-top'
• 'text-overflow'
• 'unicode-bidi'
</li>
	<li>
`block-size$p ~propは `100%^v に設定する。
◎
The 'block-size' property is expected to be set to '100%'.
</li>
	<li>
百分率による~paddingを計算する目的においては、
~paddingは
`fieldset$e 要素~用に計算されたかのように動作する。
◎
For the purpose of calculating percentage padding, act as if the padding was calculated for the fieldset element.
</li>
</ul>

<div id="fieldset-layout-model" class="example">
<p>
~fieldsetと~legendの~layout例
（横組みの場合）：
</p>
<figure>
<div
	id="_ex-fieldset-layout-model"
	role="img"
	aria-label="~fieldset~layout~model"
>
<svg
	xmlns="http://www.w3.org/2000/svg"
	viewBox="0 0 450 300"
>
<defs>
	<marker markerHeight="4" id="_arrow-head" orient="auto" markerWidth="5" refX="0.1" refY="2">
<path fill="context-stroke" d="M0,0 V4 L5,2 Z"></path>
	</marker>
</defs>
	<g stroke="var(--B-color)">
<path d="m40,140 h-28"></path>
<path d="m410,140 h28"></path>
<path d="m220,40 v-28"></path>
<path d="m220,260 v26"></path>
	</g>
	<g stroke="var(--R-color)">
<path d="m100,90 h-25"></path>
<path d="m225,90 h140"></path>
<path d="m165,75 v-25"></path>
<path d="m165,135 v25"></path>
	</g>
</svg>

	<div>
		<div style="top:-2em; left:200px; color: var(--B-color);">~fieldsetの~margin</div>
		<div style="bottom:1px; left:1px; right:1px; height:140px; border:solid 2px var(--B-color);">
<div style="bottom:1px; left:1px; right:1px; height:80px; border:dashed 2px var(--dim-color);">
<div style="right:0; top:-1.7em;">匿名な~fieldset内容~box</div>
<div style="background:var(--W-color); border:solid 20px var(--pale-color); left:0; right:0; top:0; bottom:0;">内容</div>
<div style="right:0; top:0; color: var(--dim-color);">~padding</div>
			</div>
		</div>

		<div style="left:60px; top:25px; width:120px; height:70px; border:solid 2px var(--R-color);">
<div style="top:-0.2em; left:130px; color:var(--R-color);">~legendの~margin</div>
<div style="background:var(--W-color); color:var(--R-color); border:solid 20px var(--pale-color); left:0; right:0; top:0; bottom:0;">~legend</div>
<div style="right:0; top:0; color:var(--dim-color);">~padding</div>
		</div>
	</div>
</div>

<figcaption>
~legendは、
~fieldset上端~borderの上層に描画される
— 上端~border区画は，~legend用に縦方向の空間を予約する。
~fieldsetの上端~marginは、
~legendの上端~margin辺から開始する。
~legendの横方向~位置は、［
その横方向~marginまたは `justify-self$p ~prop
］から与えられる。
`匿名な~fieldset内容~box$は、
~legendの下に現れる。
◎
The legend is rendered over the top border, and the top border area reserves vertical space for the legend. The fieldset's top margin starts at the top margin edge of the legend. The legend's horizontal margins, or the 'justify-self' property, gives its horizontal position. The anonymous fieldset content box appears below the legend.
</figcaption></figure>
</div>

			</section>
		</section>
		<section id="replaced-elements">
<h3 title="Replaced elements">15.4. 置換d要素</h3>

<p class="note">注記：
次に挙げる要素は、
`置換d要素$になり得る
⇒
`audio$e,
`canvas$e,
`embed$e,
`iframe$e,
`img$e,
`input$e,
`object$e,
`video$e
◎
The following elements can be replaced elements: audio, canvas, embed, iframe, img, input, object, and video.
</p>

			<section id="embedded-content-rendering-rules">
<h4 title="Embedded content">15.4.1. 埋込d内容</h4>

<p>
［
`embed$e ／ `iframe$e ／ `video$e
］要素に対しては、
`置換d要素$として扱うことが期待される。
◎
The embed, iframe, and video elements are expected to be treated as replaced elements.
</p>

<p>
`canvas$e 要素は、
次に従うことが期待される：
◎
↓</p>
<ul>
	<li>
`埋込d内容$を`表現-$するものは、
次を伴う`置換d要素$として扱う
⇒＃
要素に内容があるならば，それが成す~bitmap ／
~ELSE_ 要素と同じ`生来な寸法$を伴う`透明な黒$にされた~bitmap
◎
A canvas element that represents embedded content is expected to be treated as a replaced element; the contents of such elements are the element's bitmap, if any, or else a transparent black bitmap with the same natural dimensions as the element.＼
</li>
	<li>
他のものは、
具現化~modelにおける普通の要素として扱う。
◎
Other canvas elements are expected to be treated as ordinary elements in the rendering model.
</li>
</ul>

<p>
`object$e 要素は、
次に従うことが期待される：
◎
↓</p>
<ul>
	<li>
［
画像 ／ ~plugin ／ 要素の`内容~navigable$
］を`表現-$するものは、
`置換d要素$として扱う。
◎
An object element that represents an image, plugin, or its content navigable is expected to be treated as a replaced element.＼
</li>
	<li>
他のものは、
具現化~modelにおける普通の要素として扱う。
◎
Other object elements are expected to be treated as ordinary elements in the rendering model.
</li>
</ul>

<p>
`audio$e 要素は、
次に従うことが期待される：
◎
↓</p>
<ul>
	<li>
`~UIを公開し$ているものは、［
およそ一行分の高さ，~UAの~UI特能を公開するために必要yな幅
］にされた`置換d要素$として扱う。
◎
The audio element, when it is exposing a user interface, is expected to be treated as a replaced element about one line high, as wide as is necessary to expose the user agent's user interface features.＼
</li>
	<li>
他のものは、
~CSS規則が何であれ，［
その `display$p ~propは `none^v に算出される
］よう強制する。
◎
When an audio element is not exposing a user interface, the user agent is expected to force its 'display' property to compute to 'none', irrespective of CSS rules.
</li>
</ul>

<p>
`video$e 要素は、
次に従うことが期待される：
◎
↓</p>
<ul>
	<li>
`~UIを公開し$ているかどうかに関わらず，具現化の~sizeに影響させる
⇒
~controlは，~layoutを変更することなく，~page内容の上層に重ねることに加え、
利用者がそれらを必要しないときは消す。
◎
Whether a video element is exposing a user interface is not expected to affect the size of the rendering; controls are expected to be overlaid above the page content without causing any layout changes, and are expected to disappear when the user does not need them.
</li>
	<li>
［
~poster~frame／動画の~frame
］表現するものは
⇒
次を満たす最~大な~sizeに具現化した上で、
要素~内で中央する
⇒
その~frameは，その縦横比を保守する, かつ
要素~自身の~sizeを縦横とも超えない
◎
When a video element represents a poster frame or frame of video, the poster frame or frame of video is expected to be rendered at the largest size that maintains the aspect ratio of that poster frame or frame of video without being taller or wider than the video element itself, and is expected to be centered in the video element.
</li>
	<li>
要素の［
字幕／~caption
］は
⇒
~WebVTTに関連な具現化~規則に定義されるとおりに，要素の上層に直に重ねる
— ~WebVTTに対しては、
`~WebVTT~tTの表示を更新するための規則$に従う。
`WEBVTT$r
◎
Any subtitles or captions are expected to be overlaid directly on top of their video element, as defined by the relevant rendering rules; for WebVTT, those are the rules for updating the display of WebVTT text tracks. [WEBVTT]
</li>
</ul>

<p>
~UAが `video$e 要素~用の`~UIを公開し$始めるときは
⇒
要素の`~tT~list$内の各`~tT$のうち，［
`示されている$, かつ
その`種類$tTは［
`subtitles$l, `captions$l
］いずれかであるもの
］に対しては、
`~tTの具現化を更新するための規則$を走らすべきである
（例えば，~WebVTT基づく`~tT$に対しては、
`~WebVTT~tTの表示を更新するための規則$に従う `WEBVTT$r ）。
◎
When the user agent starts exposing a user interface for a video element, the user agent should run the rules for updating the text track rendering of each of the text tracks in the video element's list of text tracks that are showing and whose text track kind is one of subtitles or captions (e.g., for text tracks based on WebVTT, the rules for updating the display of WebVTT text tracks). [WEBVTT]
</p>

<p class="note">注記：
`video$e ／ `canvas$e
要素が~resizeされても，動画~再生が中断されたり, ~canvasが~clearされることはない。
◎
Resizing video and canvas elements does not interrupt video playback or clear the canvas.
</p>

<hr>

<p>
次の~CSS規則を適用することが期待される：
◎
The following CSS rules are expected to apply:
</p>

<pre class="lang-css">
@namespace "http://www.w3.org/1999/xhtml";

iframe {
  border: 2px inset;
}
<span id="video-object-fit">video {
  object-fit: contain;
}</span>
</pre>

			</section>
			<section id="images-3">
<h4 title="Images">15.4.2. 画像</h4>

<p>
［
`img$e ／［
`type$input 属性が `Image$st 状態にある `input$e
］］要素 %要素 に対しては、［
次に挙げる規則のうち，最初に該当するもの
］に則って具現化することが期待される：
◎
User agents are expected to render img elements and input elements whose type attributes are in the Image Button state, according to the first applicable rules from the following list:
</p>

<ol class="switch">
	<li>
<p>
%要素 は画像を`表現-$する場合：
◎
If the element represents an image
• The user agent is expected to＼
</p>
		<ul>
			<li>
%要素 を`置換d要素$として扱う。
◎
treat the element as a replaced element and＼
</li>
			<li>
当の画像を~CSSにて定義される規則に則って具現化する。
◎
render the image according to the rules for doing so defined in CSS.
</li>
		</ul>
</li>
	<li>
<p>
%要素 は［
画像を`表現-$しない
］~AND［
~OR↓ が満たされる
］場合…
◎
If the element does not represent an image and either: 
</p>
		<ul>
			<li>
`画像は可用$になり，やがて具現化されると予見できる理由がある。
◎
the user agent has reason to believe that the image will become available and be rendered in due course, or
</li>
			<li>
%要素 は `alt^a 属性を有さない。
◎
the element has no alt attribute, or
</li>
			<li>
［
当の`文書$【 %要素 の`~node文書$】は`過去互換~mode$の下にある
］~AND［
%要素 はすでに`生来な寸法$を有する
（例： `寸法~属性$または~CSS規則から）
］
◎
the Document is in quirks mode, and the element already has natural dimensions (e.g., from the dimension attributes or CSS rules)
</li>
		</ul>
<p>
…場合：
◎
The user agent is expected to＼
</p>
		<ul>
			<li>
%要素 を それが表現する~text（もしあれば）を内容に伴う`置換d要素$として扱う。
◎
treat the element as a replaced element whose content is the text that the element represents, if any,＼
</li>
			<li>
適用-可能なら、
任意選択で，画像が得されつつあることを指示している~iconも伴わせる。
◎
optionally alongside an icon indicating that the image is being obtained (if applicable).＼
</li>
			<li>
%要素 が `input$e 要素である場合は、
%要素 が`~button$であることを指示するよう，
%要素 を~buttonの様に現れさせる。
◎
For input elements, the element is expected to appear button-like to indicate that the element is a button.
</li>
		</ul>
	</li>
	<li>
<p>
%要素 は何らかの~textを`表現-$する `img$e 要素であり，
~UAはそれが変化しないものと予期する場合：
◎
If the element is an img element that represents some text and the user agent does not expect this to change
• The user agent is expected to＼
</p>
		<ul>
			<li>
%要素 を当の~textを内容に伴う［
非置換~要素かつ`句ng内容$
］として扱う。
◎
treat the element as a non-replaced phrasing element whose content is the text,＼
</li>
			<li>
任意選択で、
画像が見つからないことを指示する~iconを伴わせた上で，
利用者が［
画像を表示させる, または なぜ具現化されないか究明する
］ことを要請できるようにする。
非~graphicな文脈~下では、
そのような~iconは，省略するベキである。
◎
optionally with an icon indicating that an image is missing, so that the user can request the image be displayed or investigate why it is not rendering. In non-graphical contexts, such an icon should be omitted.
</li>
		</ul>
	</li>
	<li>
<p>
%要素 は何も`表現-$しない `img$e 要素であり，~UAはそれが変化しないものと予期する場合：
◎
If the element is an img element that represents nothing and the user agent does not expect this to change
• The user agent is expected to＼
</p>
		<ul>
			<li>
%要素 を`置換d要素$として扱う。
◎
treat the element as a replaced element＼
</li>
			<li>
%要素 の`生来な寸法$は縦横とも 0 にする
（他の~styleが無い下では、
本質的に， %要素 を具現化させなくすることになる）。
◎
whose natural dimensions are 0. (In the absence of further styles, this will cause the element to essentially not be rendered.)
</li>
		</ul>
	</li>
	<li>
<p>
%要素 は画像を`表現-$しない `input$e 要素であり，~UAはそれが変化しないものと予期する場合：
◎
If the element is an input element that does not represent an image and the user agent does not expect this to change
• The user agent is expected to＼
</p>
		<ul>
			<li>
%要素 を［
%要素 の代替~textを内容に伴う 1 個の~button
］からなる`置換d要素$として扱う。
◎
treat the element as a replaced element consisting of a button whose content is the element's alternative text.＼
</li>
			<li>
%要素 の`生来な寸法$は［
縦幅は一行分,
横幅は~textを一行分に具現化するために必要yな~size
］にする。
◎
The natural dimensions of the button are expected to be about one line in height and whatever width is necessary to render the text on one line.
</li>
		</ul>
	</li>
</ol>

<p>
上で述べた~iconは、
相対的に小さくすることが期待される
— 前後の~textを ほぼ~~途切れさせないが，容易に~click可能な~~程度に。
一例として、
視覚的な環境における~iconの大きさは，［
16 ~pixel平方,
あるいは画像が拡縮-可能ならば 1em 平方
］にもできる。
音声~環境における~iconは，短い~bleepにもできる。
~iconに意図されるのは、［
何であれ，~UAが画像~用に供する選択肢として利用できるようになるもの
］を利用者に指示することである
— 適切になる所では、［
利用者が実際の画像とヤリトリしたとき~~現れる，文脈~menu
］への~accessを供することが期待される。
◎
The icons mentioned above are expected to be relatively small so as not to disrupt most text but be easily clickable. In a visual environment, for instance, icons could be 16 pixels by 16 pixels square, or 1em by 1em if the images are scalable. In an audio environment, the icon could be a short bleep. The icons are intended to indicate to the user that they can be used to get to whatever options the UA provides for images, and, where appropriate, are expected to provide access to the context menu that would have come up if the user interacted with the actual image.
</p>

<hr>

<p>
`img$e 要素のうち，~animate化~画像を示すものは、
次に従うことが期待される：
◎
↓</p>
<ul>
	<li>
<p>
複数の画像が［
同じ`絶対~URL$, 同じ画像~data
］を伴う場合、
それらを同じ時列線に同期するように具現化する
— そのような同じ画像が後から追加されたときは、
先行の画像にて現在~表示されている~animation~frameから~animateし始める。
◎
All animated images with the same absolute URL and the same image data are expected to be rendered synchronized to the same timeline as a group, with the timeline starting at the time of the least recent addition to the group.
◎
In other words, when a second image with the same absolute URL and animated image data is inserted into a document, it jumps to the point in the animation cycle that is currently being displayed by the first image.
</p>
	</li>
	<li>
`~animationを開始し直す@
ときは、
所与の
( `img$e 要素 %要素 )
に対し， %要素 の`~node文書$内の［
%要素 と同じ`絶対~URL$, 同じ画像~dataを伴うような ~animate化~画像
］すべてに対し，それらの~animationを始めから一斉に開始し直す。
◎
When a user agent is to restart the animation for an img element showing an animated image, all animated images with the same absolute URL and the same image data in that img element's node document are expected to restart their animation from the beginning.
</li>
</ul>

<hr>

<p id="img-contain-size">
次の~CSS規則を適用することが期待される：
◎
The following CSS rules are expected to apply:
</p>

<pre class="lang-css">
@namespace "http://www.w3.org/1999/xhtml";

img:is([sizes="auto" i], [sizes^="auto," i]) {
  contain: size !important;
  contain-intrinsic-size: 300px 150px;
}
</pre>

<p>
`過去互換~mode$の下では、
次の~CSS規則も適用することが期待される：
◎
The following CSS rules are expected to apply when the Document is in quirks mode:
</p>

<pre class="lang-css">
@namespace "http://www.w3.org/1999/xhtml";

img[align=left i] {
  margin-right: 3px;
}
img[align=right i] {
  margin-left: 3px;
}
</pre>

			</section>
			<section id="attributes-for-embedded-content-and-images">
<h4 title="Attributes for embedded content and images">15.4.3. 埋込d内容／画像~用の属性</h4>

<div class="obsolete">
<p>
次の~CSS規則は、
`呈示~用~hint$として適用することが期待される：
◎
The following CSS rules are expected to apply as presentational hints:
</p>

<pre class="lang-css">
@namespace "http://www.w3.org/1999/xhtml";

embed[align=left i],
iframe[align=left i],
img[align=left i],
input[type=image i][align=left i],
object[align=left i] {
  float: left;
}

embed[align=right i],
iframe[align=right i],
img[align=right i],
input[type=image i][align=right i],
object[align=right i] {
  float: right;
}

embed[align=top i],
iframe[align=top i],
img[align=top i],
input[type=image i][align=top i],
object[align=top i] {
  vertical-align: top;
}

embed[align=baseline i],
iframe[align=baseline i],
img[align=baseline i],
input[type=image i][align=baseline i],
object[align=baseline i] {
  vertical-align: baseline;
}

embed[align=texttop i],
iframe[align=texttop i],
img[align=texttop i],
input[type=image i][align=texttop i],
object[align=texttop i] {
  vertical-align: text-top;
}

embed[align=absmiddle i],
iframe[align=absmiddle i],
img[align=absmiddle i],
input[type=image i][align=absmiddle i],
object[align=absmiddle i],
embed[align=abscenter i],
iframe[align=abscenter i],
img[align=abscenter i],
input[type=image i][align=abscenter i],
object[align=abscenter i] {
  vertical-align: middle;
}

embed[align=bottom i],
iframe[align=bottom i],
img[align=bottom i],
input[type=image i][align=bottom i],
object[align=bottom i] {
  vertical-align: bottom;
}
</pre>

<p>
［
`embed$e ／
`iframe$e ／
`img$e ／
`object$e ／
［
`type$input 属性が `Image$st 状態にある `input$e
］］要素は、
次に従うことが期待される
⇒
要素は `align^a 属性を有していて，その値 ~IN`大小無視$sub { `center^l, `middle^l } ならば、
要素の `vertical-align$p ~propが［
要素の縦方向 middle †と親~要素の基底線とを整列するような値
］に設定されていたかのように動作する††。
◎
When an embed, iframe, img, or object element, or an input element whose type attribute is in the Image Button state, has an align attribute whose value is an ASCII case-insensitive match for the string "center" or the string "middle", the user agent is expected to act as if the element's 'vertical-align' property was set to a value that aligns the vertical middle of the element with the parent element's baseline.
</p>

<p class="trans-note">【†
`vertical-align$p 用の `middle^v 値の定義とは、
異なっている。
】【††
“動作する” とは？
（`呈示~用~hintとして扱う$？）
】</p>

<p>
［
`embed$e ／
`img$e ／
`object$e ／
［
`type$input 属性が `Image$st 状態にある `input$e
］］要素は、
次に従うことが期待される：
◎
↓</p>
<ul>
	<li>
その `hspace^a 属性は、
`寸法に対応付ける$下で，要素の［
`margin-left$p, `margin-right$p
］~prop用の`呈示~用~hintとして扱う$。
◎
The hspace attribute of embed, img, or object elements, and input elements with a type attribute in the Image Button state, maps to the dimension properties 'margin-left' and 'margin-right' on the element.
</li>
	<li>
その `vspace^a 属性は、
`寸法に対応付ける$下で，要素の［
`margin-top$p, `margin-bottom$p
］~prop用の`呈示~用~hintとして扱う$。
◎
The vspace attribute of embed, img, or object elements, and input elements with a type attribute in the Image Button state, maps to the dimension properties 'margin-top' and 'margin-bottom' on the element.
</li>
</ul>

<p>
`iframe$e 要素の `frameborder$iframe 属性に対しては、
次の`対応付け規則$の下で，要素の［
`border-top-width$p,
`border-right-width$p,
`border-bottom-width$p,
`border-left-width$p
］~prop用の`呈示~用~hintとして扱う$ことが期待される
⇒
先ず，`整数として構文解析する$( 所与の値 )
— その結果に応じて，次を返す
⇒＃
0 ならば `0^v ／
`失敗^i ならば `0^v ／
~ELSE_ ε
◎
When an iframe element has a frameborder attribute whose value, when parsed using the rules for parsing integers, is zero or an error, the user agent is expected to have presentational hints setting the element's 'border-top-width', 'border-right-width', 'border-bottom-width', and 'border-left-width' properties to zero.
</p>

<div>
<p>
［
`img$e ／
`object$e ／ ［
`type$input 属性が `Image$st 状態にある `input$e
］］要素の `border^a 属性に対しては、
次に従うことが期待される：
</p>
<ul>
	<li>
次の`対応付け規則$の下で，要素の［
`border-top-width$p,
`border-right-width$p,
`border-bottom-width$p,
`border-left-width$p
］~prop用の`呈示~用~hintとして扱う$
⇒
先ず，`負でない整数に対応付ける$
— その結果に応じて，次を返す
⇒＃
ε ならば ε ／
~ELSE_ 結果 ~LTE 0 ならば ε ／
~ELSE_ `~pixel単位$による結果
</li>
	<li>
次の`対応付け規則$の下で，要素の［
`border-top-style$p,
`border-right-style$p,
`border-bottom-style$p ,
`border-left-style$p
］~prop用の`呈示~用~hintとして扱う$
⇒
先ず，`負でない整数に対応付ける$
— その結果に応じて，次を返す
⇒＃
ε ならば ε ／
~ELSE_ 結果 ~LTE 0 ならば ε ／
~ELSE_ `solid^v ／
</li>
</ul>

◎
When an img element, object element, or input element with a type attribute in the Image Button state has a border attribute whose value, when parsed using the rules for parsing non-negative integers, is found to be a number greater than zero, the user agent is expected to use the parsed value for eight presentational hints: four setting the parsed value as a pixel length for the element's 'border-top-width', 'border-right-width', 'border-bottom-width', and 'border-left-width' properties, and four setting the element's 'border-top-style', 'border-right-style', 'border-bottom-style', and 'border-left-style' properties to the value 'solid'.
</div>

</div>【！obs】

<p id="dimRendering">
`img$e 要素の`寸法~属性~source$の［
`width$a ／ `height$a
］属性は：
◎
The width and height attributes on an img element's dimension attribute source＼
</p>
<ul>
	<li>
`寸法に対応付ける$下で，要素の［
`width$p ／ `height$p
］~prop（同順）用の`呈示~用~hintとして扱う$ことが期待される。
◎
map to the dimension properties 'width' and 'height' on the img element respectively.＼
</li>
	<li>
（属性~pairとして）`寸法~規則を利用して縦横比に対応付ける$下で，要素の `aspect-ratio$p ~prop用の`呈示~用~hintとして扱う$ことが期待される。
◎
They similarly map to the aspect-ratio property (using dimension rules) of the img element.
</li>
</ul>

<p>
［
`embed$e ／
`iframe$e ／
`object$e／
`video$e ／［
`type$input 属性が `Image$st 状態にある `input$e
］］要素に対しては、
それが［
画像を表現するか，最終的に画像を表現することになると利用者が期待するもの【？】
］ならば
⇒
要素の［
`width$a ／ `height$a
］属性は、
`寸法に対応付ける$下で，要素の［
`width$p ／ `height$p
］~prop用の`呈示~用~hintとして扱う$ことが期待される。
◎
The width and height attributes on embed, iframe, object or video elements, and input elements with a type attribute in the Image Button state and that either represents an image or that the user expects will eventually represent an image, map to the dimension properties 'width' and 'height' on the element respectively.
</p>

<p>
［
`img$e ／
`video$e ／［
`type$input 属性が `Image$st 状態にある `input$e
］］要素に対しては
⇒
要素の［
`width$a, `height$a
］属性~pairは、
`寸法~規則を利用して縦横比に対応付ける$下で，要素の `aspect-ratio$p ~prop用の`呈示~用~hintとして扱う$ことが期待される。
◎
The width and height attributes map to the aspect-ratio property (using dimension rules) on img and video elements, and input elements with a type attribute in the Image Button state.
</p>

<p>
`canvas$e 要素に対しては
⇒
要素の［
`width$A, `height$A
］属性~pairは、
`縦横比に対応付ける$下で，要素の `aspect-ratio$p ~prop用の`呈示~用~hintとして扱う$ことが期待される。
◎
The width and height attributes map to the aspect-ratio property on canvas elements.
</p>

			</section>
			<section id="image-maps-2">
<h4 title="Image maps">15.4.4. 画像~map</h4>

<p>
`画像~map$上の各~図形は、
~CSS~cascadeの目的においては，［
その図形を定義する `area$e 要素と同じ~style規則に合致しつつ，当の画像を表現している［
`img$e ／ `object$e
］要素から継承する
］ように動作することが期待される。
◎
Shapes on an image map are expected to act, for the purpose of the CSS cascade, as elements independent of the original area element that happen to match the same style rules but inherit from the img or object element.
</p>

<p>
具現化の目的においては、
図形に効果を及ぼす~propは， `cursor$p に限られることが期待される。
◎
For the purposes of the rendering, only the 'cursor' property is expected to have any effect on the shape.
</p>

<p class="example">
したがって例えば、
`area$e 要素が［
`cursor$p ~propを `help^v に設定するような `style$a 属性
］を有する場合、
利用者がその図形を指したときの~cursorは、
`help^v に対応する~cursorに変化することになる。
◎
Thus, for example, if an area element has a style attribute that sets the 'cursor' property to 'help', then when the user designates that shape, the cursor would change to a Help cursor.
</p>

<p class="example">
同様に、
`area$e 要素の `cursor$p ~propを `inherit^v に設定する~CSS規則が在る
（または，そのような規則は無い）場合、
図形の~cursorは、
`画像~map$の［
`img$e ／ `object$e
］要素から継承されることになる
— `area$e 要素の親からではなく。
◎
Similarly, if an area element had a CSS rule that set its 'cursor' property to 'inherit' (or if no rule setting the 'cursor' property matched the element at all), the shape's cursor would be inherited from the img or object element of the image map, not from the parent of the area element.
</p>

			</section>
		</section>
		<section id="widgets">
<h3 title="Widgets">15.5. 各種~widget</h3> 

			<section id="native-appearance-2">
<h4 title="Native appearance">15.5.1 ~nativeな外観</h4>

<p>
`CSSUI$r 仕様は、
`~nativeな外観$を備え得る要素を`~widget$と呼び，
`~nativeな外観$を利用するかどうかは `appearance$p ~propに依存するものと定義する。
その~logicはまた、
そのような各~要素が［
`委譲-可能な~widget$, `委譲-不能な~widget$
］どちらに分類されるかに依存する。
この節は、
次を定義する：
◎
The CSS Basic User Interface specification calls elements that can have a native appearance widgets, and defines whether to use that native appearance depending on the 'appearance' property. That logic, in turn, depends on whether each the element is classified as a devolvable widget or non-devolvable widget. This section defines＼
</p>
<ul>
	<li>
~HTML用には、
どの要素がこれらの概念に合致するか
◎
which elements match these concepts for HTML,＼
</li>
	<li>
それらの`~nativeな外観$は何か
◎
what their native appearance is,＼
</li>
	<li>
それらのうちどれが，特に［
`委譲され$た状態／`~primitiveな外観$
］になるか
◎
and any particularity of their devolved state or primitive appearance. [CSSUI]
</li>
</ul>

<p>
`appearance$p ~propの目的においては、
次に挙げる要素が`~nativeな外観$を備え得るとされる
⇒＃
`button$e,
`input$e,
`meter$e,
`progress$e,
`select$e,
`textarea$e
◎
The following elements can have a native appearance for the purpose of the CSS 'appearance' property.
• button
• input
• meter
• progress
• select
• textarea
</p>

			</section>
			<section id="writing-mode">
<h4 title="Writing mode">15.5.2. 書字~mode</h4>

<p>
いくつかの~widgetにおいては、
その具現化は `writing-mode$p ~propにより制御される。
そのような~widgetの目的においては、
次が定義される：
◎
Several widgets have their rendering controlled by the 'writing-mode' CSS property. For the purposes of those widgets, we have the following definitions.
</p>
<ul>
	<li>
`横組み@
⇒
当の~controlの `writing-mode$p ~propの`算出d値$は、
`horizontal-tb^v に解決されることをいう。
◎
A horizontal writing mode is when resolving the 'writing-mode' property of the control results in a computed value of 'horizontal-tb'.
</li>
	<li>
`縦組み@
⇒
当の~controlの `writing-mode$p ~propの`算出d値$は、
次に挙げるいずれかに解決されることをいう
⇒＃
`vertical-rl^v,
`vertical-lr^v,
`sideways-rl^v,
`sideways-lr^v
◎
A vertical writing mode is when resolving the 'writing-mode' property of the control results in a computed value of either 'vertical-rl', 'vertical-lr', 'sideways-rl' or 'sideways-lr'.
</li>
</ul>

			</section>
			<section id="button-layout">
<h4 title="Button layout">15.5.3. ~button~layout</h4>

<p>
`~button~layout$を利用する要素 %要素 は、
`委譲-可能な~widget$になる
— その`~nativeな外観$は、
~buttonのそれになる。
◎
When an element uses button layout, it is a devolvable widget, and it's native appearance is that of a button.
</p>

<p>
`~button~layout@
は、
以下に従うことが期待される：
◎
Button layout is as follows:
</p>
<ul>
	<li>
<p>
%要素 は `button$e 要素であるならば、
`display$p ~propは，次に従って動作する：
◎
If the element is a button element, then the 'display' property is expected to act as follows:
</p>
		<ul>
			<li>
`display$p の算出d値 ~IN { `inline-grid^v, `grid^v, `inline-flex^v, `flex^v, `none^v, `contents^v } ならば
⇒
算出d値のとおりに挙動する
◎
If the computed value of 'display' is 'inline-grid', 'grid', 'inline-flex', 'flex', 'none', or 'contents', then behave as the computed value.
</li>
			<li>
他の場合， `display$p の算出d値による`外縁~表示~型$は `inline^v になるならば
⇒
`inline-block^v として挙動する
◎
Otherwise, if the computed value of 'display' is a value such that the outer display type is 'inline', then behave as 'inline-block'.
</li>
			<li>
他の場合
⇒
`flow-root^v として挙動する。
◎
Otherwise, behave as 'flow-root'.
</li>
		</ul>
	</li>
	<li>
%要素 は、
自身の内容~用に新たな`整形~文脈$を確立する。
この整形~文脈の型は，通例通り `display$p 値により決定される。
◎
The element is expected to establish a new formatting context for its contents. The type of this formatting context is determined by its 'display' value, as usual.
</li>
	<li>
%要素 は`絶対的に位置され$ている場合
⇒
`~CSS視覚-整形~model＠~CSS2J#visuren$の目的においては、
%要素 は`置換d要素$であったかのように動作する
`CSS$r
◎
If the element is absolutely-positioned, then for the purpose of the CSS visual formatting model, act as if the element is a replaced element. [CSS]
</li>
	<li>
`inline-size$p の`算出d値$は `auto^v の場合
⇒
その`使用~値$は`内容が収まる行内~size$になる
◎
If the computed value of 'inline-size' is 'auto', then the used value is the fit-content inline size.
</li>
	<li>
`align-self$p ~propの `normal^v ~keyword目的においては、
%要素 は`置換d要素$であったかのように動作する
◎
For the purpose of the 'normal' keyword of the 'align-self' property, act as if the element is a replaced element.
</li>
	<li>
<p>
%要素 が次を満たす場合、
%要素 の~boxは，その子として`匿名な~button内容~box$を有する
⇒
［［
`input$e ／ `button$e 
］要素である
］~AND［
`display$p の算出d値 ~NIN { `inline-grid^v, `grid^v, `inline-flex^v, `flex^v }
］
◎
If the element is an input element, or if it is a button element and its computed value for 'display' is not 'inline-grid', 'grid', 'inline-flex', or 'flex', then the element's box has a child anonymous button content box＼
</p>
<p>
`匿名な~button内容~box@
は、
次に従って挙動するとする：
◎
with the following behaviors:
</p>
		<ul>
			<li>
`塊-~level$の`塊~容器$になり、
新たな`塊~整形~文脈$を確立する
（すなわち `display$p は `flow-root^v ）。
◎
The box is a block-level block container that establishes a new block formatting context (i.e., 'display' is 'flow-root').
</li>
			<li>
横-軸にて~overflowしないならば，横方向にて中央する。
◎
If the box does not overflow in the horizontal axis, then it is centered horizontally.
</li>
			<li>
縦-軸にて~overflowしないならば，縦方向にて中央する。
◎
If the box does not overflow in the vertical axis, then it is centered vertically.
</li>
		</ul>
<p>
他の場合、
`匿名な~button内容~box$は無い。
◎
Otherwise, there is no anonymous button content box.
</p>
	</li>
</ul>

<p class="XXX">
期待される`~primitiveな外観$を定義する必要がある。
◎
Need to define the expected primitive appearance.
</p>

			</section>
			<section id="the-button-element-2">
<h4 title="The button element">15.5.4. `button^e 要素</h4>

<p>
`button$e 要素は、
`~CSS~box$を生成するならば，次に従うことが期待される：
◎
The button element, when it generates a CSS box, is expected to＼
</p>
<ul>
	<li>
~buttonを図画化する。
◎
depict a button and＼
</li>
	<li>
`~button~layout$を利用する。
◎
to use button layout＼
</li>
	<li>
`匿名な~button内容~box$がある場合、
その内容は［
無い場合に要素の~boxが有することになる内容
］が成す子~boxたちからなる。
◎
whose anonymous button content box's contents (if there is an anonymous button content box) are the child boxes the element's box would otherwise have.
</li>
</ul>

			</section>
			<section id="the-details-and-summary-elements">
<h4 title="The details and summary elements">15.5.5. `details^e, `summary^e 要素</h4>

<pre class="lang-css">
@namespace "http://www.w3.org/1999/xhtml";

details, summary {
  display: block;
}
details &gt; summary:first-of-type {
  display: list-item;
  counter-increment: list-item 0;
  list-style: disclosure-closed inside;
}
details[open] &gt; summary:first-of-type {
  list-style-type: disclosure-open;
}
</pre>

<p>
`details$e 要素 %details は、
順に次に挙げる子~要素 <span id="_details-slots">%A, %B</span>, %C を伴う，
内部的な`~shadow~tree$を有することが期待される：
◎
The details element is expected to have an internal shadow tree with three child elements:
</p>
<ol>
	<li>
<p>
%A は `slot$e 要素であり，次に従うことが期待される：
◎
The first child element is a slot that is expected to＼
</p>
		<ul>
			<li>
%details の子に `summary$e 要素が在るならば、
それらのうち最初のもの %summary をあてがう【！take】。
◎
take the details element's first summary element child, if any.＼
</li>
			<li>
子として
`既定の要約@
と呼ばれる `summary$e 要素を有する
— それは、
`実装定義$な（および おそらく~localeに特有な）~text内容を有する。
◎
This element has a single child summary element called the default summary which has text content that is implementation-defined (and probably locale-specific).
</li>
			<li>
%A が`表現-$する `summary$e 要素【 %summary または`既定の要約$】は、
利用者からの要請に応じて，当の詳細を開閉することを許容する【ための~UIを備える】。
◎
The summary element that this slot represents is expected to allow the user to request the details be shown or hidden.
</li>
		</ul>
	</li>
	<li>
<p>
%B は `slot$e 要素であり，次に従うことが期待される：
◎
The second child element is a slot that is expected to＼
</p>
		<ul>
			<li>
%summary を除く %details の子孫すべて【が成す~tree】をあてがう【！take】。
%B は内容を有さない。
◎
take the details element's remaining descendants, if any. This element has no contents.
</li>
			<li>
`details-content$pe 疑似要素に合致する。
◎
This element is expected to match the '::details-content' pseudo-element.
</li>
			<li>
<p>
`style$a 属性には、
次を設定する
⇒
%details 要素が `open$a 属性を
⇒＃
有するならば `display: block; content-visibility: hidden;^l ／
有さないならば `display: block;^l
◎
This element is expected to have its style attribute set to "display: block; content-visibility: hidden;" when the details element does not have an open attribute. When it does have the open attribute, the style attribute is expected to be set to "display: block;".
</p>

<p class="note">注記：
%A, %B は~shadow~treeの内側に隠されるので、
%B の `style$a 属性が作者~codeから直に可視になることはない。
しかしながら，その影響iは可視になる。
特に，
<code class="css">`content-visibility$p: `hidden^v</code> が
— 例えば <code class="css">`display$p: `none^v</code> に代えて —
選ばれたことは、
~layout情報を~queryする様々な~APIの結果に影響iする。
◎
Because the slots are hidden inside a shadow tree, this style attribute is not directly visible to author code. Its impacts, however, are visible. Notably, the choice of content-visibility: hidden instead of, e.g., display: none, impacts the results of various APIs that query layout information.
</p>
			</li>
		</ul>
	</li>
	<li>
<p>
 %C は［
`link$e ／ `style$e
］要素であり【どちらでもかまわない】，
`既定の要約$用に次の~styleを伴う：
◎
The third child element is either a link or style element with the following styles for the default summary:
</p>

<pre class="lang-css">
:host summary {
  display: list-item;
  counter-increment: list-item 0;
  list-style: disclosure-closed inside;
}
:host([open]) summary {
  list-style-type: disclosure-open;
}
</pre>

<p class="note">
%A, %B に相対的な %C の位置は、
観測-可能にならない。
このことは、
実装においては，これら同胞どうしの順序が異なるかもしれないことを意味する。
実装は、
要素でない仕組み【 %C でない何か】を利用して，~shadow~treeに~styleを結付けることさえあるかもしれない。
◎
The position of this child element relative to the other two is not observable. This means that implementations might have it in a different order relative to its siblings. Implementations might even associate the style with the shadow tree using a mechanism that is not an element.
</p>
	</li>
</ol>

<p class="note">注記：
この~shadow~treeの構造は、［
%details の子~群,
`details-content^pe 疑似要素
］が~CSS~styleに応答する仕方を通して観測-可能になる。
◎
The structure of this shadow tree is observable through the ways that the children of the details element and the '::details-content' pseudo-element respond to CSS styles.
</p>

			</section>
			<section id="the-input-element-as-a-text-entry-widget">
<h4 title="The input element as a text entry widget">15.5.6. ~text手入力~widgetとしての `input^e 要素</h4>

<p>
次を満たす `input$e 要素 %要素 は、
`委譲-可能な~widget$である
⇒
その `type$input 属性の状態 ~IN {
`Text$st,
`Tel$st,
`Url$st,
`Email$st,
`Search$st,
`Password$st
}
◎
↓</p>

<p>
%要素 は、
次に従うことが期待される：
◎
↓</p>
<ul>
	<li>
<p>
`~nativeな外観$においては、［
一行分の~text~controlを図画化する `inline-block$v ~box
］として具現化する。
加えて， %要素 の `type$input 属性の状態に応じて：
◎
An input element whose type attribute is in the Text, Telephone, URL, or Email state, is a devolvable widget.＼
Its expected native appearance is to render as an 'inline-block' box depicting a one-line text control.
</p>
		<ul>
			<li>
`Search$st
⇒
［
%要素 の `appearance$p ~propの`算出d値$ ~NEQ `textfield$v
］ならば、
%要素 は，自身が探索-~fieldであることを指示する別個な~styleを備えてもヨイ。
◎
An input element whose type attribute is in the Search state is a devolvable widget. Its expected native appearance is to render as an 'inline-block' box depicting a one-line text control. If the computed value of the element's 'appearance' property is not 'textfield', it may have a distinct style indicating that it is a search field.
</li>
			<li>
`Password$st
⇒
当の~text~controlの中の~dataを隠蔽するよう具現化する。
◎
An input element whose type attribute is in the Password state is a devolvable widget. Its expected native appearance is to render as an 'inline-block' box depicting a one-line text control that obscures data entry.
</li>
		</ul>

<p>
この~boxの `line-height$p ~propの`使用~値$は、［
~keyword `normal^v が指定されたとするときの`使用~値$
］を下回らない長さ値にするモノトスル。
◎
For input elements whose type attribute is in one of the above states, the used value of the 'line-height' property must be a length value that is no smaller than what the used value would be for 'line-height: normal'.
</p>

<p class="note">注記：
`使用~値$は、
実際の~keyword `normal^v にはならない。
また、
この規則は，`算出d値$には影響しない。
◎
The used value will not be the actual keyword 'normal'. Also, this rule does not affect the computed value.
</p>
	</li>
	<li class="algo">
<p>
当の~text~controlが~text選択を供する場合、
利用者が現在の選択を変更したときは
⇒
`要素~taskを~queueする$( `利用者~対話~task~source$, %要素, 次の手続き )
</p>

<div class="algo">
手続きは
⇒
`~eventを発火する$( %要素, `select$et )
— 次のように初期化して
⇒
`bubbles$m 属性 ~SET ~T
</div>
◎
If these text controls provide a text selection, then, when the user changes the current selection, the user agent is expected to queue an element task on the user interaction task source given the input element to fire an event named select at the element, with the bubbles attribute initialized to true.
</li>
</ul>

<p>
%要素 は、
`既定の選好d~sizeを伴う要素$であり，次に従うことが期待される：
◎
An input element whose type attribute is in one of the above states is an element with default preferred size, and user agents are expected＼
</p>
<ul>
	<li>
%要素 には `field-sizing$p ~propを適用する。
◎
to apply the 'field-sizing' CSS property to the element.＼
</li>
	<li class="algo">
<p>
%要素 の`内在的~size$を成す`行内~size$を次の手続きにより決定する：
</p>
		<ol>
			<li>
<p>
~IF［
%要素 の `field-sizing$p ~propの`算出d値$ ~EQ `content$v
］
⇒
~RET %要素 が示す~textにより決定される`行内~size$
</p>

<p>
この場合、
~textは［
`値$fe ／
%要素 の `placeholder$input 属性により指定された短い~hint
］いずれかになる。
~UAは、
この~sizeに~text~caret~sizeを織り込んでもヨイ。
</p>
			</li>
			<li>
%文字~数 ~LET ［
%要素 は `size$input 属性を有するならば その値 ／
~ELSE_ `失敗^i
］
</li>
			<li>
~IF［
%文字~数 ~NEQ `失敗^i
］
⇒
%文字~数 ~SET `負でない整数として構文解析する$( %文字~数 )
</li>
			<li>
~IF［
%文字~数 ~EQ `失敗^i
］
⇒
%文字~数 ~SET 20
◎
↓</li>
			<li>
~RET `文字~数から~pixel単位へ変換する$( %文字~数 )
</li>
		</ol>
◎
User agents are expected to determine the inline size of its intrinsic size by the following steps:
• If the 'field-sizing' property on the element has a computed value of 'content', the inline size is determined by the text which the element shows. The text is either a value or a short hint specified by the placeholder attribute. User agents may take the text caret size into account in the inline size.
• If the element has a size attribute, and parsing that attribute's value using the rules for parsing non-negative integers doesn't generate an error,＼
• return the value obtained from applying the converting a character width to pixels algorithm to the value of the attribute.
• Otherwise, return the value obtained from applying the converting a character width to pixels algorithm to the number 20.
</li>
</ul>

<div class="algo">
<p>
`文字~数から~pixel単位へ変換する@
~algoは、
所与の
( %要素, %~size )
に対し，
( ( %~size − 1 ) ~MUL %平均 ~PLUS %最大 )
を返す
— ここで：
</p>
<ul>
	<li>
%平均 は、
`~pixel単位$による， %要素 上の首な~fontの平均の文字~横幅
</li>
	<li>
%最大 は、
`~pixel単位$による， %要素 上の首な~fontの最~大な文字~横幅
</li>
</ul>

<p>
（ %要素 の `letter-spacing$p ~propは、
結果に影響しない。）
</p>
◎
The converting a character width to pixels algorithm returns (size-1)×avg + max, where size is the character width to convert, avg is the average character width of the primary font for the element for which the algorithm is being run, in pixels, and max is the maximum character width of that same font, also in pixels. (The element's 'letter-spacing' property does not affect the result.)
</div>

<p>
これらの~text~controlは、
`~scroll容器$になり，［
`行内~軸$, `塊~軸$
］のうち前者に限り~scroll法を~supportするものと期待される。
◎
These text controls are expected to be scroll containers and support scrolling in the inline axis, but not the block axis.
</p>

<p class="XXX">
期待される［
`~nativeな外観$, `~primitiveな外観$
］について詳細を与える必要がある。
◎
Need to detail the expected native appearance and primitive appearance.
</p>

			</section>
			<section id="the-input-element-as-domain-specific-widgets">
<h4 title="The input element as domain-specific widgets">15.5.7. 各種~widgetとしての `input^e 要素</h4>

<div>
<p>
次を満たす `input$e 要素 %要素 は、
`委譲-可能な~widget$である
⇒
その `type$input 属性の状態は次に挙げるいずれかである
⇒＃
`Date$st ／
`Month$st ／
`Week$st ／
`Time$st ／
`Datetime-local$st ／
`Number$st
</p>

<p>
%要素 は、
次に従うことが期待される：
</p>
<ul>
	<li>
`inline-block$v ~boxとして具現化する。
</li>
	<li>
次に挙げる~control（上と同順）を図画化する
⇒＃
日付／
月／
週／
時刻／
地域標準時による日時／
数値
</li>
</ul>
◎
An input element whose type attribute is in the Date state is a devolvable widget expected to render as an 'inline-block' box depicting a date control.
◎
An input element whose type attribute is in the Month state is a devolvable widget expected to render as an 'inline-block' box depicting a month control.
◎
An input element whose type attribute is in the Week state is a devolvable widget expected to render as an 'inline-block' box depicting a week control.
◎
An input element whose type attribute is in the Time state is a devolvable widget expected to render as an 'inline-block' box depicting a time control.
◎
An input element whose type attribute is in the Local Date and Time state is a devolvable widget expected to render as an 'inline-block' box depicting a local date and time control.
◎
An input element whose type attribute is in the Number state is a devolvable widget expected to render as an 'inline-block' box depicting a number control.
</div>

<p>
加えて， %要素 の `type$input 属性の状態に応じて：
</p>
<dl class="switch">
	<dt>
`Number$st
◎
An input element whose type attribute is in the Number state＼
</dt>
	<dd>
<p>
%要素 は`既定の選好d~sizeを伴う要素$であり，
次に従うことが期待される：
◎
is an element with default preferred size, and user agents are expected＼
</p>
		<ul>
			<li>
%要素 には `field-sizing$p ~propを適用する。
◎
to apply the 'field-sizing' CSS property to the element.＼
</li>
			<li>
<p>
%要素 の`内在的~size$を成す：
</p>
				<ul>
					<li>
`塊~size$は、
およそ一行分の高さになる。
</li>
					<li>
<p>
`行内~size$は、
%要素 の `field-sizing$p ~propの`算出d値$に応じて：
</p>
						<ul>
							<li>
`content$v の場合
⇒
現在の`値$feを示すために必要yな幅になる。
</li>
							<li>
他の場合
⇒
アリなどの値も示すために必要yな幅になる。
</li>
						</ul>
					</li>
				</ul>
◎
The block size of the intrinsic size is about one line high.＼
If the 'field-sizing' property on the element has a computed value of 'content', the inline size of the intrinsic size is expected to be about as wide as necessary to show the current value.＼
Otherwise, the inline size of the intrinsic size is expected to be about as wide as necessary to show the widest possible value.
</li>
		</ul>
	</dd>

	<dt>
その他
◎
An input element whose type attribute is in the Date, Month, Week, Time, or Local Date and Time state,＼
</dt>
	<dd>
%要素 用の~controlの~sizeは、
次のようになることが期待される
⇒＃
およそ一行分の高さ,
アリな どの値も示すために必要yな幅
◎
is expected to be about one line high, and about as wide as necessary to show the widest possible value.
</dd>
</dl>

<p class="XXX">
期待される［
`~nativeな外観$, `~primitiveな外観$
］について詳細を与える必要がある。
◎
Need to detail the expected native appearance and primitive appearance.
</p>

			</section>
			<section id="the-input-element-as-a-range-control">
<h4 title="The input element as a range control">15.5.8. 範囲~controlとしての `input^e 要素</h4>

<p>
次を満たす `input$e 要素 %要素 は、
`委譲-不能な~widget$である
⇒
その `type$input 属性の状態 ~EQ `Range$st

◎
An input element whose type attribute is in the Range state is a non-devolvable widget.
</p>

<p>
%要素 の`~nativeな外観$は、
次に従うことが期待される：
◎
Its expected native appearance is＼
</p>
<ul>
	<li>
`inline-block$v ~boxとして具現化する。
◎
to render as an 'inline-block' box＼
</li>
	<li>
<p>
%要素 用の~controlを次に従って図画化する：
◎
depicting a slider control.
</p>
		<ul class="switch">
			<li>
`横組み$の場合
⇒
横方向~sliderになる
— その最低~値は、
%要素 の `direction$p ~propの`算出d値$に応じて［
`rtl^v ならば 右端／
~ELSE_ 左端
］に~~位置する。
◎
When this control has a horizontal writing mode, the control is expected to be a horizontal slider. Its lowest value is on the right if the 'direction' property has a computed value of 'rtl', and on the left otherwise.＼
</li>
			<li>
`縦組み$の場合
⇒
縦方向~sliderになる
— その最低~値は、
%要素 の `direction$p ~propの`算出d値$に応じて［
`rtl^v ならば 下端／
~ELSE_ 上端
］に~~位置する。
◎
When this control has a vertical writing mode, it is expected to be a vertical slider. Its lowest value is on the bottom if the 'direction' property has a computed value of 'rtl', and on the top otherwise.
</li>
		</ul>
	</li>
	<li>
定義済み候補d値（ `list$input 属性により供される）は、
~slider上の刻印として示した上で，~sliderを そこへ停めれるようにする。
◎
Predefined suggested values (provided by the list attribute) are expected to be shown as tick marks on the slider, which the slider can snap to.
</li>
</ul>

<p class="XXX">
期待される`~primitiveな外観$について詳細を与える必要がある。
◎
Need to detail the expected primitive appearance.
</p>

			</section>
			<section id="the-input-element-as-a-colour-well">
<h4 title="The input element as a color well">15.5.9. ~color-wellとしての `input^e 要素</h4>

<p>
次を満たす `input$e 要素 %要素
⇒
その `type$input 属性の状態 ~EQ `Color$st
◎終
は、
次に従うことが期待される：
◎
An input element whose type attribute is in the Color state is expected to＼
</p>
<ul>
	<li>
<p>
~color-well†を図画化する
— 要素の作動化-時には、
利用者に色~picker（例：色環や色~palette）を供するような。
</p>

<p class="trans-note">【†
概して，現在~選定された色が表示される小さな~boxとして呈示され、
~click等により色~pickerが追加的に呈示されるような~control。
】</p>
◎
depict a color well, which, when activated, provides the user with a color picker (e.g. a color wheel or color palette) from which the color can be changed.＼
</li>
	<li>
<p>
`~CSS~box$を生成する場合には：
◎
The element, when it generates a CSS box, is expected to＼
</p>
		<ul>
			<li>
`~button~layout$を利用するが、
`匿名な~button内容~box$を成す子~boxは伴わない。
◎
use button layout, that has no child boxes of the anonymous button content box.＼
</li>
			<li>
`匿名な~button内容~box$は、
次のようにふるまう`呈示~用~hint$を有する
⇒
`background-color$p ~propの値 ~SET 要素の`値$fe
◎
The anonymous button content box is expected to have a presentational hint setting the 'background-color' property to the element's value.
</li>
		</ul>
	</li>
	<li>
（ `list$input 属性から供される）定義済み候補d値は、
~color-well自身ではなく，色~pickerにて示す。
◎
Predefined suggested values (provided by the list attribute) are expected to be shown in the color picker interface, not on the color well itself.
</li>
</ul>

<p class="XXX">
期待される［
`~nativeな外観$, `~primitiveな外観$
］について詳細を与える必要がある。
◎
Need to detail the expected native appearance and primitive appearance.
</p>

			</section>
			<section id="the-input-element-as-a-checkbox-and-radio-button-widgets">
<h4 title="The input element as a checkbox and radio button widgets">15.5.10. ~checkbox／~radio~button用~widgetとしての `input^e 要素</h4>

<div>
<p>
次を満たす `input$e 要素 %要素 は、
`委譲-不能な~widget$である
⇒
その `type$input 属性の状態は次に挙げるいずれかである
⇒＃
`Checkbox$st ／
`Radio$st
</p>

<p>
%要素 は、
次に従うことが期待される：
</p>
<ul>
	<li>
`inline-block$v ~boxとして具現化する。
</li>
	<li>
次に挙げる 1 個の~control（上と同順）を包含する
⇒＃
~checkbox／
~radio~button
</li>
	<li>
~labelを伴わない。
</li>
</ul>
◎
An input element whose type attribute is in the Checkbox state is a non-devolvable widget expected to render as an 'inline-block' box containing a single checkbox control, with no label.
◎
↓Need to detail the expected native appearance and primitive appearance.
◎
An input element whose type attribute is in the Radio Button state is a non-devolvable widget expected to render as an 'inline-block' box containing a single radio button control, with no label.
</div>

<p class="XXX">
期待される［
`~nativeな外観$, `~primitiveな外観$
］について詳細を与える必要がある。
◎
Need to detail the expected native appearance and primitive appearance.
</p>

			</section>
			<section id="the-input-element-as-a-file-upload-control">
<h4 title="The input element as a file upload control">15.5.11. ~file~upload用~controlとしての `input^e 要素</h4>

<p>
次を満たす `input$e 要素 %要素 
⇒
［
その `type$input 属性の状態 ~EQ `File$st
］~AND［
`~CSS~box$を生成する
］
◎終
は：
◎
An input element whose type attribute is in the File Upload state, when it generates a CSS box,＼
</p>
<ul>
	<li>
<p>
次を順に包含する `inline-block$v ~boxとして具現化することが期待される：
◎
is expected to render as an 'inline-block' box containing＼
</p>
		<ol>
			<li>
%要素 が表現する`選択された~file~list$は空でないならば、
それらの~filenameを成す~text
◎
a span of text giving the filename(s) of the selected files, if any, followed by＼
</li>
			<li>
<p>
次のような~button：
</p>
				<ul>
					<li>
作動化-時には、
利用者が選択を変更できるような~file~pickerを供する。
</li>
					<li>
`~button~layout$を利用する。
</li>
					<li>
`file-selector-button$pe 疑似要素に合致する。
</li>
					<li>
その`匿名な~button内容~box$の内容は、
`実装定義$な（場合によっては~localeに特有な）~textからなる
— 例えば “~fileを選ぶ” 。
</li>
				</ul>
◎
a button that, when activated, provides the user with a file picker from which the selection can be changed. The button is expected to use button layout and match the '::file-selector-button' pseudo-element. The contents of its anonymous button content box are expected to be implementation-defined (and possibly locale-specific) text, for example "Choose file".
</li>
		</ol>
	</li>
	<li>
<p>
~UAは、
次に従うことにしてもヨイ：
◎
User agents may＼
</p>
		<ul>
			<li>
%要素 を`既定の選好d~sizeを伴う要素$として取扱って，
%要素 に `field-sizing$p ~propを適用する。
◎
handle an input element whose type attribute is in the File Upload state as an element with default preferred size, and user agents may apply the 'field-sizing' CSS property to the element.＼
</li>
			<li>
`field-sizing$p ~propの`算出d値$ ~EQ `content$v の場合には、
%要素 の`内在的~size$は %要素 の内容
— `file-selector-button$pe 疑似要素, 選ばれた~fileの名前など —
に依存することが期待される。
◎
If the 'field-sizing' property on the element has a computed value of 'content', the intrinsic size of the element is expected to depend on its content such as the '::file-selector-button' pseudo-element and chosen file names.
</li>
		</ul>
	</li>
</ul>

			</section>
			<section id="the-input-element-as-a-button">
<h4 title="The input element as a button">15.5.12. ~buttonとしての `input^e 要素</h4>

<p>
次を満たす `input$e 要素 %要素
⇒
［
その `type$input 属性の状態 ~IN { `Submit$st, `Reset$st, `Button$st }
］~AND［
`~CSS~box$を生成する
］
◎終
は、
次に従うことが期待される：
◎
An input element whose type attribute is in the Submit Button, Reset Button, or Button state, when it generates a CSS box, is expected to＼
</p>
<ul>
	<li>
~buttonを図画化する。
◎
depict a button and＼
</li>
	<li>
`~button~layout$を利用する。
◎
use button layout and＼
</li>
	<li>
<p>
`匿名な~button内容~box$の内容は、
%要素 が `value$input 属性を：
◎
the contents of the anonymous button content box are expected to be＼
</p>
		<ul>
			<li>
有するならば、
その値を成す~textになる。
◎
the text of the element's value attribute, if any,＼
</li>
			<li>
有さないならば、
%要素 の `type$input 属性から`実装定義$な（おそらく~localeに特有な）流儀で導出される~textになる。
◎
or text derived from the element's type attribute in an implementation-defined (and probably locale-specific) fashion, if not.
</li>
		</ul>
	</li>
</ul>

			</section>
			<section id="the-marquee-element-2">
<h4 title="The marquee element">15.5.13. `marquee^e 要素</h4>

【！ class="obsolete" 】
<p class="trans-note">【
`marquee$e 要素は廃用にされたので、
この節の和訳は省略する。
】</p>

			</section>
			<section id="the-meter-element-2">
<h4 title="The meter element">15.5.14. `meter^e 要素</h4>

<pre class="lang-css">
@namespace "http://www.w3.org/1999/xhtml";

meter {
  appearance: auto;
}
</pre>

<p>
`meter$e 要素 %要素 は、
`委譲-可能な~widget$である。
その`~nativeな外観$は、
次に従うことが期待される：
◎
The meter element is a devolvable widget. Its expected native appearance is＼
</p>
<ul>
	<li>
次を伴う `inline-block$v ~boxとして具現化する
⇒＃
`block-size$p `1em^v,
`inline-size$p `5em^v,
`vertical-align$p `-0.2em^v
◎
to render as an 'inline-block' box with a 'block-size' of '1em' and a 'inline-size' of '5em', a 'vertical-align' of '-0.2em',＼
</li>
	<li>
<p>
%要素 用の~controlを次に従って図画化する：
◎
and with its contents depicting a gauge.
</p>
		<ul class="switch">
			<li>
`横組み$の場合
⇒
横方向~gaugeになる
— その最小~値は、
%要素 の `direction$p ~propの`算出d値$に応じて［
`rtl^v ならば右端／
~ELSE_ 左端
］に~~位置する。
◎
When this element has a horizontal writing mode, the depiction is expected to be of a horizontal gauge. Its minimum value is on the right if the 'direction' property has a computed value of 'rtl', and on the left otherwise.＼
</li>
			<li>
`縦組み$の場合
⇒
縦方向~gaugeになる
— その最小~値は、
%要素 の `direction$p ~propの`算出d値$に応じて［
`rtl^v ならば下端／
~ELSE_ 上端
］に~~位置する。
◎
When this element has a vertical writing mode, it is expected to depict a vertical gauge. Its minimum value is on the bottom if the 'direction' property has a computed value of 'rtl', and on the top otherwise.
</li>
		</ul>
	</li>
	<li>
~platform規約があれば、
それに整合な呈示を利用する。
◎
User agents are expected to use a presentation consistent with platform conventions for gauges, if any.
</li>
</ul>

<p class="note">注記：
~gaugeにおいて何を図画化するモノトスルかについての要件は、
`meter$e 要素の定義に含まれている。
◎
Requirements for what must be depicted in the gauge are included in the definition of the meter element.
</p>

<p class="XXX">
期待される`~primitiveな外観$について詳細を与える必要がある。
◎
Need to detail the expected primitive appearance.
</p>

			</section>
			<section id="the-progress-element-2">
<h4 title="The progress element">15.5.15. `progress^e 要素</h4>

<pre class="lang-css">
@namespace "http://www.w3.org/1999/xhtml";

progress {
  appearance: auto;
}
</pre>

<p>
`progress$e 要素 %要素 は、
`委譲-可能な~widget$である
— その`~nativeな外観$は次に従うことが期待される：
◎
The progress element is a devolvable widget.＼
</p>
<ul>
	<li>
次を伴う `inline-block$v ~boxとして具現化する
⇒＃
`block-size$p `1em^v,
`inline-size$p `10em^v,
`vertical-align$p `-0.2em^v
◎
Its expected native appearance is to render as an 'inline-block' box with a 'block-size' of '1em' and a 'inline-size' of '10em', and a 'vertical-align' of '-0.2em'.
</li>
	<li>
<figure style="float: right; margin: 0.5em;">
<div role="img" id="_ex-sample-progress">
	<div style="left:0.5em; top:0.5em;">
進捗~bar（ 80% ）
	</div>
	<div style="left:0.5em; top:3em;">
<div style="width:6em; height:1em; background: linear-gradient(to right, lime, lime 80%, yellow 80%, yellow);"></div>
横-, `ltr^v
	</div>
	<div style="left:0.5em; top:7em;">
<div style="width:6em; height:1em; background: linear-gradient(to left, lime, lime 80%, yellow 80%, yellow);"></div>
横-, `rtl^v
	</div>
	<div style="left:9em; top:3em; writing-mode: vertical-rl;">
<div style="width:1em; height:6em; background: linear-gradient(to bottom, lime, lime 80%, yellow 80%, yellow);"></div>
縦-, `ltr^v
</div>
	<div style="left:13em; top:3em; writing-mode: vertical-rl;">
<div style="width:1em; height:6em; background: linear-gradient(to top, lime, lime 80%, yellow 80%, yellow);"></div>
縦-, `rtl^v
</div>
</div>
</figure>

<p>
当の~controlを次に従って図画化する：
◎
↓</p>
		<ul class="switch">
			<li>
`横組み$の場合
⇒
横方向~進捗~barになる
— その始端は、
%要素 の `direction$p ~propの`算出d値$に応じて［
`rtl^v ならば 右端／
~ELSE_ 左端
］に~~位置する。
◎
When the this element has a horizontal writing mode, the element is expected to be depicted as a horizontal progress bar. The start is on the right and the end is on the left if the 'direction' property on this element has a computed value of 'rtl', and with the start on the left and the end on the right otherwise.＼
</li>
			<li>
`縦組み$の場合
⇒
縦方向~進捗~barになる
— その始端は、
%要素 の `direction$p ~propの`算出d値$に応じて［
`rtl^v ならば 下端／
~ELSE_ 上端
］に~~位置する。
◎
When this element has a vertical writing mode, it is expected to be depicted as a vertical progress bar. The start is on the bottom and the end is on the top if the 'direction' property on this element has a computed value of 'rtl', and with the start on the top and the end on the bottom otherwise.
</li>
		</ul>

<p class="trans-note">【
上の図式は、
原文では，縦組みにおいて向きが本文の記述と正反対になっているので、
この訳では改めた。
】</p>
	</li>
	<li>
~platform規約があれば、
それに整合な呈示を利用する
— 特に、
進捗~barが確定的か不定かに応じて，異なる呈示を利用する。
加えて、
%要素 の寸法に基づいて，呈示を変える。
◎
User agents are expected to use a presentation consistent with platform conventions for progress bars. In particular, user agents are expected to use different presentations for determinate and indeterminate progress bars. User agents are also expected to vary the presentation based on the dimensions of the element.
</li>
</ul>

<p class="note">注記：
［
進捗~barが確定的か不定かを決定する方法
］および［
確定的~進捗~barが何の進捗を示すか
］についての要件は、
`progress$e 要素の定義に含まれている。
◎
Requirements for how to determine if the progress bar is determinate or indeterminate, and what progress a determinate progress bar is to show, are included in the definition of the progress element.
</p>

<p class="XXX">
期待される`~primitiveな外観$について詳細を与える必要がある。
◎
Need to detail the expected primitive appearance.
</p>

			</section>
			<section id="the-select-element-2">
<h4 title="The select element">15.5.16. `select^e 要素</h4>

<p>
`select$e 要素 %要素 は、
`既定の選好d~sizeを伴う要素$であり，
`field-sizing$p ~propを適用することが期待される。
◎
The select element is an element with default preferred size, and user agents are expected to apply the 'field-sizing' CSS property to select elements.
</p>

<p>
%要素 は、
`委譲-可能な~widget$であり，
`inline-block$v ~boxとして具現化することが期待される。
◎
↓↓</p>

<p>
%要素 は、［
`~list~box@ ／
`~drop-down~box@
］として具現化することが期待される
— どちらになるかは，以下に従う：
◎
A select element is either a list box or a drop-down box, depending on its attributes.
</p>

<ul>
	<li>
<p>
次の場合、
`~list~box$として具現化する：
◎
↓</p>
		<ul>
			<li>
%要素 は `multiple$A 属性を有するならば、
複-選択-`~list~box$として。
◎
A select element whose multiple attribute is present is expected to render as a multi-select list box.
</li>
			<li>
［
%要素 は `multiple$A 属性を有さない
］~AND［
%要素 の`表示~size$ ~GT 1
］ならば、
単-選択-`~list~box$として。
◎
A select element whose multiple attribute is absent, and whose display size is greater than 1, is expected to render as a single-select list box.
</li>
		</ul>
<p>
この場合、
その`内在的~size$は，次に従うとする：
◎
When the element renders as a list box, it is a devolvable widget expected to render as an 'inline-block' box.＼
</p>
		<ul>
			<li>
`行内~size$は
⇒
%要素 の`最大~label幅$ ~PLUS ~scrollbarの横幅
◎
The inline size of its intrinsic size is the width of the select's labels plus the width of a scrollbar.＼
</li>
			<li>
<p>
`塊~size$は、
次を包含するために必要yな縦幅：
</p>
				<ul>
					<li>
%要素 の `field-sizing$p ~propの`算出d値$ ~EQ `content$v ならば
⇒
すべての~item用の~rowたち
</li>
					<li>
他の場合、
%要素 は `size$A 属性を有していて，その値は妥当であるならば
⇒
%要素 の`表示~size$として与えられた %要素 の~itemたち用の~rowたち
</li>
					<li>
他の場合
⇒
4 個の~row
</li>
				</ul>
◎
The block size of its intrinsic size is determined by the following steps:
• If the 'field-sizing' property on the element has a computed value of 'content', return the height necessary to contain all rows for items.
• If the size attribute is absent or it has no valid value, return the height necessary to contain four rows.
• Otherwise, return the height necessary to contain as many rows for items as given by the element's display size.
</li>
		</ul>
	</li>
	<li>
<p>
他の場合
（［
%要素 は `multiple$A 属性を有さない
］~AND［
%要素 の`表示~size$ ~EQ 1
］）、
次のような`~drop-down~box$として具現化する：
◎
A select element whose multiple attribute is absent, and whose display size is 1,＼
</p>
		<ul>
			<li>
高さ一行分
◎
is expected to render as an 'inline-block' one-line drop-down box.＼
＼
</li>
			<li>
その`内在的~size$を成す`行内~size$は、
`最大~label幅$になり，［
要素の `field-sizing$p ~propの`算出d値$ ~EQ `content$v
］の場合には，示された~textに依存する。
示される~textは、
概して， `option$e のうち`選択状態$opt ~EQ ~T を満たすものの~labelになる。
◎
The inline size of its intrinsic size is the width of the select's labels.＼
If the 'field-sizing' property on the element has a computed value of 'content', the inline size of the intrinsic size depends on the shown text.＼
The shown text is typically the label of an option of which selectedness is set to true.
</li>
		</ul>

<p>
この場合、［
%要素 の`委譲され$た状態における外観／
%要素 の `appearance$p ~propの`算出d値$が `menulist-button$v のときの外観
］は、［
“~drop-down~button” も含めて，~drop-down~boxの外観になる
］が，［
~host~OSの~native~controlを利用して具現化する
］ことは必要yでない。
そのような状態においては、［
`color$p, `background-color$p, `border$p
］などの~CSS~propは，無視rされるベキでない
（ %要素 を その`~nativeな外観$に則って具現化するとき，それらの~propが一般に許可-可能であるのと同じく）。
◎
When the element renders as a drop-down box, it is a devolvable widget. Its appearance in the devolved state, as well as its appearance when the computed value of the element's 'appearance' property is 'menulist-button', is that of a drop-down box, including a "drop-down button", but not necessarily rendered using a native control of the host operating system. In such a state, CSS properties such as 'color', 'background-color', and 'border' should not be disregarded (as is generally permissible when rendering an element according to its native appearance).
</p>
	</li>
</ul>

<p>
［
`~list~box$, `~drop-down~box$
］どちらの事例でも、
次に従うことが期待される：
◎
In either case (list box or drop-down box),＼
</p>
<ul>
	<li>
%要素 の~itemたちが %要素 の`選択肢~list$を成す。
◎
the element's items are expected to be the element's list of options,＼
</li>
	<li>
%要素 の`子$である `optgroup$e 要素は、
適用-可能な所では，選択肢たちが成す~group用に~~見出しを供する。
◎
with the element's optgroup element children providing headers for groups of options where applicable.
</li>
</ul>

<p>
`optgroup$e 要素は、
次のように具現化することが期待される
⇒
その `label$A 属性を表示する
◎
An optgroup element is expected to be rendered by displaying the element's label attribute.
</p>

<p>
`option$e 要素は、
次のように具現化することが期待される
⇒
その`~label$optを
— `optgroup$e 要素が在る場合は，その下に字下げして —
表示する
◎
An option element is expected to be rendered by displaying the element's label, indented under its optgroup element if it has one.
</p>

<p>
各［
%要素 の子である互いに同胞な `hr$e 要素たちが成す連列†
］は、
1 個の分離子として具現化してもヨイ。
◎
Each sequence of one or more child hr element siblings may be rendered as a single separator.
</p>

<p class="trans-note">【†
連列を成すかどうか決定するときは、
`要素間~空白$は無視されると思われるが，はっきりしない。
】</p>

<div class="p">
<p>
%要素 の
`最大~label幅@
とは、［
次に該当する各~要素に対し，それを具現化するために必要yな横幅
］たちの最大である：
</p>
<ul>
	<li>
%要素 内の `optgroup$e
</li>
	<li>
%要素 の`選択肢~list$内の各 `option$e
（字下げもあればそれも含める）
</li>
</ul>

◎
The width of the select's labels is the wider of the width necessary to render the widest optgroup, and the width necessary to render the widest option element in the element's list of options (including its indent, if any).
</div>

<div class="p">
<p>
%要素 が包含する`仮入力~label選択肢$ %O に対しては、［
次について利用者に伝達するよう具現化する
］ことが期待される：
◎
If a select element contains a placeholder label option, the user agent is expected to render that option in a manner that conveys that＼
</p>
<ul>
	<li>
%O は、
当の~controlの妥当な選択肢ではなく，~labelである。
◎
it is a label, rather than a valid option of the control.＼
</li>
	<li>
利用者は %O を明示的に選択できない。
◎
This can include preventing the placeholder label option from being explicitly selected by the user.＼
</li>
	<li>
［
%O の`選択状態$opt ~EQ ~T
］のときは、
現在，妥当な選択肢は選択されていない。
◎
When the placeholder label option's selectedness is true, the control is expected to be displayed in a fashion that indicates that no valid option is currently selected.
</li>
</ul>

</div>

<p>
%要素 内の各~labelに対しては、
それが［
~page, ~menu~control内
］どちらの一部として表示されるかに応じて，［
そこでの整列に整合する方式で具現化する
］ことが期待される。
◎
User agents are expected to render the labels in a select in such a manner that any alignment remains consistent whether the label is being displayed as part of the page or in a menu control.
</p>

<p class="XXX">
期待される［
`~nativeな外観$, `~primitiveな外観$
］について詳細を与える必要がある。
◎
Need to detail the expected native appearance and primitive appearance.
</p>

			</section>
			<section id="the-textarea-element-2">
<h4 title="The textarea element">15.5.17. `textarea^e 要素</h4>

<p>
`textarea$e 要素 %要素 は、
`委譲-可能な~widget$であり，
次に従うことが期待される：
◎
The textarea element is a devolvable widget expected to＼
</p>
<ul>
	<li>
`~nativeな外観$においては、
`inline-block$v ~boxとして，
複数行~text~controlを図画化するように具現化する
◎
render as an 'inline-block' box depicting a multiline text control.＼
</li>
	<li class="algo">
<p>
複数行~text~controlが~text選択を供する場合、
利用者が現在の選択を変更したときは
⇒
`要素~taskを~queueする$( `利用者~対話~task~source$, %要素, 次の手続き )
</p>
<div class="algo">
手続きは
⇒
`~eventを発火する$( %要素, `select$et )
— 次のように初期化して
⇒
`bubbles$m 属性 ~SET ~T
</div>
◎
If this multiline text control provides a selection, then, when the user changes the current selection, the user agent is expected to queue an element task on the user interaction task source given the textarea element to fire an event named select at the element, with the bubbles attribute initialized to true.
</li>
</ul>

<p>
%要素 は、
`既定の選好d~sizeを伴う要素$であり，
次に従うことが期待される：
◎
The textarea element is an element with default preferred size,＼
</p>
<ul>
	<li>
%要素 に `field-sizing$p ~propを適用する。
◎
and user agents are expected to apply the 'field-sizing' CSS property to textarea elements.
</li>
	<li>
<p>
`内在的~size$は、
%要素 の `field-sizing$p ~propの`算出d値$に応じて：
</p>
		<ul>
			<li>
`content$v の場合
⇒
%要素 が示す~textから決定される。
~textは、
%要素 の［
`生の値$／
`placeholder$A 属性により指定された短い~hint
］いずれかになる。
~UAは、
この~sizeに~text~caret~sizeを織り込んでもヨイ。
</li>
			<li>
他の場合
⇒
［
`~textarea実効~横幅$,  `~textarea実効~縦幅$
］から算出される
（下に定義されるとおり）。
</li>
		</ul>
◎
If the 'field-sizing' property on the element has a computed value of 'content', the intrinsic size is determined from the text which the element shows. The text is either a raw value or a short hint specified by the placeholder attribute. User agents may take the text caret size into account in the intrinsic size.＼
Otherwise, its intrinsic size is computed from textarea effective width and textarea effective height (as defined below).
</li>
</ul>

<div class="p">
<p>
%要素 の
`~textarea実効~横幅@
は
<span>( %size ~MUL %avg ~PLUS %sbw )</span>
で与えられる
— ここで
⇒＃
%size ~EQ （ `cols$A 属性から導出される） %要素 の`一行分の字数$（属性が無い場合は 20 ）,
%avg ~EQ `~pixel単位$による %要素 の首な~fontの平均 文字~横幅,
%sbw ~EQ `~pixel単位$による ~scrollbarの横幅
</p>

<p>
（ %要素 の `letter-spacing$p ~propは、
結果に影響しない）
</p>
◎
The textarea effective width of a textarea element is size×avg + sbw, where size is the element's character width, avg is the average character width of the primary font of the element, in CSS pixels, and sbw is the width of a scrollbar, in CSS pixels. (The element's 'letter-spacing' property does not affect the result.)
</div>

<p>
%要素 の
`~textarea実効~縦幅@
は、
<span>( %size ~MUL %h ~PLUS %sbh )</span>
で与えられる
— ここで
⇒＃
%size ~EQ %要素 の（ `rows$A 属性から導出される）`行数$（属性が無い場合は 2 ）,
%h ~EQ `~pixel単位$による 一行分の高さ,
%sbh ~EQ `~pixel単位$による ~scrollbarの縦幅
◎
The textarea effective height of a textarea element is the height in CSS pixels of the number of lines specified the element's character height, plus the height of a scrollbar in CSS pixels.
</p>

<p>
歴史的な理由から，
%要素 の `wrap$A 属性は、
次の`対応付け規則$の下で， %要素 の
`white-space$p ~prop用の`呈示~用~hintとして扱う$ことが期待される
⇒
［
値 ~EQ`大小無視$sub `off^l ならば `pre^v ／
他の場合は ε
］を返す
◎
User agents are expected to apply the 'white-space' CSS property to textarea elements. For historical reasons, if the element has a wrap attribute whose value is an ASCII case-insensitive match for the string "off", then the user agent is expected to treat the attribute as a presentational hint setting the element's 'white-space' property to 'pre'.
</p>

<p class="XXX">
期待される［
`~nativeな外観$, `~primitiveな外観$
］について詳細を与える必要がある。
◎
Need to detail the expected native appearance and primitive appearance.
</p>

			</section>
		</section>
		<section id="frames-and-framesets">
<h3 title="Frames and framesets">15.6. `frame^e, `frameset^e</h3>

【！ class="obsolete" 】

<p class="trans-note">【
`frame$e, `frameset$e 要素は廃用にされたので、
この節の和訳は省略する。
】</p>

		</section>
		<section id="interactive-media">
<h3 title="Interactive media">15.7. 対話的~媒体</h3>

			<section id="links,-forms,-and-navigation">
<h4 title="Links, forms, and navigation">15.7.1. ~link, ~form, ~navi</h4>

<p>
次を行うことが期待される：
◎
↓</p>
<ul>
	<li>
利用者が［
`~hyperlink$の作動化／`~form提出＠~HTMLforms#form-submission$
］の側面
— 後続な`~navi$用には，どの`~navigable$が利用されることになるか、
など —
を制御できるようにする。
◎
User agents are expected to allow the user to control aspects of hyperlink activation and form submission, such as which navigable is to be used for the subsequent navigation.
</li>
	<li>
［
`~hyperlink$ ／ `~form＠~HEforms#the-form-element$
］に対しては、
それによる`~navi$を誘発する前に，利用者が その行先を発見できるようにする。
◎
User agents are expected to allow users to discover the destination of hyperlinks and of forms before triggering their navigation.
</li>
	<li>
利用者に［
`~hyperlink$が`~hyperlink聴取$を含むかどうか
］, および 最小限［
そのような聴取の一環として，どの~domainに接触することになるか
］を伝える。
◎
User agents are expected to inform the user of whether a hyperlink includes hyperlink auditing, and to let them know at a minimum which domains will be contacted as part of such auditing.
</li>
</ul>

<p>
~UAは、
利用者に次を許容してもヨイ
⇒
［
`q$e ／ `blockquote$e ／ `ins$e ／ `del$e
］要素の `cite^a 属性で`指示される~URL＠~HTMLurl#encoding-parsing-a-url$へ，`~navigable$を`~navigate$する。
◎
User agents may allow users to navigate navigables to the URLs indicated by the cite attributes on q, blockquote, ins, and del elements.
</p>

<p>
~UAは、
上で論じたとおり，自身の~UIにて［
`link$e 要素により作成される`~hyperlink$
］を表面化してもヨイ。
◎
User agents may surface hyperlinks created by link elements in their user interface, as discussed previously.
</p>

			</section>
			<section id="the-title-attribute-2">
<h4 title="The title attribute">15.7.2. `title^a 属性</h4>

<p>
`title$a 属性を有する要素に対しては、［
利用者から要請されたときは，要素の`助言的~情報$を公開すること
］, および［
そのような情報が在ることを利用者に気付かせること
］が期待される。
◎
User agents are expected to expose the advisory information of elements upon user request, and to make the user aware of the presence of such information.
</p>

<p>
利用者が~pointing装置を利用できる対話的かつ~graphicな~system上では、
これは，~tooltipの形をとることもできる。
利用者が~pointing装置を利用できないときは、
何らかの他の流儀で内容を可用にすることが期待される
— 例えば，次により：
◎
On interactive graphical systems where the user can use a pointing device, this could take the form of a tooltip. When the user is unable to use a pointing device, then the user agent is expected to make the content available in some other fashion, e.g.＼
</p>
<ul>
	<li>
要素を`~focus可能な区画$にして、
要素が`~focusされ$たときは，要素の`助言的~情報$を常に表示する。
◎
by making the element a focusable area and always displaying the advisory information of the currently focused element, or＼
</li>
	<li>
あるいは，~touch装置~上では、
利用者が~screenを~panするに伴い，要素の`助言的~情報$を利用者の指先の傍に示す。
◎
by showing the advisory information of the elements under the user's finger on a touch device as the user pans around the screen.
</li>
</ul>

<p>
~tooltipにおいては、
次に従うことが期待される：
◎
↓</p>
<ul>
	<li>
文字 `000A^U `LINE FEED^cn（ LF ）は、
行l分断を生じさせる。
◎
U+000A LINE FEED (LF) characters are expected to cause line breaks in the tooltip;＼
</li>
	<li>
文字 `0009^U `CHARACTER TABULATION^cn（ ~tab ）は、
その次の~glyphが［
行lの終端方向に 0 でない~~距離にある，次の~tab-stop
］に揃うように具現化する
— ここで，~tab-stopたちは、
行lの始端から［
`0020^U `SPACE^cn 文字の横幅の 8 倍
］~~周期の各~地点に生じるとする。
◎
U+0009 CHARACTER TABULATION (tab) characters are expected to render as a nonzero horizontal shift that lines up the next glyph with the next tab stop, with tab stops occurring at points that are multiples of 8 times the width of a U+0020 SPACE character.
</li>
</ul>

<p class="example">
例えば，視覚的な~UAは、
`title$a 属性を有する要素を`~focus可能$にして，［
そのような要素が`~focusされ$ている間は，その~tooltipを要素の下に示す
］ようにすることもできる。
これにより、
利用者には［
文書~内を~tab~UIkeyで~~巡回して，すべての助言的~textを見出す
］ことが許容されるようになる。
◎
For example, a visual user agent could make elements with a title attribute focusable, and could make any focused element with a title attribute show its tooltip under the element while the element has focus. This would allow a user to tab around the document to find all the advisory text.
</p>

<p class="example">
別の例として，~screen~readerは、
~tooltipを伴う要素を読上げるときには，［
ある指示音, それ用に結付けられた~UIkey
］を供して［
当の~UIkeyが押されたときは、
最後に再生した指示音に対応する~tooltipを読上げる
］ようにすることもできる。
◎
As another example, a screen reader could provide an audio cue when reading an element with a tooltip, with an associated key to read the last tooltip for which a cue was played.
</p>

			</section>
			<section id="editing-hosts">
<h4 title="Editing hosts">15.7.3. 編集中の~host</h4>

<p>
現在の~text編集-用~caret
（すなわち、
`作動中な範囲$
— それが空で，`編集中の~host$内に在るならば【？】）
が在るならば、
~CSS具現化~modelの目的においては，［
縦幅は~caretのそれ, 横幅は 0 にされた，行内`置換d要素$
］の様に動作することが期待される。
◎
The current text editing caret (i.e. the active range, if it is empty and in an editing host), if any, is expected to act like an inline replaced element with the vertical dimensions of the caret and with zero width for the purposes of the CSS rendering model.
</p>

<p class="note">注記：
このことは，塊が空であっても、［
その内側に~caretを有し得ること
］および［
~caretがそのような要素~内に在るときは，~marginは要素を`挟むように相殺-$しなくなること
］を意味する。
◎
This means that even an empty block can have the caret inside it, and that when the caret is in such an element, it prevents margins from collapsing through the element.
</p>

			</section>
			<section id="text-rendered-in-native-user-interfaces">
<h4 title="Text rendered in native user interfaces">15.7.4. ~native~UIにて具現化される~text</h4>

<p>
~UIにて公開される~textに対しては、
~Unicode意味論を尊守することが期待される
— 例えば、［
~dialog／~title~bar／~popup~menu／~tooltip
］内に示される~textに対し，双方向-~algoを~supportするなど。
［
要素の内容／属性の値
］から得された~textに対しては、［
当の要素の`方向性$／当の`属性の方向性$
］を尊守する方式で，具現化することが期待される。
◎
User agents are expected to honor the Unicode semantics of text that is exposed in user interfaces, for example supporting the bidirectional algorithm in text shown in dialogs, title bars, popup menus, and tooltips. Text from the contents of elements is expected to be rendered in a manner that honors the directionality of the element from which the text was obtained. Text from attributes is expected to be rendered in a manner that honours the directionality of the attribute.
</p>

<div class="example">
<p>
次の~markupを考える
— ~programming言語を選ぶ `select^e 要素と~Hebrew~textが在る。
言語~名の一部を成している，~textとしての約物は、
左横書きにすることが重要になる：
◎
Consider the following markup, which has Hebrew text asking for a programming language, the languages being text for which a left-to-right direction is important given the punctuation in some of their names:
</p>

<pre class="lang-html">
&lt;p dir="rtl" lang="he"&gt;
 &lt;label&gt;
  <span dir="rtl" lang="he">&#x5D1;&#x5D7;&#x5E8; &#x5E9;&#x5E4;&#x5EA; &#x5EA;&#x5DB;&#x5E0;&#x5D5;&#x5EA;:</span>
  &lt;select&gt;
   &lt;option dir="ltr"&gt;C++&lt;/option&gt;
   &lt;option dir="ltr"&gt;C#&lt;/option&gt;
   &lt;option dir="ltr"&gt;FreePascal&lt;/option&gt;
   &lt;option dir="ltr"&gt;F#&lt;/option&gt;
  &lt;/select&gt;
 &lt;/label&gt;
&lt;/p&gt;
</pre>


<p>
`select$e 要素を`~drop-down~box$として正しく具現化するためには、
約物を［
~drop-down, 現在の選択を示している~box内
］で同じに揃えることになるであろう。
◎
If the select element was rendered as a drop down box, a correct rendering would ensure that the punctuation was the same both in the drop down, and in the box showing the current selection.
</p>

<figure>
<a id="_dgm-drop-down-rendering"></a>
</figure>

</div>

<div class="example">

<p>
属性~値の方向性は、
次にデモるように，属性と［
それを有する要素の `dir$a 属性
］に依存する。
次の~markupを考える：
◎
The directionality of attributes depends on the attribute and on the element's dir attribute, as the following example demonstrates. Consider this markup:
</p>

<pre class="lang-html">
<bdo dir="ltr">&lt;table&gt;
 &lt;tr&gt;
  &lt;th abbr="(&#x5D0;" dir=ltr&gt;A
  &lt;th abbr="(&#x5D0;" dir=rtl&gt;A
  &lt;th abbr="(&#x5D0;" dir=auto&gt;A
&lt;/table&gt;</bdo>
</pre>

<div>
<p>
`abbr＠~HEtables#attr-th-abbr$a 属性が，
例えば~tooltipその他の~UIで具現化される場合：
</p>
<ul>
	<li>
1 個目の `th^e では、
方向は `ltr^v なので，丸括弧は左端に来ることになる。
</li>
	<li>
2 個目では、
方向は `rtl^v なので，丸括弧は右端に来ることになる。
</li>
	<li>
3 個目では、
方向は `属性~値から^em `rtl^v に決定されるので，丸括弧は右端に来ることになる。
</li>
</ul>

<p class="trans-note">【
具現化の目的においては、
丸括弧が右端に来るときには右~丸括弧~用の~glyphが利用されよう。
】</p>
◎
If the abbr attributes are rendered, e.g. in a tooltip or other user interface, the first will have a left parenthesis (because the direction is 'ltr'), the second will have a right parenthesis (because the direction is 'rtl'), and the third will have a right parenthesis (because the direction is determined from the attribute value to be 'rtl').
</div>

<p>
しかしながら、
`方向性有りな属性$でなかった場合，異なる結果になろう：
◎
However, if instead the attribute was not a directionality-capable attribute, the results would be different:
</p>

<pre class="lang-html">
<bdo dir="ltr">&lt;table&gt;
 &lt;tr&gt;
  &lt;th data-abbr="(&#x5D0;" dir=ltr&gt;A
  &lt;th data-abbr="(&#x5D0;" dir=rtl&gt;A
  &lt;th data-abbr="(&#x5D0;" dir=auto&gt;A
&lt;/table&gt;</bdo>
</pre>

<p>
この事例では、
~UAが（例えば，~debug環境の）~UIにて `data-abbr^a 属性を公開するとするとき、
3 個目のそれに対しては，丸括弧は`左端^emに具現化されることになる
— 方向は，要素の内容から決定されることになるので。
◎
In this case, if the user agent were to expose the data-abbr attribute in the user interface (e.g. in a debugging environment), the last case would be rendered with a left parenthesis, because the direction would be determined from the element's contents.
</p>

  </div>

<p>
~scriptにより供される文字列
（例： `window.alert()$c に対する引数）
が表示されるときは、
双方向-~algoにて定義されるとおり， 1 個~以上の［
双方向-~algo段落
］からなる独立な集合として扱うことが期待される
— 一例として、［
文字 `000A^U `LINE FEED^cn（ LF ）による，段落~分断法の挙動
］を~supportすることも含む。
双方向-~algoにおいて，そのような~textの段落~levelを決定する目的においては、
この仕様は，［
`BIDI$r による規則 P2, P3 より高~levelな上書き
］は`供さない^em。
◎
A string provided by a script (e.g. the argument to window.alert()) is expected to be treated as an independent set of one or more bidirectional algorithm paragraphs when displayed, as defined by the bidirectional algorithm, including, for instance, supporting the paragraph-breaking behavior of U+000A LINE FEED (LF) characters. For the purposes of determining the paragraph level of such text in the bidirectional algorithm, this specification does not provide a higher-level override of rules P2 and P3. [BIDI]
</p>

<p>
作者は、
必要なら，所与の段落を~Unicode文字［
`200E^U `LEFT-TO-RIGHT MARK^cn ／  `200F^U `RIGHT-TO-LEFT MARK^cn
］から開始させることにより，特定0の方向を施行できる。
◎
When necessary, authors can enforce a particular direction for a given paragraph by starting it with the Unicode U+200E LEFT-TO-RIGHT MARK or U+200F RIGHT-TO-LEFT MARK characters.
</p>

<div class="example">
<p>
したがって、
次の~scriptによる結果は：
◎
Thus, the following script:
</p>

<pre class="lang-js">
alert('\u05DC\u05DE\u05D3 HTML <mark>\u05D4\u05D9\u05D5\u05DD!</mark>')
</pre>

<div class="p">
<p>
~UAの~UI用の言語, ~pageの方向, 当の要素の［
言語, 方向
］に関わらず、
常に，次の様に読まれる~messageになる
⇒
"<bdo lang="" dir="rtl">&#x05DC;&#x05DE;&#x05D3;&nbsp;LMTH&nbsp;<mark>&#x05D4;&#x05D9;&#x05D5;&#x05DD;!</mark></bdo>"
◎終
次ではなく
⇒
"<bdo lang="" dir="ltr">&#x05D3;&#x05DE;&#x05DC;&nbsp;HTML&nbsp;<mark>&#x05DD;&#x05D5;&#x05D9;&#x05D4;!</mark></bdo>"
</p>
<div class="_en" lang="en">
...would always result in a message reading "<bdo lang="" data-x="" dir="rtl">&#x05DC;&#x05DE;&#x05D3;&nbsp;LMTH&nbsp;&#x05D4;&#x05D9;&#x05D5;&#x05DD;!</bdo>" (not "<bdo lang="" dir="ltr">&#x05D3;&#x05DE;&#x05DC;&nbsp;HTML&nbsp;&#x05DD;&#x05D5;&#x05D9;&#x05D4;!</bdo>"), regardless of the language of the user agent interface or the direction of the page or any of its elements.
</div>
</div>
</div>

<div class="example">
<p>
もっと複階的な例として、
次の~scriptを考える：
◎
For a more complex example, consider the following script:
</p>

<pre class="lang-js bad">
/* <span class="comment">
警告：この~scriptは、
右横書き用字系を正しく取扱わない。
◎
Warning: this script does not handle right-to-left scripts correctly
</span> */
var %s;
if (%s = prompt('氏名を入力願います。')) {
  alert(%s + '様ですね。森田様、' + %s + '様、木田様がご同行になります。');
}
</pre>

<!-- 
var s;
if (s = prompt('What is your name?')) {
  alert(s + '! Ok, Fred, ' + s + ', and Wilma will get the car.');
}
-->

<p>
利用者が "<kbd>林田</kbd>" と手入力したとき、
~UAは，次の様に~alertすることになる
⇒
<samp>林田様ですね。森田様、林田様、木田様がご同行になります。</samp>
◎
When the user enters "Kitty", the user agent would alert＼
"Kitty! Ok, Fred, Kitty, and Wilma will get the car.".＼
</p>

<div class="p">
<p>
一方で，利用者が
"<kbd dir="rtl" lang="ar">&#x644;&#x627;&nbsp;&#x623;&#x641;&#x647;&#x645;</kbd>"
と手入力した場合、
双方向-~algoにより，段落の方向は右横書きであると決定され、
出力は次のように切り刻まれる
⇒
"<samp lang="ar"><bdo dir="rtl">&#x644;&#x627;&nbsp;&#x623;&#x641;&#x647;&#x645;様田森。ねすで様、&#x644;&#x627;&nbsp;&#x623;&#x641;&#x647;&#x645;すまりなに行同ごが様田木、様。</bdo></samp>"
<div class="_en" lang="en">
However, if the user enters "<kbd dir="rtl" lang="ar">&#x644;&#x627;&nbsp;&#x623;&#x641;&#x647;&#x645;</kbd>", then the bidirectional algorithm will determine that the direction of the paragraph is right-to-left, and so the output will be the following unintended mess:＼
"<bdo lang="" dir="rtl">&#x644;&#x627;&nbsp;&#x623;&#x641;&#x647;&#x645;!&nbsp;derF&nbsp;,kO,&nbsp;&#x644;&#x627;&nbsp;&#x623;&#x641;&#x647;&#x645;,&nbsp;rac&nbsp;eht&nbsp;teg&nbsp;lliw&nbsp;amliW&nbsp;dna.</bdo>"
</div>
</div>

<input type="button" value="利用中の~UAで試す" onclick="testBidirectionalAlert()"/>

<p>
文字列に `200E^U `LEFT-TO-RIGHT MARK^cn 文字を接頭すれば、
利用者から供された~text（または方向性が未知な他の~text）で開始する~alertを，左横書きに具現化するよう強制できる：
◎
To force an alert that starts with user-provided text (or other text of unknown directionality) to render left-to-right, the string can be prefixed with a U+200E LEFT-TO-RIGHT MARK character:
</p>

<pre class="lang-js">
var %s;
if (%s = prompt('氏名を入力願います。')) {
  alert('<strong>\u200E</strong>' + %s + '様ですね。森田様、' + %s + '様、木田様がご同行になります。');
}
</pre>

<input type="button" value="利用中の~UAで試す" onclick="testBidirectionalAlert(true)"/>

【！ alert('<strong>\u200E</strong>' + s + '! Ok, Fred, ' + s + ', and Wilma will get the car.');】

</div>

			</section>
		</section>
		<section id="print-media">
<h3 title="Print media">15.8. 印刷-媒体</h3>

<p>
~UAには、
利用者が`文書$の
`物理-形を得する@
（物理-形を~~模倣する表現を得る場合も含む）
機会を要請できるようにすることが期待される。
例えば、
~pageを［
印刷する ／ `PDF$r 形式に変換する
］選択肢を選択するときなど。
◎
User agents are expected to allow the user to request the opportunity to obtain a physical form (or a representation of a physical form) of a Document. For example, selecting the option to print a page or convert it to PDF format. [PDF]
</p>

<p>
利用者が実際に`文書$の`物理-形を得する$ときは、
印刷-媒体~用に`文書$の新たな具現化を作成することが期待される。
◎
When the user actually obtains a physical form (or a representation of a physical form) of a Document, the user agent is expected to create a new rendering of the Document for the print media.
</p>

		</section>
		<section id="unstyled-xml-documents">
<h3 title="Unstyled XML documents">15.9. ~style無し~XML文書</h3>

<p>
~HTML~UAは，ある種の状況下では、
具現化しようとしている文書が非~HTML文書であって，自身に組込みの知識を欠くような語彙が利用されていることを見出すこともある。
この節では、
~UAが そのような文書を何か有用な方式で取扱うための仕方を供する。
◎
HTML user agents may, in certain circumstances, find themselves rendering non-HTML documents that use vocabularies for which they lack any built-in knowledge. This section provides for a way for user agents to handle such documents in a somewhat useful manner.
</p>

<p>
`文書$が`~style無し文書$であっても、
`~style無し文書~view$を具現化することが期待される。
◎
While a Document is an unstyled document, the user agent is expected to render an unstyled document view.
</p>

<p>
次に挙げる条件~すべてを満たす`文書$ %文書 は、
`~style無し文書@
であるとされる：
◎
A Document is an unstyled document while it matches the following conditions:
</p>
<ul>
	<li>
%文書 には、
`作者~level$の~stylesheetは無い
（［
~HTTP~header,
`xml-stylesheet^c などの処理命令,
`link$e 要素,
`style$e などの~inline要素,
その他
］の仕組みにより参照される何であれ）。
◎
The Document has no author style sheets (whether referenced by HTTP headers, processing instructions, elements like link, inline elements like style, or any other mechanism).
</li>
	<li>
%文書 内のどの要素も，`呈示~用~hint$を伴わない。
◎
None of the elements in the Document have any presentational hints.
</li>
	<li>
%文書 内のどの要素も，`~style属性$を有さない。
◎
None of the elements in the Document have any style attributes.
</li>
	<li>
%文書 内のどの要素も，次に挙げる名前空間に属さない
⇒＃
`~HTML名前空間$,
`~SVG名前空間$,
`~MathML名前空間$
◎
None of the elements in the Document are in any of the following namespaces: HTML namespace, SVG namespace, MathML namespace
</li>
	<li>
%文書 には、
`表示域$の他に`~focus可能な区画$は無い
（例：~XLinkによるものなど）。
◎
The Document has no focusable area (e.g. from XLink) other than the viewport.
</li>
	<li>
%文書 内に`~hyperlink$は無い
（例：~XLinkによるものなど）。
◎
The Document has no hyperlinks (e.g. from XLink).
</li>
	<li>
次を満たす`~script$は存在しない
⇒
その`設定群~obj$sCの`大域~obj$enVは、
次を満たす
⇒
［
`~window$である
］~AND［
それに`結付けられた文書$ ~EQ %文書
］
◎
There exists no script whose settings object's global object is a Window object with this Document as its associated Document.
</li>
	<li>
%文書 内のどの要素にも，~event~listenerは登録されていない。
◎
None of the elements in the Document have any registered event listeners.
</li>
</ul>

<div>
<p>
`~style無し文書~view@
とは、
~CSSに則って~DOMが具現化されることはないが
（この文脈~下で適用-可能な~styleはないので、
結果は単に~textの羅列になるであろう）、
代わりに，開発者にとって有用な方式で具現化されるような~viewである。
例えば、
次に挙げるいずれかの~~形をとり得るであろう：
</p>
<ul>
	<li>
単に、
%文書 の~sourceを構文~強調も伴わせて示す。
</li>
	<li>
その~DOM~treeそのものを表示する。
</li>
	<li>
単に、
~pageは~styleされない文書であることを~~伝える~message。
</li>
</ul>

◎
An unstyled document view is one where the DOM is not rendered according to CSS (which would, since there are no applicable styles in this context, just result in a wall of text), but is instead rendered in a manner that is useful for a developer. This could consist of just showing the Document object's source, maybe with syntax highlighting, or it could consist of displaying just the DOM tree, or simply a message saying that the page is not a styled document.
</div>

<p class="note">注記：
`文書$が`~style無し文書$でなくなったときは，上の各~条件は適用されなくなり、
これらの要件に従う~UAは，定例の~CSS具現化を利用するよう切替えることになる。
◎
If a Document stops being an unstyled document, then the conditions above stop applying, and thus a user agent following these requirements will switch to using the regular CSS rendering.
</p>

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