CSS Shapes Module Level 1 （日本語訳）

◎要約

この~module（ CSS Shapes ）は、 ~CSSにて利用するための幾何的~図形について述べる。この~moduleの~level 1 は、 `浮動体$に適用できる。例えば，浮動体に真円~図形が指定された場合、周りの行内~内容は — 浮動体の`~margin~box$に代えて — その真円~図形を`回込む$ようになる。 ◎ CSS Shapes describe geometric shapes for use in CSS. For Level 1, CSS Shapes can be applied to floats. A circle shape on a float will cause inline content to wrap around the circle shape instead of the float’s bounding box.

~CSSisaLANG

1. 序論

◎非規範的

図形（ `shape^en ）は、 ~CSS値として利用できる任意な幾何を定義する。この仕様は、要素の`浮動-区画$の幾何を制御する，各種~propを定義する。 `shape-outside$p ~propは、図形~値を利用して，`浮動体$用の`浮動-区画$を定義する。 ◎ Shapes define arbitrary geometries that can be used as CSS values. This specification defines properties to control the geometry of an element’s float area. The shape-outside property uses shape values to define the float area for a float.

注記：この~moduleの将来~levelでは、浮動体でない要素~上での図形の利用も許容することになる。 `CSS-MASKING$r, `CSS3-EXCLUSIONS$r などの他の~CSS~moduleも図形を用立て得る。 ◎ Note: Future levels of CSS Shapes will allow use of shapes on elements other than floats. Other CSS modules can make use of shapes as well, such as CSS Masking [CSS-MASKING] and CSS Exclusions [CSS3-EXCLUSIONS].

注記： ~UAが［この~module, `CSS3-EXCLUSIONS$r ］どちらも実装する場合、 `shape-outside$p ~propが`排他体$用の`排他~区画$を定義する。 ◎ Note: If a user agent implements both CSS Shapes and CSS Exclusions, the shape-outside property defines the exclusion area for an exclusion.

注記：この~moduleの将来~levelでは、要素の中で内容を包装する図形を定義するような， `shape-inside^p ~propが定義されることになる。 ◎ Note: A future level of CSS Shapes will define a shape-inside property, which will define a shape to wrap content within the element.

1.1. ~module間の相互作用

この~moduleは、 `CSS2$r 9 章に定義される`浮動体$の特能を拡張する。 ◎ This module extends the float features defined in [CSS2] chapter 9.

1.2. 値~定義

【この節の内容は、 `~CSS日本語訳共通~page＠~CSScommon#values$に移譲。】

1.3. 各種用語

`回込む@ （ `wrapping^en ／ `wrap around^en 〜† ） ◎ Wrap: この仕様が利用する用語 `回込む$は、 `CSS2$r § 9 に定義されるとおり，内容が`浮動-区画$の脇に~flowすることを~~意味する。内容は、［左浮動~boxに対してはその右~脇／右浮動~boxに対してはその左~脇］に`回込む$。この`回込み$により、 `浮動体$の`側方$に来る各~行l~boxは，［ `浮動-区画$と~~重ならないよう，必要yなだけ短縮される］ことになる。 ◎ This specification uses the term wrap to refer to flowing content around the sides of a float area, defined in [CSS2] chapter 9. Content wraps around the right side of a left-floated box, and content wraps around the left side of a right-floated box. One result of this wrapping is that line boxes next to a float are shortened as necessary to avoid intersections with the float area.; 【† 直訳するなら “〜の周りを包装する” — 対訳の “回込む” は、前置詞 `around^en に~~不可分的に対応する。】
`浮動-区画@ （ `float area^en ） ◎ Float area: 内容が`浮動体$を`回込む$ときに利用される区画。浮動体の挙動~用の規則にて，内容がどこへ~flowするかを決定するときは、 `浮動-区画$の各~側が利用される。既定では、 `浮動-区画$は，浮動体の`~margin~box$になる（注意： `margin-box$v 値による`浮動-区画$は、 `border-radius$p による`曲げ$も含むので，これとは異なり得る）。この仕様の［ `shape-outside$p, `shape-margin$p ］~propを利用すれば、矩形でない任意な`浮動-区画$を定義できる。 ◎ The area used for wrapping content around a float element. The rules for float behavior use the sides of the float area to determine where content flows. By default, the float area is the float element’s margin box (note this can be different than the float area produced by the margin-box value, which includes border-radius curvature). This specification’s shape-outside and shape-margin properties can be used to define an arbitrary, non-rectangular float area.

2. ~box~modelと浮動体の挙動との関係

