4″ 14″ 1x 3x 縦長 横長 小のときは 1 列 中のときは 2 列 大のときは 3 列

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

この訳の,~algoの記述に利用されている各種記号( ~LET, ~IF, ~RET, 等々)の意味や定義の詳細は、~SYMBOL_DEF_REFを~~参照されたし。

`px@css は、`~CSS~pixel$単位の略記である。

4.8.1. `picture^e 要素

`分類$
`~flow内容$ / `句内容$ / `埋込みの内容$ ◎ Flow content. ◎ Phrasing content. ◎ Embedded content.
`この要素を利用できる文脈$
`埋込みの内容$が期待される所。 ◎ Where embedded content is expected.
`内容~model$

次の要素からなる挙げられる順による並び:

  1. 0 個~以上の `source$e 要素
  2. 1 個の `img$e 要素

加えて、これらの要素の前後には,任意個数の`~scriptを~supportする要素$があってよい。

◎ Zero or more source elements, followed by one img element, optionally intermixed with script-supporting elements.
`text/html における~tag省略$
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$
`大域~属性$ ◎ Global attributes
`~DOM~interface$
[Exposed=Window,
 `HTMLConstructor$I]
interface `HTMLPictureElement@I : `HTMLElement$I {};

`picture$e 要素は、その子である `img$e 要素に複数の~sourceを提供する容器である。 それは、作者が,[[ ~screen画素~密度, `表示域$の~size, 画像~形式, その他の因子 ]に基づいて どの画像~資源を利用するか ]について,宣言的に[ ~UAを制御する/~UAに~hintを与える ]ことを可能にする。 それは、その子たちを`表現-$する。 ◎ The picture element is a container which provides multiple sources to its contained img element to allow authors to declaratively control or give hints to the user agent about which image resource to use, based on the screen pixel density, viewport size, image format, and other factors. It represents its children.

注記: `picture$e 要素は、似た見かけの[ `video$e / `audio$e ]要素とは いくぶん異なる。 それらも `source$e 要素を包含するが、 `source$e 要素の `src$aS 属性は、要素が `picture$e 要素の中に入子にされたときは 意味はなく,資源~選定~algoも異なる。 また、 `picture$e 要素~自身は何も表示しない — それは、その子である `img$e 要素に,複数の `~URL$ から選ぶことを可能化するような文脈を提供するだけである。 ◎ The picture element is somewhat different from the similar-looking video and audio elements. While all of them contain source elements, the source element's src attribute has no meaning when the element is nested within a picture element, and the resource selection algorithm is different. Also, the picture element itself does not display anything; it merely provides a context for its contained img element that enables it to choose from multiple URLs.

4.8.2. `source^e 要素

`分類$
なし。 ◎ None.
`この要素を利用できる文脈$
`picture$e 要素の子としては、 `img$e 要素の前。 ◎ As a child of a picture element, before the img element.
`~media要素$の子としては、どの[ `~flow内容$ / `track$e 要素 ]よりも前。 ◎ As a child of a media element, before any flow content or track elements.
`内容~model$
`なし$ ◎ Nothing.
`text/html における~tag省略$
`終了tag$はない。 ◎ No end tag.
`内容~属性$
`大域~属性$ ◎ Global attributes
`src$aS — 資源の~address ◎ src — Address of the resource
`type$aS — 埋込みの資源の型 ◎ type — Type of embedded resource
`srcset$aS — 種々の状況(例:高~解像度~display, 狭い~monitor, 等々)に応じて利用する一連の画像 ◎ srcset — Images to use in different situations (e.g. high-resolution displays, small monitors, etc)
`sizes$aS — 種々の頁~layout用の画像~size ◎ sizes — Image sizes for different page layouts
`media$aS — 適用し得る~media ◎ media — Applicable media
`~DOM~interface$
[Exposed=Window,
 `HTMLConstructor$I]
interface `HTMLSourceElement@I : `HTMLElement$I {
  [`CEReactions$] attribute USVString `src$mS;
  [`CEReactions$] attribute DOMString `type$mS;
  [`CEReactions$] attribute USVString `srcset$mS;
  [`CEReactions$] attribute DOMString `sizes$mS;
  [`CEReactions$] attribute DOMString `media$mS;
};

`source$e 要素は、作者が,[ `img$e 要素/ `~media要素$用の複数の代替 `~media資源$ ]用に 複数の代替`~source集合$を指定できるようにする。 この要素は、自身のみでは何も`表現-$しない。 ◎ The source element allows authors to specify multiple alternative source sets for img elements or multiple alternative media resources for media elements. It does not represent anything on its own.

`source$e 要素には `type@aS 属性が指定されてよい。 指定する値は、`妥当な~MIME型$で~MUST。 ◎ The type attribute may be present. If present, the value must be a valid MIME type.

`source$e 要素 %source の親が `picture$e 要素である場合、以下の要件も課される: ◎ The remainder of the requirements depend on whether the parent is a picture element or a media element: ◎ source element's parent is a picture element

【 親が`~media要素$である場合の要件, および `~media要素$に関係する他の内容は、別ページにて。 】

`type@mS
`srcset@mS
`sizes@mS
`media@mS
それぞれ、対応する同じ名前の内容~属性を`反映-$し~MUST。 ◎ The IDL attributes src, type, srcset, sizes and media must reflect the respective content attributes of the same name.

4.8.3. `img^e 要素

`分類$
`~flow内容$ / `句内容$ / `埋込みの内容$ / `~formに所有され得る要素$ / `可触~内容$ / (要素は `usemap$a 属性を有する場合に限り)`対話的~内容$ ◎ Flow content. ◎ Phrasing content. ◎ Embedded content. ◎ Form-associated element. ◎ If the element has a usemap attribute: Interactive content. ◎ Palpable content.
`この要素を利用できる文脈$
`埋込みの内容$が期待される所 ◎ Where embedded content is expected.
`内容~model$
`なし$ ◎ Nothing.
`text/html における~tag省略$
`終了tag$はない ◎ No end tag.
`内容~属性$
`大域~属性$ ◎ Global attributes
`alt$a — 画像が可用でないときに利用するための代用~text ◎ alt — Replacement text for use when images are not available
`src$a — 画像~資源の~address ◎ src — Address of the resource
`srcset$a — 種々の状況(例:高~解像度~display, 狭い~monitor, 等々)に応じて利用する一連の画像 ◎ srcset — Images to use in different situations (e.g. high-resolution displays, small monitors, etc)
`sizes$a — 種々の頁~layout用の画像~size ◎ sizes — Image sizes for different page layouts
`crossorigin$a — 要素が非同一生成元~要請をどう取扱うか ◎ crossorigin — How the element handles crossorigin requests
`usemap$a — 利用する`画像~map$の名前 ◎ usemap — Name of image map to use
`ismap$a — この画像は~server側~画像~mapかどうか ◎ ismap — Whether the image is a server-side image map
`width$a — 横~寸法 ◎ width — Horizontal dimension
`height$a — 縦~寸法 ◎ height — Vertical dimension
`referrerpolicy$a — この要素により起動された`~fetch$用の`~referrer施策$ ◎ referrerpolicy — Referrer policy for fetches initiated by the element
`~DOM~interface$
[Exposed=Window,
 `HTMLConstructor$I,
 NamedConstructor=`Image$m(optional unsigned long width, optional unsigned long height)]
interface `HTMLImageElement@I : `HTMLElement$I {
  [`CEReactions$] attribute DOMString `alt$m;
  [`CEReactions$] attribute USVString `src$m;
  [`CEReactions$] attribute USVString `srcset$m;
  [`CEReactions$] attribute DOMString `sizes$m;
  [`CEReactions$] attribute DOMString? `crossOrigin$m;
  [`CEReactions$] attribute DOMString `useMap$m;
  [`CEReactions$] attribute boolean `isMap$m;
  [`CEReactions$] attribute unsigned long `width$m;
  [`CEReactions$] attribute unsigned long `height$m;
  readonly attribute unsigned long `naturalWidth$m;
  readonly attribute unsigned long `naturalHeight$m;
  readonly attribute boolean `complete$m;
  readonly attribute USVString `currentSrc$m;
  [`CEReactions$] attribute DOMString `referrerPolicy$m;

  Promise<void> `decode$m();
};

`img$e 要素は、画像を表現する。 ◎ An img element represents an image.

この画像は、要素の `src@a, `srcset@a 属性, および[ 要素の親が `picture$e 要素である場合における 要素に先行する同胞である各 `source$e 要素の `srcset$aS 属性 ]により与えられる,埋込みの内容になる。 加えて、要素の `alt@a 属性の値は,[ 当の画像を処理できない, または 画像の読込みが不能化されている ]ときのための等価な内容を提供する(すなわち, `img$e 要素の`~fallback内容$になる)。 ◎ The image given by the src and srcset attributes, and any previous sibling source elements' srcset attributes if the parent is a picture element, is the embedded content; the value of the alt attribute provides equivalent content for those who cannot process images or who have image loading disabled (i.e. it is the img element's fallback content).

`alt$a 属性の値に課される要件は、`~textを画像の代替として提供する際の要件$にて述べる。 ◎ The requirements on the alt attribute's value are described in a separate section.

要素は、 `src$a 属性を有する ~AND その値は`前後~空白~可の妥当かつ空でない~URL$を包含する ~AND その~URLは、画像~資源を参照している ~AND 対話的でも, 多頁でも, ~scriptありでもない画像~資源を参照してい~MUST — 画像は、~animate化されていてもよい。 ◎ The src attribute must be present, and must contain a valid non-empty URL potentially surrounded by spaces referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted.

注記: 上の要件は、次に挙げるもの等は,画像として与えれることを含意する:

  • 静的な~bitmap(例:~PNG, ~GIF, ~JPEG)
  • 単頁の~vector文書(単頁の~PDF, ~XML~fileのうち~SVG`文書~要素$を伴うもの)
  • ~animate化された~bitmap( ~APNG, ~animate化~GIF)
  • ~animate化された~vector~graphic( ~XML~fileのうち,~SVG`文書~要素$を伴い, 宣言的な~SMIL~animationを利用するもの)
◎ The requirements above imply that images can be static bitmaps (e.g. PNGs, GIFs, JPEGs), single-page vector documents (single-page PDFs, XML files with an SVG document element), animated bitmaps (APNGs, animated GIFs), animated vector graphics (XML files with an SVG document element that use declarative SMIL animation), and so forth.\

一方で、次のもの等は,予め除外される:

  • ~scriptありの~SVG~file†
  • 複頁~PDF~file
  • 対話的~MNG~file
  • ~HTML文書
  • 素の~text文書
◎ However, these definitions preclude SVG files with script, multipage PDF files, interactive MNG files, HTML documents, plain text documents, and so forth.\

`PNG$r `GIF$r `JPEG$r `PDF$r `XML$r `APNG$r `SVG$r `MNG$r

【† ~scriptありでも、実際には,それを不能化した上で呈示する~UAが多いと思われるが(そのような処理ができない~UAも視野に入れた要件?)。 】

要素は `srcset$a 属性を有してもよい — それは、`~srcset属性$になる。 ◎ The srcset attribute may also be present, and is a srcset attribute.

`srcset$a 属性と(その値に`横幅~記述子$は利用されていない場合の) `src$a 属性は、`~source集合$に`画像~source$を供与する(どの `source$e 要素も選定されなかった場合に限り)。 ◎ The srcset attribute and the src attribute (if width descriptors are not used) contribute the image sources to the source set (if no source element was selected).

要素が `srcset$a 属性を有する ~AND その値のいずれかの`画像~候補~文字列$に`横幅~記述子$が利用されている場合、要素は `sizes@a 属性も有してい~MUST — それは`~sizes属性$になる。 `sizes$a 属性は、`~source集合$に`~source~size$を供与する(どの `source$e 要素も選定されなかった場合に限り)。 ◎ If the srcset attribute is present and has any image candidate strings using a width descriptor, the sizes attribute must also be present, and is a sizes attribute. The sizes attribute contributes the source size to the source set (if no source element was selected).

`crossorigin@a 属性は`~CORS設定群~属性$である。 その目的は、第三者主体~siteからの画像に対し, `canvas$e から利用される非同一生成元~accessを許容することである。 ◎ The crossorigin attribute is a CORS settings attribute. Its purpose is to allow images from third-party sites that allow cross-origin access to be used with canvas.

`referrerpolicy@a 属性は、`~referrer施策~属性$である。 その目的は、画像の`~fetch$時に利用される`~referrer施策$を設定することである。 `REFERRERPOLICY$r ◎ The referrerpolicy attribute is a referrer policy attribute. Its purpose is to set the referrer policy used when fetching the image. [REFERRERPOLICY]


`img$e 要素は、~layout~toolとして利用されては~MUST_NOT。 特に, 透明な画像を表示するために利用されるべきではない — そのような画像が[ 意味を伝達する/ 文書に有用なものを追加する ]のはまれなので。 ◎ The img element must not be used as a layout tool. In particular, img elements should not be used to display transparent images, as such images rarely convey meaning and rarely add anything useful to the document.


`img$e 要素 %img が表現するものは、その `src$a, `alt$a 属性に依存する — 以下 %alt は, %img が `alt$a 属性を[ 有するならばその値 / 有さないならば ε ]とする:

◎ What an img element represents depends on the src attribute and the alt attribute.
%img は `src$a 属性を有する場合:

%img の`画像は可用$である, かつ ~UAはその画像を表示するよう環境設定されているならば、 %img は,その画像~dataを`表現-$する。

加えて、 %alt に応じて:

◎ ↓
空~文字列 ◎ If the src attribute is set and the alt attribute is set to the empty string
画像は、文書~内の他の内容に対する 装飾的または補足的なものであり,冗長な情報である。 ◎ The image is either decorative or supplemental to the rest of the content, redundant with some other information in the document.
%img が画像~dataを表現しない場合、それは何も`表現-$しないので,具現化から完全に省略されてよい。 ~UAは、画像は在するが具現化からは省略された旨を利用者に通知してよい。 ◎ If the image is available and the user agent is configured to display that image, then the element represents the element's image data. ◎ Otherwise, the element represents nothing, and may be omitted completely from the rendering. User agents may provide the user with a notification that an image is present but has been omitted from the rendering.
空でない文字列 ◎ If the src attribute is set and the alt attribute is set to a value that isn't empty
画像は内容に欠かせない。 %alt は、画像~用の等価な または代用~textを与える。 ◎ The image is a key part of the content; the alt attribute gives a textual equivalent or replacement for the image. ◎ If the image is available and the user agent is configured to display that image, then the element represents the element's image data.
%img が画像~dataを表現しない場合、 %img は %alt で与えられる~textを`表現-$する。 ~UAは、画像は在するが具現化からは省略された旨を利用者に通知してよい。 ◎ Otherwise, the element represents the text given by the alt attribute. User agents may provide the user with a notification that an image is present but has been omitted from the rendering.
ε ◎ If the src attribute is set and the alt attribute is not
画像は内容に欠かせないかもしれない。 画像に等価な~textは、可用でない。 ◎ The image might be a key part of the content, and there is no textual equivalent of the image available.
注記: 適合~文書における `alt$a 属性の不在は、画像は内容に欠かせないが,その生成-時には画像~用の代用~textは可用でなかったことを指示する。 ◎ In a conforming document, the absence of the alt attribute indicates that the image is a key part of the content but that a textual replacement for the image was not available when the image was generated.

%img が画像~dataを表現しない場合、~UAは,画像はあるが具現化されていないことを何らかの類の指示子で表示するべきである。 加えて、[ 利用者から要請された, または そのように環境設定されている ], あるいは[ ~naviに呼応して文脈上の情報を提供することが要求される ]場合、次に従って導出される結果が ε でないならば,それを画像~用の~caption情報として提供してもよい: ◎ If the image is available and the user agent is configured to display that image, then the element represents the element's image data. ◎ Otherwise, the user agent should display some sort of indicator that there is an image that is not being rendered, and may, if requested by the user, or if so configured, or when required to provide contextual information in response to navigation, provide caption information for the image, derived as follows:

  1. ~IF[ %img は `title$a 属性を有する ~AND その値 ~NEQ 空~文字列 ] ⇒ ~RET その属性の値 ◎ If the image has a title attribute whose value is not the empty string, then the value of that attribute is the caption information; abort these steps.
  2. ~IF[ 次をすべて満たすような ある `figure$e 要素 %F がある ]…:

    • %img は %F の子孫である
    • %F の子に `figcaption$e 要素はある — それらのうち最初のものを %C とする
    • %F の子孫は[ %C とその子孫, `要素間~空白$, %img, 非`~flow内容$ ]のみからなる
    • %img は %C の子孫ではない†

    …ならば ⇒ ~RET %C の内容

    【† この条件は訳者による補完。 原文の言い回しが微妙なので はっきりしないが、さもなければ,該当する `figure^e 要素(`~flow内容$でもある)が複数あり得ることになり,多義的になることに加え、 %img 自身が自身の~caption情報の一部を成す循環が生じ得るので。 】

    ◎ If the image is a descendant of a figure element that has a child figcaption element, and, ignoring the figcaption element and its descendants, the figure element has no flow content descendants other than inter-element whitespace and the img element, then the contents of the first such figcaption element are the caption information; abort these steps.
  3. ~RET ε — ~caption情報はない ◎ There is no caption information.
%img は `src$a 属性を有さない場合:
%alt が空でない文字列ならば, %img は その文字列による~textを`表現-$する。 他の場合, %img は 何も`表現-$しない。 ◎ If the src attribute is not set and either the alt attribute is set to the empty string or the alt attribute is not set at all ◎ The element represents nothing. ◎ Otherwise ◎ The element represents the text given by the alt attribute.

`alt$a 属性は、助言情報を表現するものではない。 ~UAは、 `alt$a 属性の内容を `title$a 属性の内容と同じ仕方で呈示しては~MUST_NOT。 ◎ The alt attribute does not represent advisory information. User agents must not present the contents of the alt attribute in the same way as content of the title attribute.

~UAは,常に、画像を[ 表示させる/させない ]の選択肢を利用者に提供してよい。 ~UAは、利用者が画像を見れないときには — 視覚障碍 / ~graphic能力のない~text端末を利用しているなど — 利用者が用立て易くするような経験則を適用してもよい。 そのような経験則には、具体例として,画像の中に見出された~textの光学文字認識( OCR )も含まれ得る。 ◎ User agents may always provide the user with the option to display any image, or to prevent any image from being displayed. User agents may also apply heuristics to help the user make use of the image when the user is unable to see it, e.g. due to a visual disability or because they are using a text terminal with no graphics capabilities. Such heuristics could include, for instance, optical character recognition (OCR) of text found within the image.

~UAには, `alt$a 属性が欠落している事例を修復することが奨励されるが、作者は,そのような挙動に依拠しては~MUST_NOT。 詳細は、`~textを画像の代替として提供する際の要件$に述べる。 ◎ While user agents are encouraged to repair cases of missing alt attributes, authors must not rely on such behavior. Requirements for providing text to act as an alternative for images are described in detail below.

`img$e 要素の内容は、あっても,具現化の目的においては無視される。 ◎ The contents of img elements, if any, are ignored for the purposes of rendering.


`img$e 要素が `usemap$a 属性を有する場合、画像には`画像~map$が結付けられることを指示し得る。 ◎ The usemap attribute, if present, can indicate that the image has an associated image map.

`img$e 要素が `ismap@a 属性を有する ~AND 先祖に `href$a 属性を有する `a$e 要素がある場合、~server側~画像~mapへの~accessを提供することを指示する。 これは、その `a$e 要素~上の~eventがどう取扱われるかにも影響する。 ◎ The ismap attribute, when used on an element that is a descendant of an a element with an href attribute, indicates by its presence that the element provides access to a server-side image map. This affects how events are handled on the corresponding a element.

`ismap$a 属性は`真偽~属性$である。 この属性は、要素の先祖に[ `href$a 属性を有する `a$e 要素 ]がない場合には,指定されては~MUST_NOT。 ◎ The ismap attribute is a boolean attribute. The attribute must not be specified on an element that does not have an ancestor a element with an href attribute.

注記: [[ `usemap$a / `ismap$a ]属性を有する `img$e 要素 ]と[ `media$aS 属性を有する `source$e 要素 ]とが, `picture$e 要素~内で併用された場合、結果の挙動は,困惑させるものになる。 ◎ The usemap and ismap attributes can result in confusing behavior when used together with source elements with the media attribute specified in a picture element.

`img$e 要素は、`寸法~属性$を~supportする。 ◎ The img element supports dimension attributes.

`alt@m
`src@m
`srcset@m
`sizes@m
それぞれ、対応する同じ名前の内容~属性を`反映-$し~MUST。 ◎ The alt, src, srcset and sizes IDL attributes must reflect the respective content attributes of the same name.
`crossOrigin@m
`既知の値のみに制限され$る下で, `crossorigin$a 内容~属性を`反映-$し~MUST。 ◎ The crossOrigin IDL attribute must reflect the crossorigin content attribute, limited to only known values.
`useMap@m
`usemap$a 内容~属性を`反映-$し~MUST。 ◎ The useMap IDL attribute must reflect the usemap content attribute.
`isMap@m
`ismap$a 内容~属性を`反映-$し~MUST。 ◎ The isMap IDL attribute must reflect the ismap content attribute.
`referrerPolicy@m
`既知の値のみに制限され$る下で, `referrerpolicy$a 内容~属性を`反映-$し~MUST。 ◎ The referrerPolicy IDL attribute must reflect the referrerpolicy content attribute, limited to only known values.
%image . `width$m [ = %value ]
%image . `height$m [ = %value ]
これらの属性は、[ この画像の実際に描画される寸法が既知ならば それ / ~ELSE_ 0 ]を返す。 ◎ These attributes return the actual rendered dimensions of the image, or zero if the dimensions are not known.
設定して,対応する内容~属性を変更できる。 ◎ They can be set, to change the corresponding content attributes.
%image . `naturalWidth$m
%image . `naturalHeight$m
これらの属性は、[ この画像の内在的~寸法が既知ならば それ / ~ELSE_ 0 ]を返す ◎ These attributes return the intrinsic dimensions of the image, or zero if the dimensions are not known.
%image . `complete$m
この画像は[ 完全に~downloadされた, または 指定されていないならば ~T / ~ELSE_ ~F ]を返す。 ◎ Returns true if the image has been completely downloaded or if no image is specified; otherwise, returns false.
%image . `currentSrc$m
この画像の`絶対~URL$を返す。 ◎ Returns the image's absolute URL.
%image . `decode()$m
画像は,通例的に ある符号化された形で存在するので、~UAはそれを表示する前に生の~pixelに復号する必要がある。 この処理-は、比較的~高価になり得る。 ◎ Images usually exist in some encoded form; user agents need to decode them into raw pixels before displaying them. This process can be relatively expensive.
この~methodは、~UAに画像を`並列的$に復号させ,[ 復号を完了した時点で充足されることになる~promise ]を返す。 復号された画像~dataは、~promiseが充足された時点から 1 ~frame以内には,すぐ可用な~~状態になる — すなわち、画像を表示しようと試みたときには,復号による遅延-なしに完了する — ことを確保する。 ◎ This method causes the user agent to decode the image in parallel, returning a promise that fulfills when decoding is complete. The decoded image data will then be readily available for at least one frame after the fulfillment, ensuring that attempting to display the image will complete without decoding delay.
画像を復号できなかった場合、~promiseは `EncodingError$E 例外で却下されることになる。 ◎ The promise will be rejected with an "EncodingError" DOMException if the image cannot be decoded.
%image = new `Image( [ width [, height ] ] )$m
新たな `img$e 要素を返す — [ %width / %height ]が与えられていれば、それを要素の[ `width$a / `height$a ]属性に設定した上で。 ◎ Returns a new img element, with the width and height attributes set to the values passed in the relevant arguments, if applicable.
`width@m
`height@m

