具現化 — Rendering

HTML Living Standard — 最終更新 2017 年 6 月 8 日

14. 具現化

~UAには、~HTML文書を特定0の仕方で呈示することは要求されていない。 しかしながら,この節は、~HTML文書を具現化するための,一群の示唆( suggestion )を提供する — それに従えば、およそ,文書~作者が意図する体験に近い利用者~体験へ導くものと~~見込まれるような。 この節では、この体験へ導くような挙動を指示するため — 規範性に関する混同を避けるため, “〜しなければならない( must )” は利用しない代わりに — 用語 “期待される( expected )” が利用される。 適合性の目的0においては、 示唆された既定の具現化を~supportするものと指名された~UA に対しては、この節における用語 “期待される” には, “〜しなければならない( must )” と同じ適合性が含意される。 ◎ 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".

“期待される” 対象は常に~UAなので、この訳では,その文脈における語~UAは省略する。 】

14.1. 序論

一般に、~UAには,~CSSを~supportすることが期待され、この節における示唆の多くは, ~CSS用語で表される。 他の仕組みによる呈示を利用する~UAは、この節に与えられる~CSS規則を翻訳することにより,期待される挙動を導出できる。 ◎ In general, user agents are expected to support CSS, and many of the suggestions in this section are expressed in CSS terms. User agents that use other presentation mechanisms can derive their expected behavior by translating from the CSS rules given in this section.

逆に,~style層の規則(例: 作者~stylesheet)が不在の下では、[ 要素が,この仕様に述べる意味を`表現-$している ]ことが利用者に判るように,要素を具現化することが~UAに期待される。 ◎ 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.

この節における各~示唆は、一般に,[ 視覚的~出力~媒体は,96dpi 以上の解像度を伴う ]ものと見做しているが、~HTMLは,~~多様な媒体に適用されるものと意図されている(それは,媒体に依存しない 言語である)。 ~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 implementors are encouraged to adapt the suggestions in this section to their target media.


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

注記: ~off-screenにあるだけでは、要素は`具現化されて$いないことにはならない。 また, `hidden$a 属性の存在0は、通常は,要素は`具現化されて$いないことを意味するが、これは~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.


`作者~level$の~CSS~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]

注記: これはとりわけ [ `display$p, `unicode-bidi$p, `direction$p ]~propに関係している課題に重要である。 ◎ This is especially important for issues relating to the 'display', 'unicode-bidi', and 'direction' properties.

【この訳に固有の表記規約】

この訳で用いられている,各種記号( ~ON, ~EQ, ~LT, { }, ~IN, 等々)の詳細は、~SYMBOL_DEF_REFを~~参照されたし。

加えて、このページの:

  • 記号[ ~EQ / ~NEQ / ~IN / ~NIN ]に添えられる表記 “`~ACI@” は、記号の意味を `~ASCII大小無視$による比較に基づくように改めることを表す。
  • 語 “属性” は、( IDL 属性ではなく)要素の内容~属性を意味する。
  • 語 “~prop” は、 CSS ~propを意味する。
  • 語 “~pixel” は、 CSS ~pixel単位を意味する。

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

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

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

14.2. CSS ~UA ~stylesheetと呈示hint

以下の各~節に与えられる~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.

規則のうち一部のものは、~CSS~cascadeにおける `呈示hint@ — `作者~level$の, `詳細度$~zeroの規則 — になるものとして意図されている。 ◎ 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.

`変換規則@ とは、所与の属性~値に対し,[ 何らかの~propに対する妥当な値, または 値が妥当でないことを意味する特殊~値 ε ]を返す手続きである。