行内~flow内容を`浮動体$の外側に`回込ませる$ために利用する境界は、図形を利用して定義できるが，実際の~box~modelを変更することはない。要素に指定されている［ ~margin ／ ~border ／ ~padding ］は、 `CSS3BOX$r ~moduleに則って算出され, 描画されることになる。また、 `浮動-区画$を図形で定義しても，`浮動体$の位置決めと堆積-法は影響されない。 ◎ While the boundaries used for wrapping inline flow content outside a float can be defined using shapes, the actual box model does not change. If the element has specified margins, borders or padding they will be computed and rendered according to the [CSS3BOX] module. Also, float positioning and stacking are not affected by defining a float area with a shape.

`浮動-区画$を定義する図形は、 `浮動体$の`~margin~box$で切取られる。言い換えれば、図形は【既定の】`浮動-区画$を狭めるのみであり，拡げることはない。 `浮動-区画$が狭められる結果、通常では浮動体により短縮される行l~boxが，短縮されなくなることも起こり得る。図形が封入する区画が無い場合【すなわち面積ゼロ】でも、図形の各~辺は`浮動-区画$を定義するために利用される。 ◎ When a shape is used to define a float area, the shape is clipped to the float’s margin box. In other words, a shape can only ever reduce a float area, not increase it. A reduced float area may have no effect on some line boxes that would normally be affected by the float. If a shape does not enclose any area, the shape’s edges are still used to define the float area.

`浮動-区画$を図形で定義することにより、通常の`浮動-区画$をすべての側で狭めることが可能になるが，内容が浮動体の両~脇に`回込む$ことを許容するものではない。 `浮動体$が `shape-outside$p を伴っていても、内容が`回込める$のは，［左~浮動体に対しては右~脇のみ／右~浮動体に対しては左~脇のみ］に限られる。 ◎ A float area defined by a shape may reduce the normal float area on all sides, but this does not allow content to wrap on both sides of a float. Left floats with a shape-outside still only allow content wrapping on the right side, and right floats only allow wrapping on the left.

次の例では、［左／右］へ浮動する各 `img^e 要素に， `shape-outside$p ~propを利用して三角形な図形が指定されている。 ◎ In the following example the left and right floating img elements specify a triangular shape using the shape-outside property.

<img class="left" src="hand.svg"/>
<img class="right" src="hand.svg"/>
<p>
  Sometimes a web page’s text content appears to be
  funneling your attention towards a spot on the page
  to drive you to follow a particular link. Sometimes
  you don’t notice.
</p>

<style type="text/css">
  .left {
    shape-outside: polygon(0 0, 100% 100%, 0 100%);
    float: left;
    width: 40%;
    height: 12ex;
    transform: scaleX(-1);
  }

  .right {
    shape-outside: polygon(100% 0, 100% 100%, 0 100%);
    float: right;
    width: 40%;
    height: 12ex;
  }

  p {
    text-align: center;
  }
</style>

どの図形も`浮動体$の`~margin~box$で切取られるので、上の左~浮動体に次の図形を追加しても，結果の描画は同じになる。 ◎ Since shapes are clipped to the float’s margin box, adding this shape to the left float above would result in the same rendering.

shape-outside: polygon(0 0, 500% 500%, 0 500%);

図形が封入する区画が無い場合でも、依然として，`浮動-区画$に辺を供与する。 ◎ A shape that does not enclose any area still has edges that contribute to the float area.

次の `inset$f 図形は、 `基準box$の中点に位置される縦~線になる。この中点を通る辺は、内容が回込むための浮動-区画の辺として利用される。 ◎ This inset shape is a vertical line positioned at the midpoint of the reference box. This midpoint edge is used as the edge of the float area for wrapping content.

shape-outside: inset(0% 50% 0% 50%);

次のように，~inset値の合計が横幅を超える場合、矩形の各~辺は， `CSS3BG$r `§ 曲線が重合する場合＠~CSSBG#corner-overlap$ と同じ規則を利用して決定される。結果の図形は、 `基準box$の左端~側から 25% の所にある縦~線になる。 ◎ If inset values add up to more than the width, CSS Backgrounds 3 § 4.5 Overlapping Curves rules are used to determine the edges of the rectangle. This shape results in a vertical edge 25% from the left side of the reference box.

shape-outside: inset(0% 150% 0% 50%);【！(0% 150% 50% 0%)】

図形が横~線のみになる場合、空な浮動-区画になり，回込みの効果はなくなる。【と記されているが、そう定義している規範的な要件は見当たらない。】この例では、 `shape-margin$p は `0px^v を~~前提にしていることに注意（さもなければ、線は区画を封入するよう拡げられることになる）。 ◎ If the shape is only a horizontal line, then it is an empty float area and has no effect on wrapping. Note that in this example shape-margin must be 0px (otherwise the line would expand to enclose an area).

shape-outside: inset(50% 0% 50% 0%);【！(50% 0% 0% 50%)】
shape-margin: 0px;

`shape-outside$p により、 `浮動-区画$の［左, 右］両~脇を~~空けるように区画を作成できる。それでも，内容が`回込める$のは、次の事例のように，浮動体の片方の脇に限られる。図では、図形は水色に, 図形の外側の内容~区画は藤色に描画されている。 ◎ A shape-outside can create open areas on both the left and right of a float area. Content still wraps only on one side of a float in this case. In the picture, the shape is rendered in blue, and the content area outside the shape in mauve.

shape-outside: polygon(50px 0px, 100px 100px, 0px 100px);

次の~style付けは、浮動体の内容~区画よりずっと小さい図形を作成し，浮動体に上端~marginを追加している。図では、［図形は水色, 図形の外側の内容~区画は藤色, 浮動-~boxの~margin区画は黄色］に描画されている。行内~内容は、図形のみを`回込む$ようになり，残りの~margin区画に重なる。 ◎ The following styling creates a shape much smaller than the float’s content area, and adds a margin-top to the float. In the picture, the shape is rendered in blue, the content area outside the shape in mauve, and the margin area of the float box in yellow. The inline content only wraps around the shape, and otherwise overlays the rest of the float margin box.

.float-left {
  shape-outside: polygon(0% 50%, 50% 100%, 0 100%);
  float: left;
  width: 100px;
  height: 100px;
  margin-top: 20px;
}

次の図は、 2 つの浮動体が互いに`側方$に堆積された場合にあり得る結果を示す。各~浮動体は、 `浮動-区画$ではなく，自身の`~margin~box$を利用して位置されることに注意。 ◎ The next picture shows a possible result if two of these floats were stacked next to each other. Note that the floats are positioned using their margin boxes, not the float area.

3. 基本~図形

`basic-shape@t 型は、下に述べる基本~図形~関数を利用して指定できる。この構文を利用して図形を定義するときの `基準box@ は、 `basic-shape$t 値を利用する各~propにて定義される。図形~用の座標系の原点は、 `基準box$の左上~隅になる — ここで，［ x-軸は~~右向き, y-軸は~~下向き］である。百分率で表出されるすべての長さは、 `基準box$の使用~sizeから解決される。 ◎ The <basic-shape> type can be specified using basic shape functions. When using this syntax to define shapes, the reference box is defined by each property that uses <basic-shape> values. The coordinate system for the shape has its origin on the top-left corner of the reference box with the x-axis running to the right and the y-axis running downwards. All the lengths expressed in percentages are resolved from the used dimensions of the reference box.

3.1. ~supportされる図形