取得子は、次を走らせ~MUST — この手続きにおける “~size” は、 `width^m に対しては横幅, `height^m に対しては縦幅を指すとする:

  1. ~IF[ 此れの`画像は可用$でない ] ⇒ ~RET 0
  2. ~IF[ 画像は`具現化されて$いる ]~AND[ 画像が具現化されている~mediaは視覚的である ] ⇒ ~RET `px$css 単位で測った,描画された画像の~size
  3. ~IF[ 画像の`内在的~size$はある ] ⇒ ~RET 画像の`密度補正済み$の内在的~size
  4. ~RET 0
`CSS$r ◎ The IDL attributes width and height must return the rendered width and height of the image, in CSS pixels, if the image is being rendered, and is being rendered to a visual medium; or else the density-corrected intrinsic width and height of the image, in CSS pixels, if the image has intrinsic dimensions and is available but not being rendered to a visual medium; or else 0, if the image is not available or does not have intrinsic dimensions. [CSS]
設定子は、それぞれ、対応する同じ名前の内容~属性を`反映-$しているかのように動作し~MUST。 ◎ On setting, they must act as if they reflected the respective content attributes of the same name.
`naturalWidth@m
`naturalHeight@m

取得子は、次を走らせ~MUST — この手続きにおける “~size” は、 `naturalWidth^m に対しては横幅, `naturalHeight^m に対しては縦幅を指すとする:

  1. ~IF[ 此れの`画像は可用$でない ] ⇒ ~RET 0
  2. ~IF[ 画像の`内在的~size$はある ] ⇒ ~RET 画像の`密度補正済み$の内在的~size ]
  3. ~RET 0
`CSS$r ◎ The IDL attributes naturalWidth and naturalHeight must return the density-corrected intrinsic width and height of the image, in CSS pixels, if the image has intrinsic dimensions and is available, or else 0. [CSS]
`complete@m

