CSS Images Module Level 5

2.1. 画像の~fallbackと注釈： `image$f 記法

`~level 4$ は、 単純な形をとる `image$f 関数を定義する — それは、 単色かつ寸法を伴わない画像を生成する。 この~levelは、 この関数に いくつか追加的な機能を導入する。 ◎ [css-images-4] defines a simple form of the image() function, which generates a solid-color dimensionless image. This level introduces a number of additional functions.

`image$f 関数は、 次を作者に許容する： ◎ The image() function allows an author to:

• `媒体~素片$を利用して， 画像を成すある部位を切抜く。 ◎ use media fragments to clip out a portion of an image
• 単色を画像として利用する。 ◎ use a solid color as an image
• 指定された~URLにある画像が［ ~downloadできない／復号できない ］ときの，単色~画像への~fallbackを指定する。 ◎ fallback to a solid-color image, when the image at the specified url can’t be downloaded or decoded
• 画像の~metadata内に指定された［ 画像の方位 ］に自動的に従うようにする。 ◎ automatically respect the image orientation specified in the image’s metadata

`image$f 記法は、 次で定義される： ◎ The image() notation is defined as:

`image@f
	= image( `image-tags$t? [ `image-src$t? , `color$t? ]! )
`image-tags@t
	= ltr
	| rtl
`image-src@t
	= `url$t
	| `string$t

`image$f 内で利用される `string$t は、 `url$t を表現する。 ~CSSにおける通例の~URLと同じく、 `image$f 値に指定された相対~URLは， 算出d値を得るときに （ `CSS-VALUES-3$r に述べられるとおりに） 絶対~URLに解決される。 ◎ A <string> used in image() represents a <url>. As usual for URLs in CSS, relative URLs are resolved to an absolute URL (as described in Values & Units [CSS-VALUES-3]) when a specified image() value is computed.

画像の~metadata — EXIF など — 内に方位が指定されていた場合、 ~UAは，指定されたとおりに［ 画像を回転したり裏返して，正しく方位させる ］モノトスル。 ◎ If the image has an orientation specified in its metadata, such as EXIF, the UA must rotate or flip the image to correctly orient it as the metadata specifies.

body      { color: black; background: white; }
p.special { color: white; background: url("dark.png") black; }

body      { color: black; background: white; }
p.special { color: white; background: image("dark.png", black); }

background-image: image('sprites.svg#xywh=80,0,40,40')【！40,0,20,20】

background-image: url('swirl.png'); /* 旧~UA */
background-image: image('sprites.png#xywh=80,0,40,40')【！10,30,60,20】; /* 新~UA */

background-image: image(rgba(0,0,255,.5)), url("bg-image.png");

<ul style="list-style-image: image(ltr 'arrow.png');">
  <li dir='ltr'>~bulletは左にあります。</li>
  <li dir='rtl'>~bulletは右にあります。</li>
</ul>

☞ ~bulletは左にあります。
  。すまりあに右は~tellub ☜

3.1. ~view~boxの設定-法： `object-view-box^p ~prop

`object-view-box$p ~propは、 要素~用の~view~boxを指定する — それは、 当の要素の内容を［ ~zoomする／~panする ］ことを許容する。 それは、 ~SVGにおいては `viewBox$a 属性に対応付けられる。 `SVG2$r ◎ The object-view-box property specifies a "view box" over an element, which allows zooming or panning over the element’s contents. It maps to the <svg viewBox> attribute in SVG. [SVG2]

挙動が`~SVGと適正に整合する＠~CSSissue/7058#issuecomment-1057553833$ことを~~確保する。 ◎ Make sure behavior is properly consistent for SVG.

`none@v

当の要素は、 ~view~boxを有さない。 ◎ The element does not have a view box.

`basic-shape-rect$t

当の要素が［ `生来な横幅$, `生来な縦幅$ ］どちらも有さない場合、 この値による効果は無く， `none$v と類似になる。 ◎ If the element does not have both a natural width and a natural height, this value has no effect, similar to none.

他の場合、 当の要素~用の~view~boxを指定する： ◎ Otherwise, specifies a view box for the element.

• ~view~boxは、 `basic-shape-rect$t を［ 当の要素の`生来な~size$により形成される`基準~box$ ］を~~基準に解決することにより得される。 ◎ First, resolve the <basic-shape-rect> against a reference box formed by the element’s natural sizes to obtain the element’s view box.
• 当の要素の`生来な~size$は、 すべての目的において，~view~boxの［ 横幅, 縦幅 ］に等しいものとして扱われる。 当の要素が`生来な縦横比$を有する場合、 代わりに~view~boxと同じ比率を有するものとして扱われる。 `object-position$p や `object-fit$p などによる， 当の要素を成す内容の［ ~size／位置 ］に対する更なる調整は、 代わりに，~view~boxに対し遂行される。 ◎ For all purposes, the element is now treated as having natural sizes equal to the view box’s width and height. If the element had a natural aspect ratio, it’s now treated as instead having the same ratio as the view box. Further adjustments to the size/position of the element’s contents, such as object-position or object-fit, are similarly performed on the view box instead.
• 当の要素が塗られるときには、 その内容は，元の`生来な~size$から~view~boxの~sizeへ拡縮され、 更なる調整（前項）があれば，それに則って拡縮され, 並進される。 ◎ When the element is painted, its contents are scaled and translated such that the element’s contents retain the same position and size, relative to the view box’s final size and position, that they had when the view box was determined (above).

~view~boxの面積が 0 の場合に何が起こるかは、 まだ定義されていない。 それは~error事例なので、 精確な挙動は重要でない — ［ 実装が，それについて何を行うよう求める ］かを調べる必要があるだけである。 ◎ Have not yet defined what happens if the view box is zero-area. It’s an error case, so precise behavior isn’t important; just need to see what impls want to do about it.

注記： `置換され$る要素には、 組込みの “~view~box” の観念を有するものもある — `svg$e 要素など。 他が指定されない限り、 この~propには，そのような観念との相互作用は無い。 当の組込みの観念には、 通常通り効果があり，当の要素を`生来な~size$で生産する — それから、 この~propが，その上層に適用される。 ◎ Note: Some replaced elements might have a built-in notion of a "view box", such as the svg element. Unless otherwise specified, this property does not interact with such notions; the built-in notion has its effect as normal, producing a replaced element with natural sizes, then this property applies on top of that.

課題： ここに基本的な例を与える必要がある。 ~zoom時における拡大縮小や `object-fit$p との相互作用を明らかにして、 当の~view~boxの外側にある各部がどう塗られ得るかを表示するような。 ◎ Issue: example here. Need a basic one showing off zooming in, one showing off zooming out, and one showing off interaction with object-fit to display how the parts outside the viewbox can still be painted.