各種 `basic-shape$t 関数の構文は： ◎ The <basic-shape> functions are:

`inset()$t
	= inset(
		`length-percentage$t{1,4}
		[ `round^v `border-radius$tp ]?
	)

`xywh()$t
	= xywh(
		`length-percentage$t{2} `length-percentage [0,∞]$t{2}
		[ `round^v `border-radius$tp ]?
	)

`rect()$t
	= rect(
		[ `length-percentage$t | auto ]{4}
		[ `round^v `border-radius$tp ]?
	)

`basic-shape-rect@t
	= `inset()$t
	| `rect()$t
	| `xywh()$t

`circle()$t
	= circle(
		`radial-size$t?
		[ at `position$t ]?
	)

`ellipse()$t
	= ellipse(
		`radial-size$t?
		[ at `position$t ]?
	)

`polygon()$t
	= polygon(
		`fill-rule$tp? ,
		[ round `length$t ]? ,
		[`length-percentage$t `length-percentage$t]#
	)

`path()$t
	= path(
		`fill-rule$tp? ,
		`string$t
	)

`inset@f

`基準box$の各~辺からの~inset【内方への~offset】を介して，矩形を定義する。 ◎ Defines an inset rectangle via insets from each edge of the reference box.

1 〜 4 個の `length-percentage$t 値は、矩形の各~辺の位置を［ `基準box$の各~辺からの~inset ］として`時計回りに設定する$よう定義する。 ◎ If less than four <length-percentage> values are provided, the omitted values default in the same way as the margin shorthand: an omitted second or third value defaults to the first, and an omitted fourth value defaults to the second. ◎ The four <length-percentage>s define the position of the top, right, bottom, and left edges of a rectangle, respectively, as insets from the corresponding edges of the reference box.

いずれかの次元において，両側の~insetの合計が`基準box$の使用~sizeを超える場合（左端, 右端どちらも 75% など）、 `CSS3BG$r `§ 曲線が重合する場合＠~CSSBG#corner-overlap$ と同じ規則を利用して，両側の比を保ちながら合計が 100% になるよう抑制する。 ◎ A pair of insets in either dimension that add up to more than the used dimension (such as left and right insets of 75% apiece) use the CSS Backgrounds 3 § 4.5 Overlapping Curves rules to proportionaly reduce the inset effect to 100%.

例えば， `inset(75% 0 50% 0)^v が指定された場合、［上端, 下端］辺に対する~insetの総和は`基準box$の縦幅の 125% になる。それらは、総和が 100% になるよう互いの比を保ちながら抑制される — その結果は、 `inset(60% 0 40% 0)^v を指定したときと一致する。 ◎ For example, specifying inset(75% 0 50% 0) has the top+bottom edges summing to 125% of the reference box’s height. They’re proportionaly reduced to sum to 100%, identical to specifying inset(60% 0 40% 0).

省略可能な `border-radius$tp 引数は、 `border-radius$p 略式~prop構文を利用して，結果の矩形の各~隅の丸めを定義する。 ◎ The optional <'border-radius'> argument(s) define rounded corners for the rectangle using the border-radius shorthand syntax.

`xywh@f

`基準box$の［上端, 左端］辺からの~offset, 指定された［横幅, 縦幅］を介して，矩形を定義する。 ◎ Defines a rectangle via offsets from the top and left edge of the reference box, and a specified width and height.

4 個の `length-percentage$t は、順に次を定義する ⇒＃ `基準box$の左端~辺からの~inset, `基準box$の上端~辺からの~inset, 矩形の横幅, 矩形の縦幅 ◎ The four <length-percentage>s define, respectively, the inset from the left edge of the reference box, the inset from the top edge of the reference box, the width of the rectangle, and the height of the rectangle.

注記：この構文は、 ~SVGの `viewBox$a 属性から着想された。 ◎ Note: This syntax is inspired by the viewBox attribute from SVG.

省略可能な `border-radius$tp 引数は、 `border-radius$p 略式~prop構文を利用して，結果の矩形の各~隅の丸めを定義する。 ◎ The optional <'border-radius'> argument(s) define rounded corners for the inset rectangle using the border-radius shorthand syntax.

`rect@f

`基準box$の［上端, 左端］辺からの~insetを介して，矩形を定義する。 ◎ Defines a rectangle via insets from the top and left edges of the reference box.

4 個の `length-percentage$t 値は、順に，矩形の［上端, 右端, 下端, 左端］辺の位置を［ `基準box$の［上端, 左端, 上端, 左端］辺からの~inset ］として定義する。 ◎ The four <length-percentage>s define the position of the top, right, bottom, and left edges of a rectangle, respectively, as insets from the top edge of the reference box (for the first and third values) or the left edge of the reference box (for the second and fourth values).

値 `auto^v は、矩形【！~box】の辺を`基準box$の対応する辺に一致させる — すなわち ⇒＃［ 1, 4 ］個目の値（上端, 左端）においては `0%^v と等価になる。［ 2, 3 ］個目の値（右端, 下端）においては `100%^v と等価になる。 ◎ An auto value makes the edge of the box coincide with the corresponding edge of the reference box: it’s equivalent to 0% as the first (top) or fourth (left) value, and equivalent to 100% as the second (right) or third (bottom) value.

加えて ⇒＃ 2 個目の値（右端）は 4 個目の値（左端）以上に切り上げられる。 3 個目の値（下端）は 2 個目の値（上端）以上に切り上げられる。 ◎ The second (right) and third (bottom) values are floored by the fourth (left) and second (top) values, respectively.

例えば， `rect(10px 0 0 20px)^v を指定した場合、［下端~辺を上端~辺より高く，右端~辺を左端~辺より左に］配置することになるので，どちらもそうならないよう正される — その結果は、 `rect(10px 20px 10px 20px)^v を指定したときと一致する。 ◎ For example, specifying rect(10px 0 0 20px) would place the bottom edge higher than the top edge, and the right edge further left than the left edge, so both are corrected to not cross over the other edge, identical to specifying rect(10px 20px 10px 20px).

注記：この構文は、旧来の `rect^f 関数 — もっぱら， `clip$p ~propにより利用されるそれ — と類似する【（順序は一致する）】が，かなり異なる。 ◎ Note: This syntax is similar, but not quite identical, to the legacy rect() function used solely by the clip property.

`circle@f

真円を定義する。その半径は `radial-size$t 引数が定義する。値は、 `~gradient~box$ではなく，`基準box$を参照rする下で解決される。この引数として 2 個の `length-percentage$t 値を与えた場合、当の関数は無効になる。 ◎ The <radial-size> argument defines the circle’s radius.＼ Rather than referring to the gradient box, values are resolved against the reference box. ◎ Two <length-percentage> values are invalid.

真円の中心は、 `position$t 引数が定義する。他が指定されない限り，省略-時の既定は `center^v 【`基準box$の中心】になる。 ◎ The <position> argument defines the center of the circle. Unless otherwise specified, this defaults to center if omitted.

`ellipse@f

楕円を定義する。その［横方向, 縦方向］半径は、 `radial-size$t 引数が定義する。値は、 `~gradient~box$ではなく，`基準box$を参照rする下で解決される。 ◎ The <radial-size> argument defines the horizontal and vertical radiuses of the ellipse.＼ Rather than referring to the gradient box, values are resolved against the reference box.

楕円の中心は、 `position$t 引数が定義する。他が指定されない限り，省略-時の既定は `center^v 【`基準box$の中心】になる。 ◎ The <position> argument defines the center of the ellipse. Unless otherwise specified, this defaults to center if omitted.

`polygon@f

多角形を定義する。その内域は、 `fill-rule$tp 引数を利用して決定される。省略-時の既定は `nonzero$v とする。 ◎ The <'fill-rule'> specifies the filling rule used to determine the interior. Defaults to nonzero if omitted.

~keyword `round^v に~~後続する省略可能な `length$t は、多角形の各~頂点~用の丸めを定義する真円の半径を与える。この真円は、中心が頂点の角度（小さい方）の二等分線~上にあり，頂点から出る両~線分に接する。 ◎ An optional <length> after a round keyword defines rounding for each vertex of the polygon. The length is the radius of a circle whose center lies on the bisector of the smaller angle of the vertex, and that is tangential to both sides of the vertex.

凹凸がある多角形に対する各~頂点の丸め ◎ Rounding polygon vertices that are both convex and concave.

線分の半分を超えて丸められるのを避けるため、各~頂点に対し別々に，半径を切詰めるモノトスル — 頂点から出るどちらの線分に対しても、［半径 ~LTE `tan^op( 頂点の角度 ~DIV 2 ) ~MUL ( 線分の長さ ~DIV 2 ) ］が満たされるよう。 ◎ To avoid rounding more than half of any line segment, the rounding of each vertex must be clamped separately such that the radius is never more than the smaller of tan(angle/2) segment / 2 evaluated against both vertex line segments.

切詰ng公式の意図を示す図式。 ◎ This diagram shows the intent of the clamping formula.

多角形の各~頂点は、各［ `length-percentage$t ~pair ］が指定する。それは、 `基準box$の［左端／上端］辺からの［横方向／縦方向］~offsetを与える。 ◎ Each <length-percentage> pair specifies a vertex of the polygon, as a horizontal and vertical offset from the left and top edges of the reference box.

~UAは、［ ~listを成す最後の頂点を最初の頂点へ接続する］ことにより，多角形を閉じるモノトスル。 ◎ The UA must close a polygon by connecting the last vertex with the first vertex of the list.

`path@f

~pathによる図形を定義する。その内域は、 `fill-rule$tp 引数を利用して決定される。省略-時の既定は、 `nonzero$v とする — ただし、当の関数が~SVG図形などの文脈で利用されていて， `fill-rule$p ~propが関連する場合には、その算出d値が利用される。 ◎ The <'fill-rule'> specifies the filling rule used to determine the interior. Defaults to nonzero if omitted, unless the function is being used in a context such as SVG shapes where the fill-rule property is relevant. In that case an omitted value will use the computed value of the fill-rule property.

`string$t は、 `~SVG~path~data文字列＠~SVGpaths#PathData$を表現する。【！~SVG11/paths.html#PathData】 ~path~data文字列が ~SVG 1.1 の文法と構文解析~規則【`参照＠~SVGpaths#PathDataBNF$】に［適合しない／適合するが空な~pathを定義する］場合、当の関数は`無効$になる。 ◎ The <string> represents an SVG Path data string. A path data string that does not conform to the to the grammar and parsing rules of SVG 1.1, or that does conform but defines an empty path, is invalid and causes the entire path() to be invalid.

初期~位置は，~path文字列~内の最初の `移動する$i ~command（ "m" ／ "M" ）にて定義され、初期~方向は，~SVG 1.1 に従う【 “初期~方向” は何のための記述？】。 ◎ The initial position is defined by the first “move to” argument in the path string. For the initial direction follow SVG 1.1.

~UAは、閉な~loopを要求する~prop（ `shape-outside$p や `clip-path$p など）において［文字列~内に `~pathを閉じる$i ~command（ "z" ／ "Z" ）が無い］場合には，暗黙的なそれで~pathを閉じるモノトスル。 ◎ The UA must close a path with an implicit closepath command ("z" or "Z") if it is not present in the string for properties that require a closed loop (such as shape-outside and clip-path).

3.2. 基本~図形の算出d値

`basic-shape$t 関数の算出d値は、次に挙げる例外を除いて，指定されたとおりになる： ◎ The values in a <basic-shape> function are computed as specified, with these exceptions:

省略-時の値は含まれ、その既定の値に算出される。 ◎ Omitted values are included and compute to their defaults.
［ `circle$f ／ `ellipse$f ］における `position$t 値は、左上原点からの~offset~pair（横方向, 縦方向の順）に算出される — 各~offsetは、 `length-percentage$t として与えられる。 ◎ A <position> value in circle() or ellipse() is computed as a pair of offsets (horizontal then vertical) from the top left origin, each given as a <length-percentage>.
`basic-shape-rect$t 関数における `border-radius$tp 値は、 8 個すべての成分が `length-percentage$t 値に展開された~listとして算出される。 ◎ A <'border-radius'> value in a <basic-shape-rect> function is computed as an expanded list of all eight <length-percentage> values.
`basic-shape-rect$t 関数は、等価な `inset$f 関数に算出される。 ◎ All <basic-shape-rect> functions compute to the equivalent inset() function.

注記：所与の `rect(%t %r %b %l)^v に等価な関数は、 `inset(%t calc(100% - %r) calc(100% - %b) %l)^v になる。所与の `xywh(%x %y %w %h)^v に等価な関数は、 `inset(%y calc(100% - %x - %w) calc(100% - %y - %h) %x)^v になる。 ◎ Note: Given rect(t r b l), the equivalent function is inset(t calc(100% - r) calc(100% - b) l). Given xywh(x y w h), the equivalent function is inset(y calc(100% - x - w) calc(100% - y - h) x).

3.3. 基本~図形の直列化

`basic-shape$t 関数を直列化するときは、個々の文法に従う — その際には ⇒＃文法による順序を利用する。 ~space等で分離された~tokenは 1 個の~spaceで連結する。直列化される各~commaには 1 個の~spaceを後続させる。 ◎ To serialize the <basic-shape> functions, serialize as per their individual grammars, in the order the grammars are written in, joining space-separated tokens with a single space, and following each serialized comma with a single space.＼

`算出d値$を直列化するときは、各~成分~値は［算出され，意味を変えずに省略できる所では省略される］。 ◎ For serializing computed values, component values are computed, and omitted when possible without changing the meaning.

図形~関数の`指定d値$の直列化は、比較的~自明なので、ここでは、 `circle$f 記法が `shape-outside$p 内で利用されたときに`算出d値$を直列化する例を挙げる： ◎ As specified value serialization of the shape functions are relatively trivial, here are some examples of computed value serializations for circle() notations when used in shape-outside:

`position$t の`直列化~規則＠~CSSVAL#position-serialization$は、 ~keywordの`算出d値$は百分率になり，［横, 縦］の順序で直列化されることを意味する。 ◎ <position> serialization rules mean that keywords compute to percentages, and serialize in horizontal-vertical order.

`circle(at bottom left)^v を直列化した結果は ⇒ `circle(at 0% 100%)^v ◎ circle(at bottom left) /* serializes to */ circle(at 0% 100%)
省略可能な成分を省略することは、既定の値は直列化に現れないことを意味する。 ◎ Omitting optional components means that default values do not show up in the serialization.

`circle(closest-side at center)^v を直列化した結果は ⇒ `circle()^v ◎ circle(closest-side at center) /* serializes to */ circle()
値の`算出＠~CASCADE#computed$ は、一部の関数を`異なる形へ正準-化する＠#basic-shape-computed-values$ことを意味する。 ◎ Value computation means that some functions canonicalize to a different form.

`rect(10px 20px 30px 40px)^v を直列化した結果は ⇒ `inset(10px calc(100% - 20px) calc(100% - 30px) 40px)^v ◎ rect(10px 20px 30px 40px) /* serializes to */ inset(10px calc(100% - 20px) calc(100% - 30px) 40px)

3.4. 基本~図形の補間

2 つの基本~図形の合間で補間するときには、以下の規則が適用される。互いの図形~関数の引数どうしは、 `算出d値により＠~WANIM#by-computed-value$ 補間される。 ~listを成す各~値は、アリな所では［長さ／百分率／ `calc$f ］として補間される。値がその型でなくても，一致するならば（両~listの同じ~list位置に `nonzero$v が見出されたときなど）、 ~list全体は補間できる。 ◎ For interpolating between one basic shape and a second, the rules below are applied. The values in the shape functions interpolate by computed value. The list values interpolate as length, percentage, or calc where possible. If list values are not one of those types but are identical (such as finding nonzero in the same list position in both lists) those values do interpolate.

両~図形とも同じ`基準box$を利用するモノトスル。 ◎ Both shapes must use the same reference box.
両~図形とも同じ型の図形~関数であって，次に挙げるいずれかに該当する場合、互いの図形~関数の各~引数の合間を補間する： ◎ ↓
- ［ `ellipse$f ／ `circle$f ］型であって，どちらの半径にも `length-percentage$t が指定されている（~keywordではなく）。 ◎ If both shapes are the same type, that type is ellipse() or circle(), and the radiuses are specified as <length-percentage> (rather than keywords), interpolate between each value in the shape functions.
- `inset$f 型である。 ◎ If both shapes are of type inset(), interpolate between each value in the shape functions.
- `polygon$f 型であって，両~多角形の［頂点~数, `fill-rule$tp ］は互いに同じ。 ◎ If both shapes are of type polygon(), both polygons have the same number of vertices, and use the same <'fill-rule'>, interpolate between each value in the shape functions.
他のすべての事例に対しては、補間は指定されない。【おそらく、`離散的$になる。】 ◎ In all other cases no interpolation is specified.

4. 画像による図形

~source `image$t を指定して図形を定義する仕方もある。この場合の図形は、指定された画像の~alpha~channelから算出される。図形は、指定された画像の［不透明度（ ~alpha ）が `shape-image-threshold$p 値で指定される閾値より大きい画素］で占められる~~領域として，何本かの~pathで封入される区画に算出される。そのような画素が無ければ、回込みに影響しない空な浮動-区画になる。 `shape-image-threshold$p が指定されていない場合の初期~値は、 `0.0^v と見なされる。 ◎ Another way of defining shapes is by specifying a source <image> whose alpha channel is used to compute the shape. The shape is computed to be the path or paths that enclose the area(s) where the opacity of the specified image is greater than the shape-image-threshold value. The absence of any pixels with an alpha value greater than the specified threshold results in an empty float area that will not affect wrapping. If the shape-image-threshold is not specified, the initial value to be considered is 0.0.

画像は、それが［ `置換d要素$であって， `内容~box$の使用~sizeと同じ［横幅, 縦幅］が指定されていた］かのように~sizeされ，位置される。 ◎ The image is sized and positioned as if it were a replaced element whose specified width and height are the same as the element’s used content box size.

~animationを伴う~raster画像~形式（ `GIF＠https://www.w3.org/Graphics/GIF/spec-gif89a.txt$ など）用には、最初の~frameが利用される。 ◎ For animated raster image formats (such as GIF), the first frame of the animation sequence is used.

段落の左へ浮動している画像。画像は、透明な背景の上に~CSS~logoの三次元版を示す。 ~logoには、 ~alpha~channelを利用する影がある。 ◎ An image is floating to the left of a paragraph. The image shows the 3D version of the CSS logo over a transparent background. The logo has a shadow using an alpha-channel.

画像は、自身の`浮動-区画$を `shape-outside$p ~propを通して定義する： ◎ The image defines its float area through the shape-outside property.

<p>
  <img id="CSSlogo" src="CSS-logo1s.png"/>
  blah blah blah blah...
</p>

<style>
  #CSSlogo {
    float: left;
    shape-outside: attr(src url);
    shape-image-threshold: 0.1;
  }