取得子は、[ 次の条件いずれかが満たされるならば ~T / ~ELSE_ ~F ]を返さ~MUST: ◎ The IDL attribute complete must return true if any of the following conditions is true:

  • [ 此れは `srcset$a 属性を有していない ]~AND[ 次のいずれかは満たされる ]:

    • 此れは `src$a 属性を有していない
    • 此れは `src$a 属性は有する ~AND その値 ~EQ 空~文字列
    ◎ Both the src attribute and the srcset attribute are omitted. ◎ The srcset attribute is omitted and the src attribute's value is the empty string.
  • 資源は~fetchされ、`~network用~task源$から`~queueされ$る最終`~task$は,すでに`~queueされ$た ◎ The final task that is queued by the networking task source once the resource has been fetched has been queued.
  • 此れの`現在の要請$の状態 ~IN { `完全に可用$st, `壊en$st } ◎ The img element is completely available. ◎ The img element is broken. ◎ Otherwise, the attribute must return false.
注記: したがって `complete$m の値は、`~script$を実行している間に変化し得る。 ◎ The value of complete can thus change while a script is executing.
`currentSrc@m
取得子は、此れの`現在の要請$の`現在の~URL$を返さ~MUST。 ◎ The currentSrc IDL attribute must return the img element's current request's current URL.
`decode()@m

~methodの被呼出時には、次の手続きを遂行し~MUST: ◎ The decode() method, when invoked, must perform the following steps:

  1. %~promise ~LET 新たな~promise ◎ Let promise be a new promise.
  2. 次を遂行する`極小taskを~queueする$: ◎ Queue a microtask to perform the following steps:

    注記: これが行われるのは、`画像~dataを更新-$する手続きが極小task内も占めるからである。 したがって、次のような~codeに対し: ◎ This is done because updating the image data takes place in a microtask as well. Thus, to make code such as

    img.src = "stars.jpg";
    img.decode();
    

    `stars.jpg^c を適正に復号するためには、処理を極小task 1 個分だけ遅延する必要がある。 ◎ properly decode stars.jpg, we need to delay any processing by one microtask.

    1. ~IF[ 此れは次のいずれかを満たす ]…: ◎ If any of the following conditions are true about this img element:

      • `~node文書$は`作動中$docでない ◎ its node document is not an active document;
      • `現在の要請$の`状態$ ~EQ `壊en$st ◎ its current request's state is broken,

      …ならば ⇒ `EncodingError$E 例外で %~promise を却下する ◎ then reject promise with an "EncodingError" DOMException.

    2. ~ELSE ⇒ `並列的$に、次のいずれかが生じるまで待機した上で,対応する動作を遂行する: ◎ Otherwise, in parallel, wait for one of the following cases to occur, and perform the corresponding actions:

      此れの`~node文書$は`作動中$docでなくなった ◎ This img element's node document stops being an active document
      此れの`現在の要請$は 変化したか変異された ◎ This img element's current request changes or is mutated
      此れの`現在の要請$の`状態$ ~EQ `壊en$stになった ◎ This img element's current request's state becomes broken
      `EncodingError$E 例外で %~promise を却下する ◎ Reject promise with an "EncodingError" DOMException.
      此れは`完全に可用$stになった ◎ This img element becomes completely available

      此れの画像の~media~data全体を,~screenに迅速に塗るに相応しい~bitmap形に復号する — その結果に応じて: ◎ Decode the image's media data entirely into its bitmap form, suitable for rapid painting to the screen.

      この画像に対する復号を遂行する必要はない(例えば,画像は~vector~graphicである):
      復号は成功裡に完了した:
      ~undefined で %~promise を解決する
      復号に失敗した(例えば,画像~dataは妥当でないことに因り):
      `EncodingError$E 例外で %~promise を却下する
      ◎ If decoding does not need to be performed for this image (for example because it is a vector graphic), resolve promise with undefined. ◎ If decoding fails (for example due to invalid image data), reject promise with an "EncodingError" DOMException. ◎ If the decoding process completes successfully, resolve promise with undefined.

      ~UAは、[ 復号された~media~dataが,すぐ可用な~~状態であり続ける ]ことを確保するべきである — 少なくとも,`~event-loop$における次回の`描画を更新する$ 段が成功裡に終端するまでは。 これは、~API契約の重要な部分を成し,可能な限り違約されるべきでない。 (これに違反するのは,概して、~memoryが少なく復号された画像~dataを抹消する要がある状況か,復号された形で~~一時に保つには画像が大き過ぎるときに限られるであろう。) ◎ User agents should ensure that the decoded media data stays readily available until at least the end of the next successful update the rendering step in the event loop. This is an important part of the API contract, and should not be broken if at all possible. (Typically, this would only be violated in low-memory situations that require evicting decoded image data, or when the image is too large to keep in decoded form for this period of time.)

      注記: ~animate化~画像が`完全に可用$stになるのは、そのすべての~frameが読込まれた後に限られる。 したがって,実装が その時点より前に最初の~frameを復号できるとしても、上の手続きではそうすることなく,すべての~frameが可用になるまで待機する。 ◎ Animated images will become completely available only after all their frames are loaded. Thus, even though an implementation could decode the first frame before that point, the above steps will not do so, instead waiting until all frames are available.

  3. ~RET %~promise ◎ Return promise.

`decode$m ~methodを使わずに, `img$e 要素を読込んでから表示する処理-は、次の様になるであろう: ◎ Without the decode() method, the process of loading an img element and then displaying it might look like the following:

const %img = new Image();
%img.src = "nebula.jpg";
%img.onload = () => {
    document.body.appendChild(%img);
};
%img.onerror = () => {
    document.body.appendChild(new Text("nebula を読込めませんでした:("));
};

しかしながら,これでは、何~frameか目につくほどに落とされ得る — 画像を~DOMの中に挿入した後に生じる塗りには,~main-threadにおける同期的な復号を要するので。 ◎ However, this can cause notable dropped frames, as the paint that occurs after inserting the image into the DOM causes a synchronous decode on the main thread.

`decode$m ~methodを用いれば、これを次の様に書き直せる: ◎ This can instead be rewritten using the decode() method:

const %img = new Image();
%img.src = "nebula.jpg";
%img.decode().then(() => {
    document.body.appendChild(%img);
}).catch(() => {
    document.body.appendChild(new Text("nebula を読込めませんでした: ("));
});

この形であれば、画像が~DOMに挿入される(したがって塗られる)のは,それを`並列的$に復号して復号が完了した後に限られるので、~frameが落とされるのを避けれる。 ◎ This latter form avoids the dropped frames of the original, by allowing the user agent to decode the image in parallel, and only inserting it into the DOM (and thus causing it to be painted) once the decoding process is complete.

`decode()$m ~methodは,復号された画像~dataが 1 ~frame以内には可用になるのを確保しようと試みるので、 `requestAnimationFrame()$m ~APIと組合わすこともできる。 このことは、[[[ すべての~DOM改変が,`~animation~frame~callback~list$として まとめて~batchされる ]ことを確保する ]ような~coding-styleや~framework ]と併用できることを意味する: ◎ Because the decode() method attempts to ensure that the decoded image data is available for at least one frame, it can be combined with the requestAnimationFrame() API. This means it can be used with coding styles or frameworks that ensure that all DOM modifications are batched together as animation frame callbacks:

const %container = document.querySelector("#container");

const { %containerWidth, %containerHeight } = computeDesiredSize();
requestAnimationFrame(() => {
 %container.style.width = %containerWidth;
 %container.style.height = %containerHeight;
});

// ...

const %img = new Image();
%img.src = "supernova.jpg";
%img.decode().then(() => {
    requestAnimationFrame(() => %container.appendChild(%img));
});
`Image(width, height)@m

この構築子は、新たな `HTMLImageElement$I ~objを返す( `createElement()$m などの~factory~methodに加えて提供されている)。 ◎ A constructor is provided for creating HTMLImageElement objects (in addition to the factory methods from DOM such as createElement()): Image(width, height).

被呼出時には、次の手続きを遂行し~MUST: ◎ When invoked, the constructor must perform the following steps:

  1. %文書 ~LET `現在の大域~obj$に`結付けられている文書$ ◎ Let document be the current global object's associated Document.
  2. %img ~LET `新たな要素$( %文書, `img^l, `~HTML名前空間$ ) ◎ Let img be the result of creating an element given document, img, and the HTML namespace.
  3. ~IF[ %width は与えられている ] ⇒ %img の`属性~値を設定する$( `width^l, %width ) ◎ If width is given, then set an attribute value for img using "width" and width.
  4. ~IF[ %height は与えられている ] ⇒ %img の`属性~値を設定する$( `height^l, %height ) ◎ If height is given, then set an attribute value for img using "height" and height.
  5. ~RET %img ◎ Return img.

同じ画像であっても、それに適切な代替~textは,文脈に依存して異なり得る。 ◎ A single image can have different appropriate alternative text depending on the context.

以下の各~事例のいずれも同じ画像が利用されているが、それでも `alt$a ~textは各~事例ごとに異なる。 画像は、スイス ジュネーヴ州 カルージュ自治体の紋章 である。 ◎ In each of the following cases, the same image is used, yet the alt text is different each time. The image is the coat of arms of the Carouge municipality in the canton Geneva in Switzerland.

次の画像は、補足~iconとして利用されている: ◎ Here it is used as a supplementary icon:

`img-1^xCode

次の画像は、町を表現している~iconとして利用されている: ◎ Here it is used as an icon representing the town:

`img-2^xCode

次の画像は、町についての~textの一部として利用されている: ◎ Here it is used as part of a text on the town:

`img-3^xCode

次の画像は,同様の~textを~supportする仕方として利用されており、画像の代替は,代わりに記述として与えられている: ◎ Here it is used as a way to support a similar text where the description is given as well as, instead of as an alternative to, the image:

`img-4^xCode

次の画像は、物語の一部として利用されている: ◎ Here it is used as part of a story:

`img-5^xCode

次の画像は、刊行~時点では,何らかの種類の紋章になることのみしか既知でないため,代用~textは提供できず、 `title$a 属性~内には 画像~用の概略的~captionしか提供できていない: ◎ Here it is not known at the time of publication what the image will be, only that it will be a coat of arms of some kind, and thus no replacement text can be provided, and instead only a brief caption for the image is provided, in the title attribute:

`img-6^xCode

この事例でも、作者は,本当の代用~textを提供する仕方を見出すのが理想だが。 例えば、当の利用者にそれも提供してもらうことにするなど。 代用~textを提供しないことは、画像を見れない人達にとって,文書を利用し難くする — 例: 盲目の利用者 / 接続の帯域幅がごく狭い/ 従量課金 / ~textのみの~Web~browserを利用するよう強いられているなど。 ◎ Ideally, the author would find a way to provide real replacement text even in this case, e.g. by asking the previous user. Not providing replacement text makes the document more difficult to use for people who are unable to view images, e.g. blind users, or users or very low-bandwidth connections or who pay by the byte, or users who are forced to use a text-only Web browser.

絵図は同じでも、適切な代替~textは,文脈に応じて異なる例: ◎ Here are some more examples showing the same picture used in different contexts, with different appropriate alternate texts each time.

`img-7^xCode `img-8^xCode `img-9^xCode `img-10^xCode

4.8.4. 画像

4.8.4.1. 序論

~INFORMATIVE

~HTML内に画像~資源を 1 個だけ画像を埋込むときは、 `img$e 要素と その `src$a 属性を利用する。 ◎ To embed an image in HTML, when there is only a single image resource, use the img element and its src attribute.

`intro-1^xCode

しかしながら、作者が複数の画像~資源を利用して,~UAにそれらから選ばせたいと望むかもしれない状況も,いくつかある: ◎ However, there are a number of situations for which the author might wish to use multiple image resources that the user agent can choose from:

  • 環境上の特徴は、利用者ごとに異なるかもしれない: ◎ Different users might have different environmental characteristics:

    • ~screenの物理的~sizeは、利用者ごとに異なるかもしれない。 ◎ The users' physical screen size might be different from one another.

      ~screenの対角線は、携帯電話では 4 ~inchである一方, ~laptopでは 14 ~inchかもしれない。 ◎ A mobile phone's screen might be 4 inches diagonally, while a laptop's screen might be 14 inches diagonally.

      `intro-svg-1^xCode

      注記: これが関連するのは、画像の描画sizeが`表示域$~sizeに依存する場合に限られる。 ◎ This is only relevant when an image's rendered size depends on the viewport size.

    • ~screen画素~密度は、利用者ごとに異なるかもしれない。 ◎ The users' screen pixel density might be different from one another.

      携帯電話の~screenの~inchあたりの物理的~画素~数は、他に比べ 3 倍になるかもしれない — ~screenの物理的~sizeに関わらず。 ◎ A mobile phone's screen might have three times as many physical pixels per inch compared to another mobile phone's screen, regardless of their physical screen size.

      `intro-svg-2^xCode
    • ~zoom~levelは、利用者ごとに異なったり, 同じ利用者でも そのときどきで変化するかもしれない。 ◎ The users' zoom level might be different from one another, or might change for a single user over time.

      利用者は、より詳細な見かけを取得できるようにするため,特定0の画像を~zoomして大きくするかもしれない。 ◎ A user might zoom in to a particular image to be able to get a more detailed look.

      ~zoom~levelと(前項の)~screen画素~密度の両者とも、 1 `px$css あたりの~screenの物理的~画素~数に影響し得る。 この比は、通例的に `機器画素比@ と呼ばれている。 ◎ The zoom level and the screen pixel density (the previous point) can both affect the number of physical screen pixels per CSS pixel. This ratio is usually referred to as device-pixel-ratio.

    • ~screen方位は、利用者ごとに異なったり, 同じ利用者でも そのときどきで変化するかもしれない。 ◎ The users' screen orientation might be different from one another, or might change for a single user over time.

      ~tabletは、~screenが 縦長( portrait )または横長( landscape ) になるよう,直立に保持されたり,真横に倒されることもある。 ◎ A tablet can be held upright or rotated 90 degrees, so that the screen is either "portrait" or "landscape".

      `intro-svg-3^xCode
    • ~networkの[ 速度 / 遅延 / 帯域幅~cost ]は、利用者ごとに異なったり, 同じ利用者でも そのときどきで変化するかもしれない。 ◎ The users' network speed, network latency and bandwidth cost might be different from one another, or might change for a single user over time.

      利用者の接続は、 仕事場では 高速, 低~遅延, 定額制 / 家では 低速, 低~遅延, 定額制 / 他所では 可変速, 高~遅延, 従量制 かもしれない。 ◎ A user might be on a fast, low-latency and constant-cost connection while at work, on a slow, low-latency and constant-cost connection while at home, and on a variable-speed, high-latency and variable-cost connection anywhere else.

  • 作者は、同じ画像~内容を — 通例的には `表示域$の横幅に依存して — 異なる描画sizeで示したいと求めるかもしれない。 これは、通例的に `表示域に基づく選定@ と呼ばれている。 ◎ Authors might want to show the same image content but with different rendered size depending on, usually, the width of the viewport. This is usually referred to as viewport-based selection.

    ~Web頁には、`表示域$の上端に その横幅の全体にわたる~bannerが常にあるかもしれない。 この事例では、画像の描画sizeは,~screenの物理的~sizeに依存する(~browser~windowは最大化されているとする)。 ◎ A Web page might have a banner at the top that always spans the entire viewport width. In this case, the rendered size of the image depends on the physical size of the screen (assuming a maximised browser window).

    `intro-svg-4^xCode

    別の~Web頁は、画像を何本かの~columnに並べていて,その本数は、~screenの物理的~sizeが[ 小なら 1 本, 中なら 2 本, 大ならば 3 本 ]あり、画像の描画sizeは,各~事例ごとに `表示域$を埋め尽くすため変わるかもしれない。 この事例では、画像の描画sizeは,~layoutは~column 1 本のときの方が ~screenは小さくとも, 2 本のときに比べ 大きくなることもある。 ◎ Another Web page might have images in columns, with a single column for screens with a small physical size, two columns for screens with medium physical size, and three columns for screens with big physical size, with the images varying in rendered size in each case to fill up the viewport. In this case, the rendered size of an image might be bigger in the one-column layout compared to the two-column layout, despite the screen being smaller.

    `intro-svg-5^xCode
  • 作者は、画像の描画sizeに依存して異なる画像~内容を 示したいと求めるかもしれない。 これは、通例的に `~art-direction@ ( art direction )と呼ばれている。 ◎ Authors might want to show different image content depending on the rendered size of the image. This is usually referred to as art direction.

    ~Web頁が,物理的~sizeが広い~screenで見られているときは(~browser~windowは最大化されているとする)、作者は,画像の重要部分の周囲に さほど関連しない部分を含ませたいと望む一方で、同じ~Web頁が狭い~screenで見られているときは画像の重要部分だけ示したいと望むかもしれない。 ◎ When a Web page is viewed on a screen with a large physical size (assuming a maximised browser window), the author might wish to include some less relevant parts surrounding the critical part of the image. When the same Web page is viewed on a screen with a small physical size, the author might wish to show only the critical part of the image.

    `intro-svg-6^xCode
  • 作者は、同じ画像~内容を,~UAが~supportする画像~形式に依存して,異なる画像~形式で示したいと求めるかもしれない。 これは、通例的に `画像~形式に基づく選定@ と呼ばれている。 ◎ Authors might want to show the same image content but using different image formats, depending on which image formats the user agent supports. This is usually referred to as image format-based selection.

    ~Web頁には、[ ~JPEG, ~WebP, ~JPEG-XR ]などの各種 画像~形式による画像があるかもしれない — 後の 2 つの方が、~JPEGに比べ圧縮~能が良い。 ~supportされる画像~形式は~UAごと異なり,形式によってはより良い圧縮~比を提供0するので、作者は,~UAがより良い形式を~supportするときはそれ, しないときは~fallbackとして~JPEGを提供するよう~serveしたいであろう。 ◎ A Web page might have some images in the JPEG, WebP and JPEG XR image formats, with the latter two having better compression abilities compared to JPEG. Since different user agents can support different image formats, with some formats offering better compression ratios, the author would like to serve the better formats to user agents that support them, while providing JPEG fallback for user agents that don't.

上に挙げた各 状況は、互いに排他的ではない。 例えば、 `機器画素比$ごとに異なる資源を,`~art-direction$用に異なる資源も伴うように組合わすことは、理にかなう。 ◎ The above situations are not mutually exclusive. For example, it is reasonable to combine different resources for different device-pixel-ratio with different resources for art direction.

これらの問題を~scriptingを用いて解くことも可能であるが、そうすると他の問題も導入される: ◎ While it is possible to solve these problems using scripting, doing so introduces some other problems:

  • ~UAには、~Web頁の読込みが早く完了するよう,~scriptが走る機会を得る前に,~HTML~markup内に指定された画像を先取的に~downloadするものもある。 ~scriptが~downloadする画像を変更した場合、~UAは 2 回の~downloadを別々に開始して,頁の読込み処理能を悪化させかねない。 ◎ Some user agents aggressively download images specified in the HTML markup, before scripts have had a chance to run, so that Web pages complete loading sooner. If a script changes which image to download, the user agent will potentially start two separate downloads, which can instead cause worse page loading performance.
  • 作者が~HTML~markup内に画像を指定するのを避けて,~scriptから 1 回の~downloadだけ行わせることにした場合、上述の二重~download問題は避けれるが,~scriptingを不能化した利用者に対しては画像は まったく~downloadされず,画像を先取的に~downloadする最適化も不能化されることになる。 ◎ If the author avoids specifying any image in the HTML markup and instead instantiates a single download from script, that avoids the double download problem above but then no image will be downloaded at all for users with scripting disabled and the aggressive image downloading optimization will also be disabled.

このことを念頭に,この仕様は、上の問題に宣言的な方式で取組む,いくつかの特色機能を導入する。 ◎ With this in mind, this specification introduces a number of features to address the above problems in a declarative manner.

画像の描画sizeは固定されているときの`機器画素比$に基づく選定: ◎ Device-pixel-ratio-based selection when the rendered size of the image is fixed

`img$e 要素~上の `src$a, `srcset$a 属性に `x^v 記述子を用いれば、~sizeだけ異なる複数の画像を提供できる(小さい方の画像は 大きい方の画像を縮小したもの)。 ◎ The src and srcset attributes on the img element can be used, using the x descriptor, to provide multiple images that only vary in their size (the smaller image is a scaled-down version of the bigger image).

注記: `x^v 記述子は、画像の描画sizeが`表示域$の横幅に依存するとき(`表示域に基づく選定$)は 適切でないが、`~art-direction$と併用できる。 ◎ The x descriptor is not appropriate when the rendered size of the image depends on the viewport width (viewport-based selection), but can be used together with art direction.

`intro-2^xCode

~UAは、所与の資源のどれかを,利用者の[ ~screenの画素~密度, ~zoom~level, 場合によっては利用者の~network条件などの他の因子 ]に依存して選べる。 ◎ The user agent can choose any of the given resources depending on the user's screen's pixel density, zoom level, and possibly other factors such as the user's network conditions.

`srcset$a 属性を解さない旧~UAとの後方互換性のため、 `img$e 要素の `src$a 属性~内にも 1 個の~URLが指定されている。 これにより、旧~UAにて表示されるときでも有用になる(その解像度は利用者の好みより低くなるであろうが)。 `src$a 属性は、新しい~UAに対しても,資源~選定に関与する — その値に記述子 `1x^v を伴わせたものが `srcset$a にも指定されていたかのように。 ◎ For backwards compatibility with older user agents that don't yet understand the srcset attribute, one of the URLs is specified in the img element's src attribute. This will result in something useful (though perhaps lower-resolution than the user would like) being displayed even in older user agents. For new user agents, the src attribute participates in the resource selection, as if it was specified in srcset with a 1x descriptor.

`width$a, `height$a 属性~内には、画像の描画sizeが与えられている — それにより,~UAは、画像を~downloadする前に それ用の空間を割り振れるようになる。 ◎ The image's rendered size is given in the width and height attributes, which allows the user agent to allocate space for the image before it is downloaded.

`表示域に基づく選定$ ◎ Viewport-based selection

`srcset$a, `sizes$a 属性と `w^v 記述子を用いれば,~sizeだけ異なる複数の画像を提供できる(小さい方の画像は 大きい方の画像を縮小したもの)。 ◎ The srcset and sizes attributes can be used, using the w descriptor, to provide multiple images that only vary in their size (the smaller image is a scaled-down version of the bigger image).

この例では、~banner画像は,`表示域$の横幅 全体を占める(適切な~CSSを用いて)。 ◎ In this example, a banner image takes up the entire viewport width (using appropriate CSS).

`intro-3^xCode

~UAは、指定された `w^v 記述子と `sizes$a 属性~内に指定された描画sizeから,各~画像の実効画素~密度を計算することになる。 次に~UAは、所与の資源のどれかを,利用者の[ ~screenの画素~密度, ~zoom~level, 場合によっては利用者の~network条件などの他の因子 ]に依存して選べる。 ◎ The user agent will calculate the effective pixel density of each image from the specified w descriptors and the specified rendered size in the sizes attribute. It can then choose any of the given resources depending on the user's screen's pixel density, zoom level, and possibly other factors such as the user's network conditions.

利用者の~screen幅が 320 `px$css の場合、これは `wolf-400.jpg 1.25x, wolf-800.jpg 2.5x, wolf-1600.jpg 5x^v を指定することに等価になる。 他方,~screen幅が 1200 `px$css の場合、これは `wolf-400.jpg 0.33x, wolf-800.jpg 0.67x, wolf-1600.jpg 1.33x^v を指定することに等価になる。 `w^v 記述子と `sizes$a 属性を用いることにより、利用者の機器の大きさに関わらず,~UAは~downloadする正しい画像~sourceを選べる。 ◎ If the user's screen is 320 CSS pixels wide, this is equivalent to specifying wolf-400.jpg 1.25x, wolf-800.jpg 2.5x, wolf-1600.jpg 5x. On the other hand, if the user's screen is 1200 CSS pixels wide, this is equivalent to specifying wolf-400.jpg 0.33x, wolf-800.jpg 0.67x, wolf-1600.jpg 1.33x. By using the w descriptors and the sizes attribute, the user agent can choose the correct image source to download regardless of how large the user's device is.

後方互換性のため, ~URLのうち 1 つが `img$e 要素の`src$a 属性~内に指定される。 新しい~UAにおいては、 `srcset$a 属性が `w^v 記述子を利用しているときは, `src$a 属性は無視される。 ◎ For backwards compatibility, one of the URLs is specified in the img element's src attribute. In new user agents, the src attribute is ignored when the srcset attribute uses w descriptors.

この例の~Web頁の~layoutは、`表示域$の横幅に依存して 3 種に分かれる。 一連の画像は、~layout幅が[ 狭いときは 1 本, 中程度のときは 2 本, 広いときは 3 本 ]の~columnに並べられ(各~画像の横幅は、順に,およそ 100%, 50%, 33% )、それに加え頁~marginがある。 これらの~layoutは、`表示域$の幅 `30em^v, `50em^v を境目に分かたれる。 ◎ In this example, the Web page has three layouts depending on the width of the viewport. The narrow layout has one column of images (the width of each image is about 100%), the middle layout has two columns of images (the width of each image is about 50%), and the widest layout has three columns of images, and some page margin (the width of each image is about 33%). It breaks between these layouts when the viewport is 30em wide and 50em wide, respectively.

`intro-4^xCode

`sizes$a 属性は、~layoutの境目を[ `30em^v, `50em^v ]の所に設定しておき、これらの境目で区切られる順に,画像~sizeは[ `100vw^v, `50vw^v, `calc(33vw - 100px)^v ]になるよう宣言する。 これらの~sizeを[ ~CSSで指定する実際の画像~横幅 ]に正確に合致させることは、必要とされない。 ◎ The sizes attribute sets up the layout breakpoints at 30em and 50em, and declares the image sizes between these breakpoints to be 100vw, 50vw, or calc(33vw - 100px). These sizes do not necessarily have to match up exactly with the actual image width as specified in the CSS.

~UAは、 `media-condition$t (丸括弧の中)が 真に評価されるような 最初の~itemを用いて,あるいは すべてが偽に評価された場合は 最後の~item( `calc(33vw - 100px)^v )を用いて, `sizes$a 属性から横幅を選ぶことになる。 ◎ The user agent will pick a width from the sizes attribute, using the first item with a <media-condition> (the part in parentheses) that evaluates to true, or using the last item (calc(33vw - 100px)) if they all evaluate to false.

例えば,`表示域$の横幅 %横幅 が `29em^v の場合、 `(max-width: 30em)^v は 真に評価され, `100vw^v が利用されるので、画像~sizeは,資源~選定の目的においては `29em^v になる。 %横幅 が `32em^v であった場合、 `(max-width: 30em)^v は偽に評価されるが, `(max-width: 50em)^v は真に評価され, `50vw^v が利用されるので、画像~sizeは,資源~選定の目的においては `16em^v になる( %横幅 の半分)。 ~layoutが異なることにより、`表示域$が少しだけ幅広になったときの画像が,より小さくなることに注意。 ◎ For example, if the viewport width is 29em, then (max-width: 30em) evaluates to true and 100vw is used, so the image size, for the purpose of resource selection, is 29em. If the viewport width is instead 32em, then (max-width: 30em) evaluates to false, but (max-width: 50em) evaluates to true and 50vw is used, so the image size, for the purpose of resource selection, is 16em (half the viewport width). Notice that the slightly wider viewport results in a smaller image because of the different layout.

それから,~UAは、実効~画素~密度を計算して,前の例と同様に適切な資源を選べれるようになる。 ◎ The user agent can then calculate the effective pixel density and choose an appropriate resource similarly to the previous example.

`~art-direction$に基づく選定 ◎ Art direction-based selection

`picture$e 要素, `source$e 要素を `media$aS 属性と併用すれば、画像~内容が変わるような複数の画像を提供できる(具体例として,小さい方の画像は 大きい方の画像を切り抜いたもの)。 ◎ The picture element and the source element, together with the media attribute, can be used, to provide multiple images that vary the image content (for instance the smaller image might be a cropped version of the bigger image).

`intro-5^xCode

~UAは、 `picture$e 要素~内の `source$e 要素のうち,[ その `media$aS 属性~内の媒体~queryが環境に合致する ]ような最初のものを選んだ上で、その `srcset$aS 属性から適切な~URLを選ぶことになる。 ◎ The user agent will choose the first source element for which the media query in the media attribute matches, and then choose an appropriate URL from its srcset attribute.

画像の描画sizeは、どの資源が選ばれたかに依存して変わる。 ~CSSを利用すれば、~UAが画像を~downloadする前に利用できる寸法を指定できる。 ◎ The rendered size of the image varies depending on which resource is chosen. To specify dimensions that the user agent can use before having downloaded the image, CSS can be used.

img { width: 300px; height: 300px }
@media (min-width: 32em) { img { width: 500px; height:300px } }
@media (min-width: 45em) { img { width: 700px; height:400px } }

次の例では、`~art-direction$と`機器画素比$に基づく選定を組合わす。 `表示域$の半分を占める~bannerは、 ~screen幅が広いとき, 狭いときの 2 種で提供される。 ◎ This example combines art direction- and device-pixel-ratio-based selection. A banner that takes half the viewport is provided in two versions, one for wide screens and one for narrow screens.

`intro-6^xCode
`画像~形式に基づく選定$ ◎ Image format-based selection

`source$e 要素に `type$aS 属性を利用すれば、異なる形式による複数の画像を提供できる。 ◎ The type attribute on the source element can be used, to provide multiple images in different formats.

`intro-7^xCode

この例では、~UAは,[ 自身が~supportする~MIME型を伴う `type$aS 属性を有する ]ような,最初の~sourceを選ぶことになる。 ~UAが ~WebP画像を~supportするなら最初の `source$e 要素が選ばれ,そうでないが ~JPEG-XR画像を~supportするなら 2 個目の `source$e 要素が選ばれ,両~形式とも~supportしなければ `img$e 要素が選ばれることになる。 ◎ In this example, the user agent will choose the first source that has a type attribute with a supported MIME type. If the user agent supports WebP images, the first source element will be chosen. If not, but the user agent does support JPEG XR images, the second source element will be chosen. If neither of those formats are supported, the img element will be chosen.

4.8.4.1.1. 適応的な画像
~INFORMATIVE

~CSSと媒体~queryを利用すれば、利用者の環境に動的に適応するような~graphic的な頁~layoutを構築できる — 特に,異なる`表示域$寸法と画素~密度に応じて。 しかしながら,内容に対しては~CSSは助けにならない — その代わりとして、 `img$e 要素の `srcset$a 属性, および `picture$e 要素がある。 この節では、これらの特色機能の用法を示す見本~事例を順に見ていく。 ◎ CSS and media queries can be used to construct graphical page layouts that adapt dynamically to the user's environment, in particular to different viewport dimensions and pixel densities. For content, however, CSS does not help; instead, we have the img element's srcset attribute and the picture element. This section walks through a sample case showing how to use these features.

次の状況を考える: ~screenが幅広のときは( 600 `px$css より幅広),名前 `a-rectangle.png^v の 300×150 画像が利用され、 より狭い~screenのときは( 600 `px$css 以下) より小さい 100×100 の画像 `a-square.png^v が利用されることになるような。 このための~markupは、次の様な見かけになるであろう: ◎ Consider a situation where on wide screens (wider than 600 CSS pixels) a 300×150 image named a-rectangle.png is to be used, but on smaller screens (600 CSS pixels and less), a smaller 100×100 image called a-square.png is to be used. The markup for this would look like this:

`intro-8^xCode

注記: `alt$a 属性~内に何を置くかについての詳細は、`~textを画像の代替として提供する際の要件$ 節を見よ。 ◎ For details on what to put in the alt attribute, see the Requirements for providing text to act as an alternative for images section.

ここでの問題は、~UAにとっては,当の画像を読込んでいる間 画像に利用する寸法を知れるとは限らないことである。 ~CSSと~CSS媒体~queryを用いて寸法を提供すれば、頁を読込んでいる間に ~layoutが何回も再flowされるのを避けれる: ◎ The problem with this is that the user agent does not necessarily know what dimensions to use for the image when the image is loading. To avoid the layout having to be reflowed multiple times as the page is loading, CSS and CSS media queries can be used to provide the dimensions:

`intro-9^xCode

代替として, `width$a, `height$a 属性を利用すれば、旧来の~UA用にも横幅を提供できる — ~CSSは `picture$e を~supportする~UAにだけ用いることにして: ◎ Alternatively, the width and height attributes can be used to provide the width for legacy user agents, using CSS just for the user agents that support picture:

`intro-10^xCode

`img$e 要素に利用されている `src$a 属性は、 `picture$e 要素を~supportしない旧来の~UAに対しては,利用する画像の~URLを与える。 ここで、どの画像を `src$a 属性に提供するかの 問いが浮かび上がる。 ◎ The img element is used with the src attribute, which gives the URL of the image to use for legacy user agents that do not support the picture element. This leads to a question of which image to provide in the src attribute.

作者が 旧来の~UAでは最~大の画像を求める場合、~markupは,次のようにも記せる: ◎ If the author wants the biggest image in legacy user agents, the markup could be as follows:

`intro-11^xCode

しかしながら,旧来の携帯機~UAの方が重要な場合、 3 個の画像すべてを `source$e 要素~内に挙げれば `src$a 属性を まるごと上書きできる: ◎ However, if legacy mobile user agents are more important, one can list all three images in the source elements, overriding the src attribute entirely.

`intro-12^xCode

この場合の `src$a 属性は,実際に `picture$e を~supportする~UAからは まるごと無視されるので、どの画像であれ,その大きさに関わらず既定として与えれる: ◎ Since at this point the src attribute is actually being ignored entirely by picture-supporting user agents, the src attribute can default to any image, including one that is neither the smallest nor biggest:

`intro-13^xCode

上では,最大~寸法(`表示域$のそれ)を与えるため、画像に意図される `max-width^css ~media特色機能が利用されている。 代わりに `min-width^css も利用できる。 ◎ Above the max-width media feature is used, giving the maximum (viewport) dimensions that an image is intended for. It is also possible to use min-width instead.

`intro-14^xCode

4.8.4.2. `source^e, `img^e 要素に共通の属性

4.8.4.2.1. ~srcset属性

`~srcset属性@ には、この節に定義される要件が課される。 ◎ A srcset attribute is an attribute with requirements defined in this section.

【 この “~srcset属性” は、[ `source^e 要素の `srcset$aS 属性, `img^e 要素の `srcset$a 属性 ]の総称を表す。 】

この属性に指定する値は、互いに `002C^U `,^smb で区切られた 1 個~以上の`画像~候補~文字列$からなってい~MUST。 また,ある`画像~候補~文字列$が その~URLの後に記述子も`~ASCII空白$も包含しない場合、その次の`画像~候補~文字列$の最初の文字は`~ASCII空白$にされ~MUST。 ◎ If present, its value must consist of one or more image candidate strings, each separated from the next by a U+002C COMMA character (,). If an image candidate string contains no descriptors and no ASCII whitespace after the URL, the following image candidate string, if there is one, must begin with one or more ASCII whitespace.

各 `画像~候補~文字列@ は、挙げられる順に,次の成分からなる — この~listの他にも,その下に述べる制約がある: ◎ An image candidate string consists of the following components, in order, with the further restrictions described below this list:

  1. 0 個~以上の`~ASCII空白$ ◎ Zero or more ASCII whitespace.
  2. 1 個の`妥当かつ空でない~URL$であって, 先頭, 末尾の両~文字とも `002C^U `,^smb でないものであって、対話的でも, 多頁でも, ~scriptありでもない画像~資源(~animate化されていてもよい)を参照しているもの。 ◎ A valid non-empty URL that does not start or end with a U+002C COMMA character (,), referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted.
  3. 0 個~以上の`~ASCII空白$ ◎ Zero or more ASCII whitespace.
  4. 次のうち,いずれか 1 つ: ◎ Zero or one of the following:

    • 空~文字列
    • `横幅~記述子@ を与える,次の並び:

      1. 1 個の`~ASCII空白$
      2. 1 個の`妥当な非負~整数$であって、 0 より大きい数を与えるもの — これは `横幅~値@ を表現する
      3. 1 個の文字 `0077^U `w^smb
      ◎ A width descriptor, consisting of: ASCII whitespace, a valid non-negative integer giving a number greater than zero representing the width descriptor value, and a U+0077 LATIN SMALL LETTER W character.
    • `画素~密度~記述子@ を与える,次の並び:

      1. 1 個の`~ASCII空白$
      2. 1 個の`妥当な浮動小数点数$であって、 0 より大きい数を与えるもの — これは `密度~値@ を表現する
      3. 1 個の文字 `0078^U `x^smb
      ◎ A pixel density descriptor, consisting of: ASCII whitespace, a valid floating-point number giving a number greater than zero representing the pixel density descriptor value, and a U+0078 LATIN SMALL LETTER X character.

    【 これらの記述子は、文脈に応じて,そのような文字列を指すこともあれば, 抽象的な値~型を意味することもある。 】

  5. 0 個~以上の`~ASCII空白$ ◎ Zero or more ASCII whitespace.

同じ要素の 複数の`画像~候補~文字列$においては:

  • 互いの`横幅~値$が同じになっては~MUST_NOT。
  • 互いの`密度~値$が同じになっては~MUST_NOT。
  • この要件の目的においては、記述子を伴わない`画像~候補~文字列$は,記述子 `1x^v を伴う`画像~候補~文字列$と等価とする。
◎ There must not be an image candidate string for an element that has the same width descriptor value as another image candidate string's width descriptor value for the same element. ◎ There must not be an image candidate string for an element that has the same pixel density descriptor value as another image candidate string's pixel density descriptor value for the same element. For the purpose of this requirement, an image candidate string with no descriptors is equivalent to an image candidate string with a 1x descriptor.

要素の ある`画像~候補~文字列$に `横幅~記述子$が指定されている場合、他のすべての`画像~候補~文字列$にも`横幅~記述子$が指定され~MUST。 ◎ If an image candidate string for an element has the width descriptor specified, all other image candidate strings for that element must also have the width descriptor specified.

`画像~候補~文字列$の`横幅~記述子$にて指定される`横幅~値$は、`画像~候補~文字列$の~URLで与えられる資源に`内在的~横幅$がある場合には,それに合致し~MUST。 ◎ The specified width in an image candidate string's width descriptor must match the intrinsic width in the resource given by the image candidate string's URL, if it has an intrinsic width.

要素が`~srcset属性$を有する場合、その要素に対する どの`画像~候補~文字列$にも`横幅~記述子$が指定され~MUST。 ◎ If an element has a srcset attribute present, all image candidate strings for that element must have the width descriptor specified.

【 意図不明な要件 — この仕様の`画素~密度~記述子$に関する記述すべてが無意味と化してしまう。 】

4.8.4.2.2. ~sizes属性

`~sizes属性@ には、この節に定義される要件が課される。 ◎ A sizes attribute is an attribute with requirements defined in this section.

【 この “~sizes属性” は、[ `source^e 要素の `sizes$aS 属性, `img^e 要素の `sizes$a 属性 ]の総称を表す。 】

指定する値は、`妥当な~source~size~list$で~MUST。 ◎ If present, the value must be a valid source size list.

`妥当な~source~size~list@ は、次の文法に合致する文字列とする: `CSSVALUES$r `MQ$r ◎ A valid source size list is a string that matches the following grammar: [CSSVALUES] [MQ]

`source-size-list@t = [ `source-size$t# , ]? `source-size-value$t
`source-size@t = `media-condition$t `source-size-value$t
`source-size-value@t = `length$t

`source-size-value$t は、負になっては~MUST_NOTことに加え, `calc()$css 関数~以外の~CSS関数が利用されては~MUST_NOT。 ◎ A <source-size-value> must not be negative, and must not use CSS functions other than the 'calc()' function.

`source-size-value$t は、画像に意図される~layout横幅を与える。 作者は、 `media-condition$t で環境ごとに異なる横幅を指定できる。 ◎ The <source-size-value> gives the intended layout width of the image. The author can specify different widths for different environments with <media-condition>s.

注記: `source-size-value$t においては、百分率は許容されない — 何に相対的になるかについての混同を避けるため。 `表示域$の横幅に相対的な~sizeには、 `vw$css 単位を利用できる。 ◎ Percentages are not allowed in a <source-size-value>, to avoid confusion about what it would be relative to. The 'vw' unit can be used for sizes relative to the viewport width.

4.8.4.3. 処理~model

この節の各~algoにより`~queueされ$る`~task$の`~task源$は、`~DOM操作~task源$とする。 ◎ The task source for the tasks queued by algorithms in this section is the DOM manipulation task source.


各 `img$e 要素は、次のものを持つ:

`現在の要請@
初期~時には新たな`画像~要請$に設定される。 `現在の要請$は、通例的に `img$e 要素~自身と同一視される。
`処理待ち要請@
`画像~要請$, または ε 。 初期~時には ε とする。
◎ An img element has a current request and a pending request. The current request is initially set to a new image request. The pending request is initially set to null. The current request is usually referred to as the img element itself.

各 `画像~要請@ は、次のものを持つ: ◎ An image request has a state, current URL and image data.

`状態@

次のいずれか — 初期~時には `可用でない$st とする: ◎ An image request's state is one of the following:

`可用でない@st ◎ Unavailable
~UAは 画像~dataをある程度は得ているかもしれないが,画像の寸法を取得するまで十分に復号されていない。 ◎ The user agent hasn't obtained any image data, or has obtained some or all of the image data but hasn't yet decoded enough of the image to get the image dimensions.
`部分的に可用@st ◎ Partially available
~UAは 画像~dataの一部を得ていて,少なくとも画像の寸法は可用である。 ◎ The user agent has obtained some of the image data and at least the image dimensions are available.
`完全に可用@st ◎ Completely available
~UAは すべての画像~dataを得ていて,少なくとも画像の寸法は可用である。 ◎ The user agent has obtained all of the image data and at least the image dimensions are available.
`壊en@st ◎ Broken
~UAは できる限りすべての画像~dataを得たが、画像の寸法を取得するに十分に画像を復号できなかった(例: 画像は壊れている / 形式は~supportされてない / まったく~dataを得れなかった)。 ◎ The user agent has obtained all of the image data that it can, but it cannot even decode the image enough to get the image dimensions (e.g. the image is corrupted, or the format is not supported, or no data could be obtained).
`現在の~URL@
初期~時には空~文字列とする。 ◎ An image request's current URL is initially the empty string.
`画像~data@
復号された画像~data。 初期~時には ε (なし)とする。 ◎ An image request's image data is the decoded image data.

`img$e 要素の `画像は可用@ であるとは、[ その`現在の要請$の`状態$ ~IN { `部分的に可用$st, `完全に可用$st } ]であることをいう。 ◎ When an image request is either in the partially available state or in the completely available state, it is said to be available.

`img$e 要素が `全部的に復号-可能@ であるとは、[ その`現在の要請$の`状態$ ~EQ `完全に可用$st ], かつ ~UAは その~media~dataを~errorなしに復号できることをいう。 ◎ When an img element is in the completely available state and the user agent can decode the media data without errors, then the img element is said to be fully decodable. ◎ ↑An image request is initially unavailable.

`img$e 要素は、その`画像は可用$であるならば,次のような`塗り~source$を提供する:

  • 横幅は 画像の`密度補正済み$ 内在的~横幅(もしあれば)
  • 縦幅は 画像の`密度補正済み$ 内在的~縦幅(もしあれば)
  • 外観は 画像の内在的~外観
◎ When an img element is available, it provides a paint source whose width is the image's density-corrected intrinsic width (if any), whose height is the image's density-corrected intrinsic height (if any), and whose appearance is the intrinsic appearance of the image.

次のいずれかを満たす `img$e 要素は、 `~srcsetまたは~pictureを利用して@ いるとされる:

  • `srcset$a 属性を有する
  • 親は `picture$e 要素である
◎ An img element is said to use srcset or picture if it has a srcset attribute specified or if it has a parent that is a picture element.

各 `img$e 要素は、次のものを持つ: ◎ ↓

`最後に選定された~source@
初期~時には ε (なし)にされ~MUST。 ◎ Each img element has a last selected source, which must initially be null.
`現在の画素~密度@
初期~時には ε (未定義)にされ~MUST。 ◎ Each image request has a current pixel density, which must initially be undefined.
【 これは,原文では`画像~要請$が持つものとして定義されているが、実際には `img^e 要素の`現在の要請$のそれしか参照されていないので、この訳では `img^e 要素が直接持つように単純化している。 】

`img$e 要素の`現在の画素~密度$ ~NEQ 1.0 のときは、 要素の画像~dataは、その解像度が[ 1 `px$css あたりの機器~画素~数† ~EQ `現在の画素~密度$ ]であったかのように扱われ~MUST。 画像の `密度補正済み@ の[ 内在的~横幅 / 内在的~縦幅 ]とは、`現在の画素~密度$を織り込んだ後における, `px$css 単位で測った[ `内在的~横幅$ / `内在的~縦幅$ ]である。 ◎ When an img element has a current pixel density that is not 1.0, the element's image data must be treated as if its resolution, in device pixels per CSS pixels, was the current pixel density. The image's density-corrected intrinsic width and height are the intrinsic width and height after taking into account the current pixel density.

【† ここでの機器~画素の単位が何に基づくか述べられていないが(例えば機器の物理的な 1 画素は正方形でないかもしれない)、[ 画像の 1 画素が “ある基準表示” において~screenを占める長さ ]として定義されると考えればよいであろう。 実際には、画像の画素~単位が何に基づくかは,画像~形式に依存するであろうし(例えば~vector画像)、何をもって “基準表示” とされるかは,環境に依存するかもしれないが。 そのような詳細は、ここには言及されていない(不要なので追求されていないと思われる)。 】

例えば、[ `現在の画素~密度$ ~EQ 3.125 ]の場合、 1 `in$css ( ~EQ 96 `px$css )あたりの機器~画素~数は 300 (~EQ 96 × 3.125 )になることを意味する。 したがって、画像~dataの ( 横幅, 縦幅 ) が ( 300, 600 ) ならば,その ( `内在的~横幅$, `内在的~縦幅$ ) は ( 96 `px$css, 192 `px$css ) になる。 ◎ For example, if the current pixel density is 3.125, that means that there are 300 device pixels per CSS inch, and thus if the image data is 300x600, it has intrinsic dimensions of 96 CSS pixels by 192 CSS pixels.

`img$e 要素には、`~source集合$が結付けられる。 ◎ An img element is associated with a source set.

`~source集合@ は、[ 0 個~以上の`画像~source$からなる有順序~集合 ], および `~source~size$からなる: ◎ A source set is an ordered set of zero or more image sources and a source size.

  • 各 `画像~source@ は、次のものからなる:

    `~URL文字列@iS
    画像~資源の`~URL$を与える文字列。
    【 原文では単に`~URL$と記されているが(それは文字列ではない)、実際には文字列なので,この訳では このように言い換えることにする。 】
    `記述子@iS
    [ ε(なし), `横幅~記述子$, `画素~密度~記述子$ ]のいずれか。 初期~時は ε 。
    【 この “記述子” という語は、簡便に総称するために,この訳に導入した用語である。 】
    ◎ An image source is a URL, and optionally either a pixel density descriptor, or a width descriptor.
  • `~source~size@ は, `source-size-value$t で与えられる。 その単位が`表示域$に相対的であるときは,[ `img$e 要素の`~node文書$の`表示域$ ]に相対的に解釈され~MUST。 他の単位は、 Media Queries `MQ$r に従って解釈され~MUST。 ◎ A source size is a <source-size-value>. When a source size has a unit relative to the viewport, it must be interpreted relative to the img element's node document's viewport. Other units must be interpreted the same as in Media Queries. [MQ]

この節における各~algoにおける `構文解析-~error@ は、入力と要件との間の 致命的でない不一致を指示する。 ~UAには、何らかの方法で`構文解析-~error$を公開することが奨励される。 ◎ A parse error for algorithms in this section indicates a non-fatal mismatch between input and requirements. User agents are encouraged to expose parse errors somehow.


画像が成功裡に~fetchされたかどうか(例:その応答~statusは`~ok~status$であったかどうか)は、[ 画像の型 / 画像は妥当であるかどうか ]を決定するときには,無視され~MUST。 ◎ Whether the image is fetched successfully or not (e.g. whether the response status was an ok status) must be ignored when determining the image's type and whether it is a valid image.

注記: これにより,~serverは、画像を~error応答で返して,それらを表示させれるようになる。 ◎ This allows servers to return images with error responses, and have them displayed.

~UAは、画像の型を決定するときは,`画像~sniff時の規則$を適用するべきである — その 公式的な型( the official type ) 【?】 には,画像に`結付けられている~Content-Type~header$ で与えられる型 %型 を与える下で。 これらの規則を適用しない場合、画像の型は %型 にされ~MUST。 ◎ The user agent should apply the image sniffing rules to determine the type of the image, with the image's associated Content-Type headers giving the official type. If these rules are not applied, then the type of the image must be the type given by the image's associated Content-Type headers.

~UAは、 `img$e 要素においては: ◎ ↓

  • 画像でない資源を~supportしては~MUST_NOT(例:~XML~fileのうち,`文書~要素$は~HTML要素になるもの)。 ◎ User agents must not support non-image resources with the img element (e.g. XML files whose document element is an HTML element).\
  • 画像~資源~内に埋込まれた実行可能~codeを走らせては~MUST_NOT(例: ~script)。 ◎ User agents must not run executable code (e.g. scripts) embedded in the image resource.\
  • 資源が複頁である場合は、その最初の頁のみ表示し~MUST(例:~PDF~file)。 ◎ User agents must only display the first page of a multipage resource (e.g. a PDF file).\
  • 資源が対話的に動作するのを許容しては~MUST_NOT。 ◎ User agents must not allow the resource to act in an interactive fashion, but\
  • 資源における~animationは、尊守するべきである。 ◎ should honour any animation in the resource.

この仕様は、どの画像~型が~supportされるかは指定しない。 ◎ This specification does not specify which image types are to be supported.

4.8.4.3.1. 画像をいつ得るか

~UAは、`閲覧文脈$において`~scriptingは不能化されて$いるならば、画像を即時に得ても, 必要時に得てもよい。 逆に,`~scriptingは可能化されて$いるならば、画像を即時に得~MUST。 ◎ In a browsing context where scripting is disabled, user agents may obtain images immediately or on demand. In a browsing context where scripting is enabled, user agents must obtain images immediately.

~UAは,画像を即時に得る場合は、 `img$e 要素に対し次のいずれかが生じたどの時点でも,同期的に要素の`画像~dataを更新-$し~MUST:

  • 要素が作成されたとき
  • 要素が`関連する変異$を経たとき

— 特に定められていれば、[ `~animation再始動~flag^i ~SET ~ON ]にした上で。

◎ A user agent that obtains images immediately must synchronously update the image data of an img element, with the restart animation flag set if so stated, whenever that element is created or has experienced relevant mutations.

~UAは、 `img$e 要素の画像を必要時に得る場合は: ◎ A user agent that obtains images on demand\

  • [ 要素の状態 ~EQ `可用でない$st ]場合に限り、要素の画像~dataが必要になり次第(すなわち,必要時に),`画像~dataを更新-$し~MUST。 ◎ must update the image data of an img element whenever it needs the image data (i.e. on demand), but only if the img element is in the unavailable state.\
  • 要素が`関連する変異$を経た時点で,[ 要素の状態 ~SET `可用でない$st ]に戻さ~MUST。 ◎ When an img element has experienced relevant mutations, if the user agent only obtains images on demand, the img element must return to the unavailable state.
4.8.4.3.2. ~DOM変異に対する反応-法

`img$e 要素 %img に `関連する変異@ とは、次のいずれかが生じたことを表す: ◎ The relevant mutations for an img element are as follows:

  • %img の[ `src$a, `srcset$a, `width$a, `sizes$a ]属性のうちいずれかが[ 設定- / 変更- / 除去- ]された。 ◎ The element's src, srcset, width, or sizes attributes are set, changed, or removed.
  • %img が `src$a 属性を有している下で,その値が前と同じ値に設定された — この場合 ⇒ `画像~dataを更新-$する際には、[ `~animation再始動~flag^i ~SET ~ON ]にされ~MUST。 ◎ The element's src attribute is set to the same value as the previous value. This must set the restart animation flag for the update the image data algorithm.
  • %img の `crossorigin$a 属性の状態が変化した。 ◎ The element's crossorigin attribute's state is changed.
  • %img は `picture$e 要素の子として`挿入され$た。 ◎ ↓
  • %img の親は `picture$e 要素である下で,次のいずれかが生じた: ◎ ↓

    • %img は親から`除去され$た。 ◎ The element is inserted into or removed from a picture parent element.
    • %img に先行する同胞として `source$e 要素が`挿入され$た。 ◎ The element's parent is a picture element and a source element is inserted as a previous sibling.
  • %img の親は `picture$e 要素である, かつ %img に先行する同胞に `source$e 要素 %source がある下で,次のいずれかが生じた:

    • %source は`除去され$た。
    • %source の[ `srcset$aS, `sizes$aS, `media$aS, `type$aS ]属性のうちいずれかが[ 設定- /変更- / 除去- ]された。
    ◎ The element's parent is a picture element and a source element that was a previous sibling is removed. ◎ The element's parent is a picture element and a source element that is a previous sibling has its srcset, sizes, media, or type attributes set, changed, or removed.
  • %img に対する`受入-時の手続き$が走った。 ◎ The element's adopting steps are run.
4.8.4.3.3. 可用な画像の~list

各 `文書$は `可用な画像~list@ を持ってい~MUST。 この~list内の~entryにされる各 画像は: ◎ Each Document object must have a list of available images. Each image in this list is\

  • ( `絶対~URL$, ~mode, `生成元$または ε ) からなる組による~keyで識別される — ここで:

    • ~modeは `~CORS設定群~属性$がとり得る状態と同じ~~範囲の値をとる。
    • 3 個目の成分は、[ ~mode ~EQ `~NoCORS$st ]の場合は,常に ε (なし)にされる。
    ◎ identified by a tuple consisting of an absolute URL, a CORS settings attribute mode, and, if the mode is not No CORS, an origin.\
  • 加えて, `上層~caching無視-~flag@ も伴われる。 ◎ Each image furthermore has an ignore higher-layer caching flag.\

~UAは,いつでも、異なる`文書$~間で,一方の`可用な画像~list$内の~entryを他方へ複製してよい(例: ~UAは, ある`文書$の作成-時に,他の`文書$~内に読込まれたすべての画像を~listに追加できる)。ただし、この仕方で複製された~entryに対しては: ◎ User agents may copy entries from one Document object's list of available images to another at any time (e.g. when the Document is created, user agents can add to it all the images that are loaded in other Documents),\

  • その~keyを変更しては~MUST_NOT。 ◎ but must not change the keys of entries copied in this way when doing so, and\
  • その`上層~caching無視-~flag$は ~OFF にし~MUST。 ◎ must unset the ignore higher-layer caching flag for the copied entry.\

~UAは,いつでも、`可用な画像~list$内から画像を除去してもよい(例:~memoryを節約する)。ただし,除去する~entryの[ `上層~caching無視-~flag$ ~EQ ~OFF ]の場合は、当の資源~用の上層~caching意味論に適切になるよう除去し~MUST(例: ~HTTP `Cache-Control$h 応答~header)。 ◎ User agents may also remove images from such lists at any time (e.g. to save memory). User agents must remove entries in the list of available images as appropriate given higher-layer caching semantics for the resource (e.g. the HTTP `Cache-Control` response header) when the ignore higher-layer caching flag is unset.

注記: `可用な画像~list$は、~HTTPによる~cachingが許容されないときでも,[ `src$a 属性が 以前に読込んだ~URLに変更された際に、同じ文書~内の画像を再~downloadするのを避けて, 同期的な切替えを可能化する ]ために意図されている。 それは、[ 前の画像をまだ読込んでいる間に,同じ画像を再~downloadするのを避ける ]ために利用されるものではない。 ◎ The list of available images is intended to enable synchronous switching when changing the src attribute to a URL that has previously been loaded, and to avoid re-downloading images in the same document even when they don't allow caching per HTTP. It is not used to avoid re-downloading the same image while the previous image is still loading.

注記: ~UAは、画像~dataを`可用な画像~list$とは別々に格納することもできる。 ◎ The user agent can also store the image data separately from the list of available images.

例えば、資源に[ `must-revalidate$v を値にとる ~HTTP `Cache-Control$h 応答~header ]が伴われていて,[ 資源の`上層~caching無視-~flag$ ~EQ ~OFF ]の場合、~UAは,それを`可用な画像~list$から除去することになるが、画像~dataは別々に保っておいて,~serverが ~status~code `304^st ( Not Modified )で応答してきたときには,それを利用することもできる。 ◎ For example, if a resource has the HTTP response header `Cache-Control: must-revalidate`, and its ignore higher-layer caching flag is unset, the user agent would remove it from the list of available images but could keep the image data separately, and use that if the server responds with a 304 Not Modified status.

4.8.4.3.4. 画像~dataの更新-法

~UAは, `img$e 要素 %img の `画像~dataを更新-@ するときは、所与の `~animation再始動~flag^i (省略時は ~OFF )に対し,次の手続きを走らせ~MUST: ◎ When the user agent is to update the image data of an img element, optionally with the restart animations flag set, it must run the following steps:

  1. ~IF[ %img の`~node文書$は`作動中$docでない ]: ◎ If the element's node document is not the active document, then:

    1. この~algoを`並列的$に走らせ続ける ◎ Continue running this algorithm in parallel.
    2. %img の`~node文書$が`作動中$docになるまで待機する ◎ Wait until the element's node document is the active document.
    3. ~IF[ %img に対し この~algoの別の~instanceが,この~instanceより後に開始されていた(それが早々に ~RET して,最早~走ってない場合でも) ] ⇒ ~RET ◎ If another instance of this algorithm for this img element was started after this instance (even if it aborted and is no longer running), then abort these steps.
    4. この~algoを~~一時停止すると同時に,~~再開するための`極小taskを~queueする$ 【並列的に走らすのは、ここまで】 ◎ Queue a microtask to continue this algorithm.
  2. ~IF[ ~UAは画像を~supportできない ]~OR[ 画像に対する~supportは不能化されている ]: ◎ If the user agent cannot support images, or its support for images has been disabled, then\

    1. %img の`現在の要請$による`画像~要請を中止する$ ◎ abort the image request for the current request and\
    2. %img の`処理待ち要請$による`画像~要請を中止する$ ◎ the pending request,\
    3. %img の`現在の要請$の`状態$ ~SET `可用でない$st ◎ set current request to the unavailable state,\
    4. %img の`処理待ち要請$ ~SET ε ◎ let pending request be null, and\
    5. ~RET ◎ abort these steps.
  3. %被選定~source ~LET ε ◎ ↓
  4. ~IF[ %img は`~srcsetまたは~pictureを利用して$いない ]~AND[ %img は `src$a 属性 %src を有する ]~AND[ %src の値 ~NEQ 空~文字列 ] ⇒ %被選定~source ~SET %src の値 ◎ If the element does not use srcset or picture, and it has a src attribute specified and its value is not the empty string, let selected source be the value of the element's src attribute, and selected pixel density be 1.0. Otherwise, let selected source be null and selected pixel density be undefined.
  5. %img の`最後に選定された~source$ ~SET %被選定~source ◎ Let the img element's last selected source be selected source.
  6. `(A)^i:
    ~IF[ %被選定~source ~NEQ ε ]: ◎ If selected source is not null, then:

    1. %文書 ~LET %img の`~node文書$ ◎ ↓
    2. %~URL文字列 ~LET %被選定~source を %文書 に`相対的に構文解析-$した`結果の~URL文字列$ ◎ Parse selected source, relative to the element's node document.\
    3. ~IF[ %~URL文字列 ~EQ ~error ] ⇒ ~BREAK `(A)^i ◎ If that is not successful, then abort this inner set of steps. Otherwise, let urlString be the resulting URL string.
    4. %~key ~LET 次の成分からなる~key:

      1. %~URL文字列
      2. %img の `crossorigin$a 内容~属性の状態
      3. %~CORS属性~状態 ~NEQ `~NoCORS$st ならば %文書 の`生成元$ / ~ELSE_ ε
      ◎ Let key be a tuple consisting of urlString, the img element's crossorigin attribute's mode, and, if that mode is not No CORS, the node document's origin.
    5. ~IF[ %文書 の`可用な画像~list$内に, %~key に対応する~entry %~entry はある ]: ◎ If the list of available images contains an entry for key, then:

      1. %~entry の`上層~caching無視-~flag$ ~SET ~ON ◎ Set the ignore higher-layer caching flag for that entry.
      2. %img の`現在の要請$による`画像~要請を中止する$ ◎ Abort the image request for the current request and\
      3. %img の`処理待ち要請$による`画像~要請を中止する$ ◎ the pending request.
      4. %img の`処理待ち要請$ ~SET ε ◎ Let pending request be null.
      5. %img の`現在の要請$ ~LET 次のようにされた新たな`画像~要請$ ⇒# `画像~data$ ~SET %~entry の`画像~data$; `状態$ ~SET `完全に可用$st ◎ Let current request be a new image request whose image data is that of the entry and whose state is set to the completely available state.
      6. 画像の呈示を適切に更新する ◎ Update the presentation of the image appropriately.
      7. %img の`現在の画素~密度$ ~SET 1.0 ◎ Let the current request's current pixel density be selected pixel density.
      8. ~IF[ `~animation再始動~flag^i ~EQ ~ON ] ⇒ 次を走らす`~taskを~queueする$ ⇒ `~animationを再始動する$ ◎ Queue a task to restart the animation if restart animation is set,\
      9. %img の`現在の要請$の`現在の~URL$ ~SET %~URL文字列 ◎ change current request's current URL to urlString, and\
      10. %img に向けて,名前 `load$et の`~eventを発火する$ ◎ then fire an event named load at the img element.
      11. ~RET ◎ Abort the update the image data algorithm.
  7. 次の手続きを`同期区間$として,`安定~状態を待受ける$: ◎ Await a stable state, allowing the task that invoked this algorithm to continue. The synchronous section consists of all the remaining steps of this algorithm until the algorithm says the synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

    1. ~IF[ %img に対するこの~algoの別の~instanceが,この~instanceより後に開始されていた(それが早々に ~RET して,最早~走ってない場合でも) ] ⇒ ~RET ◎ ⌛ If another instance of this algorithm for this img element was started after this instance (even if it aborted and is no longer running), then abort these steps.

      注記: 複数の要請を避けるため、効果があるのは,最後の~instanceに限られる — 例えば[ `src$a, `srcset$a, `crossorigin$a ]属性が続けて設定されたときでも。 ◎ Only the last instance takes effect, to avoid multiple requests when, for example, the src, srcset, and crossorigin attributes are all set in succession.

    2. %現~要請 ~LET %img の`現在の要請$ ◎ ↓
    3. ( %被選定~source, %被選定~画素~密度 ) ~LET `画像~sourceを選定-$した結果 ◎ ⌛ Let selected source and selected pixel density be the URL and pixel density that results from selecting an image source, respectively.
    4. ~IF[ %被選定~source ~EQ ε ]: ◎ ⌛ If selected source is null, then:

      1. %現~要請 の`状態$ ~SET `壊en$st ◎ ⌛ Set the current request to the broken state,\
      2. %現~要請 による`画像~要請を中止する$ ◎ abort the image request for the current request and\
      3. %img の`処理待ち要請$による`画像~要請を中止する$ ◎ the pending request, and\
      4. %img の`処理待ち要請$ ~SET ε ◎ let pending request be null.
      5. 次を走らす`~taskを~queueする$ ⇒ %現~要請 の`現在の~URL$ ~SET 空~文字列 ◎ ⌛ Queue a task to change the current request's current URL to the empty string, and then,\
      6. ~IF[ %img は `src$a 属性を有する ]~OR[ %img は`~srcsetまたは~pictureを利用して$いる ] ⇒ %img に向けて,名前 `error$et の`~eventを発火する$ ◎ if the element has a src attribute or it uses srcset or picture, fire an event named error at the img element.
      7. ~RET ◎ ⌛ Abort this algorithm.
    5. 次を走らす`~taskを~queueする$ ⇒ %img に向けて,名前 `loadstart$et の`進捗~eventを発火する$ ◎ ⌛ Queue a task to fire a progress event named loadstart at the img element.
    6. %文書 ~LET %img の`~node文書$ ◎ ⌛ Parse selected source, relative to the element's node document, and\
    7. ( %~URL~record, %~URL文字列 ) ~LET %被選定~source を %文書 に`相対的に構文解析-$した ( `結果の~URL~record$, `結果の~URL文字列$ ) ◎ let urlString be the resulting URL string.\
    8. ~IF[ %~URL文字列 ~EQ ~error ]: ◎ If that is not successful, then:

      1. %現~要請 による`画像~要請を中止する$ ◎ ⌛ Abort the image request for the current request and\
      2. %img の`処理待ち要請$による`画像~要請を中止する$ ◎ the pending request.
      3. %現~要請 の`状態$ ~SET `壊en$st ◎ ⌛ Set the current request to the broken state.
      4. %img の`処理待ち要請$ ~SET ε ◎ ⌛ Let pending request be null.
      5. 次を走らす`~taskを~queueする$: ◎ ⌛ Queue a task to\

        1. %現~要請 の`現在の~URL$ ~SET %被選定~source ◎ change the current request's current URL to selected source,\
        2. %img に向けて,名前 `error$et の`~eventを発火する$ ◎ fire an event named error at the img element and then\
        3. %img に向けて,名前 `loadend$et の`~eventを発火する$ ◎ fire an event named loadend at the img element.
      6. ~RET ◎ ⌛ Abort the update the image data algorithm.
    9. %処理待ち要請 ~LET %img の`処理待ち要請$ ◎ ↓
    10. ~IF[ %処理待ち要請 ~NEQ ε ]~AND[ %~URL文字列 ~EQ %処理待ち要請 の`現在の~URL$ ] ⇒ ~RET ◎ ⌛ If the pending request is not null, and urlString is the same as the pending request's current URL, then abort these steps.
    11. ~IF[ %~URL文字列 ~EQ %現~要請 の`現在の~URL$ ]~AND[ %現~要請 の`状態$ ~EQ `部分的に可用$st ]: ◎ ⌛ If urlString is the same as the current request's current URL, and current request is in the partially available state, then\

      1. %処理待ち要請 による`画像~要請を中止する$ ◎ abort the image request for the pending request,\
      2. ~IF[ `~animation再始動~flag^i ~EQ ~ON ] ⇒ 次を走らす`~taskを~queueする$ ⇒ `~animationを再始動する$ ◎ queue a task to restart the animation if restart animation is set, and\
      3. ~RET ◎ abort these steps.
    12. ~IF[ %処理待ち要請 ~NEQ ε ] ⇒ %処理待ち要請 による`画像~要請を中止する$ ◎ ⌛ If the pending request is not null, abort the image request for the pending request.
    13. %画像~要請 ~LET 新たな`画像~要請$ ◎ ⌛ Let image request be a new image request\
    14. %画像~要請 の`現在の~URL$ ~SET %~URL文字列 ◎ whose current URL is urlString.
    15. ~IF[ %現~要請 の`状態$ ~IN { `可用でない$st, `壊en$st } ] ⇒ %img の`現在の要請$ ~SET %画像~要請 ◎ ⌛ If current request is in the unavailable state or the broken state, let the current request be image request.\
    16. ~ELSE ⇒ %img の`処理待ち要請$ ~SET %画像~要請 ◎ Otherwise, let the pending request be image request.
    17. %要請 ~LET 次を与える下で,`~CORSになり得る要請を作成-$した結果 ⇒ ( %~URL~record, `image^l, %img の`crossorigin$a 内容~属性の現在の状態 ) ◎ ⌛ Let request be the result of creating a potential-CORS request given urlString, "image", and the current state of the element's crossorigin content attribute.
    18. %要請 の`~client$rq ~SET %文書 の`Window$I ~objの`環境~設定群~obj$ ◎ ⌛ Set request's client to the element's node document's Window object's environment settings object.
    19. ~IF[ %img は`~srcsetまたは~pictureを利用して$いる ] ⇒ %要請 の`起動元$rq ~SET `imageset^l ◎ ⌛ If the element uses srcset or picture, set request's initiator to "imageset".
    20. %要請 の`~referrer施策$rq ~SET %img の `referrerpolicy$a 属性の現在の状態 ◎ ⌛ Set request's referrer policy to the current state of the element's referrerpolicy attribute.
    21. %要請 を用いて`~fetch$すると同時に~fetch~algoの~instanceを %画像~要請 に結付ける ◎ ⌛ Fetch request. Let this instance of the fetching algorithm be associated with image request.

      `同期区間$はここで終端し、以降の手続きは,~fetchingによる~dataを取り逃がすことなく`並列的$に走らす。 加えて: ◎ ↓↓

      • このようにして得られた資源があれば、それが %画像~要請 の`画像~data$になる。 それは、[ `~CORS同一生成元$, `~CORS非同一生成元$ ]のいずれかになる — これは、画像~自身の`生成元$に影響する(例: `canvas$e 上で利用されるとき)。 ◎ The resource obtained in this fashion, if any, is image request's image data. It can be either CORS-same-origin or CORS-cross-origin; this affects the origin of the image itself (e.g. when used on a canvas).
      • 画像の~fetchingは、資源が~fetchされて `~network用~task源$から`~queueされ$た`~task$が走るまで(下に定義される), %文書 の`~load~eventを遅延-$させ~MUST ◎ Fetching the image must delay the load event of the element's node document until the task that is queued by the networking task source once the resource has been fetched (defined below) has been run.

        あいにくこれは、利用者の局所~networkに対する原始的な~port-scanを遂行するためにも利用され得る(とりわけ,~scriptingとの併用で — 実際には,~scriptingは、そのような攻撃を~~実施するために必要とはされないが)。 ~UAは、この攻撃を軽減するため,上に述べたものより厳格な`生成元$~access制御~施策を実装してよいが、あいにく そのような施策は,概して既存の~Web内容と互換にならない。 ◎ This, unfortunately, can be used to perform a rudimentary port scan of the user's local network (especially in conjunction with scripting, though scripting isn't actually necessary to carry out such an attack). User agents may implement cross-origin access control policies that are stricter than those described above to mitigate this attack, but unfortunately such policies are typically not compatible with existing Web content.

      • 資源は`~CORS同一生成元$である場合、次をし~MUST ⇒ 画像が~fetchされている間に`~network用~task源$から`~queueされ$た各`~task$に対し ⇒ ~IF[ %画像~要請 ~EQ %img の`現在の要請$ ] ⇒ %img に向けて,名前 `progress$et の`進捗~eventを発火する$ ◎ If the resource is CORS-same-origin, each task that is queued by the networking task source while the image is being fetched, if image request is the current request, must fire a progress event named progress at the img element.
  8. 可能な限り早く,以下の項目のうち,最初に適用-可能なものに対応する段を走らす:

    この段における `画像~fetch~task@ とは、画像が~fetchされている間に`~network用~task源$から`~queueされ$ることになる,個々の`~task$を指すとする。

    ◎ ↑↑End the synchronous section, continuing the remaining steps in parallel, but without missing any data from fetching. ◎ As soon as possible, jump to the first applicable entry from the following list:
    資源の~MIME型 ~EQ `multipart/x-mixed-replace$mt : ◎ If the resource type is multipart/x-mixed-replace

    次回の`画像~fetch~task$は、次の下位手続きを走らせ~MUST: ◎ The next task that is queued by the networking task source while the image is being fetched must run the following steps:

    1. %状態 ~LET ~UAは %画像~要請 の画像の寸法を[ 決定できたならば `部分的に可用$st / 何らかの致命的な仕方で得れないまでに壊れていると決定できたならば `壊en$st ] ◎ ↓
    2. ~IF[ %画像~要請 ~EQ %img の`処理待ち要請$ ]:

      1. ~Assert†: 完全に復号された本体部位が少なくとも 1 個以上ある ~OR %状態 ~EQ `壊en$st
      2. %img の`現在の要請$による`画像~要請を中止する$
      3. %img の`処理待ち要請を現在の要請に昇格する$
      4. ~IF[ 完全に復号された本体部位はまだない ]~AND[ %状態 ~EQ `壊en$st ] ⇒ %画像~要請 の`状態$ ~SET `壊en$st

      【† この ~Assert は訳者による補完。 原文では,この ~Assert が満たされない場合の挙動が記されておらず、満たされない場合,処理待ち要請が現在の要請に昇格する機会が来なくなってしまうので。 】

      ◎ If image request is the pending request and at least one body part has been completely decoded, abort the image request for the current request, upgrade the pending request to the current request. ◎ Otherwise, if image request is the pending request and the user agent is able to determine that image request's image is corrupted in some fatal way such that the image dimensions cannot be obtained, abort the image request for the current request, upgrade the pending request to the current request and set the current request's state to broken.
    3. ~ELIF[ %画像~要請 ~EQ %img の`現在の要請$ ]~AND[ %画像~要請 の`状態$ ~EQ `可用でない$st ] ⇒ %画像~要請 の`状態$ ~SET %状態 ◎ Otherwise, if image request is the current request, it is in the unavailable state, and the user agent is able to determine image request's image's width and height, set the current request's state to partially available. ◎ Otherwise, if image request is the current request, it is in the unavailable state, and the user agent is able to determine that image request's image is corrupted in some fatal way such that the image dimensions cannot be obtained, set the current request's state to broken.

    各`画像~fetch~task$は、画像の呈示を更新し~MUSTが、新たな本体部位が来る度に,前の画像を置換し~MUST — ある本体部位が完全に復号された時点で,~UAは次を走らせ~MUST:

    1. %img の`現在の要請$の`状態$ ~SET `完全に可用$st
    2. 次を走らす`~taskを~queueする$ ⇒ %img に向けて,名前 `load$et の`~eventを発火する$
    ◎ Each task that is queued by the networking task source while the image is being fetched must update the presentation of the image, but as each new body part comes in, it must replace the previous image. Once one body part has been completely decoded, the user agent must set the img element to the completely available state and queue a task to fire an event named load at the img element.

    注記: `multipart/x-mixed-replace$mt 画像~streamに対しては、 `progress$et / `loadend$et ~eventは発火されない。 ◎ The progress and loadend events are not fired for multipart/x-mixed-replace image streams.

    資源の~MIME型と~dataは 下に述べるように ~supportする画像~形式に対応する: ◎ If the resource type and data corresponds to a supported image format, as described below

    次回の`画像~fetch~task$は、次の下位手続きを走らせ~MUST: ◎ The next task that is queued by the networking task source while the image is being fetched must run the following steps:

    1. ~IF[ ~UAは %画像~要請 の画像の寸法を決定できた ]:

      1. ~IF[ %画像~要請 ~EQ %img の`現在の要請$ ] ⇒ %img の呈示を適切に更新する
      2. %画像~要請 の`状態$ ~SET `部分的に可用$st
      ◎ If the user agent is able to determine image request's image's width and height, and image request is pending request, set image request's state to partially available. ◎ Otherwise, if the user agent is able to determine image request's image's width and height, and image request is current request, update the img element's presentation appropriately and set image request's state to partially available.
    2. ~ELSE(画像は 何らかの致命的な仕方で壊れていると決定できた) :

      1. %img の`現在の要請$による`画像~要請を中止する$
      2. ~IF[ %画像~要請 ~EQ %img の`処理待ち要請$ ]:

        1. %img の`処理待ち要請$による`画像~要請を中止する$
        2. %img の`処理待ち要請を現在の要請に昇格する$
        3. %img の`現在の要請$の`状態$ ~SET `壊en$st
      3. %img に向けて,名前 `error$et の`~eventを発火する$
      4. %img に向けて,名前 `loadend$et の`~eventを発火する$
      5. ~RET
      ◎ Otherwise, if the user agent is able to determine that image request's image is corrupted in some fatal way such that the image dimensions cannot be obtained, and image request is pending request, abort the image request for the current request and the pending request, upgrade the pending request to the current request, set current request to the broken state, fire an event named error at the img element, fire an event named loadend at the img element, and abort these steps. ◎ Otherwise, if the user agent is able to determine that image request's image is corrupted in some fatal way such that the image dimensions cannot be obtained, and image request is current request, abort the image request for image request, fire an event named error at the img element, fire an event named loadend at the img element, and abort these steps.

    上述の`~task$, および 後続の各`画像~fetch~task$は、次を走らせ~MUST:

    1. ~IF[ %画像~要請 ~EQ %img の`現在の要請$ ] ⇒ 画像の呈示を更新する(例えば,画像が~progressive~JPEGの場合、各~packetは その画像の解像度を向上させ得る)
    ◎ That task, and each subsequent task, that is queued by the networking task source while the image is being fetched, if image request is the current request, must update the presentation of the image appropriately (e.g., if the image is a progressive JPEG, each packet can improve the resolution of the image).

    加えて、資源を~fetchし終えたときの最後の`画像~fetch~task$は、次の下位手続きを走らせ~MUST: ◎ Furthermore, the last task that is queued by the networking task source once the resource has been fetched must additionally run these steps:

    1. ~IF[ %画像~要請 ~EQ %img の`処理待ち要請$ ]: ◎ If image request is the pending request,\

      1. %img の`現在の要請$による`画像~要請を中止する$ ◎ abort the image request for the current request,\
      2. %img の`処理待ち要請を現在の要請に昇格する$ ◎ upgrade the pending request to the current request and\
      3. %img の呈示を適切に更新する ◎ update the img element's presentation appropriately.
    2. %画像~要請 の`状態$ ~SET `完全に可用$st ◎ Set image request to the completely available state.
    3. %文書 の`可用な画像~list$に,画像を追加する — この画像は ⇒ ~key %~key で識別され, `上層~caching無視-~flag$ は ~ON にされるとする ◎ Add the image to the list of available images using the key key, with the ignore higher-layer caching flag set.
    4. ~IF[ %画像~要請 内の資源 は`~CORS同一生成元$である ]:

      1. %img に向けて名前 `load$et の`進捗~eventを発火する$
      2. %img に向けて名前 `loadend$et の`進捗~eventを発火する$

      ~ELSE:

      1. %img に向けて 名前 `load$et の`~eventを発火する$
      2. %img に向けて 名前 `loadend$et の`~eventを発火する$
      ◎ Fire a progress event or event named load at the img element, depending on the resource in image request. ◎ Fire a progress event or event named loadend at the img element, depending on the resource in image request.
    その他( 画像~dataは~supportされる~file形式でない ): ◎ Otherwise ◎ The image data is not in a supported file format; the user agent must\
    1. %画像~要請 の`状態$ ~SET `壊en$st ◎ set image request to the broken state,\
    2. %img の`現在の要請$による`画像~要請を中止する$ ◎ abort the image request for the current request\
    3. %img の`処理待ち要請$による`画像~要請を中止する$ ◎ and the pending request,\
    4. ~IF[ %画像~要請 ~EQ %img の`処理待ち要請$ ] ⇒ %img の`処理待ち要請を現在の要請に昇格する$ ◎ upgrade the pending request to the current request if image request is the pending request, and then\
    5. 次を走らす`~taskを~queueする$:

      1. %img に向けて,名前 `error$et の`~eventを発火する$
      2. %img に向けて,名前 `loadend$et の`~eventを発火する$
      ◎ queue a task to first fire an event named error at the img element and then fire an event named loadend at the img element.

~UAが,ある要素 %img に対し上の~algoを走らせている間は、 %img は`接続されて$いなくとも, %img の`~node文書$から %img への強い参照-が~MUST。 ◎ While a user agent is running the above algorithm for an element x, there must be a strong reference from the element's node document to the element x, even if that element is not connected.

`画像~要請$ %画像~要請 による `画像~要請を中止する@ ときは、次の手続きを走らす: ◎ To abort the image request for an image request image request means to run the following steps:

  1. %画像~要請 の`画像~data$ ~SET ε ◎ Forget image request's image data, if any.
  2. %画像~要請 による`~fetch$~algoの~instanceがあれば、それを中止した上で,その~algoにより生成された処理待ち~taskすべてを破棄する ◎ Abort any instance of the fetching algorithm for image request, discarding any pending tasks generated by that algorithm.

`img$e 要素の `処理待ち要請を現在の要請に昇格する@ ときは、次の手続きを走らす: ◎ To upgrade the pending request to the current request for an img element means to run the following steps:

  1. %img の`現在の要請$ ~SET %img の`処理待ち要請$ ◎ Let the img element's current request be the pending request.
  2. %img の`処理待ち要請$ ~SET ε ◎ Let the img element's pending request be null.

`進捗~eventまたは~eventを発火する@ ときは… ◎ To fire a progress event or event named type at an element e, depending on resource r, means to fire a progress event named type at e if r is CORS-same-origin, and otherwise fire an event named type at e.

【 この手続きは, 1 箇所からしか参照されていないので、その内容は, その箇所 に直接的に記すことにする。 】

4.8.4.3.5. 画像~sourceの選定-法

~UAは、所与の `img$e 要素 %img に対し `画像~sourceを選定-@ するときは、次を走らせ~MUST — これは ( `~URL$を与える文字列, `密度~値$ ) の組を返す: ◎ When asked to select an image source for a given img element el, user agents must do the following:

  1. %img の`~source集合を更新-$する

    【 その結果、 %img の`~source集合$内のすべての~entryの`記述子$iSは,`画素~密度~記述子$に正規化されることに注意。 】

    ◎ Update the source set for el.
  2. ~IF[ %img の`~source集合$は空である ] ⇒ ~RET ( ε, ε ) ◎ If el's source set is empty, return null as the URL and undefined as the pixel density and abort these steps.
  3. %~source集合 ~LET 空~集合 ◎ Otherwise, take el's source set and let it be source set.
  4. %img の`~source集合$ 内の~EACH( ~entry %b ) に対し,順に ⇒ ~IF[ %b の`記述子$iSの`密度~値$は %~source集合 内のどの~entryのそれとも異なる ] ⇒ %b を %~source集合 に追加する ◎ If an entry b in source set has the same associated pixel density descriptor as an earlier entry a in source set, then remove entry b. Repeat this step until none of the entries in source set have the same associated pixel density descriptor as an earlier entry.
  5. %被選定~source ~LET ~UAに特有の方式で, %~source集合 から 1 個の `画像~source$を選んだ結果 ◎ In a user agent-specific manner, choose one image source from source set. Let this be selected source.
  6. ~RET ( %被選定~source の`~URL文字列$iS, %被選定~source の`記述子$iSの`密度~値$ ) ◎ Return selected source and its associated pixel density.
4.8.4.3.6. ~source集合の更新-法

~UAは、所与の `img$e 要素 %img の `~source集合を更新-@ するときは、次を走らせ~MUST: ◎ When asked to update the source set for a given img element el, user agents must do the following:

  1. %img の`~source集合$ ~SET 空の`~source集合$ ◎ Set el's source set to an empty source set. ◎ ↓↓If el has a parent node and that is a picture element, let elements be an array containing el's parent node's child elements, retaining relative order. Otherwise, let elements be array containing only el.
  2. %~fallback横幅 ~LET ε ◎ ↓
  3. ~IF[ %img は `width$a 属性を有する ] ◎ If el has a width attribute, and\

    1. %横幅 ~LET %img の `width$a 属性の値を`寸法~値として構文解析-$した結果 ◎ parsing that attribute's value using the rules for parsing dimension values\
    2. ~IF[ %横幅 ~NEQ ~error ]~AND[ %横幅 の種別 ~NEQ 百分率 ] ⇒ %~fallback横幅 ~SET %横幅 ◎ doesn't generate an error or a percentage value, then let width be the returned integer value. Otherwise, let width be null.
  4. %要素~list ~LET[ %img の親~node は `picture$e 要素であるならば %img に先行する同胞の `source$e 要素からなる同順の~list / ~ELSE_ 空~list ] ◎ ↑↓
  5. %要素~list に %img を付加する ◎ ↑↓
  6. %要素~list 内の ~EACH ( %子 ) に対し: ◎ Iterate through elements, doing the following for each item child:

    1. %~source集合 ~LET [ %子 は`~srcset属性$を有するならば %子 の`~srcset属性を構文解析-$した結果 / ~ELSE_ 空の`~source集合$ ] ◎ ↓
    2. ~IF[ %子 ~EQ %img ]: ◎ If child is el:

      1. ~IF[ 次の両者とも満たされる ]…:

        • %子 は `src$a 属性を有する ~AND その値 ~NEQ 空~文字列
        • %~source集合 内のどの`画像~source$の`記述子$iSも,[ ε , または[ `画素~密度~記述子$であって,その`密度~値$ ~NEQ 1 ]]:

        …ならば ⇒ 次のようにされた新たな`画像~source$を %~source集合 に付加する:

        • `~URL文字列$iS ~SET %子 の`src$a 属性の値
        • `記述子$iS ~SET ε
        ◎ • If child has a srcset attribute, parse child's srcset attribute and let the returned source set be source set. Otherwise, let source set be an empty source set. • Parse child's sizes attribute with the fallback width width, and let source set's source size be the returned value. • If child has a src attribute whose value is not the empty string and source set does not contain an image source with a pixel density descriptor value of 1, and no image source with a width descriptor, append child's src attribute value to source set.
      2. ~BREAK ◎ • Normalize the source densities of source set. • Let el's source set be source set. • Abort this algorithm. If child is not a source element, continue to the next child. Otherwise, child is a source element.
    3. ~IF[ 次のいずれかが満たされる ]…:

      • %~source集合 は空である
      • %子 は `media$aS 属性を有する ~AND その値は`環境に合致-$しない
      • %子 は `type$aS 属性を有する ~AND その値は 未知の/未~supportの`~MIME型$である

      …ならば ⇒ ~CONTINUE

      ◎ • If child does not have a srcset attribute, continue to the next child. • Parse child's srcset attribute and let the returned source set be source set. • If source set has zero image sources, continue to the next child. • If child has a media attribute, and its value does not match the environment, continue to the next child. • Parse child's sizes attribute with the fallback width width, and let source set's source size be the returned value. • If child has a type attribute, and its value is an unknown or unsupported MIME type, continue to the next child.
    4. ~BREAK ◎ ↓
  7. %~source集合 の`~source~size$ ~LET %~fallback横幅 を与える下で %子 の`~sizes属性を構文解析-$した結果 ◎ ↑
  8. %~source集合 の`~source密度を正規化-$する ◎ Normalize the source densities of source set.
  9. %img の`~source集合$ ~SET %~source集合 ◎ Let el's source set be source set. ◎ Abort this algorithm.

注記: 各 `img$e 要素は、`画像~source$を選定するときに[ 自身, および 自身に先行する同胞 `source$e 要素たち ]を独立と見なし、他の(妥当でない)要素 — [ 同じ `picture$e 要素~内の他の `img$e 要素 / 自身に後続する同胞の `source$e 要素 ]は無視する。 ◎ Each img element independently considers its previous sibling source elements plus the img element itself for selecting an image source, ignoring any other (invalid) elements, including other img elements in the same picture element, or source elements that are following siblings of the relevant img element.

4.8.4.3.7. ~srcset属性の構文解析-法

要素の `~srcset属性を構文解析-@ するときは、次に従って構文解析する: ◎ When asked to parse a srcset attribute from an element, parse the value of the element's srcset attribute as follows:

  1. %入力 ~LET 要素の`~srcset属性$の値 ◎ Let input be the value passed to this algorithm.
  2. %位置 ~LET %入力 の中の最初の文字を指している`位置~変数$ ◎ Let position be a pointer into input, initially pointing at the start of the string.
  3. %候補~list ~LET 空の`~source集合$ ◎ Let candidates be an initially empty source set.
  4. ~WHILE 無条件: ◎ Splitting loop:\

    1. %入力 内の %位置 から { `~ASCII空白$, `002C^U `,^smb } からなる`符号位置~並びを収集-$する ◎ Collect a sequence of code points that are ASCII whitespace or U+002C COMMA characters from input given position.\
    2. ~IF[ 前~段にて 1 個~以上の文字 `002C^U `,^smb が収集された ] ⇒ `構文解析-~error$ ◎ If any U+002C COMMA characters were collected, that is a parse error.
    3. ~IF[ %位置↗ ~EQ ε ] ⇒ ~RET %候補~list ◎ If position is past the end of input, return candidates and abort these steps.
    4. %記述子 ~LET ε ◎ ↓
    5. %~url ~LET %入力 内の %位置 から `~ASCII空白$以外の`符号位置~並びを収集-$した結果 ◎ Collect a sequence of code points that are not ASCII whitespace from input given position, and let that be url. ◎ ↓↓Let descriptors be a new empty list.
    6. ~IF[ %~url の最後の文字 ~EQ `002C^U `,^smb ]: ◎ If url ends with U+002C (,), then:

      1. %~url の末尾から連続する文字 `002C^U `,^smb をすべて除去する ◎ Remove all trailing U+002C COMMA characters from url.\
      2. ~IF[ 前~段で 2 個~以上の文字が除去された ] ⇒ `構文解析-~error$ ◎ If this removed more than one character, that is a parse error.
    7. ~ELSE: ◎ Otherwise:

      1. %記述子 ~LET [ 下の “記述子を~token化する” 下位手続きを走らせた結果 ]を,その下の “記述子 構文解析器” にかけた結果
      2. ~IF[ %記述子 ~EQ `~error^i ] ⇒ ~CONTINUE

      【 この訳では、原文の~algoを,これらの下位手続きに分割して記述している。 】

      ◎ ↓↓
    8. 次のようにされた新たな`画像~source$を %候補~list に付加する:

      • `~URL文字列$iS ~SET %~url
      • `記述子$iS ~SET %記述子
      ◎ ↓↓

上の`~srcset属性を構文解析-$する手続きに利用される,記述子を~token化する下位手続きは、次を走らす: ◎ Descriptor tokenizer: Skip ASCII whitespace within input given position.

  1. %記述子~list ~LET 新たな空~list ◎ ↑↑
  2. ~WHILE 無条件: ◎ ↓

    1. %入力 内の %位置 から`~ASCII空白を読飛ばす$ ◎ ↑↓
    2. %記述子~token ~LET 空~文字列 ◎ Let current descriptor be the empty string.
    3. %状態 ~LET `記述子~内^i ◎ Let state be in descriptor.
    4. ~WHILE[ %位置↗ ~NEQ ε ]:

      1. %C ~LET %位置↗
      2. %位置 ~INCBY 1
      3. %状態 に応じて:

        `記述子~内^i

        %C に応じて:

        `~ASCII空白$
        1. %状態 ~SET `継続^i
        2. ~BREAK
        `002C^U `,^smb
        ~BREAK
        `0028^U `(^smb
        1. %記述子~token に %C を付加する
        2. %状態 ~SET `丸括弧~内^i
        その他
        %記述子~token に %C を付加する
        `丸括弧~内^i

        %C に応じて:

        `0029^U `)^smb
        1. %記述子~token に %C を付加する
        2. %状態 ~SET `記述子~内^i
        その他
        %記述子~token に %C を付加する
      ◎ Let c be the character at position. Do the following depending on the value of state. For the purpose of this step, "EOF" is a special character representing that position is past the end of input. In descriptor • Do the following, depending on the value of c: •• ASCII whitespace ••• If current descriptor is not empty, append current descriptor to descriptors and let current descriptor be the empty string. Set state to after descriptor. •• U+002C COMMA (,) ••• Advance position to the next character in input. If current descriptor is not empty, append current descriptor to descriptors. Jump to the step labeled descriptor parser. •• U+0028 LEFT PARENTHESIS (() ••• Append c to current descriptor. Set state to in parens. •• EOF ••• If current descriptor is not empty, append current descriptor to descriptors. Jump to the step labeled descriptor parser. •• Anything else ••• Append c to current descriptor. In parens • Do the following, depending on the value of c: •• U+0029 RIGHT PARENTHESIS ()) ••• Append c to current descriptor. Set state to in descriptor. •• EOF ••• Append current descriptor to descriptors. Jump to the step labeled descriptor parser. •• Anything else ••• Append c to current descriptor. After descriptor • Do the following, depending on the value of c: •• ASCII whitespace ••• Stay in this state. •• EOF ••• Jump to the step labeled descriptor parser. •• Anything else ••• Set state to in descriptor. Set position to the previous character in input. Advance position to the next character in input. Repeat this step.
    5. ~IF[ %記述子~token ~NEQ 空~文字列 ] ⇒ %記述子~list に %記述子~token を付加する ◎ ↑
    6. ~IF[ %状態 ~NEQ `継続^i ] ⇒ ~RET %記述子~list ◎ ↑

    注記: 将来の追加と互換にするため、この~algoは,複数の記述子と丸括弧を伴う記述子を~supportする。 ◎ In order to be compatible with future additions, this algorithm supports multiple descriptors and descriptors with parens.

上の`~srcset属性を構文解析-$する手続きに利用される,記述子 構文解析器は、所与の %記述子~list に対し,次を走らす: ◎ Descriptor parser:\

  1. %~error ~LET `no^i ◎ Let error be no.
  2. ( %横幅, %縦幅, %密度 ) ~LET ( ε, ε, ε )

    【 %縦幅 (原文での名前は “future-compat-h” )は,現時点では用を為さないが、将来の追加と互換にするため,予め処理に組み込まれている。 】

    ◎ Let width be absent. ◎ Let density be absent. ◎ Let future-compat-h be absent.
  3. %記述子~list 内の ~EACH ( %記述子~token ) に対し: ◎ For each descriptor in descriptors, run the appropriate set of steps from the following list:

    1. %種別 ~LET %記述子~token の最後の文字 ◎ ↓
    2. %数 ~LET %記述子~token から最後の文字を除去した結果 ◎ ↓
    3. ~IF[ %種別 ~EQ `0077^U `w^smb ]~AND[ %数 は`妥当な非負~整数$である ]: ◎ If the descriptor consists of a valid non-negative integer followed by a U+0077 LATIN SMALL LETTER W character

      1. ~IF[ ~UAは `sizes$a 属性を~supportしない ] ⇒ %~error ~SET `yes^i ◎ If the user agent does not support the sizes attribute, let error be yes.

        注記: 適合~UAは `sizes$a 属性を~supportすることになる。 しかしながら,実施においては、~UAは概して,特色機能を漸増的に実装して出荷する。 ◎ A conforming user agent will support the sizes attribute. However, user agents typically implement and ship features in an incremental manner in practice.

      2. ~IF[ %横幅 ~NEQ ε ]~OR[ %密度 ~NEQ ε ] ⇒ %~error ~SET `yes^i ◎ If width and density are not both absent, then let error be yes.
      3. %数 ~SET %数 を`非負~整数として構文解析-$した結果 ◎ Apply the rules for parsing non-negative integers to the descriptor.\
      4. ~IF[ %数 ~EQ 0 ] ⇒ %~error ~SET `yes^i ◎ If the result is zero, let error be yes.\
      5. ~ELSE ⇒ %横幅 ~SET %数 ◎ Otherwise, let width be the result.
    4. ~ELIF[ %種別 ~EQ `0078^U `x^smb ]~AND[ %数 は`妥当な浮動小数点数$である ]: ◎ If the descriptor consists of a valid floating-point number followed by a U+0078 LATIN SMALL LETTER X character

      1. ~IF[ %横幅 ~NEQ ε ]~OR[ %密度 ~NEQ ε ]~OR[ %縦幅 ~NEQ ε ] ⇒ %~error ~SET `yes^i ◎ If width, density and future-compat-h are not all absent, then let error be yes.
      2. %数 ~SET %数 を`浮動小数点数として構文解析-$した結果 ◎ Apply the rules for parsing floating-point number values to the descriptor.\
      3. ~IF[ %数 ~LT 0 ] ⇒ %~error ~SET `yes^i ◎ If the result is less than zero, let error be yes.\
      4. ~ELSE ⇒ %密度 ~SET %数 ◎ Otherwise, let density be the result.

        注記: %密度 ~EQ 0 の場合、[ `内在的~横幅$ / `内在的~縦幅$ ]は無限になる。 ~UAには、画像を描画できる大きさを制限することが期待される — そうすることは、`~hardware制限$の条項により許容される。 ◎ If density is zero, the intrinsic dimensions will be infinite. User agents are expected to have limits in how big images can be rendered, which is allowed by the hardware limitations clause.

    5. ~ELIF[ %種別 ~EQ `0068^U `h^smb ]~AND[ %数 は`妥当な非負~整数$である ]: ◎ If the descriptor consists of a valid non-negative integer followed by a U+0068 LATIN SMALL LETTER H character

      1. `構文解析-~error$ ◎ This is a parse error.
      2. ~IF[ %縦幅 ~NEQ ε ]~OR[ %密度 ~NEQ ε ] ⇒ %~error ~SET `yes^i ◎ If future-compat-h and density are not both absent, then let error be yes.
      3. %数 ~SET %数 を`非負~整数として構文解析-$した結果 ◎ Apply the rules for parsing non-negative integers to the descriptor.\
      4. ~IF[ %数 ~EQ 0 ] ⇒ %~error ~SET `yes^i ◎ If the result is zero, let error be yes.\
      5. ~ELSE ⇒ %縦幅 ~SET %数 ◎ Otherwise, let future-compat-h be the result.
    6. ~ELSE ⇒ %~error ~SET `yes^i ◎ Anything else ◎ Let error be yes.
  4. ~IF[ %縦幅 ~NEQ ε ]~AND[ %横幅 ~EQ ε ] ⇒ %~error ~SET `yes^i ◎ If future-compat-h is not absent and width is absent, let error be yes.
  5. ~IF[ %~error ~EQ `no^i ]:

    1. ~IF[ %横幅 ~NEQ ε ] ⇒ ~RET `横幅~値$に %横幅 を伴う`横幅~記述子$
    2. ~IF[ %密度 ~NEQ ε ] ⇒ ~RET `密度~値$に %密度 を伴う`画素~密度~記述子$
    3. ~RET ε
    ◎ If error is still no, then append a new image source to candidates whose URL is url, associated with a width width if not absent and a pixel density density if not absent.\
  6. `構文解析-~error$ ◎ Otherwise, there is a parse error.
  7. ~RET `~error^i ◎ Return to the step labeled splitting loop.
4.8.4.3.8. ~sizes属性の構文解析-法

%要素 の `~sizes属性を構文解析-@ するときは、所与の %~fallback横幅 の下で,次を走らす: ◎ When asked to parse a sizes attribute from an element, with a fallback width width,\

  1. %未解析~sizes~list ~LET [ %要素 は`~sizes属性$を有するならば その値 / ~ELSE_ 空~文字列 ]を`~comma区切りの成分~値~listとして構文解析-$した結果 `CSSSYNTAX$r ◎ parse a comma-separated list of component values from the value of the element's sizes attribute (or the empty string, if the attribute is absent), and let unparsed sizes list be the result. [CSSSYNTAX]
  2. %未解析~sizes~list 内の~EACH( %未解析~size ) に対し: ◎ For each unparsed size in unparsed sizes list:

    1. %未解析~size の~~終端から連続する `whitespace-token$t すべてを除去する ◎ Remove all consecutive <whitespace-token>s from the end of unparsed size.\
    2. ~IF[ %未解析~size は空である ] ⇒# `構文解析-~error$; ~CONTINUE ◎ If unparsed size is now empty, that is a parse error; continue to the next iteration of this algorithm.
    3. %~size ~LET %未解析~size 内の最後の`成分~値$ ◎ If the last component value in unparsed size is a valid non-negative <source-size-value>, let size be its value and\
    4. %未解析~size から最後の`成分~値$を除去する ◎ remove the component value from unparsed size.\
    5. ~IF[ %~size は `source-size-value$t に合致しない ]~OR[ %~size は `calc()$css 関数~以外の~CSS関数を含んでいる ]~OR[ %~size は負~数を表す ] ⇒# `構文解析-~error$; ~CONTINUE ◎ Any CSS function other than the 'calc()' function is invalid. Otherwise, there is a parse error; continue to the next iteration of this algorithm.
    6. %未解析~size の終端から連続する `whitespace-token$t すべてを除去する ◎ Remove all consecutive <whitespace-token>s from the end of unparsed size.\
    7. ~IF[ %未解析~size は空である ] ⇒ ~IF[ %未解析~size は %未解析~sizes~list 内の最後の~itemでない ] ⇒ `構文解析-~error$ ◎ If unparsed size is now empty, return size and exit this algorithm. If this was not the last item in unparsed sizes list, that is a parse error.
    8. ~ELIF[ %未解析~size は、全体として,次のいずれかを満たす `MQ$r ] ⇒ ~CONTINUE:

      • `media-condition$t に合致しない
      • `media-condition$t として評価した結果は偽になる
      ◎ Parse the remaining component values in unparsed size as a <media-condition>. If it does not parse correctly, or it does parse correctly but the <media-condition> evaluates to false, continue to the next iteration of this algorithm. [MQ]
    9. ~RET %~size ◎ Return size and exit this algorithm.
  3. ~IF[ %~fallback横幅 ~NEQ ε ] ⇒ ~RET [ 単位 `px$css による %~fallback横幅 ]として与えられる `length$t 値 ◎ If the above algorithm exhausts unparsed sizes list without returning a size value, follow these steps: ◎ If width is not null, return a <length> with the value width and the unit 'px'.
  4. ~RET `100vw^v 【すなわち,表示域の横幅】 ◎ Return 100vw.

注記: `妥当な~source~size~list$は、 `source-size-list$t 内の最後の~entryとして `source-size-value$t のみを包含する( `media-condition$t は付随しない)が、この構文解析-~algoは,技術的には そのようなものを~list内のどこでも許容し、最初に現れ次第,即時に~sizeとして受容することになる。 これは、将来の拡張を可能化するため, および 末尾の~commaなどの単純な作者~errorに抗して保護するためである。 ◎ While a valid source size list only contains a bare <source-size-value> (without an accompanying <media-condition>) as the last entry in the <source-size-list>, the parsing algorithm technically allows such at any point in the list, and will accept it immediately as the size if the preceding entries in the list weren't used. This is to enable future extensions, and protect against simple author errors such as a final trailing comma.

4.8.4.3.9. ~source密度の正規化-法

`~source集合$を正規化することで、それに含まれる どの`画像~source$の`記述子$iSも,`画素~密度~記述子$にされる。 ◎ An image source can have a pixel density descriptor, a width descriptor, or no descriptor at all accompanying its URL. Normalizing a source set gives every image source a pixel density descriptor.

`~source集合$ %~source集合 の `~source密度を正規化-@ するときは、次を走らせ~MUST: ◎ When asked to normalize the source densities of a source set source set, the user agent must do the following:

  1. %~source~size ~LET %~source集合 の`~source~size$ ◎ Let source size be source set's source size.
  2. %~source集合 内の~EACH ( `画像~source$ %S ) に対し:

    1. %密度 ~LET 1
    2. %S の`記述子$iS に応じて:

      `画素~密度~記述子$
      ~CONTINUE
      `横幅~記述子$
      %密度 ~SET ( %S の`記述子$iSの`横幅~値$ ÷ `~source~size$ )
      注記: `~source~size$ ~EQ 0 の場合の密度は無限大になり、 ( `内在的~横幅$, `内在的~縦幅$ ) は ( 0, 0 ) になる。
    3. %S の`記述子$iS ~SET `密度~値$に %密度 を伴う`画素~密度~記述子$
    ◎ For each image source in source set: • If the image source has a pixel density descriptor, continue to the next image source. • Otherwise, if the image source has a width descriptor, replace the width descriptor with a pixel density descriptor with a value of the width descriptor value divided by the source size and a unit of x. • If the source size is zero, the density would be infinity, which results in the intrinsic dimensions being zero by zero. • Otherwise, give the image source a pixel density descriptor of 1x.
4.8.4.3.10. 環境~変化に対する反応-法

~UAはいつでも、環境における変化に反応するため,次の~algoを走らせて`img$e 要素 %img の画像を更新してよい。 (~UAには、この~algoを常時~走らすことは要求されない — 例えば、利用者が当の頁を見ていなくて,その間に環境が何度か変化する事例においては、~UAは,利用者が頁に戻って来るまで どの画像を利用するか決定するのを待機したいと求めるかもしれない。) ◎ The user agent may at any time run the following algorithm to update an img element's image in order to react to changes in the environment. (User agents are not required to ever run this algorithm; for example, if the user is not looking at the page any more, the user agent might want to wait until the user has returned to the page before determining which image to use, in case the environment changes again in the meantime.)

注記: ~UAには、特に,[ 利用者が`表示域$の~sizeを変更したとき(例:~windowを~resizeしたときや,頁~zoomを変更したとき) / `img$e 要素が`文書の中に挿入され$たとき ]には、[ `密度補正済み$の内在的~sizeが新たな`表示域$に合致する, かつ `~art-direction$が孕まれるときは正しい画像が選ばれる ]ように,この~algoを走らすことが奨励される。 ◎ User agents are encouraged to run this algorithm in particular when the user changes the viewport's size (e.g. by resizing the window or changing the page zoom), and when an img element is inserted into a document, so that the density-corrected intrinsic width and height match the new viewport, and so that the correct image is chosen when art direction is involved.

  1. 次の手続きを`同期区間$として,この~algoの`安定~状態を待受ける$: ◎ Await a stable state. The synchronous section consists of all the remaining steps of this algorithm until the algorithm says the synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

    1. %文書 ~LET %img の`~node文書$ ◎ ↓
    2. ~IF[ %img は`~srcsetまたは~pictureを利用して$いない ]~OR[ %文書 は`作動中$docでない ]~OR[ %img の画像~dataの資源~型 ~EQ `multipart/x-mixed-replace$mt ]~OR[ %img の`処理待ち要請$ ~NEQ ε ] ⇒ ~RET ◎ ⌛ If the img element does not use srcset or picture, its node document is not the active document, has image data whose resource type is multipart/x-mixed-replace, or the pending request is not null, then abort this algorithm.
    3. ( %被選定~source, %被選定~画素~密度 ) ~LET %img の`画像~sourceを選定-$した結果 ◎ ⌛ Let selected source and selected pixel density be the URL and pixel density that results from selecting an image source, respectively.
    4. ~IF[ %被選定~source ~EQ ε ] ⇒ ~RET ◎ ⌛ If selected source is null, then abort these steps.
    5. ~IF[ %被選定~source ~EQ %img の`最後に選定された~source$ ]~AND[ %被選定~画素~密度 ~EQ %img の`現在の画素~密度$ ] ⇒ ~RET ◎ ⌛ If selected source and selected pixel density are the same as the element's last selected source and current pixel density, then abort these steps.
    6. ( %~URL~record, %~URL文字列 ) ~LET %被選定~source を %文書 に`相対的に構文解析-$した ( `結果の~URL~record$, `結果の~URL文字列$ ) ◎ ⌛ Parse selected source, relative to the element's node document, and let urlString be the resulting URL string.\
    7. ~IF[ %~URL文字列 ~EQ ~error ] ⇒ ~RET ◎ If that is not successful, abort these steps.
    8. %~CORS属性~状態 ~LET %img の `crossorigin$a 内容~属性の状態 ◎ ⌛ Let corsAttributeState be the state of the element's crossorigin content attribute.
    9. %生成元 ~LET [ %~CORS属性~状態 ~EQ `~NoCORS$st ならば ε / ~ELSE_ %文書 の`生成元$ ] ◎ ⌛ Let origin be the origin of the img element's node document.
    10. %~client ~LET %文書 の `Window$I ~objの`環境~設定群~obj$ ◎ ⌛ Let client be the img element's node document's Window object's environment settings object.
    11. %~key ~LET 組 ( %~URL文字列, %~CORS属性~状態, %生成元 ) ◎ ⌛ Let key be a tuple consisting of urlString, corsAttributeState, and, if corsAttributeState is not No CORS, origin.
    12. %画像~要請 ~LET 新たな`画像~要請$ ◎ ⌛ Let image request be a new image request\
    13. %画像~要請 の`現在の~URL$ ~SET %~URL文字列 ◎ whose current URL is urlString
    14. %img の`処理待ち要請$ ~LET %画像~要請 ◎ ⌛ Let the element's pending request be image request.

    `同期区間$はここで終端する — 以降の手続きは、同期区間を走らせ終えてから,`並列的$に走らすことになる。 ◎ End the synchronous section, continuing the remaining steps in parallel.

  2. ~IF[ `可用な画像~list$内に %~key に対応する~entryはある ] ⇒ %画像~要請 の`画像~data$ ~SET その~entryの`画像~data$ ◎ If the list of available images contains an entry for key, then set image request's image data to that of the entry. Continue to the next step.
  3. ~ELSE: ◎ Otherwise:

    1. %要請 ~LET ( %~URL~record, `image^l , %~CORS属性~状態 ) を与える下で `~CORSになり得る要請を作成-$した結果 ◎ Let request be the result of creating a potential-CORS request given urlString, "image", and corsAttributeState.
    2. %要請 の:

      • `~client$rq ~SET %~client
      • `起動元$rq ~SET `imageset^l
      • `同期~flag$ ~SET ~ON
      • `~referrer施策$rq ~SET %img の `referrerpolicy$a 属性の現在の状態
      ◎ Set request's client to client, initiator to "imageset", and set request's synchronous flag. ◎ Set request's referrer policy to the current state of the element's referrerpolicy attribute.
    3. %応答 ~LET %要請 を用いて`~fetch$した結果 ◎ Let response be the result of fetching request.
    4. ~IF[ 次のいずれかが満たされる ]…: ◎ ↓

      • %応答 の`非安全~応答$は`~network~error$である ◎ If response's unsafe response is a network error or\
      • `画像~sniff時の規則$を適用して決定される画像の形式は未~supportである ◎ if the image format is unsupported (as determined by applying the image sniffing rules, again as mentioned earlier), or\
      • ~UAは %画像~要請 の画像は,何らかの致命的な仕方で画像の寸法を得れないまでに壊れていると決定できる ◎ if the user agent is able to determine that image request's image is corrupted in some fatal way such that the image dimensions cannot be obtained, or\
      • 画像~資源の型 ~EQ `multipart/x-mixed-replace$mt ◎ if the resource type is multipart/x-mixed-replace,\

      …ならば:

      1. %img の`処理待ち要請$ ~SET ε
      2. ~RET
      ◎ then let pending request be null and abort these steps.
    5. ~ELSE( %応答 の`非安全~応答$は %画像~要請 の`画像~data$を表現する) ⇒ %応答 は[ `~CORS同一生成元$, `~CORS非同一生成元$ ]のいずれかになり、それに応じて,画像の`生成元$に影響する(例: `canvas$e にて利用されるとき)。 ◎ Otherwise, response's unsafe response is image request's image data. It can be either CORS-same-origin or CORS-cross-origin; this affects the origin of the image itself (e.g., when used on a canvas).
  4. 次の下位手続きを走らす`~taskを~queueする$: ◎ Queue a task to run these steps:

    1. ~IF[ %img はこの~algoを開始した時点から`関連する変異$を経た ]:

      1. %img の`処理待ち要請$ ~LET ε
      2. ~RET
      ◎ If the img element has experienced relevant mutations since this algorithm started, then let pending request be null and abort these steps.
    2. %img の ( `最後に選定された~source$, `現在の画素~密度$ ) ~SET ( %被選定~source, %被選定~画素~密度 ) ◎ Let the img element's last selected source be selected source and the img element's current pixel density be selected pixel density.
    3. %画像~要請 の`状態$ ~SET `完全に可用$st ◎ Set image request to the completely available state.
    4. %文書 の`可用な画像~list$に,画像を追加する — この画像は ⇒ ~key %~key で識別され, `上層~caching無視-~flag$ は ~ON にされるとする ◎ Add the image to the list of available images using the key key, with the ignore higher-layer caching flag set.
    5. %img の`処理待ち要請を現在の要請に昇格する$ ◎ Upgrade the pending request to the current request.
    6. %img の呈示を適切に更新する ◎ Update the img element's presentation appropriately.
    7. %img に向けて,名前 `load$et の`~eventを発火する$ ◎ Fire an event named load at the img element.

4.8.4.4. ~textを画像の代替として提供する際の要件

【 この節は、未訳。 ( 他サイトによる和訳 ) 】

4.8.13 `map^e 要素

`分類$
`~flow内容$/`句内容$/`可触~内容$ ◎ Flow content. ◎ Phrasing content. ◎ Palpable content.
`この要素を利用できる文脈$
`句内容$が期待される所。 ◎ Where phrasing content is expected.
`内容~model$
`透過的$ ◎ Transparent.
`text/html における~tag省略$
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$
`大域~属性$ ◎ Global attributes
`name$a — `usemap$a 属性から`参照-$するための, `画像~map$の名前 ◎ name — Name of image map to reference from the usemap attribute
`~DOM~interface$
[Exposed=Window,
 `HTMLConstructor$]
interface `HTMLMapElement@I : `HTMLElement$I {
  [`CEReactions$] attribute DOMString `name$m;
  [SameObject] readonly attribute `HTMLCollection$I `areas$m;
};

`map$e 要素は、 `img$e 要素, および 子孫の `area$e 要素との併用で,`画像~map$を定義する。 この要素は、その子たちを`表現-$する。 ◎ The map element, in conjunction with an img element and any area element descendants, defines an image map. The element represents its children.

`name@a 属性は、この~mapに名前を与えて,他から`参照-$できるようにする。 `map$e 要素は、この属性を有してい~MUST。 この属性に指定する値は、`~ASCII空白$を含んでいたり, 空~文字列にされては~MUST_NOT。 また、[ 同じ`木$内の別の `map$e 要素の `name$a 属性の値 ]と等しくなっては~MUST_NOT。 `id$a 属性も指定された場合、両~属性とも同じ値にされ~MUST。 ◎ The name attribute gives the map a name so that it can be referenced. The attribute must be present and must have a non-empty value with no ASCII whitespace. The value of the name attribute must not be equal to the value of the name attribute of another map element in the same tree. If the id attribute is also specified, both attributes must have the same value.

%map . `areas$m
この `map$e 内の `area$e 要素たちからなる `HTMLCollection$I を返す。 ◎ Returns an HTMLCollection of the area elements in the map.
`areas@m
次のようにされた `HTMLCollection$I を返さ~MUST ⇒# 根は 此れ, ~filterは `area$e 要素のみに合致する ◎ The areas attribute must return an HTMLCollection rooted at the map element, whose filter matches only area elements.
`name@m
同じ名前の内容~属性を`反映-$し~MUST。 ◎ The IDL attribute name must reflect the content attribute of the same name.

画像~mapは、保守し易くなるよう,頁~上の他の内容との併用により定義できる。 次の頁~例には、先頭に画像~mapがあり,末尾に対応する一連の~text~linkがある。 ◎ Image maps can be defined in conjunction with other content on the page, to ease maintenance. This example is of a page with an image map at the top of the page and a corresponding set of text links at the bottom.

`map-1^xCode

4.8.14 `area^e 要素

`分類$
`~flow内容$ / `句内容$ ◎ Flow content. ◎ Phrasing content.
`この要素を利用できる文脈$
`句内容$が期待される所 — ただし、先祖に `map$e 要素がある場合に限る。 ◎ Where phrasing content is expected, but only if there is a map element ancestor.
`内容~model$
`なし$。 ◎ Nothing.
`text/html における~tag省略$
`終了tag$はない。 ◎ No end tag.
`内容~属性$
`大域~属性$ ◎ Global attributes
`~alt0$a — 画像が可用でないときに利用される代用~text ◎ alt — Replacement text for use when images are not available
`coords$a — `画像~map$内に作成される図形の座標を与える。 ◎ coords — Coordinates for the shape to be created in an image map
`shape$a — `画像~map$内に作成される図形の種類を与える。 ◎ shape — The kind of shape to be created in an image map
`href$a — `~hyperlink$の~addressを与える。 ◎ href — Address of the hyperlink
`target$a — `~hyperlink$による`~navi$対象の`閲覧文脈$を与える。 ◎ target — Browsing context for hyperlink navigation
`download$a — 資源へ~navigateする代わりに,それを~downloadするかどうか, および そうする場合の~file名を与える。 ◎ download — Whether to download the resource instead of navigating to it, and its file name if so
`ping$a — ~pingする`~URL$を与える。 ◎ ping — URLs to ping
`rel$a — 当の`~hyperlink$を包含している文書における所在と行先~資源との関係性を与える。 ◎ rel — Relationship between the location in the document containing the hyperlink and the destination resource
`~referrerpolicy0$a — この要素により起動される`~fetch$に対する`~referrer施策$を決定する。 ◎ referrerpolicy — Determines the referrer policy for fetches initiated by the element
`~DOM~interface$
[Exposed=Window,
 `HTMLConstructor$]
interface `HTMLAreaElement@I : `HTMLElement$I {
  [`CEReactions$] attribute DOMString `alt$mA;
  [`CEReactions$] attribute DOMString `coords$mA;
  [`CEReactions$] attribute DOMString `shape$mA;
  [`CEReactions$] attribute DOMString `target$mA;
  [`CEReactions$] attribute DOMString `download$mA;
  [`CEReactions$] attribute USVString `ping$mA;
  [`CEReactions$] attribute DOMString `rel$mA;
  [SameObject, PutForwards=`value$m] readonly attribute `DOMTokenList$I `relList$mA;
  [`CEReactions$] attribute DOMString `referrerPolicy$mA;
};
`HTMLAreaElement$I implements `HTMLHyperlinkElementUtils$I;