所与の[ 要素 %E 上の属性 %A ]を,所与の`変換規則$ %R の下に,所与の~propの集合 %P に対する `呈示hintとして扱う@ とは:

  • [ %E は属性 %A を有する, かつ %A の値を %R で変換した結果は ε でない ]ならば、[[ %P 内の各~propの値を, %R の結果に設定する ]ような`呈示hint$ ]として扱うことを意味する。
  • この文脈において, `呈示hintになる@ と記されたときは、~UAが実際に`呈示hint$として扱う(前項の条件が満たされる)ことを意味し、 呈示hintにならない と記されたときは、その否定を意味する。
  • ~propの集合 %P は、多くの場合, %E 上のそれを指すが、他の要素(たち)上の~propが指定される場合もある。

【 本文を簡潔に, 見通しよく, 一貫する形で記すため、上で定義した用語は,原文による定義をより汎用的に利用できる形に定義し直している。 】


次に与える各~手続きは、`変換規則$としても利用される:

  • 所与の値を `~pixel長さに変換-@ する手続きは、[ 値を`非負~整数として構文解析-$した結果 ~NEQ ~error ]ならば,結果の値を`~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.
  • 所与の値を `寸法に変換-@ する手続きは、[ 値を`寸法~値として構文解析-$した結果 ~NEQ ~error ]ならば,その結果の種別が[ 長さ ならば それを`~pixel単位$に換算した結果 / 百分率 ならば そのままの値 ]として返し、他の場合は ε を返す。 ◎ 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.
  • 所与の値を `~zeroは無視しつつ寸法に変換-@ する手続きは、[ 値を`非~zero寸法~値として構文解析-$した結果 ~NEQ ~error ]ならば,その結果の種別が[ 長さならば `~pixel単位$に換算した結果 / 百分率ならば そのままの値 ]として返し、他の場合は ε を返す。 ◎ 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 non-zero 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.
  • 所与の値を `色~値へ変換-@ する手続きは、[ 値を`旧来の色~値として構文解析-$した結果 ~NEQ ~error ]ならば,その結果を~CSS色~値として返し、他の場合は ε を返す。
  • 所与の要素~上の 所与の属性~値を `絶対~URLに解決-@ する手続きは、[ 値は空でない, かつ 値を要素の`~node文書$に`相対的に構文解析-$した`結果の~URL文字列$ ~NEQ ~error ]ならば それを返し、他の場合は ε を返す。
  • 所与の値を `非負~整数に変換-@ する手続きは、[ 値を`非負~整数として構文解析-$した結果 ~NEQ ~error ]ならば,それを返し、他の場合は ε を返す。

~UAが,~nodeの `子孫を整列する@ ときは、次のいずれも満たす子孫のみを整列することが期待される:

  1. `margin-inline-start$p, `margin-inline-end$p `CSSLOGICAL$r 両~propとも非 `auto^v 値に算出され、かつ
  2. それらにより拘束過多( over-constrained )になる, かつ
  3. それにより, 2 つの~marginいずれかの`使用値$は より大きい値に強制され、かつ
  4. 子孫~自身に適用し得る `align^a 属性は無い

複数の要素を特定0の子孫に`整列-$するときは、そのような要素のうち最も深く入子にされているものが,他を上書きすることが期待される。 整列される各~要素に対しては、その[ `行左端$, `行右端$ `CSSWM$r ]側~marginの`使用値$をそれに従って設定した上で,整列することが期待される。

◎ When a user agent is to align descendants of a node, the user agent 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. When multiple elements are to align a particular descendant, the most deeply nested such element is expected to override the others. 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]

14.3. 非置換~要素

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 要素に対しては、下の表の各行ごとに,次が期待される:

  • 行の右列に挙げる属性のうち,存在する最初の属性に対しては、[ `~pixel長さに変換-$する変換規則 ]の下に,[ `body$e 要素~上の,行の左列に示される~prop ] %p に対する`呈示hintとして扱う$。
  • 該当する属性が見出されない, または 変換規則から ε が返された場合には、代わりに,既定の値 `8px^v を %p に利用する。
◎ For each property in the table below, given a body element, 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.
~prop ~source
`margin-top$p
  1. `body^e 要素の `marginheight$A 属性 ◎ The body element's marginheight attribute
  2. `body^e 要素の `topmargin$A 属性 ◎ The body element's topmargin attribute
  3. `body^e 要素の`容器~frame要素$の `marginheight$iframe 属性 ◎ The body element's container frame element's marginheight attribute
`margin-right$p
  1. `body^e 要素の `marginwidth$A 属性 ◎ The body element's marginwidth attribute
  2. `body^e 要素の `rightmargin$A 属性 ◎ The body element's rightmargin attribute
  3. `body^e 要素の`容器~frame要素$の `marginwidth$iframe 属性 ◎ The body element's container frame element's marginwidth attribute
`margin-bottom$p
  1. `body^e 要素の `marginheight$A 属性 ◎ The body element's marginheight attribute
  2. `body^e 要素の `bottommargin$A 属性 ◎ The body element's bottommargin attribute
  3. `body^e 要素の`容器~frame要素$の `marginheight$iframe 属性 ◎ The body element's container frame element's marginheight attribute
`margin-left$p
  1. `body^e 要素の `marginwidth$A 属性 ◎ The body element's marginwidth attribute
  2. `body^e 要素の `leftmargin$A 属性 ◎ The body element's leftmargin attribute
  3. `body^e 要素の`容器~frame要素$の `marginwidth$iframe 属性 ◎ The body element's container frame element's marginwidth attribute

`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その他,[ 利用者を誤誘導する目的0で、頁が作者の意図に反する~~形で具現化することを企図する ]ような攻撃を許容するため、保安上の~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.

`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 parsed relative to the element's node document, and if this is successful, the user agent is expected to treat the attribute as a presentational hint setting the element's 'background-image' property to the resulting URL string.

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

下の表の左列に示される `body$e 要素の属性は、[ `色~値へ変換-$する変換規則 ]の下に,[ 同じ行の右列に示される すべての要素 ]上の `color$p ~propに対する`呈示hintとして扱う$ことが期待される: ◎ ↓

`text$A `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 an error, the user agent is expected to treat the attribute as a presentational hint setting the element's 'color' property to the resulting color.
`link$A 同じ`文書$内の `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 an error, 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.
`vlink$A 同じ`文書$内の `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 an error, 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.
`alink$A 同じ`文書$内の,[ `active$ps `疑似類$に合致する, かつ[ `link$ps, `visited$ps ]`疑似類$いずれかに合致する ]もの ◎ 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 an error, 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.

14.3.3. ~flow内容

【 `~flow内容$( flow content ) 】

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

`center$e 要素の `align$A 属性に対しては、次が期待される:

  • 次の変換規則の下に,要素~上の `text-align$p ~propに対する`呈示hintとして扱う$(これは、自身の中で~textを中央寄せにすることを意味する) ⇒ [ 属性~値 ~IN`~ACI$ { `center^l, `middle^l } ならば `center^v / 他の場合は ε ]を返す
  • 加えて,`呈示hintになる$場合は、中央寄せに`子孫を整列する$。

`div$e 要素の `align$A 属性に対しては、次が期待される:

  • 次の変換規則の下に,要素~上の `text-align$p ~propに対する`呈示hintとして扱う$:

    1. 属性~値 ~EQ`~ACI$ `middle^l ならば `center^v を返す
    2. 属性~値 ~IN`~ACI$ { `center^l, `left^l, `right^l, `justify^l } ならば,同じ文字列による CSS ~keywordを返す(これらは順に,自身の中で~textを[ 中央寄せ, 左寄せ, 右寄せ, 両端揃え ]することを意味する)。
    3. 他の場合は ε を返す
  • 加えて,`呈示hintになる$場合は、変換結果の CSS ~keyword[ `center^v / `left^v / `right^v / `justify^v ]に応じて[ 中央寄せ / 左端 / 右端 / 左端 ]に`子孫を整列する$。
◎ 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.

14.3.4. 句内容

【 `句内容$( phrasing content ) 】

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

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

@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の目的0においては、 `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 )から自動的に生成されている: ◎ 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. 節と見出し

@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 stylesheet, 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は、この目的0に対する十分な~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, td[hidden], th[hidden] { display: table-cell; }

colgroup[hidden],
col[hidden],
thead[hidden],
tbody[hidden],
tfoot[hidden],
tr[hidden],
td[hidden],
th[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; }

(廃用にされた `rules^a, `frame^a 属性に関する~style:)

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

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

@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の目的0においては: ◎ ↓

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

~tableにおける廃用にされた属性

次の表の 1 列目に与える要素に対しては,同じ行の: 2 列目に与える属性を, 3 列目に与える変換規則の下に, 4 列目に与える~prop — 特に定められない限り,同じ要素~上の~prop — に対する`呈示hintとして扱う$ことが期待される: ◎ ↓

~table上の廃用にされた属性に対する扱い
要素 属性 `変換規則$ ~prop
`table$e `cellspacing$A `~pixel長さに変換-$する `border-spacing$p
The table element's cellspacing attribute maps to the pixel length property 'border-spacing' on the element.
`table$e `cellpadding$A `~pixel長さに変換-$する 要素に対応する`~table$内のある`~cell$に対応するような,すべての[ `td$e / `th$e ]要素~上の[ `padding-top$p, `padding-right$p, `padding-bottom$p, `padding-left$p ]
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.
`table$e, `tr$e, `td$e, `th$e `height^a `~zeroは無視しつつ寸法に変換-$する `height$p

The table element's height attribute maps to the dimension property (ignoring zero) 'height' on the table element.

The tr element's height attribute maps to the dimension property (ignoring zero) 'height' on the tr element.

The td and th elements' height attributes map to the dimension property (ignoring zero) 'height' on the element.

`table$e, `col$e, `td$e, `th$e `width^a `~zeroは無視しつつ寸法に変換-$する `width$p

The table element's width attribute maps to the dimension property (ignoring zero) 'width' on the table element.

The col element's width attribute maps to the dimension property (ignoring zero) 'width' on the col element.

The td and th elements' width attributes map to the dimension property (ignoring zero) 'width' on the element.

`thead$e, `tbody$e, `tfoot$e, `tr$e, `td$e, `th$e `align^a 下に与える変換規則 `text-align$p

変換規則は:

  1. 属性~値 ~EQ`~ACI$ `middle^l ならば: `center^v を返す。
  2. 属性~値 ~IN`~ACI$ { `center^l, `left^l, `right^l, `justify^l } ならば: 同じ値による CSS ~keywordを返す(これらの値は,順に,自身の中で~textを[ 中央寄せ, 左寄せ, 右寄せ, 両端揃え ]にすることを意味する)。
  3. 他の場合: ε を返す。

加えて,`呈示hintになる$場合は、変換結果の CSS ~keyword[ `center^v / `left^v / `right^v / `justify^v ]に応じて[ 中央寄せ / 左端 / 右端 / 両端揃え ]に`子孫を整列する$ことも期待される。

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.

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.

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.

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.

User agents are expected to have a rule in their user agent stylesheet 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'.

`table$e, `thead$e, `tbody$e, `tfoot$e, `tr$e, `td$e, `th$e `background$a `絶対~URLに解決-$する `background-image$p
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 parsed relative to the element's node document, and if this is successful, the user agent is expected to treat the attribute as a presentational hint setting the element's 'background-image' property to the resulting URL string.
同上 `bgcolor^a `色~値へ変換-$する `background-color$p
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.
`table$e `bordercolor$A `色~値へ変換-$する `border-top-color$p, `border-right-color$p, `border-bottom-color$p, `border-left-color$p
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.
`table$e `border$A `~pixel長さに変換-$した結果が[ 非 ε ならば その値 / 他の場合は `1px^v ]を返す `border-top-width$p, `border-right-width$p, `border-bottom-width$p, `border-left-width$p
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.

~UA~stylesheetにおいては、次のような規則を持つことが期待される:

  • 規則は、[ `th$e 要素のうち, [ 要素の親~nodeの `text-align$p ~propの`算出値$は その初期値である ]ものに合致する。
  • 規則の宣言~blockは、[ `text-align$p ~propを値 `center^v に設定する ]ような,単独の宣言のみからなる。
◎ ↑

上の~CSS~blockにて `~borderが~zeroに等価でない場合のみ@ と記されている規則は、[ その規則に対し 当の選択子に示された `border^a 属性 ]が,[ 在する, かつ その値を`非負~整数に変換-$した結果が ε でも~zeroでもない ]ときにのみ適用することが期待される。 ◎ 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.


`過去互換~mode$下では、[ `nowrap$tdth 属性を有するような[ `td$e / `th$e ]要素 ]の `width$tdth 属性は、次の変換規則の下に,要素~上の `white-space$p ~propに対する`呈示hintとして扱う$ことが期待される ⇒ [ `非~zero寸法~値として構文解析-$した結果が[ ~errorでない, かつ その種別は長さである(百分率でない)ならば `normal^v / 他の場合は ε ]を返す。

これは、上の~CSS~block内のそれを `nowrap^v に設定する規則( `td[nowrap], th[nowrap] { ... }^css )を上書きする。

◎ 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 non-zero 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'.

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規則があることが期待される: ◎ ↓

先行する`~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. `margin-block-start$p
先行する`~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. `margin-block-end$p
後続する`~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. `margin-block-start$p
後続する`~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. `margin-block-end$p

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

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

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

`hr$e 要素の`size$A 属性は: ◎ ↓

要素は[ `color$A, `noshade$A ]いずれかの属性を有する場合:
次の変換規則の下に,要素~上の[ `border-top-width$p, `border-right-width$p, `border-bottom-width$p, `border-left-width$p ]~propに対する`呈示hintとして扱う$ことが期待される ⇒ [ `非負~整数に変換-$した結果が[ 非 ε ならば それを 2 で除算した結果の`~pixel単位$による数 / 他の場合は ε ]を返す。 ◎ 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.
他の場合:
  • 次の変換規則の下に,要素~上の `border-bottom-width$p ~propに対する`呈示hintとして扱う$ことが期待される ⇒ [ `非負~整数に変換-$した結果が[ 1 ならば `0^v / 他の場合は ε ]を返す。
  • 次の変換規則の下に,要素~上の `height$p ~propに対する`呈示hintとして扱う$ことが期待される ⇒ [ `非負~整数に変換-$した結果が[ 1 より大きい数ならば `~pixel単位$による ( その結果 − 2 ) / 他の場合は ε ]を返す。
◎ 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.

`hr$e 要素の `width$A 属性は、[ `寸法に変換-$する変換規則 ]の下に,要素~上の `width$p ~propに対する`呈示hintとして扱う$ことが期待される。 ◎ The width attribute on an hr element maps to the dimension property 'width' on the element.

`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 an error, the user agent is expected to treat the attribute as a presentational hint setting the element's 'color' property to the resulting color.

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').

`fieldset$e 要素にて`具現化される~legend$ %L があるならば、 %L の~boxを,次の様に具現化することが期待される:

  • ~boxを、[ `fieldset^e 要素の `塊~始端$`~border辺$に重なるような`塊~box$ ]にする — %L 上に指定されている `display$p 値は上書きして。
  • %L 上に`行内~size$が明示的に指定されていないならば、~boxは, %L の内容を最短収納( shrink-wrap )するべきである。
  • ~boxは、新たな`塊~整形~文脈$を確立することが期待される。
  • ~boxを、次で与えられる位置に行内~方向に整列させる:

    1. %L は `align^a 属性を有していて,その値 ~EQ`~ACI$ [ `left^l / `right^l / `center^l ]ならば、[ `行左端$ / `行右端$ / 中央 ]
    2. 他の場合、`行内~始端$
`CSSWM$r

A fieldset element's rendered legend, if any, is expected to be rendered over the block-start border edge of the fieldset element as a block box (overriding any explicit 'display' value). In the absence of an explicit inline size, the box should shrink-wrap. The element is expected to establish a new block formatting context. If the legend element in question has an align attribute, and its value is an ASCII case-insensitive match for one of the strings in the first column of the following table, then the legend is expected to be rendered aligned in the inline direction over the border edge in the position given in the corresponding cell on the same row in the second column. If the attribute is absent or has a value that doesn't match any of the cases in the table, then the position is expected to be on the inline-start side. [CSSWM]

Attribute value Alignment position
left On the line-left side
right On the line-right side
center In the middle

14.4. 置換~要素

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.

`applet$e 要素に対しては,次が期待される ⇒ `~plugin$を`表現-$するものは `置換~要素$として扱い、他のものは 具現化~modelにおける普通の要素として扱う。 ◎ An applet element that represents a plugin is expected to be treated as a replaced element. Other applet 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. 埋込みの内容/画像に対する属性

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

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

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

applet[align=left i],
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;
}

applet[align=right i],
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;
}

applet[align=top i],
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;
}

applet[align=baseline i],
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;
}

