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.
- `方向に不問な~size@ ◎ direction-agnostic size
- 当の~boxの対角線の長さを 2 の平方根で除算した結果。 ◎ The direction-agnostic size of a box is equal to the length of the diagonal of the box, divided by sqrt(2).
- 注記： これは，~boxの横幅と縦幅を平均~化する~methodであり、 ~SVGにおいて，一部の事例で — ~boxの~sizeの百分率が欲されるが， 当の文脈は横幅, 縦幅どちらかに特定的に~~偏ることはないときに — 利用される。 正方形な~box用には，これは［ 横幅／縦幅 ］と同じになる。 ◎ Note: This is a method of averaging the width and height of a box used by SVG in some cases, when a percentage of a box’s size is desired but the context doesn’t specifically favor the width or the height. For square boxes, this is the same as the width/height.
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>
左右の浮動体は `shape-outside^p ~propを利用している ◎ Using the shape-outside property with floats
どの図形も`浮動体$の`~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);
左~浮動体の浮動-区画の右~側に回込んでいる~text ◎ wrapping around right side of a left-float float area
次の~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;
}
小さな `shape-outside^p を伴う浮動体に `margin-top^p を追加したとき ◎ Adding margin-top to a float with a small shape-outside
次の図は、 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.
2 個の浮動体は小さな `shape-outside^p を伴うが、 互いの~margin~boxが接するように堆積される。 ◎ Stacking two floats with a small shape-outside
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
)
`shape()$t
= shape(
`fill-rule$tp? from `position$t,
`shape-command$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 proportionally 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 proportionally 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.
- 省略可能な `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.)
- `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).
- `shape@f
- § `shape^f 関数を見よ。 ◎ See The shape() function.
3.1.1. `shape^f 関数
`path$f 関数は，［ より特化された図形~関数では許容されない，任意な図形 ］を定義するために［ ~SVG~path構文の再利用を許容する ］が、 それは，~pathを単独の文字列として書くことを要求する （例えば、 ~pathの一部分を `var$f で築くこととは互換でない） ことに加え、 ~SVGによる いくつかの制限 — 暗黙的に `px$u 単位しか許容しないなど — を継承する。 ◎ While the path() function allows reuse of the SVG path syntax to define more arbitrary shapes than allowed by more specialized shape functions, it requires writing a path as a single string (which is not compatible with, for example, building a path piecemeal with var()), and inherits a number of limitations from SVG, such as implicitly only allowing the px unit.
`shape$f 関数は， `path$f 関数により利用されるものと概ね等価な~commandたちが成す集合を利用するが、 より標準な~CSS構文でそうすることにより， ~CSS機能性を成す全部的な範囲 — 追加的な単位や`~math関数$など — を許容する。 `shape$f により利用される各~commandは、 描画~用に利用されるとき — 例：描画される `clip-path$p を算出するとき — 動的に~path区分へ転換される。 ◎ The shape() function uses a set of commands roughly equivalent to the ones used by path(), but does so with more standard CSS syntax, and allows the full range of CSS functionality, such as additional units and math functions. The commands used by shape() are dynamically turned into path segments when it is used for rendering, e.g., when computing the rendered clip-path.
そのイミにおいては、 `shape$f は `path$f の上位集合である。 `path^f は `shape^f へ容易に変換できるが、 `shape^f を［ `path^f ／~SVG ］へ戻すよう変換するためには，~CSS環境についての情報が要求される （例： `~custom~prop$の現在の値, `em$u 単位~用の現在の~font~size, 等々）。 ◎ In that sense, shape() is a superset of path(). A path() can be easily converted to a shape(), but to convert a shape() back to a path() or to SVG requires information about the CSS environment (e.g. current values of CSS custom properties, current font size for em units, etc).
`fill-rule$tp は、 `path$f 内の同じ引数と同じに解釈される。 ◎ The <'fill-rule'> is interpreted identically to the same argument in path().
残りの引数たちは、 この関数が表現する~path~data~commandたちが成す~list — 以下では、略して “~command~list” と称される — を定義する — それらは、 `~SVGの~path~data＠~SVGpaths#PathData$と一致する。 ◎ The rest of the arguments define a list of path data commands, identical to that of an SVG Path, which the function represents.
from `position$t【！`coordinate-pair$t】
は、
最初の図形~commandの始点を表現する。
それは、
~command~listに先頭の~itemとして `~moveto$pC（絶対） ~commandを追加する。
◎
The from <coordinate-pair> represents the starting point for the first shape-command. It adds an initial absolute moveto to the list of path data commands.
`shape-command@t たちが成す連列は、 ~~後続する`~path~data~command＠~SVGpaths#PathData$たちを表現する。 各~commandの始点は，直前の~commandの終点になる。 ◎ The sequence of <shape-command>s represent further path data commands. Each command’s starting point is the previous command’s ending point.
`shape-command$t
= `move-command$t
| `line-command$t
| `close$v
| `horizontal-line-command$t
| `vertical-line-command$t
| `curve-command$t
| `smooth-command$t
| `arc-command$t
`move-command$t
= `move$v `command-end-point$t
`line-command$t
= `line$v `command-end-point$t
`horizontal-line-command$t
= `hline$v [
to [ `length-percentage$t | `left$v | `center$v | `right$v | `x-start$v | `x-end$v ]
| by `length-percentage$t
]
`vertical-line-command$t
= `vline$v [
to [ `length-percentage$t | `top$v | `center$v | `bottom$v | `y-start$v | `y-end$v ]
| by `length-percentage$t
]
`curve-command$t
= `curve@v [
to `position$t with `control-point$t [ / `control-point$t ]?
| by `coordinate-pair$t with `relative-control-point$t [ / `relative-control-point$t ]?
]
`smooth-command$t
= `smooth@v [
to `position$t [ with `control-point$t ]?
| by `coordinate-pair$t [ with `relative-control-point$t ]?
]
`arc-command$t
= `arc@v `command-end-point$t [
of `length-percentage$t{1,2}
&& `arc-sweep$t?
&& `arc-size$t?
&& [`rotate^v `angle$t]?
]
`command-end-point$t
= [ to `position$t | by `coordinate-pair$t ]
`control-point$t
= [ `position$t | `relative-control-point$t ]
`relative-control-point$t
= `coordinate-pair$t [ from [ `start^v | `end^v | `origin^v ] ]?
`coordinate-pair$t
= `length-percentage$t{2}
`arc-sweep$t
= `cw$v
| `ccw$v
`arc-size$t
= `large$v
| `small$v
`coordinate-pair@t = `length-percentage$t{2}- 指定された基準~点【 `command-end-point$t の記述を見よ】から［ 右方への~offset, 下方への~offset ］を順に表現している座標~pairを定義する — ［ 前者／後者 ］の座標に対する百分率は、 `基準~box$の［ 横幅／縦幅 ］を~~基準に解決される。 ◎ Defines a pair of coordinates, representing a rightward and downward offset, respectively, from a specified reference point. Percentages are resolved against the width or height, respectively, of the reference box.
`command-end-point@t = [ `to@v `position$t | `by@v `coordinate-pair$t ]
-
各~commandには、 【 `command-end-point$t に限らず，どの~command文法においても】［ `to$v （ “絶対” 座標）／ `by$v （ “相対” 座標） ］どちらも指定でき，次を指示する：
- ［ `to$v に後続している `position$t ／ `by$v に後続している `coordinate-pair$t ］が，~commandの終点を与える。 （［ `horizontal-line-command$t ／ `vertical-line-command$t ］の終点~用には、 これらは［ 横／縦 ］成分のみとして指定される。）
- 当の終点【を成す長さ値（百分率でない `length-percentage$t 値）たち】は、［ `to$v の場合は`基準~box$の左上~隅／ `by$v の場合は当の~commandの始点 ］に相対的になる。
-
`to$v を利用するときは、 各~座標を `coordinate-pair$t の代わりに `position$t として指定できる。
【 `position$t の値~空間は、 `coordinate-pair$t の値~空間を包摂することに注意。 】
◎ When to is used, the coordinates can be specified as <position>s instead of <coordinate-pair>s. - 注記： どちらの事例でも、 `coordinate-pair$t を成す各 `percentage$t 値は， 常に`基準~box$の~sizeに相対的に算出される。 ◎ Note: In either case, <percentage> values in <coordinate-pair>s are always computed relative to the reference box’s size.
`move-command@t = `move@v `command-end-point$t
- ~command~listに `~moveto$pC ~commandを追加する。 ◎ Adds a moveto command to the list of path data commands,＼ ↑↑ with an ending point specified by the <coordinate-pair>.
- これは、 直後の~command用に “~penを移動する” だけで，何も描かない。 ◎ This draws nothing, and merely "moves the pen" for the next command.
- 注記： これは、 `~closepath$pC ~command（ `close$v ）の目的においては，新たな下位pathを開始する。 ◎ Note: This starts a new subpath, for the purpose of the close command.
`line-command@t = `line@v `command-end-point$t
- ~command~listに `~lineto$pC ~commandを追加する。 ◎ Adds a lineto command to the list of path data commands,＼ ↑↑ with an ending point specified by the <coordinate-pair>.
- これは、 ~commandの始点から終点まで真直ぐな線を描く。 ◎ This draws a straight line from the command’s starting point to its ending point.
`horizontal-line-command@t = `hline@v [ to [ `length-percentage$t | `left^v | `center^v | `right^v | `x-start^v | `x-end^v ] | by `length-percentage$t ]
- ~command~listに横方向な `~lineto$pC ~commandを追加する。 ◎ Adds a horizontal lineto command to the list of path data commands.
-
これは、 次のような `coordinate-pair$t を伴う `line$v ~commandと等価になる：
-
横~成分は：
- `length-percentage$t が供された場合は，それになる。
- 他の場合 — `to$v と伴に `position$t の横~位置~用の~keyword（ `left^v 等）が供された場合 — は， `position$t の定義に従って決定される位置を指す値になる。
- 縦~成分は、 当の~commandの始点と同じ。
-
`vertical-line-command@t = `vline@v [ to [ `length-percentage$t | `top^v | `center^v | `bottom^v | `y-start^v | `y-end^v ] | by `length-percentage$t ]
- ~command~listに縦方向な `~lineto$pC ~commandを追加する。 ◎ Adds a vertical lineto command to the list of path data commands.
-
これは、 次のような `coordinate-pair$t を伴う `line$v ~commandと等価になる：
- 横~成分は、 当の~commandの始点と同じ。
-
縦~成分は：
- `length-percentage$t が供された場合は，それになる。
- 他の場合 — `to$v と伴に `position$t の縦~位置~用の~keyword（ `top^v 等）が供された場合 — は， `position$t の定義に従って決定される位置を指す値になる。
`curve-command@t = `curve@v [ to `position$t with `control-point$t [ / `control-point$t ]? | by `coordinate-pair$t with `relative-control-point$t [ / `relative-control-point$t ]? ] ◎ <curve-command> = curve [ [ to <position> with <control-point> [ / <control-point> ]? ] | [ by <coordinate-pair> with <relative-control-point> [ / <relative-control-point> ]? ] ]
- ~command~listに~Bezier~curveto~commandを追加する。 ◎ Adds a Bézier curve command to the list of path data commands,＼ ↑↑ ending at the point specified by the <position> following the to keyword, or the <coordinate-pair> following the by keyword, as specified by <command-end-point>.
- `with^v 成分は、 曲線の制御~点を指定する — 供された［ `control-point$t ／ `relative-control-point$t ］の個数に応じて［ 1 個ならば`二次~Bezier~curveto$pC／ 2 個ならば`三次~Bezier~curveto$pC ］~commandを指定する。 ◎ The with component specifies control points for the curve: if a single <control-point> or <relative-control-point> is provided, the command specifies a quadratic curve; if two <control-point>s or <relative-control-point>s are provided, it specifies a cubic curve.
`smooth-command@t = `smooth@v [ to `position$t [ with `control-point$t ]? | by `coordinate-pair$t [ with `relative-control-point$t ]? ] ◎ <smooth-command> = smooth [ [ to <position> [with <control-point> ]? ] | [ by <coordinate-pair> [ with <relative-control-point> ]? ] ]
- ~command~listに滑らかに~Bezier~curveto~commandを追加する。 ◎ Adds a smooth Bézier curve command to the list of path data commands,＼ ↑↑ ending at the point specified by the <position> following the to keyword, or the <coordinate-pair> following the by keyword, as specified by <command-end-point>.＼
- `with^v 成分は、［ 省略された場合は `二次~Bezier~curveto$pC ／ 供された場合は `三次~Bezier~curveto$pC ］~commandを指定する。 後者の場合、 `control-point$t は，当の曲線~用の制御~点を指定する。 ◎ The with component specifies control points for the curve: if it’s omitted, the command specifies a smooth quadratic curve; if it’s provided, if specifies a smooth cubic curve.
- 注記： `smooth$v ~commandは、 1 個目の制御~点として，次が自動的に指定された `curve$v ~commandと等価になる： ［ 直前の~path~data~commandが `~curveto^pC ~commandならば， その 2 個目の制御~点から始点を挟んで~~対称な点／ 他の場合は，始点 ］。 前者の場合，直前の曲線との G1 連続性【一階微分可能】を確保するので、 当の曲線は直前の曲線から滑らかに継続するよう現れる。 【！rather than possibly】 ◎ Note: A smooth command is equivalent to a curve command with the first control point automatically specified as the reflection of the previous curve’s second control point around the starting point, or as the starting point if the previous path data command wasn’t a curve. This ensures G1 continuity with the previous command, so the curve appears to smoothly continue from the previous command, rather than possibly making a sudden direction change.
`control-point@t = [ `position$t | `relative-control-point$t ]
- ［ 二次／三次 ］~Bezier曲線に 1 個の制御~点を供する。 【 `position$t は、終点として指定される `position^t と同様に解釈される。】 ◎ Provides a control point to a quadratic or cubic Bézier curve.
`relative-control-point@t = `coordinate-pair$t [ from [ `start^v | `end^v | `origin^v ] ]?
- ［ 二次／三次 ］~Bezier曲線に 1 個の制御~点を供する。
- `from^v 成分は、 省略された場合は， `from start^v が指定されたときと同じになる【！the segment’s start】。 所与の `coordinate-pair$t は、 `from^v に後続している~keywordに応じて，次に相対的になる ⇒＃ `start^v ならば 当の~commandの始点／ `end^v ならば 当の~commandの終点／ `origin^v ならば `基準~box$【の左上~隅】 ◎ Provides a control point to a quadratic or cubic Bézier curve. When a from keyword is specified followed by start, end, or origin, the given <coordinate-pair> is relative to the command’s starting point, the command’s end point, or the reference box, respectively. If such component is not provided, the <coordinate-pair> is relative to the segment’s start.
`arc-command@t = `arc@v `command-end-point$t [ of `length-percentage$t{1,2} && `arc-sweep$t? && `arc-size$t? && [`rotate^v `angle$t]? ] ◎ <arc-command> = arc <command-end-point> [[of <length-percentage>{1,2}] && <arc-sweep>? && <arc-size>? && rotate <angle>? ]- ~command~listに `~arcto$pC ~commandを追加する。 ◎ Add an elliptical arc command to the list of path data commands,＼ ↑↑ ending at the <command-end-point>.
-
`of^v 成分は、 弧が成す楕円の~sizeを指定する — `length-percentage$t が： ◎ The of component specifies the size of the ellipse that the arc is taken from.＼
- 2 個~供された場合 ⇒ 順に，楕円の［ 横, 縦 ］半径を供する。 `percentage$t 値は、 `coordinate-pair$t と同様に，`基準~box$の［ 横幅／縦幅 ］のうち適切な方を~~基準に解決される。 ◎ The first <length-percentage> provides the horizontal radius of the ellipse and the second provides the vertical radius. Like for <coordinate-pair>s, <percentage> values are resolved against the width or height of the reference box, as appropriate.
- 1 個だけ供された場合 ⇒ どちらの半径も供された値を利用する。 `percentage$t 値は、 `基準~box$の`方向に不問な~size$を~~基準に解決される （ `circle$f 関数と類似に）。 ◎ If only one <length-percentage> is provided, both radiuses use the provided value. In that case, <percentage> values are resolved against the direction-agnostic size of the reference box (similar to the circle() function).
-
~SVGには、 `楕円~半径~用に特有な~errorの取扱い＠~SVGpaths#ArcOutOfRangeParameters$ として次に挙げるものがあることに注意： ◎ Note that SVG has some specific error-handling for the ellipse radiuses:
- 終点が始点と同じ場合、 当の~commandは何もしない。 ◎ if the endpoint is the same as the starting point, the command does nothing
- どちらかの半径が 0 の場合、 当の~commandは，終点への `line-command$t と等価になる。 ◎ if either radius is zero, the command is equivalent to a <line-command> to the ending point
- 負な半径には絶対~値が代わりに利用される。 ◎ if either radius is negative, its absolute value is used instead
- 2 つの半径が述べる楕円の大きさが， 指定された `angle$t による回転の後において［ 始点, 終点 ］に交差するには十分でない場合、 それらの半径は，当の楕円が ちょうど十分な大きさに達するまで一様に拡大される。 ◎ if the radiuses don’t describe an ellipse large enough to intersect both the starting point and ending point (after rotation by the specified <angle>), they are scaled up uniformly until the ellipse is just large enough to reach.
- 指定された半径により述べられる楕円は、 既定では軸に揃うが， `angle$t を指定することにより回転できる。 `rotate$f 変形~関数と類似に，［ 正な角度は時計回り／ 負な角度は反時計回り ］な回転を指定する。 省略された場合の既定は `0deg^v になる。 ◎ The ellipse described by the specified radiuses defaults to being axis-aligned, but can be rotated by specifying an <angle>. Similar to the rotate() transform function, positive angles specify a clockwise rotation, and negative angles specify a counterclockwise rotation. If omitted, this defaults to 0deg.
-
楕円は，所与の［ 半径, 角度 ］を伴う, かつ［ 始点, 終点 ］に交差するものとして定義されるが、 そのような楕円としてアリなものは通例的に 2 つあり， 楕円をナゾる方向も 2 つあるので、 弧としてアリなものは 4 つある。 ［ `arc-sweep$t, `arc-size$t ］成分は、 これらの弧のうちどれが欲されるかを指定する： ◎ The ending point, radiuses, and angle, taken together, usually define two possible ellipses that intersect the starting point and ending point, and each ellipse can be traced in either direction, for a total of four possible arcs. The <arc-sweep> and <arc-size> components specify which of these arcs is desired:
-
`arc-sweep@t がとり得る［ `cw@v は時計回り／ `ccw@v は反時計回り ］に楕円をナゾる弧を選ぶことを指示する。 省略された場合の既定は `ccw$v になる。 ◎ <arc-sweep> can be cw or ccw, indicating that the arc that is traced around the ellipse clockwise or counter-clockwise from the center, respectively, must be chosen. If omitted, this defaults to ccw.
注記： ~SVGの `~arcto$pC ~commandにおいては、［ `cw$v ／ `ccw$v ］は， %sweep-flag 用の値［ 1 ／ 0 ］に対応する。 ◎ Note: In the SVG arc command, cw corresponds to the value 1 for the sweep flag, and ccw to the value 0.
-
`arc-size@t がとり得る［ `large@v は長い方／ `small@v は短い方 ］をアリな 2 つの弧から選ぶことを指示する。 省略された場合の既定は `small$v になる。 ◎ <arc-size> can be large or small, indicating that the larger or smaller, respectively, of the two possible arcs must be chosen. If omitted, this defaults to small.
注記： ~SVGの `~arcto$pC ~commandにおいては、［ `large$v ／ `small$v ］は， %large-arc-flag 用の値［ 1 ／ 0 ］に対応する。 ◎ Note: In the SVG arc command, large corresponds to the value 1 for the large flag, and small to the 0.
注記： 始点と終点が楕円~上の正確に反対~側にある場合、 アリな弧は同じ~sizeになるが，アリな楕円も 1 つに限られる。 この事例では、 `arc-size$t には効果は無く， `arc-sweep$t が 2 つのアリな弧のうちどちらが選ばれるかを判別する。 ◎ Note: If the starting and ending points are on exactly opposite sides of the ellipse, both possible arcs are the same size, but also there is only one possible ellipse. In this case, the <arc-sweep> distinguishes which of the two possible arcs will be chosen, and <arc-size> has no effect.
所与の［ 始点, 終点 ］に対しアリな 4 種の弧の図画化 ◎ a depiction of four possible arcs given a start and end point
選ばれる対象になる［ アリな 2 つの楕円, アリな 4 つの弧 ］の図画化。 ◎ A depiction of the two possible ellipses, and four possible arcs, that can be chosen between. -
- `close@v
- ~command~listに `~closepath$pC ~commandを追加する。 ◎ Adds a closepath command to the list of path data commands.
- 注記： これは、 終点が下位pathの始点に設定された `line$v ~commandに類似する。 それらは，生な図形としては一致するが、 当の~pathが~strokeされる場合， `close$v ~commandの終点は、 下位pathの始点と滑らかに継がれ，［ `stroke-linejoin$p, `stroke-linecap$p ］がどう描画されるかに影響する。 ◎ Note: This is similar to a line command with its ending point set to the starting point of the subpath. When specifying a raw shape, they’re identical, but if the path is stroked, the ending point of the close command is smoothly joined with the start of the subpath, which affects how line-joins and line-caps are rendered.
3.1.1.1. `shape$f を利用して，即応可能な~parameter化された吹出しを作成する例
`shape$f 関数は、 拡縮-可能な図形のみならず， 即応可能な【具体的には，部分的に拡縮-可能な】図形も可能化する （ `polygon$f 関数による図形も即応可能になるが、 それが~supportする曲線は，単純な丸められた隅に限られる）。 ◎ The shape() function enables shapes that are responsive, rather than scalable. While the polygon() shape is also responsive, it only support simple rounded corners and not complex curves.
これをデモるため、 次のような【漫画の】吹出しから開始する： ◎ To demonstrate, let’s start with a speech bubble, such as the following:
ある吹出し図形 ◎ A speech bubble shape
この図形は、 `clip-path$p で利用される。 それは、 `path$f 関数を利用しても行える： ◎ Using this shape with a clip-path can be done by using the path() function:
.bubble {
clip-path: path("m 5 0 H 95 Q 100 0 100 5 V 92 Q 100 97 95 97 H 70 l -2 3 l -2 -3 H 5 Q 0 97 0 92 V 5 Q 0 0 5 0")
};
この~pathは，容易に拡縮できるが、 望ましい結果が得られないこともある — 例えば，小さく拡縮されたとき、 吹出しを成す［ ツノ, 隅の曲線 ］は，ほとんど目立たなくなる： ◎ Altohugh this path can easily scale, the scaled results are not always desirable. e.g. when scaled to a small balloon, the arrow and corners are scaled to become almost invisible:
縮小された吹出し図形 ◎ scled-down speech bubble shape
この図形を `shape$f 関数を利用して構築するため、 まずは， `path^f 関数の引数を成すすべての座標【！pixel values】を百分率へ転換する。 引数は `from^v から始まることに注意： ◎ To construct this shape using the shape() function, let’s start by turning all the pixel values from the path function to percentages. Note that the shape() function begins with from:
.bubble {
clip-path: shape(
from 5% 0%,
hline to 95%,
curve to 100% 5% with 100% 0%,
vline to 92%,
curve to 95% 97% with 100% 97%,
hline to 70%,
line by -2% 3%,
line by -2% -3%,
hline to 5%,
curve to 0% 92% with 0% 97%,
vline to 5%,
curve to 5% 0% with 0% 0%
);
}
次に、 この~pathが~size変化にきちんと応答するよう，即応可能にする。 そのためには、 いくつかの座標 — 特定的に，曲線とツノを制御するもの — の単位を `px$u 値へ変換する： ◎ To make this path responsive, as in, respond well to size changes, we will convert some of its units to px values, specifically the ones the control the curves and arrows:
.bubble {
clip-path: shape(
from 5px 0%,
hline to calc(100% - 5px),
curve to 100% 5px with 100% 0%,
vline to calc(100% - 8px),
curve to calc(100% - 5px) calc(100% - 3px) with 100% calc(100% - 3px),
hline to 70%,
line by -2px 3px,
line by -2px -3px,
hline to 5px,
curve to 0% calc(100% - 8px) with 0% calc(100% - 3px),
vline to 5px,
curve to 5px 0% with 0% 0%
);
}
`clip-path^p として適用されたとき、 次の様な見かけになろう： ◎ When applied as clip-path, it would looks like the following:
`clip-path^p を利用している吹出し図形 ◎ A speech bubble shape, using clip-path
吹出し全体は`基準~box$へ拡縮される一方で、 曲線やツノは，一定であり続ける。 ◎ The whole speech bubble is scaled to the reference box, while the curves and arrows stay more constant.
`shape$f は~CSS単位を利用するので、 各~辺を成す座標のうち一部を `position$t 値で置換できる： ◎ Since shape() uses CSS units, we can replace some of the edges with position values:
.bubble {
clip-path: shape(
from 5px 0,
hline to calc(100% - 5px),
curve to right 5px with right top,
vline to calc(100% - 8px),
curve to calc(100% - 5px) calc(100% - 3px) with right calc(100% - 3px),
hline to 70%,
line by -2px 3px,
line by -2px -3px,
hline to 5px,
curve to left calc(100% - 8px) with left calc(100% - 3px),
vline to 5px,
curve to 5px top with left top
);
}
`shape$f は、 別の有用な特能として，`~custom~prop$【！~CSS~prop】と伴にも利用できる。 【！In this case】 ツノ（以下における `--arrow-*^p ）と隅の半径（以下における `--radius^p ）は、 それにより~parameter化できる： ◎ Another useful feature of shape() is that it can be used alongside CSS properties. In this case, we can make the arrow and radius parametric:
:root {
--radius: 5px;
--arrow-length: 3px;
--arrow-half-width: 2px;
--arrow-position: 70%;
--arrow-bottom-offset: calc(100% - var(--radius) - var(--arrow-length));
}
.bubble {
animation: bubble 100ms;
clip-path: shape(
from var(---radius) top,
hline to calc(100% - var(---radius)),
curve to right var(---radius) with right top,
vline to var(---arrow-bottom-offset),
curve to calc(100% - var(---radius)) calc(100% - var(---arrow-length)) with right calc(100% - var(---arrow-length)),
hline to var(---arrow-position),
line by var(---arrow-half-width) var(---arrow-length),
line by var(---arrow-half-width) calc(0px - var(---arrow-length)),
hline to var(---radius),
curve to left var(---arrow-bottom-offset) with left calc(100% - var(---arrow-length)),
vline to var(---radius),
curve to var(---radius) top with left top
);
}
3.1.1.2. `shape^f 関数の補間-法
2 つの［ `shape$f ／ `path$f ］関数は、 互いの［ ~path~data~commandたちが成す~list ］が［ 同じ長さである ］かつ［ 順に “同じ” ~commandからなる ］ならば，互いに`補間-$できる — 【 `shape^f と `path^f を補間する場合は、】 `path$f 関数を成す最初の~commandは， `shape$f 関数を成す先頭の `coordinate-pair$t と補間するとする。 ◎ shape() and path() functions can be interpolated with each other if their associated list of path data commands is the same length and has the same commands, in order, with the first command of the path() function interpolating with the initial <coordinate-pair> in the shape() function.
注記： `path$f 関数を成す最初の~commandは、 `move$v （~SVG仕様における `~moveto$pC ~command） になることが保証される。 ◎ Note: The first command of a path() function is guaranteed to be a move, see moveTo in the SVG spec.
【補間した結果は、】 開始~時の値と終了~時の値が［ どちらも `path$f 関数ならば `path^f 関数／ 他の場合は `shape$f 関数 ］になる。 どちらの事例でも、 補間された値は， “同じ” ~path~data~commandたちが成す~listを表現するモノトスル — 各~commandが有する数量的な成分は、 開始~時の~listと終了~時の~listを成す対応する成分どうしの合間で補間した結果になるよう。 ◎ If the starting and ending values are both path() functions, the interpolated value is a path() function; otherwise it’s a shape() function. In either case, the interpolated value must represent the same list of path data commands, with each command having its numerical components interpolated between the corresponding components of the starting and ending list.
この目的においては、 2 つの~commandが “同じ” であるとは， ~AND↓ が満たされることをいう： ◎ For this purpose, commands are "the same" if＼
- 同じ~command~keywordを利用する ◎ they use the same command keyword,＼
- 同じ［ `to$v ／ `by$v ］~keywordを利用する ◎ and use the same <by-to> keyword.＼
- 当の~commandが［ `curve$v ／ `smooth$v ］である場合は，制御~点の個数は互いに同じ ◎ For curve and smooth, they also must have the same number of control points.
`arc$v ~commandに対しては、［ 開始~時の~listと終了~時の~list ］の間で［ `arc-sweep$t ／ `arc-size$t ］~keywordが異なる場合、［ 0 ~LT 進捗-値 ~LT 1 ］の下で補間された結果には，［ `cw$v ／ `large$v ］を利用する。 ◎ If an arc command has different <arc-sweep> between its starting and ending list, then the interpolated result uses cw for any progress value between 0 and 1. If it has different <arc-size> keywords, then the interpolated result uses large for any progress value between 0 and 1.
注記： `arc$v ~keyword用の補間~規則は、 ~SVG `path$e 用の既存の補間~規則に合致することが意味される。 ◎ Note: The arc keyword interpolation rules are meant to match existing SVG path interpolation rules.
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)
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辺$に封入される図形を定義する。 この図形の所与の隅における各~半径は、 次で決定される — 以下における［ %半径 ／ %~margin ］は，当の［ 隅, 半径 ］に対応する［ `border-radius$p ／ `margin$p ］の成分~値を表すとする：
- ［ %半径 ~GTE %~margin ］の場合 （特に， %~margin ~LT 0 の場合も含まれる） ⇒ `max^op( %半径 ~PLUS %~margin, 0 )
- 他の場合 ⇒ %半径 ~PLUS ( %~margin ~MUL ( 1 ~MINUS ( ( 1 ~MINUS ( %半径 ~DIV %~margin ) ) の 3 乗 ) ) )
【 2 つの式は［ %半径 ~EQ %~margin ］の所で一致するので、 結果も そこを境に連続的に遷移する。 】
◎ 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^v 正方形の［ ~padding, ~border, ~margin ］はいずれも `10px^v とする。 定義される図形は、 ~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
単純な~box辺を表現している色付き~box ◎ Colored boxes representing simple box edges
同じ定義は、 同じ `100px^v 正方形に対し，次の様に［ ~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;
複階的な~box辺を表現している色付き~box ◎ Colored boxes representing complex box 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:
図形を伴わない浮動体を回込んでいる~text ◎ Text wrapping around float with no shape
浮動体に `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 図形を伴う浮動体を回込んでいる~text ◎ Text wrapping around float with margin-box shape
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
各種~値の意味は： ◎ 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.
- `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.
各種~値の意味は： ◎ 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.
- `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 ~offsetの例 — 周囲の内容は、 その~offset分だけ図形との間をあけて回込む。 ◎ Example of a shape-margin offset
`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;
}
~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, Noam Rosenthal, 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
【 この節は未訳。 】