`area$e 要素は、何らかの~textを伴う~hyperlinkと `画像~map$上の[ 対応している区画, または 無反応域 ]を`表現-$する。 ◎ The area element represents either a hyperlink with some text and a corresponding area on an image map, or a dead area on an image map.

`area$e 要素は、親~nodeがないか, または いずれかの先祖は `map$e 要素で~MUST。 ◎ An area element with a parent node must have a map element ancestor.

`area$e 要素が `href$a 属性を有する場合、要素は`~hyperlink$を表現する。 この事例では、要素は `~alt0@a 属性も有してい~MUST。 それは、~hyperlinkの~textを与える。 この属性に指定する~textは、[[ `画像~map$の他の~hyperlinkに対し指定された~text, および 画像の代替~textは伴いつつ, 画像~自身は伴わずに呈示される ]ときに,[ その~hyperlinkが、その~textなしに,その図形が画像に適用された上で利用されたとき ]と同じ種類の~~選択肢を利用者に提供する ]もので~MUST — ただし、同じ `画像~map$内に[ 同じ資源を指す別の `area$e 要素があって,~~空でない `~alt0$a 属性を有している ]場合は,~~空にされてもよい。 ◎ If the area element has an href attribute, then the area element represents a hyperlink. In this case, the alt attribute must be present. It specifies the text of the hyperlink. Its value must be text that, when presented with the texts specified for the other hyperlinks of the image map, and with the alternative text of the image, but without the image itself, provides the user with the same kind of choice as the hyperlink would when used without its text but with its shape applied to the image. The alt attribute may be left blank if there is another area element in the same image map that points to the same resource and has a non-blank alt attribute.

`area$e 要素が `href$a 属性を有さない場合:

  • 要素が表現する区画は、選択できなくされ~MUST。
  • `~alt0$a 属性は省略され~MUST。