</style>

この例の `shape-outside$p ~propは、 `属性~参照＠~CSSVAL5#attr-notation$を用いて `img^e 要素の `src^c 属性による~URLを再利用している。 ◎ The shape-outside property re-uses the url from the src attribute of the img element.

画像を表示しつつ，その`浮動-区画$に対し異なる画像を利用することも、まったくアリである。 ◎ It is perfectly possible to display an image and use a different image for its float area.

下の図では、 ~CSS~logoの~~周りの破線が~alpha~channelによる閾値を表現している。段落の各~行lは、次の 3 通りの仕方で開始させられる： ◎ In the figure below, the alpha-channel threshold is represented by the dotted line around the CSS logo. ◎ It’s then possible to affect where the lines of the paragraph start in three ways:

画像~内の~alpha~channelを改変する ◎ Modifying the alpha channel in the image
`shape-image-threshold$p ~prop値を変更する ◎ Changing the value of the shape-image-threshold property
`shape-margin$p ~prop値を変更する（次節の例を見よ） ◎ Changing the value of the shape-margin property (see example 8)

浮動体の図形は、画像の~alpha~channelを利用している。 ◎ A float shape around an image using its alpha-channel.

5. ~box値による図形

図形は`~CSS~box~model＠~CSSBOX#box-model$に定義される各種辺への~~参照として定義することもできる。各~辺は、 `border-radius$p の使用~値による`曲げ$ `CSS3BG$r も含む。 `shape-box$t 値の構文は、 `margin-box$v も値にとれるよう， `visual-box$t 値を拡張する： ◎ Shapes can be defined by reference to edges in the CSS Box Model. These edges include border-radius curvature [CSS3BG] from the used border-radius values. The <shape-box> value extends the <visual-box> value to include margin-box. Its syntax is:

