具現化 — Rendering

廃用にされた特色機能に関係する記述

廃用にされた特色機能 （主に属性）のみに関係する記述は、この段落と同じ~styleが適用されている。

~window下端の “~~廃用” ~buttonで、これらの記述の表示の有無を切り替えることもできる。

14.3.1. `hidden^a 属性を有する要素

@namespace url(http://www.w3.org/1999/xhtml);

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

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

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

@media (scripting) {
  noscript { display: none !important; }
}

14.3.2. 頁

@namespace url(http://www.w3.org/1999/xhtml);

html, body { display: block; }

`body$e 要素の `容器~frame要素@ は、次を満たす［ `frame$e ／ `iframe$e ］要素があるならば それであり，他の場合は無いとする ⇒ 要素は［ `body$e 要素の`~node文書$が`属する閲覧文脈$ ］を`入子にして$いる`閲覧文脈~容器$である ◎ If the body element's node document's browsing context is a nested browsing context, and the browsing context container of that nested browsing context 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.

上の要件は、例えば頁にて `iframe$e を利用すれば，別の頁（別の`生成元$からのものも含む）の~marginを変更し得ることを含意する。 これは，場合によっては、~phishingその他，［ 利用者を誤誘導する目的で、頁が作者の意図に反する~~形で具現化することを企図する ］ような攻撃を許容するため、保安上の~riskになり得る。 ◎ 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.

`入子の閲覧文脈$ %B に属する`文書$に対しては、［ %V ~EQ %B の`表示域$, %C ~EQ %B の`閲覧文脈~容器$ ］とするとき，次が期待される： ◎ ↓

• %V の~sizeと位置を， %C の`内容~box$の内側に収まるようにする。 ただし， %C が`具現化されて$いない場合は、 %V の~sizeは縦横とも~zeroにする。 ◎ If a Document is in a nested browsing context, it is expected to be positioned and sized to fit inside the content box of its browsing context container. If a browsing context's browsing context container is not being rendered, the browsing context is expected to have a viewport with zero width and zero height.

• 次のいずれも満たされるならば、 %V に `overflow$p ~propが適用されるかどうかに関わらず， %V には~scroll~barを示さないようにする：

  • %C は［ `frame$e ／ `iframe$e ］要素である
  • %C は `scrolling^a 属性を有していて，その値 ~IN`~ACI$ { `off^l, `noscroll^l, `no^l }
  ◎ If the Document is in a nested browsing context, and the browsing context container of that nested browsing context is a frame or iframe element, and 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 scroll bars from being shown for the viewport of the nested browsing context, regardless of the 'overflow' property that applies to that viewport.

14.3.3. `~flow内容$

@namespace url(http://www.w3.org/1999/xhtml);

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

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

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

address { font-style: italic; }

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

dialog:not([open]) { display: none; }
dialog {
  position: absolute;
  offset-inline-start: 0; offset-inline-end: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  border: solid;
  padding: 1em;
  background: white;
  color: black;
}
dialog::backdrop {
  background: rgba(0,0,0,0.1);
}

slot {
  display: contents;
}

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

@namespace url(http://www.w3.org/1999/xhtml);

pre[wrap] { white-space: pre-wrap; }

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

@namespace url(http://www.w3.org/1999/xhtml);

form { margin-block-end: 1em; }

14.3.4. `句内容$

@namespace url(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; }
a:link[rel~=help i], a:visited[rel~=help i],
area:link[rel~=help i], area:visited[rel~=help i] { cursor: help; }

:focus { outline: auto; }

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

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; }

br { display-outside: newline; } /* 
これには`双向~含意$もある
◎
this also has bidi implications
 */
nobr { white-space: nowrap; }
wbr { display-outside: break-opportunity; } /* 
これには`双向~含意$もある
◎
this also has bidi implications
 */
nobr wbr { white-space: normal; }

@namespace url(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; }

~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]

~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.

注記： 可能な所では、前述の要件は、~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.)

正しい~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.

`行内~要素$上の `clear$p ~propに対しては、 （ `clear^a 属性を有する `br$e 要素を具現化するために 【この注釈は `br^e のみ特別扱いにする（すなわち， `br^e を塊~boxの一種と扱う）ことを意味するのか？】 ）［ CSS 仕様における この効果に関する規範的でない注記にて述べられる方式 ］で~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 the CSS specification.

`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.

【 以下、（廃用にされた） `font$e 要素~用の記述 — この訳では省略する。 】

14.3.5. 双方向的~text

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

/* 
`br$e ／ `wbr$e
要素~上の
`content^p ~propを設定する規則
には、双向~含意もある
◎
the rules setting the 'content' property on br and wbr elements also has bidi implications
 */

`input$e 要素の［ `dir$a 属性は`自動$ 状態にある ］, かつ［ `type$input 属性は `Text$st 状態にある ］ときは、［［ `unicode-bidi$p ~propを `plaintext^v に設定する ］ような`~UA~level$の~stylesheet規則 ］を持っていたかのように動作することが期待される。 ◎ 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'.

入力~欄（すなわち， `textarea$e 要素, および `type$input 属性が［ `Text$st ／ `Search$st ／ `Tel$st ／ `Url$st ／ `Email$st ］状態にある `input$e 要素）には、［ 方向性が要素の `direction$p ~propに合致する ］ような，編集用の~UIを呈示することが期待される。 ◎ Input fields (i.e. textarea elements, and input elements when their type attribute is in the Text, Search, Telephone, URL, or E-mail state) are expected to present an editing user interface with a directionality that matches the element's 'direction' property.

文書の文字~符号化法が `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]

@namespace url(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, 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;
}

14.3.6. 引用符

下の~blockは、 `CLDR$r（ `Unicode Common Locale Data Repository^en ）から自動的に生成されている： ◎ This block is automatically generated from the Unicode Common Locale Data Repository. [CLDR]

~UAには、下の~block（定期的に更新されることになる）を利用するか, あるいは `CLDR$r の~sourceから自前の複製を，直に自動~生成することが期待される。 言語~codeは、 CLDR ~file名から導出されている。 引用符は、 `delimiter^c ~blockから導出されるとともに，~fallbackは CLDR に文書化されているように取扱われる。 ◎ User agents are expected to use either the block below (which will be regularly updated) or to automatically generate their own copy directly from the source material. The language codes are derived from the CLDR file names. The quotes are derived from the delimiter blocks, with fallback handled as specified in the CLDR documentation.

【 簡潔に記すため、この訳では，次の表記を導入する： 】

下の~CSS~blockにおける表記 X(%lang) は、言語~code %lang に対し，次で与えられる選択子を表すものとする ⇒ :root:lang(%lang), :not(:lang(%lang)) > :lang(%lang)