◎ If the area element has no href attribute, then the area represented by the element cannot be selected, and the alt attribute must be omitted.

両~事例とも、 `shape$a/ `coords$a 属性は,当の区画を指定する。 ◎ In both cases, the shape and coords attributes specify the area.

`shape@a 属性は、`列挙ed属性$である。 次の表の 2 列目, 3 列目に、この属性~用に定義される各種~keywordを挙げる。 それぞれ、表の同じ行の 1 列目に与える状態に対応付けられる。 3 列目に挙げる~keywordは、不適合である。 ◎ The shape attribute is an enumerated attribute. The following table lists the keywords defined for this attribute. The states given in the first cell of the rows with keywords give the states to which those keywords map. Some of the keywords are non-conforming, as noted in the last column.

状態 ~keyword ~keyword(不適合)
`真円$st `circle@v `circ@v
`既定$st `default@v
`多角形$st `poly@v `polygon@v
`矩形$st `rect@v `rectangle@v

この属性は省略されてよい。 `値なしに対する既定の状態$は、 `矩形$st 状態とする。 ◎ The attribute may be omitted. The missing value default is the rectangle state.

`coords@a 属性に指定する値は、`妥当な浮動小数点数~list$を包含し~MUST。 この属性は、 `shape$a 属性で記述される図形の座標を与える。 この属性の処理については、`画像~map$処理~modelの一部として述べる。 加えて,この属性は、 `area$e 要素の `shape$a 属性の状態に応じて,以下の要件を満たしてい~MUST — 以下に述べる どの座標も、画像の左上隅から相対的に, 1 個目の成分は右方, 2 個目の成分は下方への距離を表すとし、どの数も `px$css 単位とする: ◎ The coords attribute must, if specified, contain a valid list of floating-point numbers. This attribute gives the coordinates for the shape described by the shape attribute. The processing for this attribute is described as part of the image map processing model.