`shape-box@t
	= `visual-box$t
	| `margin-box$v

各種~値の定義は： ◎ The definitions of the values are:

`margin-box@v

この値は、 `~margin辺$に封入される図形を定義する。この図形の各~隅の各~半径は — ［隅と同じ~~側, 半径と同じ~~方向］における［ `border-radius$p 値を `半径^V ／ `margin-*^p 値を `~margin^V ］と記すとき — 次で決定される：

［ `半径^V ~GTE `~margin^V ］の場合（特に， `~margin^V ~LTE 0 の場合） ⇒ `max^op( `半径^V ~PLUS `~margin^V, 0 )
他の場合 ⇒ `半径^V ~PLUS ( `~margin^V ~MUL ( 1 ~MINUS ( ( 1 ~MINUS ( `半径^V ~DIV `~margin^V ) ) の 3 乗 ) ) )

【 2 つの式は［ `半径^V ~EQ `~margin^V ］の所で一致するので、結果もそこを境に連続的に遷移する。】

◎ The margin-box value defines the shape enclosed by the outside margin edge. The corner radii of this shape are determined by the corresponding border-radius and margin values. If the ratio of border-radius/margin is 1 or more, or margin is negative or zero, then the margin box corner radius is max(border-radius + margin, 0). If the ratio of border-radius/margin is less than 1, and margin is positive, then the margin box corner radius is border-radius + margin * (1 + (ratio-1)^3).

`border-box@v

`~border辺$に封入される図形を定義する。この図形は、通常の［ ~borderの外側に対する，~border半径~形状付け規則］すべてに従う。 ◎ The border-box value defines the shape enclosed by the outside border edge. This shape follows all of the normal border radius shaping rules for the outside of the border.

`padding-box@v

`~padding辺$に封入される図形を定義する。この図形は、通常の［ ~borderの内側に対する，~border半径~形状付け規則］すべてに従う。 ◎ The padding-box value defines the shape enclosed by the outside padding edge. This shape follows all of the normal border radius shaping rules for the inside of the border.

`content-box@v

`内容~辺$に封入される図形を定義する。この~boxの各~隅の半径は、次の結果を 0 以上に切り上げた結果になる ⇒ `border-radius^p − `border-width^p − `padding^p ◎ The content-box value defines the shape enclosed by the outside content edge. Each corner radius of this box is the larger of 0 or border-radius - border-width - padding.

下に与える 100px 正方形の［ ~padding, ~border, ~margin ］はいずれも 10px とする。定義される図形は、 ~box値に応じて，次で与えられる： ◎ Given the 100px square below with 10px padding, border and margins, the box values define these shapes:

`margin-box$v: 黄色~画素すべてを包含している図形 ◎ margin-box: the shape containing all of the yellow pixels
`border-box$v: 黒色~画素すべてを包含している図形 ◎ border-box: the shape containing all of the black pixels
`padding-box$v: 藤色~画素すべてを包含している図形 ◎ padding-box: the shape containing all of the mauve pixels
`content-box$v: 水色~画素すべてを包含している図形 ◎ content-box: the shape containing all of the blue pixels

単純な~CSS~box~modelの各~辺 ◎ Simple CSS Box Model Edges

同じ定義は、同じ 100px 正方形に対し，次の様に［ ~padding, ~border, ~margin ］~propがより複階的にされた例にも適用される： ◎ And the same definitions apply to a more complex example with the same 100px square, but with these border, padding and margin properties:

border-radius: 20px 20px 20px 40px;
border-width: 30px 10px 20px 10px;
padding: 10px 20px 10px 10px;
margin: 20px 10px 10px 10px;

複階的な~CSS~box~modelの各~辺 ◎ Complex CSS Box Model Edges

［通常の浮動体に対する回込み］と［ `margin-box$v 値により定義される図形に対する回込み］との相違は、 `margin-box$v 図形が隅の形状付けを含むことにある。 100px 正方形~boxの［ ~padding, ~border, ~margin ］はいずれも `10px^v にされ， `border-radius$p は `60px^v にされているとする。これを左~浮動体にしたとき、内容は通常は次の様に回込む： ◎ The difference between normal float wrapping and wrapping around the shape defined by the margin-box value is that the margin-box shape includes corner shaping. Take the 100px square with 10px padding, border and margins, but with a border-radius of 60px. If you make a left float out of it, content normally wraps in this manner:

浮動体に対する通常の回込み ◎ Normal float wrapping

浮動体に `margin-box$v 図形を追加した場合、内容は~margin~box【！`margin-box^v】の丸められた隅を回込む。 ◎ If you add a margin-box shape to the float, then content wraps around the rounded margin-box corners.

shape-outside: margin-box;

`margin-box$v を伴う浮動体に対する回込み ◎ Float wrapping with margin-box

6. 図形の宣言-法

図形は、 `shape-outside$p ~propで宣言され， `shape-margin$p ~propによる改変も伴い得る。［ `shape-outside$p, `shape-margin$p ］~propで定義される図形は、浮動体の`浮動-区画$の幾何を変更する。 ◎ Shapes are declared with the shape-outside property, with possible modifications from the shape-margin property. The shape defined by the shape-outside and shape-margin properties changes the geometry of a float element’s float area.

6.1. 浮動-区画の図形： `shape-outside^p ~prop

◎名 `shape-outside@p ◎値 `none$v | [ `basic-shape$vt || `shape-box$vt ] | `image$vt ◎初 `none$v ◎適 `浮動体$／`先頭字~box$ ◎継されない ◎百受容しない ◎算指定された~keyword ／ `基本~図形の算出d値＠#basic-shape-computed-values$に従う `basic-shape$t と 0 〜 1 個の`shape-box$t 値／ `image$t の算出d値 ◎ as defined for <basic-shape> (with <shape-box> following, if supplied); else the computed <image>; else the keyword as specified ◎順文法に従う ◎ア `basic-shape$t に対しては `基本~図形の補間＠#basic-shape-interpolation$に従う。他の値に対しては離散的。 ◎ as defined for <basic-shape>, otherwise discrete ◎表終

各種~値の意味は： ◎ The values of this property have the following meanings:

`none@v: `浮動-区画$は影響されない。 ◎ The float area is unaffected.
`shape-box$t: 図形は、 `margin-box$v, `border-box$v, `padding-box$v, `content-box$v いずれかに基づいて， `border-radius$p による`曲げ$も含め，対応する~boxを利用して算出される — `background-clip$p `CSS3BG$r と類似に。 ◎ If one of these values is specified by itself the shape is computed based on one of margin-box, border-box, padding-box or content-box which use their respective boxes including curvature from border-radius, similar to background-clip [CSS3BG].
`basic-shape$t: 図形は、 `basic-shape$t を成すいずれかの関数に基づいて算出される。 `shape-box$t も給された場合、それが `basic-shape$t 関数の`基準box$を定義する。給されなかった場合の既定の`基準box$は、 `margin-box$v になる。 ◎ The shape is computed based on one of the <basic-shape> functions. If a <shape-box> is also supplied, this defines the reference box for the <basic-shape> function. If <shape-box> is not supplied, then the reference box defaults to margin-box. The shape is computed based on the values of one of inset(), circle(), ellipse() or polygon(). <
`image$t: 図形は、指定された `image$t の~alpha~channelから `shape-image-threshold$p により定義されるとおりに抽出され，それに基づいて算出される。 ◎ The shape is extracted and computed based on the alpha channel of the specified <image> as defined by shape-image-threshold.

~UAは、 `shape-outside$p の `image$t 値として与えられた~URLに対しては， `FETCH$r により定義される `~CORS~protocol＠~FETCH#http-cors-protocol$を利用するモノトスル。 ~fetchするときは、［ "Anonymous" ~modeを利用する, ~referrer~sourceは~stylesheetの~URLに設定する, 生成元は包含している文書の~URLに設定する］モノトスル†。この結果が~network~errorになった場合、妥当な~fallback画像が無ければ，値 `none$v が指定されたかのようになるとする。 ◎ User agents must use the CORS protocol defined by the [FETCH] specification for all URLs in a shape-outside value.＼ When fetching, user agents must use "Anonymous" mode, set the referrer source to the stylesheet’s URL and set the origin to the URL of the containing document.＼ If this results in network errors such that there is no valid fallback image, the effect is as if the value none had been specified.

【† これらの~parameterは、廃された~W3C~HTML仕様に定義されていた~algoの記述に基づいており，どう適用するべきか意図不明になっている — 次を行うものと推定される ⇒＃ `~CORSになり得る要請を作成する＠~HTMLurl#create-a-potential-cors-request$( ~stylesheetの~URL, `image^l, `匿名＠~HTMLurl#attr-crossorigin-anonymous$st ) ◎終が、本当は， `CSS-VALUES-4$r `§ ~URL処理~model＠~CSSVAL#url-processing$ に基づくよう定義し直されるべきであろう。】

6.2. 画像~内で図形を成す画素を選ぶ： `shape-image-threshold^p ~prop

`shape-image-threshold$p は、利用する図形を画像から抽出するときに利用される ~alpha~channelの閾値を定義する。例えば値 `0.5^v は、図形は 50% より不透明な画素すべてを封入することを意味する。 ◎ The shape-image-threshold defines the alpha channel threshold used to extract the shape using an image. A value of 0.5 means that the shape will enclose all the pixels that are more than 50% opaque.

◎名 `shape-image-threshold@p ◎値 `opacity-value$t ◎初 `0^v ◎適 `浮動体$ ◎継されない ◎百受容しない ◎算指定された `number$t を 0 以上 1 以下に切詰めた結果 ◎ specified number, clamped to the range [0,1] ◎順文法に従う ◎ア算出d値の型による ◎表終

各種~値の意味は： ◎ The values of this property have the following meanings:

`number$t: 画像から図形を抽出するときに利用する閾値を設定する。図形は、 ~alpha値がこの閾値より大きい画素で定義される。 0.0 （全に透明）以上かつ 1.0 （全に不透明）以下に入らない閾値は、この範囲に切詰められる。 ◎ Sets the threshold used for extracting a shape from an image. The shape is defined by the pixels whose alpha value is greater than the threshold. A threshold value outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range.
`percentage$t: 【この値もとり得るが、等価な `number^t として解釈されることになる（ `opacity-value$t を見よ）。】

注記：この~moduleの将来~levelでは、画像の~alpha~dataの代わりに輝度~dataを利用する切替n~~機能を定義し得る。そうなった場合、 `shape-image-threshold$p による閾値は，［切替n状態に応じて［ ~alpha, 輝度］どちらかを適用する］ように拡張されることになる。 ◎ Note: A future level of CSS Shapes may define a switch to use the luminance data from an image instead of the alpha data. When this happens, shape-image-threshold will be extended to apply its threshold to either alpha or luminance, depending on the switch state.

6.3. 図形の拡幅-法： `shape-margin^p ~prop

`shape-margin$p ~propは、 `shape-outside$p に~marginを追加する。これは、 ~~元の図形の~~周（図形を成す辺や線をすべて含む）から外方へ［ `shape-margin$p による距離］以内の地点すべてを含む，最~小な図形を定義する。 ◎ The shape-margin property adds a margin to a shape-outside. This defines a new shape that is the smallest contour (in the shrink-wrap sense) that includes all the points that are the shape-margin distance outward in the perpendicular direction from a point on the underlying shape. This includes any edge or line sections from the underlying shape. Note that at points where a perpendicular is not defined (e.g. sharp points or line ends) take all points on the circle centered at the point and with a radius of shape-margin.

`shape-outside$p を適用することにより生産される新たな図形は、 `浮動-区画$を決定するものになるので，`回込n$の裁定を為す前に構築するモノトスル。 ◎ The new shape produced by applying shape-outside is what determines the float area, and must be constructed before making any wrap decisions.

この~propは、負な値はとれない。 ◎ This property takes only non-negative values.

◎名 `shape-margin@p ◎値 `length-percentage [0,∞]$vt ◎初 `0^v ◎適 `浮動体$／`先頭字~box$ ◎継されない ◎百包含塊の`行内~size$を基準にする ◎ refer to the inline size of the containing block ◎算 `length-percentage$t の算出d値 ◎順文法に従う ◎ア算出d値の型による ◎表終

`length-percentage [0,∞]$t: 図形の~marginを，指定された値に設定する。 ◎ Sets the margin of the shape to the specified value.

注記： `shape-margin^p を追加しようが、 `浮動-区画$は浮動体の~margin~boxより外側へは`拡張できない^em。浮動-区画が切取られるのを避けるためには、浮動体の~marginも~~増やしておく必要があり得る。 ◎ Note: Adding a shape-margin does NOT allow a float area to extend outside a float’s margin box. Extra margin may need to be applied along with shape-margin to avoid clipping.

多角形な `shape-outside$p からの~offsetを作成している `shape-margin$p 。図の［薄い水色／濃い水色］の区画は、浮動体の［ `shape-outside^p 図形／ `shape-margin^p ~offset（ `10px^v ）］を示す。 ◎ A shape-margin creating an offset from a polygonal shape-outside. The lighter blue area shows the shape in a 100x100px float, and the darker blue area shows the 10px offset.

.float {
  width: 100px;
  height: 100px;
  shape-outside: polygon(10px 10px, 90px 50px, 40px 50px, 90px 90px, 10px 90px);
  shape-margin: 10px;
}

`shape-margin$p が `§ 画像による図形＠#shapes-from-image$ の例の~CSS~logoに追加されたならば、図形を`回込んで$いる各~行l~boxは，更に短縮される。画像の右辺が画像の~alpha~channelで~~占められている事例では、図形が~margin~boxで切取られないよう， `margin-right^p も多少~~増やしておくべきである。 ◎ If shape-margin is added to the CSS logo from example 6, the line boxes wrapping around the shape are shortened further. In case the image’s alpha channel runs up to the right edge of the image, some extra margin-right should be applied to ensure the shape is not clipped by the margin box.

#CSSlogo {
  shape-margin: 35px;
  margin-right: 35px;
}

~alpha~channelと `shape-margin$p `35px^v を利用して，画像の~~周りに浮動-区画を成す図形 ◎ A float shape around an image using its alpha-channel with a 35-pixel shape-margin

~privacyの考慮点

この仕様に対し提起された~privacyの懸念は無い。 ◎ No privacy concerns have been raised against this specification.

~securityの考慮点

`shape-outside$p の `image$t 値は，一部の画像~dataを新たな仕方で公開し得るので、その利用は~CORS認可を伴う画像に制限される。 ◎ Since the <image> value of shape-outside can expose some image data in a new way, use is limited to images with CORS approval.

謝辞

この仕様に~~貢献された、次の方々に：

This specification is made possible by input from Tab Atkins Jr., Amelia Bellamy-Royds, Oriol Brufau, Andrei Bucur, Alexandru Chiculita, Boris Chiou, Emilio Cobos Álvarez, Elika Etemad, Arron Eicholz, Sylvain Galineau, Daniel Glazman, Arno Gourdol, Zoltan Horvath, Chris Jones, Bem Jones-Bey, Ian Kilpatrick, Guillaume Lebas, Ting-Yu Lin, Eric Meyer, Marcus Mielke, Alex Mogilevsky, Hans Muller, Mihnea Ovidenie, Virgil Palanciuc, Robert Sanderson, Dirk Schulze, Jen Simmons, Peter Sorotokin, Bear Travis, Lea Verou, Eugene Veselov, Brad Werth, Stephen Zilles and the CSS Working Group members.

変更~log

【この節は未訳。】