@namespace url(http://www.w3.org/1999/xhtml);

:root       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(af)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(agq)      { quotes: '\201e' '\201d' '\201a' '\2019' } /* „ ” ‚ ’ */
X(ak)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(am)       { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
X(ar)       { quotes: '\201d' '\201c' '\2019' '\2018' } /* ” “ ’ ‘ */
X(asa)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(ast)      { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
X(az)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(az-Cyrl)  { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
X(bas)      { quotes: '\00ab' '\00bb' '\201e' '\201c' } /* « » „ “ */
X(be)       { quotes: '\00ab' '\00bb' '\201e' '\201c' } /* « » „ “ */
X(bem)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(bez)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(bg)       { quotes: '\201e' '\201c' '\201e' '\201c' } /* „ “ „ “ */
X(bm)       { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
X(bn)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(br)       { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
X(brx)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(bs)       { quotes: '\201e' '\201d' '\2018' '\2019' } /* „ ” ‘ ’ */
X(bs-Cyrl)  { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
X(ca)       { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
X(cgg)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(chr)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(cs)       { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
X(cy)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(da)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(dav)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(de)       { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
X(dje)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(dsb)      { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
X(dua)      { quotes: '\00ab' '\00bb' '\2018' '\2019' } /* « » ‘ ’ */
X(dyo)      { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
X(dz)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(ebu)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(ee)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(el)       { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
X(en)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(es)       { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
X(et)       { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
X(eu)       { quotes: '\201c' '\201d' '\201c' '\201d' } /* “ ” “ ” */
X(ewo)      { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
X(fa)       { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
X(ff)       { quotes: '\201e' '\201d' '\201a' '\2019' } /* „ ” ‚ ’ */
X(fi)       { quotes: '\201d' '\201d' '\2019' '\2019' } /* ” ” ’ ’ */
X(fil)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(fo)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(fr)       { quotes: '\00ab' '\00bb' '\00ab' '\00bb' } /* « » « » */
X(fr-CH)    { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
X(ga)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(gd)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(gl)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(gsw)      { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
X(gu)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(guz)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(ha)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(he)       { quotes: '\201d' '\201d' '\2019' '\2019' } /* ” ” ’ ’ */
X(hi)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(hr)       { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
X(hsb)      { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
X(hu)       { quotes: '\201e' '\201d' '\00bb' '\00ab' } /* „ ” » « */
X(hy)       { quotes: '\00ab' '\00bb' '\00ab' '\00bb' } /* « » « » */
X(id)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(ig)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(is)       { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
X(it)       { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
X(ja)       { quotes: '\300c' '\300d' '\300e' '\300f' } /* 「 」 『 』 */
X(jgo)      { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
X(jmc)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(ka)       { quotes: '\201e' '\201c' '\00ab' '\00bb' } /* „ “ « » */
X(kab)      { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
X(kam)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(kde)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(kea)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(khq)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(ki)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(kk)       { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
X(kkj)      { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
X(kln)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(km)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(kn)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(ko)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(ksb)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(ksf)      { quotes: '\00ab' '\00bb' '\2018' '\2019' } /* « » ‘ ’ */
X(ky)       { quotes: '\00ab' '\00bb' '\201e' '\201c' } /* « » „ “ */
X(lag)      { quotes: '\201d' '\201d' '\2019' '\2019' } /* ” ” ’ ’ */
X(lb)       { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
X(lg)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(ln)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(lo)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(lrc)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(lt)       { quotes: '\201e' '\201c' '\201e' '\201c' } /* „ “ „ “ */
X(lu)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(luo)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(luy)      { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
X(lv)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(mas)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(mer)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(mfe)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(mg)       { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
X(mgo)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(mk)       { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
X(ml)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(mn)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(mr)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(ms)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(mt)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(mua)      { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
X(my)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(mzn)      { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
X(naq)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(nb)       { quotes: '\00ab' '\00bb' '\2018' '\2019' } /* « » ‘ ’ */
X(nd)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(ne)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(nl)       { quotes: '\2018' '\2019' '\201c' '\201d' } /* ‘ ’ “ ” */
X(nmg)      { quotes: '\201e' '\201d' '\00ab' '\00bb' } /* „ ” « » */
X(nn)       { quotes: '\00ab' '\00bb' '\2018' '\2019' } /* « » ‘ ’ */
X(nnh)      { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
X(nus)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(nyn)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(pa)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(pl)       { quotes: '\201e' '\201d' '\00ab' '\00bb' } /* „ ” « » */
X(pt)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(pt-PT)    { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
X(rn)       { quotes: '\201d' '\201d' '\2019' '\2019' } /* ” ” ’ ’ */
X(ro)       { quotes: '\201e' '\201d' '\00ab' '\00bb' } /* „ ” « » */
X(rof)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(ru)       { quotes: '\00ab' '\00bb' '\201e' '\201c' } /* « » „ “ */
X(rw)       { quotes: '\00ab' '\00bb' '\2018' '\2019' } /* « » ‘ ’ */
X(rwk)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(sah)      { quotes: '\00ab' '\00bb' '\201e' '\201c' } /* « » „ “ */
X(saq)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(sbp)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(seh)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(ses)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(sg)       { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
X(shi)      { quotes: '\00ab' '\00bb' '\201e' '\201d' } /* « » „ ” */
X(shi-Latn) { quotes: '\00ab' '\00bb' '\201e' '\201d' } /* « » „ ” */
X(si)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(sk)       { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
X(sl)       { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
X(sn)       { quotes: '\201d' '\201d' '\2019' '\2019' } /* ” ” ’ ’ */
X(so)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(sq)       { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
X(sr)       { quotes: '\201e' '\201c' '\2018' '\2018' } /* „ “ ‘ ‘ */
X(sr-Latn)  { quotes: '\201e' '\201c' '\2018' '\2018' } /* „ “ ‘ ‘ */
X(sv)       { quotes: '\201d' '\201d' '\2019' '\2019' } /* ” ” ’ ’ */
X(sw)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(ta)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(te)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(teo)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(th)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(ti-ER)    { quotes: '\2018' '\2019' '\201c' '\201d' } /* ‘ ’ “ ” */
X(tk)       { quotes: '\201c' '\201d' '\201c' '\201d' } /* “ ” “ ” */
X(to)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(tr)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(twq)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(tzm)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(uk)       { quotes: '\00ab' '\00bb' '\201e' '\201c' } /* « » „ “ */
X(ur)       { quotes: '\201d' '\201c' '\2019' '\2018' } /* ” “ ’ ‘ */
X(uz)       { quotes: '\201c' '\201d' '\2019' '\2018' } /* “ ” ’ ‘ */
X(uz-Cyrl)  { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(vai)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(vai-Latn) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(vi)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(vun)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(xog)      { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(yav)      { quotes: '\00ab' '\00bb' '\00ab' '\00bb' } /* « » « » */
X(yo)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(yue)      { quotes: '\300c' '\300d' '\300e' '\300f' } /* 「 」 『 』 */
X(yue-Hans) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(zgh)      { quotes: '\00ab' '\00bb' '\201e' '\201d' } /* « » „ ” */
X(zh)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
X(zh-Hant)  { quotes: '\300c' '\300d' '\300e' '\300f' } /* 「 」 『 』 */
X(zu)       { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */

14.3.7. ~sectionと見出し

@namespace url(http://www.w3.org/1999/xhtml);

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

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

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

@namespace url(http://www.w3.org/1999/xhtml);

%x h1 {
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  font-size: 1.50em;
}
%x %x h1 {
  margin-block-start: 1.00em;
  margin-block-end: 1.00em;
  font-size: 1.17em;
}
%x %x %x h1 {
  margin-block-start: 1.33em;
  margin-block-end: 1.33em;
  font-size: 1.00em;
}
%x %x %x %x h1 {
  margin-block-start: 1.67em;
  margin-block-end: 1.67em;
  font-size: 0.83em;
}
%x %x %x %x %x h1 {
  margin-block-start: 2.33em;
  margin-block-end: 2.33em;
  font-size: 0.67em;
}

%x hgroup > h1 ~ h2 {
  margin-block-start: 1.00em;
  margin-block-end: 1.00em;
  font-size: 1.17em;
}
%x %x hgroup > h1 ~ h2 {
  margin-block-start: 1.33em;
  margin-block-end: 1.33em;
  font-size: 1.00em;
}
%x %x %x hgroup > h1 ~ h2 {
  margin-block-start: 1.67em;
  margin-block-end: 1.67em;
  font-size: 0.83em;
}
%x %x %x %x hgroup > h1 ~ h2 {
  margin-block-start: 2.33em;
  margin-block-end: 2.33em;
  font-size: 0.67em;
}

%x hgroup > h1 ~ h3 {
  margin-block-start: 1.33em;
  margin-block-end: 1.33em;
  font-size: 1.00em;
}
%x %x hgroup > h1 ~ h3 {
  margin-block-start: 1.67em;
  margin-block-end: 1.67em;
  font-size: 0.83em;
}
%x %x %x hgroup > h1 ~ h3 {
  margin-block-start: 2.33em;
  margin-block-end: 2.33em;
  font-size: 0.67em;
}

%x hgroup > h1 ~ h4 {
  margin-block-start: 1.67em;
  margin-block-end: 1.67em;
  font-size: 0.83em;
}
%x %x hgroup > h1 ~ h4 {
  margin-block-start: 2.33em;
  margin-block-end: 2.33em;
  font-size: 0.67em;
}

%x hgroup > h1 ~ h5 {
  margin-block-start: 2.33em;
  margin-block-end: 2.33em;
  font-size: 0.67em;
}

◎ The shorthand is used to keep this block at least mildly readable.

14.3.8. ~list

@namespace url(http://www.w3.org/1999/xhtml);

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

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

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

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

ol { list-style-type: decimal; }

dir, menu, ul {
  list-style-type: disc;
}
:matches(dir, menu, ol, ul) :matches(dir, menu, ul) {
  list-style-type: circle;
}
:matches(dir, menu, ol, ul) :matches(dir, menu, ol, ul) :matches(dir, menu, ul) {
  list-style-type: square;
}

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

@namespace url(http://www.w3.org/1999/xhtml);

ol[type="1"], li[type="1"] { list-style-type: decimal; }
ol[type=a], li[type=a] { list-style-type: lower-alpha; }
ol[type=A], li[type=A] { list-style-type: upper-alpha; }
ol[type=i], li[type=i] { list-style-type: lower-roman; }
ol[type=I], li[type=I] { 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; }

上の~stylesheetの［ `ol$e／`li$e ］要素~用の`属性~選択子$は、`文字大小区別$として扱うことが期待される。 ◎ In the above style sheet, the attribute selectors for the ol and li elements are expected to be treated as case-sensitive.

`li$e 要素の具現化~時には、非~CSS~UAには， `li$e 要素の`序数~値$を利用して ~list項目~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.

この仕様は、まだ `li$e 要素の具現化~用に，~CSS特有な規則を定義していない — ~CSSは、この目的~用に足る~hookをまだ供していないので。 ◎ This specification does not yet define the CSS-specific rules for rendering li elements, because CSS doesn't yet provide sufficient hooks for this purpose.

14.3.9. ~table

@namespace url(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 > tr { vertical-align: middle; }
tr, td, th { vertical-align: inherit; }

table, td, th { border-color: gray; }
thead, tbody, tfoot, tr { border-color: inherit; }

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] > tr > td,
table[rules=none i] > tr > th,
table[rules=groups i] > tr > td,
table[rules=groups i] > tr > th,
table[rules=rows i] > tr > td,
table[rules=rows i] > tr > th,
table[rules=cols i] > tr > td,
table[rules=cols i] > tr > th,
table[rules=all i] > tr > td,
table[rules=all i] > tr > th,
table[rules=none i] > thead > tr > td,
table[rules=none i] > thead > tr > th,
table[rules=groups i] > thead > tr > td,
table[rules=groups i] > thead > tr > th,
table[rules=rows i] > thead > tr > td,
table[rules=rows i] > thead > tr > th,
table[rules=cols i] > thead > tr > td,
table[rules=cols i] > thead > tr > th,
table[rules=all i] > thead > tr > td,
table[rules=all i] > thead > tr > th,
table[rules=none i] > tbody > tr > td,
table[rules=none i] > tbody > tr > th,
table[rules=groups i] > tbody > tr > td,
table[rules=groups i] > tbody > tr > th,
table[rules=rows i] > tbody > tr > td,
table[rules=rows i] > tbody > tr > th,
table[rules=cols i] > tbody > tr > td,
table[rules=cols i] > tbody > tr > th,
table[rules=all i] > tbody > tr > td,
table[rules=all i] > tbody > tr > th,
table[rules=none i] > tfoot > tr > td,
table[rules=none i] > tfoot > tr > th,
table[rules=groups i] > tfoot > tr > td,
table[rules=groups i] > tfoot > tr > th,
table[rules=rows i] > tfoot > tr > td,
table[rules=rows i] > tfoot > tr > th,
table[rules=cols i] > tfoot > tr > td,
table[rules=cols i] > tfoot > tr > th,
table[rules=all i] > tfoot > tr > td,
table[rules=all i] > tfoot > tr > th {
  border-color: black;
}

@namespace url(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; /* 
`~borderが~zeroに等価でない場合のみ$
◎
only if border is not equivalent to zero
 */
}
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] > tr > td,
table[border] > tr > th,
table[border] > thead > tr > td,
table[border] > thead > tr > th,
table[border] > tbody > tr > td,
table[border] > tbody > tr > th,
table[border] > tfoot > tr > td,
table[border] > tfoot > tr > th {
  /* 
`~borderが~zeroに等価でない場合のみ$
◎
only if border is not equivalent to zero
 */
  border-width: 1px;
  border-style: inset;
}
table[rules=none i] > tr > td,
table[rules=none i] > tr > th,
table[rules=none i] > thead > tr > td,
table[rules=none i] > thead > tr > th,
table[rules=none i] > tbody > tr > td,
table[rules=none i] > tbody > tr > th,
table[rules=none i] > tfoot > tr > td,
table[rules=none i] > tfoot > tr > th,
table[rules=groups i] > tr > td,
table[rules=groups i] > tr > th,
table[rules=groups i] > thead > tr > td,
table[rules=groups i] > thead > tr > th,
table[rules=groups i] > tbody > tr > td,
table[rules=groups i] > tbody > tr > th,
table[rules=groups i] > tfoot > tr > td,
table[rules=groups i] > tfoot > tr > th,
table[rules=rows i] > tr > td,
table[rules=rows i] > tr > th,
table[rules=rows i] > thead > tr > td,
table[rules=rows i] > thead > tr > th,
table[rules=rows i] > tbody > tr > td,
table[rules=rows i] > tbody > tr > th,
table[rules=rows i] > tfoot > tr > td,
table[rules=rows i] > tfoot > tr > th {
  border-width: 1px;
  border-style: none;
}
table[rules=cols i] > tr > td,
table[rules=cols i] > tr > th,
table[rules=cols i] > thead > tr > td,
table[rules=cols i] > thead > tr > th,
table[rules=cols i] > tbody > tr > td,
table[rules=cols i] > tbody > tr > th,
table[rules=cols i] > tfoot > tr > td,
table[rules=cols i] > tfoot > tr > th {
  border-width: 1px;
  border-block-start-style: none;
  border-inline-end-style: solid;
  border-block-end-style: none;
  border-inline-start-style: solid;
}
table[rules=all i] > tr > td,
table[rules=all i] > tr > th,
table[rules=all i] > thead > tr > td,
table[rules=all i] > thead > tr > th,
table[rules=all i] > tbody > tr > td,
table[rules=all i] > tbody > tr > th,
table[rules=all i] > tfoot > tr > td,
table[rules=all i] > tfoot > tr > th {
  border-width: 1px;
  border-style: solid;
}

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

table[rules=rows i] > tr,
table[rules=rows i] > thead > tr,
table[rules=rows i] > tbody > tr,
table[rules=rows i] > tfoot > tr {
  border-block-start-width: 1px;
  border-block-start-style: solid;
  border-block-end-width: 1px;
  border-block-end-style: solid;
}

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

@namespace url(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;
}

~CSS~table~modelの目的においては： ◎ ↓

• `col$e 要素は、その `span$A 属性に`指定されている数$と同じだけ在するかのように扱うことが期待される。 ◎ 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.
• ［ `col$e 要素を包含していない `colgroup$e 要素 ］は、その `span$A 属性に`指定されている数$と同じだけ，子 `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.
• ［ `td$e ／ `th$e ］要素~上の `colspan$tdth, `rowspan$tdth 属性は、~cellが何本の［ ~row, ~column ］に~spanしているかに関する 特別な知識を 供する ことが期待される。 ◎ 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.

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

@namespace url(http://www.w3.org/1999/xhtml);

:matches(table, thead, tbody, tfoot, tr) > form {
  display: none !important;
}

14.3.10. 過去互換~用の~margin相殺-法

~nodeのうち，［ ~text~nodeである, かつ `要素間~空白$でない ］もの, および 要素~nodeであるものは、 `~substantial@ とされる。 ◎ A node is substantial if it is a text node that is not inter-element whitespace, or if it is an element node.

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

次に挙げる要素は、 `既定の~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

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

14.3.11. ~form~control

@namespace url(http://www.w3.org/1999/xhtml);

input, select, option, optgroup, button, textarea {
  text-indent: initial;
}

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

textarea { white-space: pre-wrap; }

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

@namespace url(http://www.w3.org/1999/xhtml);

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

各種~form~controlの look＆feel は、 各種~widget節 に述べられる。 ◎ Each kind of form control is also described in the Widgets section, which describes the look and feel of the control.

14.3.12. `hr^e 要素

@namespace url(http://www.w3.org/1999/xhtml);

hr {
  color: gray;
  border-style: inset;
  border-width: 1px;
  margin-block-start: 0.5em;
  margin-inline-end: auto;
  margin-block-end: 0.5em;
  margin-inline-start: auto;
  overflow: hidden;
}

@namespace url(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; }

14.3.13. `fieldset^e, `legend^e 要素

@namespace url(http://www.w3.org/1999/xhtml);

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

legend {
  padding-inline-start: 2px;
  padding-inline-end: 2px;
}

`fieldset$e 要素は、新たな`塊~整形~文脈$を確立することが期待される。 ◎ The fieldset element is expected to establish a new block formatting context.

`fieldset$e 要素が［ 下に挙げる条件すべてに合致する ］ような`子$を持つならば、それらのうち，最初のものが `fieldset$e 要素にて `具現化される~legend@ になる： ◎ If the fieldset element has a child that matches the conditions in the list below, then the first such child is the fieldset element's rendered legend:

• 子は `legend$e 要素である。 ◎ The child is a legend element.
• 子は`~flow外$にない（例：［ 絶対位置されて／浮動されて ］いない）。 ◎ The child is not out-of-flow (e.g. not absolutely positioned or floated).
• 子は~boxを生成している（例えば その `display$p は［ `none^v ／ `contents^v ］にされていない）。 ◎ The child is generating a box (e.g. it is not 'display:none' or 'display:contents').

14.4.1. 埋込みの内容

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

`canvas$e 要素に対しては，次が期待される ⇒ `埋込みの内容$を`表現-$するものは［ 要素に内容が あるならば，それによる~bitmap ／ なければ要素と同じ`内在的~寸法$を伴う`透明な黒$の~bitmap ］を伴うような，`置換~要素$として扱い、他のものは，具現化~modelにおける普通の要素として扱う。 ◎ 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 intrinsic dimensions as the element. Other canvas elements are expected to be treated as ordinary elements in the rendering model.

`object$e 要素に対しては，次が期待される ⇒ ［ 画像 ／ ~plugin ／ `入子の閲覧文脈$ ］を`表現-$するものは `置換~要素$として扱い、他のものは 具現化~modelにおける普通の要素として扱う。 ◎ An object element that represents an image, plugin, or nested browsing context is expected to be treated as a replaced element. Other object elements are expected to be treated as ordinary elements in the rendering model.

`audio$e 要素に対しては，次が期待される ⇒ `~UIを公開し$ているものは ［ およそ，高さ一行分，~UAの~UI特色機能を公開するために必要とされる幅 ］の`置換~要素$として扱い、他のものは その `display$p ~propを［ ~CSS規則にかかわらず `none^v に算出する ］よう強制する。 ◎ 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. 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.

`video$e 要素に対しては，次が期待される： ◎ ↓

• `~UIを公開し$ているかどうかに関わらず，具現化の~sizeに影響させる ⇒ ~controlは，~layoutを変更することなく，頁~内容の上層に重ねることに加え、利用者がそれらを必要しないときは消す。 ◎ 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.
• ［ ~poster~frame／動画の~frame ］表現するものに対しては ⇒ その~frameは，［ その縦横比を保守しつつ, 要素~自身の~sizeを縦横とも超えない ］ような最大の~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.
• 要素の［ ~subtitle／~caption ］は ⇒ ~WebVTTに関連する具現化~規則により定義されるように，要素の上層に直に重ねる — ~WebVTTに対しては、`~WebVTT~text-trackの表示~更新~時の規則$に従う。 `WEBVTT$r ◎ Any subtitles or captions are expected to be overlayed 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]

~UAが `video$e 要素~用の`~UIを公開し$始めるときは ⇒ 要素の`~text-trackの~list$内の各`~text-track$のうち，［ `示されている$, かつ その`~text-trackの種類$は［ `subtitles$c, `captions$c ］いずれかであるもの ］に対しては、`~text-track具現化~更新~時の規則$を走らすべきである（例えば，~WebVTT基づく`~text-track$に対しては、`~WebVTT~text-trackの表示~更新~時の規則$に従う `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]

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

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

@namespace url(http://www.w3.org/1999/xhtml);

iframe { border: 2px inset; }
video { object-fit: contain; }

14.4.2. 画像

［ `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:

画像を`表現-$する要素に対しては： ◎ If the element represents an image

要素を`置換~要素$として扱い，画像を ~CSSにて定義される規則に則って具現化する。 ◎ The user agent is expected to treat the element as a replaced element and render the image according to the rules for doing so defined in CSS.

画像は`表現-$しないが，すでに`内在的~寸法$を持つ（例： `寸法~属性$または~CSS規則から）, かつ 次のいずれかを満たす要素に対しては： ◎ If the element does not represent an image, but the element already has intrinsic dimensions (e.g. from the dimension attributes or CSS rules), and either:

• 画像は`可用$になり，やがて具現化されると予見できる理由がある。 ◎ the user agent has reason to believe that the image will become available and be rendered in due course, or
• 要素は `alt^a 属性を有さない。 ◎ the element has no alt attribute, or
• `文書$は`過去互換~mode$下にある ◎ the Document is in quirks mode

要素を`置換~要素$として扱う — ここで：

• 要素が表現する~textがあれば，要素の内容を それにする。
• 適用-可能ならば，任意選択で 画像が得られつつあることを指示している~iconも伴わせる。
• `input$e 要素に対しては、要素を~buttonの様に現れさせて，要素が `Button$st 状態にあることを指示する。

◎ The user agent is expected to treat the element as a replaced element whose content is the text that the element represents, if any, optionally alongside an icon indicating that the image is being obtained (if applicable). For input elements, the element is expected to appear button-like to indicate that the element is a button.

変化すると予期されないものに対しては： ◎ ↓

何らかの~textを`表現-$する `img$e 要素に対しては： ◎ If the element is an img element that represents some text and the user agent does not expect this to change

要素を［ 内容が その~textにされた，句内容の非置換~要素 ］として扱う — ここで ⇒ 任意選択で、画像が見つからないことを指示する~iconを伴わせた上で，［ 利用者が、［ 画像を表示させる, または なぜ具現化されないか調べる ］ことを要請できる ］ようにする。 非~graphical文脈~下では、そのような~iconは，省略されるべきである。 ◎ The user agent is expected to treat the element as a non-replaced phrasing element whose content is the text, 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.

何も`表現-$しない `img$e 要素に対しては： ◎ If the element is an img element that represents nothing and the user agent does not expect this to change

要素を空の`行内~要素$として扱う（他の~styleの不在においては、本質的に，要素を具現化させなくすることになる）。 ◎ The user agent is expected to treat the element as an empty inline element. (In the absence of further styles, this will cause the element to essentially not be rendered.)

画像を`表現-$しない `input$e 要素に対しては： ◎ If the element is an input element that does not represent an image and the user agent does not expect this to change

要素を［ 要素の代替~textを内容とするような， 1 個の~buttonからなる，`置換~要素$ ］として扱う — ここで，~buttonの`内在的~寸法$は ⇒＃ 縦幅は一行分, 横幅は~textを一行分に具現化するに必要とされる~size ◎ The user agent is expected to treat the element as a replaced element consisting of a button whose content is the element's alternative text. The intrinsic 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.

上に示された~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.

~animate化~画像を示すような `img$e 要素に対しては、次が期待される： ◎ ↓

• 同じ`絶対~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.

• `~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.

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

@namespace url(http://www.w3.org/1999/xhtml);

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

14.4.3. 埋込みの内容／画像~用の属性

@namespace url(http://www.w3.org/1999/xhtml);

iframe[frameborder=0],
iframe[frameborder=no i] {
  border: none;
}

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;
}

［ `embed$e ／ `iframe$e ／ `img$e ／ `object$e／ `video$e ／［ `type$input 属性が `Image$st 状態にある `input$e ］］要素に対しては、それが［ 画像を表現する, もしくは 最終的に画像を表現することになるものと利用者が期待する【？】 ］ならば、要素の［ `width$input, `height$input ］属性は、［ `寸法に変換する$変換規則 ］の下で，要素~上の［ `width$p, `height$p ］~prop（同順）用の`呈示hintとして扱う$ことが期待される。 ◎ The width and height attributes on embed, iframe, img, 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.

14.4.4. 画像~map

`画像~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.

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

したがって例えば、 `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.

同様に、 `area$e 要素が自身の `cursor$p ~propを `inherit^v に設定するような~CSS規則を持っていた（または，要素の `cursor$p ~propを設定するような~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.

14.5.1. 序論

この節に定義される要素は、以下に供される指針の下で，種々の方式で具現化される。 ~UAには、各種~widget用に `appearance$p ~CSS~propを適切に設定して、~platformに~nativeな外観が得られるようにすることが奨励される。 加えて、関連する~animation, 等々があれば，当の~platform用に適切に実装することが期待される ◎ The elements defined in this section can be rendered in a variety of manners, within the guidelines provided below. User agents are encouraged to set the 'appearance' CSS property appropriately to achieve platform-native appearances for widgets, and are expected to implement any relevant animations, etc, that are appropriate for the platform.

14.5.2. `button^e 要素

`button$e 要素に対しては、［ 要素の内容を内容とする~buttonを図画化するような `inline-block$v ~box ］として具現化することが期待される。 ◎ The button element expected to render as an 'inline-block' box depicting a button whose contents are the contents of the element.

14.5.3. `details^e, `summary^e 要素

@namespace url(http://www.w3.org/1999/xhtml);

summary {
  display: list-item;
  counter-increment: list-item 0;
  list-style: disclosure-closed inside;
}
details[open] > summary {
  list-style-type: disclosure-open;
}

`details$e 要素 %D は、次のようにされた `塊~box$として具現化することが期待される： ◎ The details element is expected to render as a block box. The element's shadow tree is expected to take the element's first summary element child, if any, and place it in a first block box container, and then take the element's remaining descendants, if any, and place them in a second block box container.

• %D の子に `summary$e 要素があるならば，そのうち最初のものを 1 個目の `block$v ~box容器~内に配置し、 %D の~shadow木 【？】 は，その~boxを占めるようにする。 ◎ ↑
• %D に他の子孫があれば，それらを 2 個目の `block$v ~box容器~内に配置する。 ◎ ↑
• 最初の容器は、利用者からの要請に応じて，その詳細を開閉できるようにする。 ◎ The first container is expected to allow the user to request the details be shown or hidden.
• 2 個目の容器は、 %D が `open^a 属性を有さないときは，具現化から除去する。 ◎ The second container is expected to be removed from the rendering when the details element does not have an open attribute.

14.5.4. ~text手入力~widgetとしての `input^e 要素

`input$e 要素のうち，その `type$input 属性が［ `Text$st ／ `Search$st ／ `Tel$st ／ `Url$st ／ `Email$st ／ `Password$st ］状態にあるものに対しては、次が期待される：

• 要素を［ ~text~controlを図画化するような `inline-block$v ~box ］として具現化する。 加えて，要素の `line-height$p ~propの`算出値$が 1.0 未満の値に等価になるならば、その`使用値$は 1.0 にされ~MUST。 ◎ An input element whose type attribute is in the Text, Search, Telephone, URL, or E-mail state, is expected to render as an 'inline-block' box depicting a text control. Additionally, the 'line-height' property, if it has a computed value equivalent to a value that is less than 1.0, must have a used value of 1.0.
• `Password$st 状態にあるものに対しては、前項に加えて，~text~controlをその中の~dataを~~隠すように具現化する。 ◎ An input element whose type attribute is in the Password state is expected to render as an 'inline-block' box depicting a text control that obscures data entry.
• ~text~controlが~text選択を供する場合、利用者が現在の選択を変更したときは ⇒ `利用者~対話~task源$から，次を走らす`~taskを~queueする$ ⇒ 要素に向けて，名前 `select$et の`~eventを発火する$ — 次のように初期化して ⇒ `bubbles$m 属性 ~SET ~T ◎ If these text controls provide a text selection, then, when the user changes the current selection, the user agent is expected to queue a task, using the user interaction task source, to fire an event named select at the element, with the bubbles attribute initialized to true.
• 要素の `size$input 属性は、次に与える変換規則の下で，要素~上の `width$p ~prop用の`呈示hintとして扱う$ ⇒ 先ず，`非負~整数に変換する$ — その結果に応じて次を返す ⇒＃ ε ならば ε ／ ~ELSE_ `文字~数から~pixel単位へ変換する$( 要素, その結果 ) ◎ If an input element whose type attribute is in one of the above states 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 attribute as a presentational hint for the 'width' property on the element, with the value obtained from applying the converting a character width to pixels algorithm to the value of the attribute.
• `呈示hintにならない$場合、［［ 要素~上の `width$p ~propを 次に与える結果に設定する ］ような，`~UA~level$の~stylesheet規則 ］を持っていたかのように動作する ⇒ `文字~数から~pixel単位へ変換する$( 要素, 20 ) ◎ If an input element whose type attribute is in one of the above states does not have a size attribute, then the user agent is expected to act as if it had a user-agent-level style sheet rule setting the 'width' property on the element to the value obtained from applying the converting a character width to pixels algorithm to the number 20.

14.5.5. 各種~widgetとしての `input^e 要素

`input$e 要素のうち，その `type$input 属性が［ `Date$st ／ `Month$st ／ `Week$st ／ `Time$st ／ `Datetime-local$st ／ `Number$st ］状態にあるものに対しては、［ 順に［ 日付 ／ 月 ／ 週 ／ 時刻 ／ 地域標準時による日時 ／ 数値 ］~controlを図画化するような `inline-block$v ~box ］として具現化することが期待される。 ◎ An input element whose type attribute is in the Date state is expected to render as an 'inline-block' box depicting a date control. ◎ An input element whose type attribute is in the Month state is expected to render as an 'inline-block' box depicting a month control. ◎ An input element whose type attribute is in the Week state is expected to render as an 'inline-block' box depicting a week control. ◎ An input element whose type attribute is in the Time state is 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 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 expected to render as an 'inline-block' box depicting a number control.

これらの どの~controlの~sizeも、［ およそ一行分の高さ, 可能などの値を示すにも十分な幅 ］にすることが期待される。 ◎ These controls are all expected to be about one line high, and about as wide as necessary to show the widest possible value.

14.5.6. 範囲~controlとしての `input^e 要素

`input$e 要素のうち，その `type$input 属性が `Range$st 状態にあるものに対しては、［ ~slider~controlを図画化するような `inline-block$v ~box ］として具現化することが期待される。 ◎ An input element whose type attribute is in the Range state is expected to render as an 'inline-block' box depicting a slider control.

~controlが横長か正方形になるときは、横方向の~sliderになり，その最低~値は，要素~上の `direction$p ~propの`算出値$が［ `rtl^v ならば右端 ／ 他の場合は左端 ］に~~位置させることが期待される。 ~controlが縦長になるときは、縦方向~sliderになり，その最低~値は下端に~~位置させるようにすることが期待される。 ◎ When the control is wider than it is tall (or square), the control is expected to be a horizontal slider, with the lowest value on the right if the 'direction' property on this element has a computed value of 'rtl', and on the left otherwise. When the control is taller than it is wide, it is expected to be a vertical slider, with the lowest value on the bottom.

定義済みな候補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.

~sliderの向きは、要素~上の `direction$p ~propの`使用値$を利用して決定することが期待される — 概して，横方向~controlに対しては、その最低~値を［ `ltr^v ならば左端 ／ `rtl^v ならば右端 ］に~~位置させるように。 ◎ User agents are expected to use the used value of the 'direction' property on the element to determine the direction in which the slider operates. Typically, a left-to-right ('ltr') horizontal control would have the lowest value on the left and the highest value on the right, and vice versa.

14.5.7. ~color-wellとしての `input^e 要素

`input$e 要素のうち，その `type$input 属性が `Color$st 状態にあるものに対しては、［［ その作動化-時には，利用者が 色を選べる~UI（例：色環や色~palette）を供する ］ような，~color-wellを図画化するような `inline-block$v ~box ］として具現化することが期待される。 ◎ An input element whose type attribute is in the Color state is expected to render as an 'inline-block' box depicting 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.

（ `list$input 属性から供される）定義済みな候補d値は、~color-well自身ではなく，色を選べる~UIにて示すことが期待される。 ◎ Predefined suggested values (provided by the list attribute) are expected to be shown in the color picker interface, not on the color well itself.

【 color-well ： 現在~選択-中の色が表示された小さな~boxで，~click等により色~paletteが表示されるような類の~UI~control。 】

14.5.8. ~checkbox／~radio-button用~widgetとしての `input^e 要素

`input$e 要素のうち，その `type$input 属性が `Checkbox$st 状態にあるものに対しては、［ 単独の~checkbox~controlを包含し, ~labelは伴わないような `inline-block$v ~box ］として具現化することが期待される。 ◎ An input element whose type attribute is in the Checkbox state is expected to render as an 'inline-block' box containing a single checkbox control, with no label.

`input$e 要素のうち，その `type$input 属性が `Radio$st 状態にあるものに対しては、［ 単独の~radio-button~controlを包含しつつ, ~labelは伴わないような `inline-block$v ~box ］として具現化することが期待される。 ◎ An input element whose type attribute is in the Radio Button state is expected to render as an 'inline-block' box containing a single radio button control, with no label.

14.5.9. ~file~upload用~controlとしての `input^e 要素

`input$e 要素のうち，その `type$input 属性が `File$st 状態にあるものに対しては、［ 次を順に包含するような `inline-block$v ~box ］として具現化することが期待される ⇒ ［ `選択中の~file$たちがあれば，それらの~file名を与えている一連の~text ］, および［ 作動化-時には，利用者がその選択を変更できるような~file~pickerを供するような~button ］ ◎ An input element whose type attribute is in the File Upload state is expected to render as an 'inline-block' box containing a span of text giving the file name(s) of the selected files, if any, followed by a button that, when activated, provides the user with a file picker from which the selection can be changed.

14.5.10. ~buttonとしての `input^e 要素

`input$e 要素のうち，その `type$input 属性が［ `Submit$st ／ `Reset$st ／ `Button$st ］状態にあるものに対しては、［［ 次を包含するような，高さおよそ一行分の~button ］として図画化される `inline-block$v ~box ］として具現化することが期待される ⇒ 要素が `value$input 属性を［ 持つならば その内容 ／ 持たないならば［ 要素の `type$input 属性から~UA定義な（おそらく~locale特有な）流儀で導出される~text ］］。 ◎ An input element whose type attribute is in the Submit Button, Reset Button, or Button state is expected to render as an 'inline-block' box depicting a button, about one line high, containing the contents of the element's value attribute, if any, or text derived from the element's type attribute in a user-agent-defined (and probably locale-specific) fashion, if not.

14.5.11. `marquee^e 要素

【 `marquee$e 要素は廃用にされているので、この節の和訳は省略する。 】

14.5.12. `meter^e 要素

`meter$e 要素に対しては、［ その内容~gaugeを図画化するような，［ `height$p `1em^v, `width$p `5em^v, `vertical-align$p `-0.2em^v ］にされた `inline-block$v ~box ］として具現化することが期待される。 ◎ The meter element is expected to render as an 'inline-block' box with a 'height' of '1em' and a 'width' of '5em', a 'vertical-align' of '-0.2em', and with its contents depicting a gauge.

要素が横長か正方形のときは，最小~値が［ 要素~上の `direction$p ~propの`算出値$が［ `rtl^v ならば右端 ／ 他の場合は左端 ］に位置するような，横方向~gaugeとして図画化し、要素が縦長のときは，最小~値が下端に~~位置するような，縦方向~gaugeとして図画化することが期待される。 ◎ When the element is wider than it is tall (or square), the depiction is expected to be of a horizontal gauge, with the minimum value on the right if the 'direction' property on this element has a computed value of 'rtl', and on the left otherwise. When the element is taller than it is wide, it is expected to depict a vertical gauge, with the minimum value on the bottom.

~gaugeに対しては、~platform規約があれば，それに整合な呈示を利用することが期待される。 ◎ User agents are expected to use a presentation consistent with platform conventions for gauges, if any.

注記： ~gaugeにおいて何が図画化され~MUSTかについての要件は、 `meter$e 要素の定義に含まれている。 ◎ Requirements for what must be depicted in the gauge are included in the definition of the meter element.

14.5.13. `progress^e 要素

`progress$e 要素に対しては、［［ `height$p `1em^v, `width$p `10em^v, `vertical-align$p `-0.2em^v ］にされた `inline-block$v ~box ］として具現化することが期待される。 ◎ The progress element is expected to render as an 'inline-block' box with a 'height' of '1em' and a 'width' of '10em', and a 'vertical-align' of '-0.2em'.

要素が横長のときは、横方向~進捗~barとして，その始端は［ 要素~上の `direction$p ~propの`算出値$が［ `rtl^v ならば 右端 ／ 他の場合は左端 ］］に来るように図画化することが期待される。 要素が縦長のときは、縦方向~進捗~barとして，その最低~値が下端に来るように図画化することが期待される。 要素が正方形のときは、方向に依存しない進捗~widget（例：円形の進捗~環）として図画化することが期待される。 ◎ When the element is wider than it is tall, the element is expected to be depicted as a horizontal progress bar, with the start on the right and the end 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. When the element is taller than it is wide, it is expected to be depicted as a vertical progress bar, with the lowest value on the bottom. When the element is square, it is expected to be depicted as a direction-independent progress widget (e.g. a circular progress ring).

進捗~barに対しては、それ用の~platform規約があれば，それに整合な呈示を利用することが期待される。 特に，［ 確定的か不定かに応じて，異なる呈示を利用すること ］, および［ 要素の寸法に基づいて呈示を変えること ］が期待される。 ◎ 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.

例えば，ある~platformでは、不定な進捗を示すためとして，寸法が正方形の “~~回転する” 進捗~指示子が用いられている — 要素が正方形のときは，それを利用しつつ、要素が幅広なときは，不定な進捗~barを利用することもできる。 ◎ For example, on some platforms for showing indeterminate progress there is a "spinner" progress indicator with square dimensions, which could be used when the element is square, and an indeterminate progress bar, which could be used when the element is wide.

注記： ［ 進捗~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.

14.5.14. `select^e 要素

`select$e 要素に対しては、その `multiple$A 属性の有無, および 要素の`表示項目数$ %S に応じて，次の様に具現化することが期待される： ◎ ↓

• 次の場合は、要素を~list~boxとして具現化する： ◎ ↓

  • 属性は在するならば、複選択~list~boxとして。 ◎ A select element whose multiple attribute is present is expected to render as a multi-select list box.
  • 属性は不在, かつ %S は 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.

  具現化する~list~boxは：

  • `inline-block$v ~boxにする。
  • `height$p を［ %S 行分, あるいは 属性が不在ならば 4 行分 ］を包含するために必要とされる縦幅にする。
  • `width$p を ( 要素の`最大~label幅$ + ~scrollbarの横幅 ) にする。

  ◎ When the element renders as a list box, it is expected to render as an 'inline-block' box whose 'height' is the height necessary to contain as many rows for items as given by the element's display size, or four rows if the attribute is absent, and whose 'width' is the width of the select's labels plus the width of a scrollbar.
• 他の場合（属性は不在, かつ %S は 1 ）、要素を［ 横幅は その`最大~label幅$にされた，高さ一行分の~drop-down~box ］として具現化する。 ◎ A select element whose multiple attribute is absent, and whose display size is 1, is expected to render as a one-line drop down box whose width is the width of the select's labels.

~list~box ／ ~drop-down~box いずれの事例でも、要素の各~項目は，要素の`選択肢~list$を成し、適用-可能な所では，要素の`子$である `optgroup$e 要素が一群の選択肢~用に~~見出しを供することが期待される。 ◎ In either case (list box or drop-down box), the element's items are expected to be the element's list of options, with the element's optgroup element children providing headers for groups of options where applicable.

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

`option$e 要素は、その`~label$を表示し, かつ［ その `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.

`select$e 内の各~labelに対しては、それが［ 頁, ~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.

14.5.15. `textarea^e 要素

`textarea$e 要素の `~textarea実効~縦幅@ は、 ( %size × %h + %sbh ) で与えられる — ここで ⇒＃ %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.

歴史的~事由から， `textarea$e 要素の `wrap$A 属性は、［ 値 ~EQ`~ACI$ `off^l ならば `pre^v ／ 他の場合は ε ］を返す変換規則の下で，要素~上の `white-space$p ~prop用の`呈示hintとして扱う$ことが期待される。 ◎ 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'.

14.7.1. ~link, ~form, ~navi

次を行うことが期待される： ◎ ↓

• 利用者が［ `~hyperlink$の作動化／`~form提出$ ］の側面 — 後続の`~navi$用には，どの`閲覧文脈$が利用されることになるか、など — を制御できるようにする。 ◎ User agents are expected to allow the user to control aspects of hyperlink activation and form submission, such as which browsing context is to be used for the subsequent navigation.
• ［ `~hyperlink$ ／ `~form$ ］に対しては、それによる`~navi$を誘発する前に，利用者が その行先を発見できるようにする。 ◎ User agents are expected to allow users to discover the destination of hyperlinks and of forms before triggering their navigation.
• 利用者に［ `~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.

~UAは、利用者が［ `q$e ／ `blockquote$e ／ `ins$e ／ `del$e ］要素~上の `cite^a 属性で 指示される~URL へ，`閲覧文脈$を`~navigate$できるようにしてよい。 ◎ User agents may allow users to navigate browsing contexts to the URLs indicated by the cite attributes on q, blockquote, ins, and del elements.

~UAは、自身の~UIにて［ `link$e 要素により作成される `~hyperlink$ ］を表面化してよい。 ◎ User agents may surface hyperlinks created by link elements in their user interface.

注記： `~hyperlink$ を作成するような `link$e 要素は，［ `link$ps または `visited$ps `疑似類$に合致し, 可視ならば~clickに反応する, 等々 ］になるが、この種の同じ~linkを公開するような どの~browser~interface構成子も拡張しない。 ~linkが，頁~自身でなく~browserの~interfaceを通して作動化されても、 `click$et ~event等を誘発することはない。 ◎ While link elements that create hyperlinks will match the :link or :visited pseudo-classes, will react to clicks if visible, and so forth, this does not extend to any browser interface constructs that expose those same links. Activating a link through the browser's interface, rather than in the page itself, does not trigger click events and the like.

14.7.2. `title^a 属性

`title$a 属性を有する要素に対しては、［ 利用者から要請されたときは，要素の`助言情報$を公開すること ］, および［ そのような情報の存在0を利用者に気付かせること ］が期待される。 ◎ 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.

利用者が~pointing装置を利用できるような，対話的かつ~graphicalな~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.＼

• 要素を`~focus可能~域$にした上で、要素が`~focusされ$たときは，要素の`助言情報$を常に表示する。 ◎ by making the element a focusable area and always displaying the advisory information of the currently focused element, or＼
• あるいは，~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.

~tooltipにおいては、［ 文字 U+000A LINE FEED（ LF ）は，改行させる ］ように, および［ 文字 U+0009 CHARACTER TABULATION（ ~tab ）は、次の~glyphを［ 行lの終端~方向に正の~~距離にある，次の~tab-stop ］に~~位置させる ］ように具現化することが期待される — ここで，~tab-stopたちは、行lの始端から［ U+0020 SPACE 文字の横幅の 8 倍 ］~~周期の各~地点に生じるとする。 ◎ U+000A LINE FEED (LF) characters are expected to cause line breaks in the tooltip; U+0009 CHARACTER TABULATION (tab) characters are expected to render as a nonzeroZ 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.

例えば，視覚的~UAは、 `title$a 属性を有する要素を`~focus可能~域$にして、そのような どの要素に対しても，要素が`~focusされ$ている間は，その~tooltipを要素の下に示すこともできる。 これにより利用者は、文書~内を~tab~keyで~~巡回して，すべての追補~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.

別の例として、~screen~readerは，~tooltipを伴う要素を読上げるときに指示音を供して、結付けられている~keyで，最後に~~再生された指示音~用の~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.

14.7.3. 編集用の~host

現在の~text編集用の~caret（すなわち、`作動中の範囲$ — それが空で，`編集用の~host$内にあるならば 【？】 ）があるならば、~CSS具現化~modelの目的においては，［ 縦幅は~caretのそれ, 横幅は 0 にされた，行内`置換~要素$ ］の様に動作することが期待される。 ◎ 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.

注記： このことは，塊が空であっても、その内側に~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.

14.7.4. ~native~UIにて具現化される~text

~UIにて公開される~textに対しては、~Unicode意味論を尊守することが期待される — 例えば［ ~dialog ／ ~title~bar ／ ~pop-up~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, pop-up 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.

次の~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 dir="rtl" lang="he">
 <label>
  בחר שפת תכנות:
  <select>
   <option dir="ltr">C++</option>
   <option dir="ltr">C#</option>
   <option dir="ltr">FreePascal</option>
   <option dir="ltr">F#</option>
  </select>
 </label>
</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.

<table>
 <tr>
  <th abbr="(א" dir=ltr>A
  <th abbr="(א" dir=rtl>A
  <th abbr="(א" dir=auto>A
</table>

<table>
 <tr>
  <th data-abbr="(א" dir=ltr>A
  <th data-abbr="(א" dir=rtl>A
  <th data-abbr="(א" dir=auto>A
</table>

~scriptにより供される文字列（例： `window.alert()$c に対する引数）が表示されるときは、双方向的~algoにて定義されるように，一つ以上の［ 双方向的~algo段落 ］からなる独立な集合として扱うことが期待される — 例えば、文字 LF （ U+000A LINE FEED ）による，段落~分断-法の挙動を~supportすることも含め。 双方向的~algoにおいて，そのような~textの段落~levelを決定する目的においては、この仕様は， `BIDI$r による規則 P2, P3 より高~levelの上書きは，供さない。 ◎ 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]

作者は、必要なら，所与の段落を~Unicode文字［ U+200E LEFT-TO-RIGHT MARK ／ U+200F RIGHT-TO-LEFT MARK ］から開始させることにより，特定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.

alert('\u05DC\u05DE\u05D3 HTML \u05D4\u05D9\u05D5\u05DD!')

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

var s;
if (s = prompt('氏名を入力願います。')) {
  alert(
    '\u200E' +
    s + '様ですね。森田様、' +
    s + '様、木田様がご同行になります。'
  );
}