`真円@st
この状態の下では、要素は `coords$a 属性を有していて,その値は 3 個の整数からなり, 3 個目は 0 以上で~MUST 。 ( 1,2 ) 個目の整数が成す座標は 真円の中心, 3 個目の整数は 真円の半径を表現してい~MUST。 ◎ In the circle state, area elements must have a coords attribute present, with three integers, the last of which must be non-negative. The first integer must be the distance in CSS pixels from the left edge of the image to the center of the circle, the second integer must be the distance in CSS pixels from the top edge of the image to the center of the circle, and the third integer must be the radius of the circle, again in CSS pixels.
`既定@st
この状態の下では、要素は `coords$a 属性を有しては~MUST_NOT(区画は画像~全体になる) ◎ In the default state state, area elements must not have a coords attribute. (The area is the whole image.)
`多角形@st
この状態の下では、要素は `coords$a 属性を有していて,その値は 6 個~以上かつ偶数~個の整数からなってい~MUST。 各 正~整数 %i に対し ( %i × 2 − 1, %i × 2 ) 個目の整数が成す座標は,多角形の %i 個目の頂点を表現してい~MUST。 ◎ In the polygon state, area elements must have a coords attribute with at least six integers, and the number of integers must be even. Each pair of integers must represent a coordinate given as the distances from the left and the top of the image in CSS pixels respectively, and all the coordinates together must represent the points of the polygon, in order.
`矩形@st
この状態の下では、要素は `coords$a 属性を有していて,その値は 正確に 4 個の整数 %x1, %y1, %x2, %y2 からなっていて[ %x1 ~LT %x2 ], かつ[ %y1 ~LT %y2 ]で~MUST。 座標[ ( %x1, %y1 ) / ( %x2, %y2 ) ]は、矩形の[ 左上隅 / 右下隅 ]を表現してい~MUST。 ◎ In the rectangle state, area elements must have a coords attribute with exactly four integers, the first of which must be less than the third, and the second of which must be less than the fourth. The four points must represent, respectively, the distance from the left edge of the image to the left side of the rectangle, the distance from the top edge to the top side, the distance from the left edge to the right side, and the distance from the top edge to the bottom side, all in CSS pixels.