applet[align=texttop i],
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;
}

applet[align=absmiddle i],
embed[align=absmiddle i],
iframe[align=absmiddle i],
img[align=absmiddle i],
input[type=image i][align=absmiddle i],
object[align=absmiddle i],
applet[align=abscenter 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;
}

applet[align=bottom i],
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;
}

[ `applet$e / `embed$e / `iframe$e / `img$e / `object$e / [ `type$input 属性が `Image$st 状態にある `input$e ]]要素に対しては、次が期待される: ◎ ↓

  • 要素は `align^a 属性を有していて,その値 ~IN`~ACI$ {`center^l, `middle^l } ならば、要素の `vertical-align$p ~propが[ 要素の縦方向 middle †と親~要素の基底線とを整列するような値 ]に設定されていたかのように動作する††。

    【† `vertical-align$p に対する `middle^v 値の定義とは、異なっている。 】【†† “動作する” とは?(`呈示hintとして扱う$のではない?) 】

    ◎ When an applet, 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.
  • その `hspace^a 属性は、[ `寸法に変換-$する変換規則 ]の下に,要素~上の[ `margin-left$p, `margin-right$p ]~propに対する`呈示hintとして扱う$。 ◎ The hspace attribute of applet, embed, iframe, 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.
  • その `vspace^a 属性は、[ `寸法に変換-$する変換規則 ]の下に,要素~上の[ `margin-top$p, `margin-bottom$p ]~propに対する`呈示hintとして扱う$。 ◎ The vspace attribute of applet, embed, iframe, 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.

[ `img$e / `object$e / [ `type$input 属性が `Image$st 状態にある `input$e ]]要素の `border^a 属性に対しては、次が期待される:

  • 次の変換規則の下に,要素~上の[ `border-top-width$p, `border-right-width$p, `border-bottom-width$p, `border-left-width$p ]~propに対する`呈示hintとして扱う$ ⇒ [ `非負~整数に変換-$した結果が ε でない, かつ~zeroより大きいならば 結果を`~pixel単位$に解釈した結果 / 他の場合は ε ]を返す。
  • 次の変換規則の下に,要素~上の[ `border-top-style$p, `border-right-style$p, `border-bottom-style$p , `border-left-style$p ]~propに対する`呈示hintとして扱う$ ⇒ [ `非負~整数に変換-$した結果が ε でない, かつ~zeroより大きいならば `solid^v / 他の場合は ε ]を返す。
◎ 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'.

[ `applet$e / `embed$e / `iframe$e / `img$e / `object$e/ `video$e /[ `type$input 属性が `Image$st 状態にある `input$e ]]要素に対しては、それが[ 画像を表現する, もしくは 最終的に画像を表現することになるものと利用者が期待する `?^tnote ]ならば、要素の[ `width$input, `height$input ]属性は、順に,[ `寸法に変換-$する変換規則 ]の下に,要素~上の[ `width$p, `height$p ]~propに対する`呈示hintとして扱う$ことが期待される。 ◎ The width and height attributes on applet, 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の目的0においては,[ その図形を定義する `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.

具現化の目的0においては、図形に効果を及ぼす~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. 各種~widget

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木 `?^tnote は,その~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選択を提供する場合、利用者が現在の選択を変更したときは、要素に向けて,次のようにされた`~eventを発火-$するような`~taskを待入する$ ⇒ 名前 `select$et,
    `利用者~対話~task源$を利用する,
    `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として扱う$ ⇒ `非負~整数に変換-$した結果が[ ε でないならば[ ( 要素, その結果 ) を与える下で, `文字~数から~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を[ ( 要素, 20 ) を与える下で,`文字~数から~pixel単位へ変換-$した結果 ]に設定する ]ような,`~UA~level$の~stylesheet規則を持っていた ]かのように動作する。 ◎ 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.

`文字~数から~pixel単位へ変換-@ するときは、 所与の ( %要素, %size ) に対し, ( ( %size − 1 ) × %avg + %max ) を返す — ここで:

  • %avg は、`~pixel単位$による, %要素 上の首~fontの平均の文字~横幅
  • %max は、`~pixel単位$による, %要素 上の首~fontの最大の文字~横幅

(要素の `letter-spacing$p ~propは、結果に影響しない。)

◎ 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.)

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.

定義済みの候補~値( `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 属性から提供される)定義済みの候補~値は、~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'.

progress 要素の具現化を示す図

要素が横長のときは、横方向~進捗~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幅@ とは、[ 次に挙げる要素の それぞれを具現化するために必要とされる横幅 ]のうちの,最大である:

  • 要素~内の `optgroup$e
  • 要素の`選択肢~list$内の各 `option$e (字下げもあればそれも含める)
◎ 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).

`select$e 要素が包含する`仮入力~label選択肢$ %O に対しては、次のように具現化することが期待される:

  • [ %O は、当の~controlの妥当な選択肢ではなく,~labelである ]ことが利用者に判るようにする。
  • %O は利用者により明示的に選択されないようにする。
  • [ %O の`選択有無$ ~EQ ~T ]のときは、[ 当の `select$e に対しては、現在~妥当な選択肢は選択されていない ]ことが利用者に判るようにする。
◎ If a select element contains a placeholder label option, the user agent is expected to render that option in a manner that conveys that it is a label, rather than a valid option of the control. This can include preventing the placeholder label option from being explicitly selected by the user. 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.

`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 要素に対しては、次が期待される:

  • [ 複数行~text~controlとして図画化される `inline-block$v ~box ]として具現化する
  • この複数行~text~controlが~text選択を提供する場合、利用者が現在の選択を変更したときは、要素に向けて,次のようにされた`~eventを発火-$するような`~taskを待入する$ ⇒ 名前 `select$et,
    ~task源は `利用者~対話~task源$,
    `bubbles$m 属性 ~SET ~T に初期化-
◎ The textarea element is expected to render as an 'inline-block' box depicting a multiline text control. If this multiline text control provides a 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.

`textarea$e 要素に対しては、次が期待される:

  • 次の変換規則の下に, `cols$A 属性を要素~上の `width$p ~propに対する`呈示hintとして扱う$ ⇒ [ `非負~整数に変換-$した結果が ε でないならば`~textarea実効~横幅$(下に定義される) / 他の場合は ε ]を返す
  • `呈示hintにならない$場合、[ 要素~上の `width$p ~propを`~textarea実効~横幅$に設定する ]ような,`~UA~level$の~stylesheet規則 ]を持っていたかのように動作する。
◎ If the element has a cols 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 being the textarea effective width (as defined below). Otherwise, 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 textarea effective width.

`textarea$e 要素の `~textarea実効~横幅@ は、 ( %size × %avg + %sbw ) で与えられる — ここで:

  • %size は、( `cols$A 属性から導出される)要素の`一行分の字数$(属性が不在なら 20 )
  • %avg は、`~pixel単位$による,要素の首~fontの平均 文字~横幅
  • %sbw は、`~pixel単位$による,~scroll~barの横幅

(要素の `letter-spacing$p ~propは、結果に影響しない)

◎ 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 scroll bar, in CSS pixels. (The element's 'letter-spacing' property does not affect the result.)

`textarea$e 要素に対しては、次が期待される:

  • 次の変換規則の下に, `rows$A 属性を要素~上の `height$p ~propに対する`呈示hintとして扱う$ ⇒ [ `非負~整数に変換-$した結果が ε でないならば `~textarea実効~縦幅$(下に定義される) / 他の場合は ε ]を返す
  • `呈示hintにならない$場合、[[ 要素~上の `height$p ~propを`~textarea実効~縦幅$に設定する ]ような,`~UA~level$の~stylesheet規則 ]を持っていたかのように動作する。
◎ If the element has a rows 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 'height' property on the element, with the value being the textarea effective height (as defined below). Otherwise, the user agent is expected to act as if it had a user-agent-level style sheet rule setting the 'height' property on the element to the textarea effective height.

`textarea$e 要素の `~textarea実効~縦幅@ は、 ( %size × %h + %sbh ) で与えられる — ここで:

  • %size は、要素の( `rows$A 属性から導出される)`行数$(属性が不在なら 2 )
  • %h は、`~pixel単位$による一行分の高さ
  • %sbh は、`~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.6. `frame^e, `frameset^e

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

14.7. 対話的~媒体

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 属性

~UAには、[ 利用者からの要請-に際し,要素の`助言情報$を公開すること ], および[ そのような情報の存在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装置を利用できないときは、何らかの他の流儀で内容を可用にすることが期待される — 例えば:

  • 要素を可focus区画にした上で、現在の`被~focus$要素の`助言情報$を,常に表示するようにする。
  • あるいは,利用者が~screenを~panするに伴い,要素の`助言情報$を~touch装置~上で 利用者の指先の傍に示す。
◎ 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. by making the element a focusable area and always displaying the advisory information of the currently focused element, or 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を[ 行0の終端~方向に正の~~距離にある,次の~tab-stop ]に~~位置させる ]ように具現化することが期待される — ここで,~tab-stopたちは、行0の始端から[ 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 non-zero 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$内にあるならば `?^tnote )があるならば、~CSS具現化~modelの目的0においては,[ 縦幅は~caretのそれ, 横幅は~zeroにされた,行内`置換~要素$ ]の様に動作することが期待される。 ◎ 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.

~drop-down~boxの具現化を示す図

属性~値の方向性は、次に例示されるように,属性と[ それを有する要素~上の `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:

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

`abbr^a 属性が,例えば~tooltipその他の~UIで具現化される場合:

  • 1 個目の `th^e では、方向は `ltr^v なので,丸括弧は左端に来ることになる。
  • 2 個目では、方向は `rtl^v なので,丸括弧は右端に来ることになる。 `丸括弧は右~丸括弧になるのか?^tnote
  • 3 個目では、方向は 属性~値から `rtl^v に決定されるので,丸括弧は右端に来ることになる。
◎ 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').

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

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

この事例では、~UAが(例えば,~debug環境の)~UIにて `data-abbr^a 属性を公開するとするとき、 3 個目のそれに対しては,丸括弧は 左端 に具現化されることになる — 方向は,要素の内容から決定されることになるので。 ◎ 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.

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

したがって次の~scriptによる結果は: ◎ Thus, the following script:

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

~UA~interfaceの言語, 頁の方向, 当の要素のそれらに関わらず,常に次の様に読まれる~messageになる: ◎ ...would always result in a message reading

"למד LMTH היום!" — 次ではなく "דמל HTML םויה!"

◎ regardless of the language of the user agent interface or the direction of the page or any of its elements.

もっと複雑な例として、次の~scriptを考える: ◎ For a more complex example, consider the following script:

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

利用者が "林田" と手入力したとき、~UAは,次の様に~alertするであろう: ◎ When the user enters "Kitty", the user agent would alert

林田様ですね。森田様、林田様、木田様がご同行になります。 ◎ "Kitty! Ok, Fred, Kitty, and Wilma will get the car.".

一方で、利用者が "لا أفهم" と手入力した場合、双方向的~algoにより,段落の方向は右横書きであると決定され、出力は次のように切り刻まれる: ◎ However, if the user enters "لا أفهم", 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:

لا أفهم様田森。ねすで様、لا أفهمすまりなに行同ごが様田木、様。 "لا أفهم! derF ,kO, لا أفهم, rac eht teg lliw amliW dna."

文字列に U+200E LEFT-TO-RIGHT MARK 文字を接頭すれば、利用者から提供された~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:

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

14.9. ~unstyled XML 文書

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

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

次の条件すべてを満たす`文書$ %文書 は、 `~unstyled文書@ であるとされる: ◎ A Document is an unstyled document while it matches the following conditions:

  • %文書 は、作者~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).
  • %文書 内のどの要素も,`呈示hint$を持たない。 ◎ None of the elements in the Document have any presentational hints.
  • %文書 内のどの要素も,`~style属性$を有さない。 ◎ None of the elements in the Document have any style attributes.
  • %文書 内には、[ `~HTML名前空間$, `~SVG名前空間$, `~MathML名前空間$ ]いずれかに属するような要素はない。 ◎ None of the elements in the Document are in any of the following namespaces: HTML namespace, SVG namespace, MathML namespace
  • %文書 には、`表示域$の他に可focus区画は無い(例:~XLinkによるものなど)。 ◎ The Document has no focusable area (e.g. from XLink) other than the viewport.
  • %文書 内に`~hyperlink$は無い(例:~XLinkによるものなど)。 ◎ The Document has no hyperlinks (e.g. from XLink).
  • `~script$ であって,[ その`設定群~obj$が %文書 を`担当の文書$として指定するもの ]は、存在しない。 ◎ There exists no script whose settings object specifies this Document as the responsible document.
  • %文書 内のどの要素にも,~event~listenerは登録されていない。 ◎ None of the elements in the Document have any registered event listeners.

`~unstyled文書~view@ とは、~CSSに則って~DOMが具現化されない(この文脈~下で適用し得る~styleはないので,結果は単に~textの羅列になるであろう)が、代わりに,開発者にとって有用な方式で具現化されるような~viewである。 例えば、次のいずれかの形をとり得るであろう:

  • 単に、 %文書 の~sourceを構文~強調も伴わせて示す。
  • その~DOM木そのものを表示する。
  • 単に、頁は~styleがあてがわれていない文書である~~旨を述べる~message
◎ 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.

注記: `文書$が`~unstyled文書$でなくなったときは,上の各~条件は適用されなくなり、これらの要件に従う~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.