~UAは、 `area$e 要素を用いて作成された[ `~hyperlinkを追う$/ `~hyperlinkを~downloadする$ ]ことを利用者に許容するときに,~linkをどう追うかは、次~節に述べるように[ `href$a, `target$a, `download$a, `ping$a ]属性により決まる。 ~UAは、利用者が~linkを追う前に, `rel$a 属性を利用して,~target資源に見込まれる資質を 利用者に指示してよい。 ◎ When user agents allow users to follow hyperlinks or download hyperlinks created using the area element, as described in the next section, the href, target, download, and ping attributes decide how the link is followed. The rel attribute may be used to indicate to the user the likely nature of the target resource before the user follows the link.

`area$e 要素が `href$a 属性を有さない場合、[ `target$a / `download$a / `ping$a / `rel$a / `~referrerpolicy0$a ]属性も有しては~MUST_NOT。 ◎ The target, download, ping, rel, and referrerpolicy attributes must be omitted if the href attribute is not present.

`area$e 要素が `itemprop$a 属性を有する場合、 `href$a 属性も有してい~MUST。 ◎ If the itemprop attribute is specified on an area element, then the href attribute must also be specified.

`area$e 要素 %要素 の`作動化の挙動$は ⇒ %要素 の `download$a 属性, および利用者から表された選好が あれば,それに従って、 %要素 により作成された[ `~hyperlinkを追う$/ `~hyperlinkを~downloadする$ ](もしあれば) ◎ The activation behavior of area elements is to follow the hyperlink or download the hyperlink created by the area element, if any, and as determined by the download attribute and any expressed user preference.

`alt@mA
`coords@mA
`target@mA
`download@mA
`ping@mA
`rel@mA
いずれも,対応する同じ名前の内容~属性を`反映-$し~MUST。 ◎ The IDL attributes alt, coords, target, download, ping, and rel, each must reflect the respective content attributes of the same name.
`shape@mA
`shape$a 内容~属性を`反映-$し~MUST。 ◎ The IDL attribute shape must reflect the shape content attribute.
`relList@mA
`rel$a 内容~属性を`反映-$し~MUST。 ◎ The IDL attribute relList must reflect the rel content attribute.
`referrerPolicy@mA
`既知の値のみに制限され$る下で, `~referrerpolicy0$a 内容~属性を`反映-$し~MUST。 ◎ The IDL attribute referrerPolicy must reflect the referrerpolicy content attribute, limited to only known values.

4.8.15 画像 ~map

4.8.15.1 著作

`画像~map@ は、画像~上の幾何的な区画に`~hyperlink$を結付けることを可能にする。 ◎ An image map allows geometric areas on an image to be associated with hyperlinks.

[ `img$e 要素による画像, または 画像を表現している `object$e 要素 ]には、[ `img$e / `object$e ]要素~上に `usemap@a 属性を指定することにより,( `map$e 要素による)画像~mapに結付けられてよい。 `usemap$a 属性に指定する値は、ある `map$e 要素を指す`妥当な~hash名~参照$で~MUST。 ◎ An image, in the form of an img element or an object element representing an image, may be associated with an image map (in the form of a map element) by specifying a usemap attribute on the img or object element. The usemap attribute, if specified, must be a valid hash-name reference to a map element.

次のような見かけの画像を考える: ◎ Consider an image that looks as follows:

`sample-usemap^xCode
等間隔に配置された, 4 個の縁取りのある図形: 栗色の穴あき四角形, 緑色の円, 紺色の三角形, 黄色の十文字星形 ◎ A line with four shapes in it, equally spaced: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.

色付けられた区画だけ~click可能にさせたい場合、次にようにして行える: ◎ If we wanted just the colored areas to be clickable, we could do it as follows:

`usemap-1^xCode

4.8.15.2 処理~model

[ `img$e / `object$e ]要素が画像を表現していてる, かつ `usemap$a 属性を有する場合、~UAは,次に従ってそれを処理し~MUST: ◎ If an img element or an object element representing an image has a usemap attribute specified, user agents must process it as follows:

  1. %~map ~LET 文脈~node 要素を与える下で,属性の値を `map$e 要素を指す`~hash名~参照として構文解析-$した結果 ◎ Parse the attribute's value using the rules for parsing a hash-name reference to a map element, with the element as the context node. This will return either an element (the map) or null.
  2. ~IF[ %~map ~EQ ~NULL ] ⇒ ~RET (以降,画像は画像~mapには結付けられない。) ◎ If that returned null, then abort these steps. The image is not associated with an image map after all.
  3. %areas ~LET %~map の子孫であるすべての `area$e 要素たち ◎ Otherwise, the user agent must collect all the area elements that are descendants of the map. Let those be the areas.

対話的~UAは、 %areas を,次の 2 種類の仕方いずれかに従って処理し~MUST: ◎ Having obtained the list of area elements that form the image map (the areas), interactive user agents must process the list in one of two ways.

~UAは、 `img$e 要素が表現する~textを示すことを意図する場合: ◎ If the user agent intends to show the text that the img element represents, then it must use the following steps.
注記: 画像を[ ~supportしない/不能化されている ]~UAにおいては、 `object$e 要素は画像を表現し得ないので、この仕方は決して適用されない(代わりに`~fallback内容$が示される)。 したがって、次の手続きが適用されるのは `img$e 要素に限られる。 ◎ In user agents that do not support images, or that have images disabled, object elements cannot represent images, and thus this section never applies (the fallback content is shown instead). The following steps therefore only apply to img elements.
  1. %areas 内の次に該当する `area$e 要素は、すべてを除去する

    • `href$a 属性を有さないもの
    • `~alt0$a 属性を有さないもの
    • `~alt0$a 属性の値は空~文字列である, かつ %areas 内に別の `area$e 要素 %A があって,両~要素とも 同じ値をとる `href$a 属性を有していて, %A は 空でない `~alt0$a 属性を有する。
    ◎ Remove all the area elements in areas that have no href attribute. ◎ Remove all the area elements in areas that have no alt attribute, or whose alt attribute's value is the empty string, if there is another area element in areas with the same value in the href attribute and with a non-empty alt attribute.
  2. 結果の %areas 内の各 `area$e 要素は、`~hyperlink$を表現する — それらの~hyperlinkはすべて、 `img$e の~textに結付けられる方式で利用者に可用にされるべきである。 ◎ Each remaining area element in areas represents a hyperlink. Those hyperlinks should all be made available to the user in a manner associated with the text of the img.
この文脈においては,~UAは、[ `alt^a 属性を有さない/有していて[ 空~文字列 /何らかの可視でない~text ]が指定されている ]ような[ `area$e , `img$e ]要素を、[[ 作者が提供した相応しい~textは欠いていることを指示する ]ことを意図するような,自身が定義する流儀 ]で表現してよい。 ◎ In this context, user agents may represent area and img elements with no specified alt attributes, or whose alt attributes are the empty string or some other non-visible text, in a user-agent-defined fashion intended to indicate the lack of suitable author-provided text.
~UAは、画像を示す, かつ[ 利用者が画像と対話して~hyperlinkを選択することを許容する ]ことを意図する場合:
画像は、 %areas 内の各 `area$e 要素から取り出された図形たちの集合に結付けられ~MUST — %~map 内の図形たちは、`木~順序$で最初に近いものほど利用者から見て手前になるよう,多層化するものとする。 ◎ If the user agent intends to show the image and allow interaction with the image to select hyperlinks, then the image must be associated with a set of layered shapes, taken from the area elements in areas, in reverse tree order (so the last specified area element in the map is the bottom-most shape, and the first element in the map, in tree order, is the top-most shape).

%areas 内の各 `area$e 要素 %要素 に対しては、当の画像に重ねる[ %要素 が表現する図形の層 ]を次に従って得~MUST: ◎ Each area element in areas must be processed as follows to obtain a shape to layer onto the image:

  1. %状態 ~LET %要素 の `shape$a 属性の状態 ◎ Find the state that the element's shape attribute represents.
  2. %座標s ~LET %要素 が `coords$a 属性を[ 有するならば、その値を `浮動小数点数~listとして構文解析-$した結果 / 有さないならば空~list ] ◎ Use the rules for parsing a list of floating-point numbers to parse the element's coords attribute, if it is present, and let the result be the coords list. If the attribute is absent, let the coords list be the empty list.
  3. %必要個数 ~LET %状態 に応じて[ `真円$st ならば 3 / `既定$st ならば 0 / `多角形$st ならば 6 / `矩形$st ならば 4 ] ◎ If the number of items in the coords list is less than the minimum number given for the area element's current state, as per the following table, then the shape is empty; abort these steps. State Minimum number of items Circle state 3 Default state 0 Polygon state 6 Rectangle state 4
  4. ~IF[ %座標s 内の~itemの個数 ~LT %必要個数 ] ⇒ ~RET ε(図形は空) ◎ Check for excess items in the coords list as per the entry in the following list corresponding to the shape attribute's state: Circle state • Drop any items in the list beyond the third. Default state • Drop all items in the list. Polygon state • Drop the last item if there's an odd number of items. Rectangle state • Drop any items in the list beyond the fourth. If the shape attribute represents the rectangle state, and the first number in the list is numerically greater than the third number in the list, then swap those two numbers around. If the shape attribute represents the rectangle state, and the second number in the list is numerically greater than the fourth number in the list, then swap those two numbers around.
  5. ~IF[ %状態 ~EQ `真円$st ]~AND[ %座標s 内の 3 個目の数 ~EQ 0 ] ⇒ ~RET ε(図形は空) ◎ If the shape attribute represents the circle state, and the third number in the list is less than or equal to zero, then the shape is empty; abort these steps.
  6. ~RET %状態 に応じて,次で与えられる図形 — 以下におけるどの座標も画像の左上隅を原点とし,座標や距離は `px$css 単位とする: ◎ Now, the shape represented by the element is the one described for the entry in the list below corresponding to the state of the shape attribute:

    `真円$st
    中心は %座標s の ( 1, 2 ) 個目の数が成す座標, 半径は %座標s の 3 個目の数 で与えられる真円 ◎ Let x be the first number in coords, y be the second number, and r be the third number. ◎ The shape is a circle whose center is x CSS pixels from the left edge of the image and y CSS pixels from the top edge of the image, and whose radius is r CSS pixels.
    `既定$st
    画像の全体を正確に覆う矩形 ◎ The shape is a rectangle that exactly covers the entire image.
    `多角形$st
    各 整数[ %i ~IN { 1 ~LTE %i ~LTE ( %座標s 内の~item数 ÷ 2 ) } ]に対し, %i 個目の頂点は[ %座標s の ( %i × 2 − 1, %i × 2 ) 個目の数が成す座標 ]で与えられる,多角形 — この図形の内部域は、~even-odd規則を用いて確立されるとする `GRAPHICS$r ◎ Let xi be the (2i)th entry in coords, and yi be the (2i+1)th entry in coords (the first entry in coords being the one with index 0). ◎ Let the coordinates be (xi, yi), interpreted in CSS pixels measured from the top left of the image, for all integer values of i from 0 to (N/2)-1, where N is the number of items in coords. ◎ The shape is a polygon whose vertices are given by the coordinates, and whose interior is established using the even-odd rule. [GRAPHICS]
    `矩形$st
    [ %座標s の ( 1, 2 ) 個目の数が成す座標, %座標s の ( 3, 4 ) 個目の数が成す座標 ]の両者を覆う最小の矩形 ◎ Let x1 be the first number in coords, y1 be the second number, x2 be the third number, and y2 be the fourth number. ◎ The shape is a rectangle whose top-left corner is given by the coordinate (x1, y1) and whose bottom right corner is given by the coordinate (x2, y2), those coordinates being interpreted as CSS pixels from the top left corner of the image.

    【 この段の目的においては、 %座標s が不適合であっても(例: ~itemが余分にある,あるいは `矩形$st のときに[ 1 個目の数 ~GT 3 個目の数 ]など),図形を成す。 】

    歴史的~理由から,各 座標は、~CSS[ `width$p / `height$p ]~prop†により伸張された後の,表示されている画像に相対的に解釈され~MUST(†または,非~CSS~browserにおいては、画像~要素の[ `width^a / `height^a ]属性 — ~CSS~browserは,それらの属性を前述の~CSS~propに対応付ける)。 ◎ For historical reasons, the coordinates must be interpreted relative to the displayed image after any stretching caused by the CSS 'width' and 'height' properties (or, for non-CSS browsers, the image element's width and height attributes — CSS browsers map those attributes to the aforementioned CSS properties).

    注記: ~browserによる~zoom特色機能や,~CSSや~SVGを用いて適用された変形-(座標系変換)は、これらの座標には影響しない。 ◎ Browser zoom features and transforms applied using CSS or SVG do not affect the coordinates.

[ 上の~algoにより多層化された図形たちの集合 ]に結付けられている画像との[ ~pointing装置による対話による,関連する利用者~対話~event ]は、~pointing装置が指示した地点を覆う図形が[ あれば それらのうち最も手前側の層にあるもの / なければ 画像~要素~自身 ]に向けて、最初に発火され~MUST。 ~UAは、`~hyperlink$を表現している個々の `area$e 要素が[ 選択される/作動化される ]ことを許容してもよい(例:~keyboardを用いて)。 ◎ Pointing device interaction with an image associated with a set of layered shapes per the above algorithm must result in the relevant user interaction events being first fired to the top-most shape covering the point that the pointing device indicated, if any, or to the image element itself, if there is no shape covering that point. User agents may also allow individual area elements representing hyperlinks to be selected and activated (e.g. using a keyboard).

注記: 同じ `map$e 要素(およびその `area$e 要素たち)に複数の[ `img$e /`object$e ]要素が結付けられ得るので、同じ `area$e 要素が文書の複数の`~focus可能域$に対応することもあり得る。 ◎ Because a map element (and its area elements) can be associated with multiple img and object elements, it is possible for an area element to correspond to multiple focusable areas of the document.

画像~mapは`~live$である — ~DOMが変異された場合、~UAは,上の画像~map用の~algoを再度~走らせたかのように動作し~MUST。 ◎ Image maps are live; if the DOM is mutated, then the user agent must act as if it had rerun the algorithms for image maps.