1. 序論
◎非規範的この仕様の`~level 1$ は、 要素の`浮動~区画$の幾何を制御するための~propを定義した。 この~levelは： ◎ Level 1 of this specification defined properties to control the geometry of an element’s float area. This level＼
- `排他体$に図形をどう適用するかを定義する。 ◎ defines how shapes apply to exclusions.＼
- 図形を要素の`内容~区画$に適用するための `shape-inside$p ~propを含む。 ◎ It also includes a shape-inside property for applying a shape to an element’s content area.＼
- これらすべての適用~用に，図形を指定する新たな仕方を定義する。 ◎ Finally, it defines new ways of specifying shapes for all of these applications.
1.1. 値 定義
【 この節の内容は、 `~CSS日本語訳 共通~page＠~CSScommon#values$に移譲。 】
2. 各種用語
- `排他~区画@ ◎ exclusion area
- 行内~flow内容を`排他~box$の周りに排他するために利用される区画。 `排他~区画$は、 `排他~box$用には`~border~box$に等価になる。 この仕様の `shape-outside$p ~propを利用すれば、 任意な矩形でない`排他~区画$を定義できる。 `shape-inside$p ~propも`排他~区画$を定義するが、 この事例では、 それは，図形の外側にある区画になる — 行内~内容がそこを避けるような。 ◎ The area used for excluding inline flow content around an exclusion box. The exclusion area is equivalent to the border box for an exclusion box. This specification’s shape-outside property can be used to define arbitrary, non-rectangular exclusion areas. The shape-inside property also defines an exclusion area, but in this case it is the area outside the shape that inline content avoids.
- `浮動~区画@ ◎ float area
- 内容が`浮動体$を回込むために利用される区画。 既定では，浮動-区画は`浮動体$の`~margin~box$になる。 この仕様の `shape-outside$p ~propを利用すれば、 任意な矩形でない浮動-区画を定義できる。 ◎ The area used for wrapping content around a float element. By default, the float area is the float element’s margin box. This specification’s shape-outside property can be used to define arbitrary, non-rectangular float areas.
- `内容~区画@ ◎ content area
- 通常は、 ~boxの行内~flow内容の~layout用に利用される区画。 ◎ The content area is normally used for layout of the inline flow content of a box.
- `方向に不問な~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.
3. 図形
図形は、 任意な幾何的な輪郭を定義する — 行内~内容は，その周りに~flowする。 `shape-outside$p ~propは、［ `浮動体$用には`浮動~区画$／ `排他体$用には`排他~区画$ ］を定義する。 ◎ Shapes define arbitrary geometric contours around which inline content flows. The shape-outside property defines the float area for a float, and the exclusion area for an exclusion.
4. 基本~図形
`~level 1$ の `§ 基本~図形＠~CSSSHAPES#basic-shape-functions$ をここに追加する。 ◎ Add the final level 1 section.
4.1. ~supportされる図形
`~level 1$ の `§ ~supportされる図形＠~CSSSHAPES#supported-basic-shapes$ をここに追加する。 ◎ Add the final level 1 sections.
4.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 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 = shape( `fill-rule$tp? from `coordinate-pair$t, `shape-command$t#)
`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 `coordinate-pair$t
は、
最初の図形~commandの始点を表現する。
それは、
~command~listに先頭の~itemとして絶対 `~moveto$pC ~commandを追加する
— `coordinate-pair$t は，`基準~box$の左上~隅から測定される。
◎
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, with the <coordinate-pair> measured from the top-left corner of the reference box.
`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 の場合は当の~commandの始点／ `by$v の場合は`基準~box$の左上~隅 ］に相対的になる。
-
`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（ `close$v ）~commandの目的においては，新たな下位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,＼ ↑↑ 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.
選ばれる対象になる［ アリな 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.
4.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:
この図形は、 `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:
この図形を `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:
吹出し全体は`基準~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
);
}
4.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.
5. ~SVG図形の参照-法
~SVGの［ `基本~図形＠~SVGshapes$／`~path＠~SVGpaths$ ］は、 `url^f 構文を利用して参照できる。 ◎ An SVG shape can be referenced using the url() syntax. The shape can be any of the SVG basic shapes or a path element.
【 ここには画像が~mark-upされているが、 ~~参照先は存在しない。 】
~SVG図形を参照している結果 ◎ results of referencing SVG shapes
<style>
div {
height: 400px;
width: 400px;
}
.in-a-circle {
shape-outside: url(#circle_shape);
}
.in-a-path {
shape-outside: url(#path-shape);
}
</style>
<svg ...>
<circle id="circle_shape" cx="50%" cy="50%" r="50%" />
<path id="path-shape" d="M 100 100 L 300 100 L 200 300 z" />
</svg>
<div class="around-a-circle">...</div>
<div class="around-a-path">...</div>
6. 画像による図形
`~level 1$ の `§ 画像による図形＠~CSSSHAPES#shapes-from-image$ をここに追加する。 ◎ Add the final level 1 section.
要素の描画された内容に基づいて図形を定義することが， `示唆された＠https://www.w3.org/Bugs/Public/show_bug.cgi?id=16716$。 これは、 ~securityの含意も伴い得る。 ◎ One suggestion is to define a shape based on an element’s rendered content. This could have security implications.
`image^f 関数に［ 利用する関連な画素たちを決定する何か ］を追加することも， `示唆された＠http://lists.w3.org/Archives/Public/www-style/2014Mar/0120.html$ （図形を［ 定義するため, 表示するため ］両者に）。 ◎ Another suggestion is to add something to an image() function that determines the relevant pixels to use (both for defining a shape and for display).
7. 外部~図形の~fetch法
［ ~SVGまたは画像 ］による `図形~用の外部~資源を~fetchする@ ~algoは、 所与の ( `CSSStyleRule$I %規則 ) に対し ⇒ `~style資源を~fetchする$( ↓ ) ⇒＃ %規則 の~URL, %規則 の`親~stylesheet$, `image^l, `cors^l, 下に与える `応答の処理^i ◎ To fetch an external resource for a shape, either an SVG or an image, given a CSSStyleRule rule, fetch a style resource given rule’s URL, with stylesheet being rule’s parent CSS style sheet, destination "image", CORS mode "cors", and processResponse being the following steps＼
注記： 図形の効果は，当の文書により検出されるので、 図形【用の外部~資源を~fetchするとき】には~CORS~modeが要求される。 ◎ Note: shapes require CORS mode as their effect is detected by the document.
8. ~box値による図形
`~level 1$ の `§ ~box値による図形＠~CSSSHAPES#shapes-from-box-values$ をここに追加する。 ◎ Add the final level 1 section.
9. 図形の宣言-法
図形は、 `shape-outside$p ~propで宣言できる — それには、 `shape-margin$p ~propによる改変もアリになる。 ［ `shape-outside$p, `shape-margin$p ］~propにより定義される図形は、［ `浮動体$の`浮動~区画$, `排他体$の`排他~区画$ ］の幾何を変更する。 ◎ A shape can be 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 and an exclusion element’s exclusion area.
図形は、 `shape-inside$p ~propで宣言できる — それには、 `shape-padding$p ~propによる改変もアリになる。 ［ `shape-inside$p, `shape-padding$p ］~propにより定義される図形は、 当の要素の`回込み文脈$に供与する`排他~区画$ ］を定義する。 `shape-inside$p ~propは、 すべての塊~levelの要素に適用される。 ◎ A shape can be declared with the shape-inside property, with possible modifications from the shape-padding property. The shape defined by the shape-inside and shape-padding properties defines an exclusion area that contributes to the element’s wrapping context. The shape-inside property applies to all block-level elements.
`red^v な~boxは、 `排他体$の内容~boxを図示する, それは［ 改変されない／ 通常の~CSS位置決め（ここでは絶対~位置決め）の~subjectになる ］。 ◎ The red box illustrates an exclusion element’s content box, which is unmodified and subject to normal CSS positioning (here absolute positioning).
<style type="text/css">
.exclusion {
wrap-flow: both;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
shape-outside: circle(50% at 50% 50%);
border: 1px solid red;
}
</style>
<div style=”position: relative;”>
<div class=”exclusion”></div>
Lorem ipsum dolor sit amet...
</div>
`circle$f 図形と~box~modelを描画する例。 ◎ Example rendering of circle shape and box model.
9.1. `shape-outside^p ~prop
`~level 1$ の `§ 浮動~区画の図形＠~CSSSHAPES#shape-outside-property$ をここに追加する — 次に挙げる変更も伴わせて ⇒ `shape-outside$p は塊~levelの要素にも適用され、 要素が`排他体$である場合に効果がある。 ◎ Add the final level 1 section with the change that shape-outside applies to block-level elements and has an effect if the element is an exclusion.
9.2. `shape-inside^p ~prop
`shape-inside$p ~propは、 要素の`回込み文脈$に 1 個以上の`排他~区画$を追加する。 これは、 `内容~区画$を成す通常の矩形な図形を，場合によっては矩形でない回込み区画に改変する。 `排他~区画$は、 当の要素の`内容~区画$から当の図形を減算することにより定義される。 図形を成す［ 要素の`内容~区画$の外側にある部分 ］には効果は無い 【言い換えれば、実質的な図形は，当の図形の外側と内容~区画との交差域になる】。 ◎ The shape-inside property adds one or more exclusion areas to the element’s wrapping context. This modifies the normal rectangular shape of the content area to a possibly non-rectangular wrapping area. The exclusion areas are defined by subtracting the shape from the element’s content area. Any part of the shape outside the element’s content area has no effect.
◎名 `shape-inside@p ◎値 `auto^v | `outside-shape$v | [ `basic-shape$t || `shape-box$t ] | `image$t | `display$v ◎初 `auto^v ◎適 塊~levelの要素 ◎継 されない ◎百 受容しない ◎算 `basic-shape$t 用には算出d長さ／ `url$t 用には絶対~URL／ 他は指定されとおり ◎順 文法に従う ◎ア `basic-shape$t 用には定義されたとおり／他は離散的 ◎表終各種~値の意味は： ◎ The values of this property have the following meanings:
- `auto@v
- 図形は、 当の要素の内容~boxに基づいて算出される。 ◎ The shape is computed based on the content box of the element.
- `outside-shape@v
- 図形は、［ `shape-outside$p, `shape-margin$p ］~propにより定義される図形に基づいて算出される。 ◎ The shape is computed based on the shape defined by the shape-outside and shape-margin properties.
- `basic-shape$t
- 図形は、 `basic-shape$t を成す いずれかの値に基づいて算出される ◎ The shape is computed based on the values of one of the <basic-shape> functions.
- `url$t
-
`url$t が何を参照するかに応じて：
- ~SVG図形~要素を参照する場合 ⇒ その要素が図形を定義する。
- 画像を参照する場合 ⇒ 図形は，指定された画像から抽出される~alpha~channelに基づいて算出される。
- 他の場合 ⇒ その効果は、 値 `auto$v が指定されたかのようになる。
- `display@v
- 図形は、 `CSS Round Display＠~CSSWG/css-round-display$cite にて述べられるとおりの表示を成す図形に基づいて算出される。 ◎ The shape is computed based on the shape of the display as described in css-round-display.
`shape-inside$p ~propは、 `浮動体$にも適用されるが， 適用されない要素もある — `display$p の算出d値に `table＠~CSSDISP#valdef-display-table$v を伴う要素など。 ◎ The shape-inside property applies to floats. ◎ The shape-inside property may not apply on some elements such as elements with a computed display value of table.
`shape-inside^p を［ 伴って／伴わずに ］~flowしている内容 ◎ Content flowing with and without a shape-inside
~overflowする内容は、［ `shape-inside$p, `shape-padding$p ］により追加された`排他~区画$（たち）を避ける （当の要素の`回込み文脈$内の他の`排他~区画$に加えて）。 言い換えれば、 ~overflowは，当の要素の矩形な限界域の外側で継続する。 ◎ Overflow content avoids the exclusion area(s) added by shape-inside and shape-padding (as well as any other exclusion areas in the element’s wrapping context). In other words, overflow continues outside the rectangular bounds of the element.
丸まった矩形と相互作用している~overflow ◎ Overflow interacting with rounded rect
楕円と相互作用している~overflow ◎ Overflow interacting with ellipse
灰色な~boxに代えて~overflowを示す~textを利用して、 上の図を改善する。 ◎ improve the illustration above, using text to show overflow instead of grey boxes.
`自動的~size$を伴う要素は、 `shape-inside^p が`確定的~size$を有する場合には （図形の定義~内に百分率は利用されてない）， 自身の`最大~size$を決定するときの拘束として当の図形を利用するベキである。 ◎ When a shape-inside has a definite size (no percentages used in the shape’s definition) an auto-sized element should use the shape as a constraint in determining its maximum size.
9.3. `shape-image-threshold^p ~prop
`~level 1$ の `§ 画像~内で図形を成す画素を選ぶ＠~CSSSHAPES#shape-image-threshold-property$ をここに追加する — 次に挙げる変更も伴わせて ⇒ `shape-image-threshol^p は［ `shape-inside$p, `shape-outside$p ］どちらにも適用される。 ◎ Add the final level 1 section with the change that it applies to both shape-inside and shape-outside.
9.4. `shape-image-source-type^p ~prop
画像~sourceから図形を得るために利用する値を決定するときに［ ~alpha／輝度 ］による閾値を追加するべきか？ 【~alphaによる閾値はすでに`~level 1$ にある。】 これは、 `shape-image-threshold$p ~prop用の単なる~keyword値にもなり得る。 何であれ，~mask~sourceからの［ ~alpha／輝度 ］閾値と互換になるべきである【`参照＠~MASKING1#MaskValues$】。 ◎ Should we add an alpha/luminance switch to determine which values we use from the shape-image source? This could just be a keyword on the shape-image-threshold property. Whatever we go with should be compatible with the alpha/luminance switch from mask sources.
9.5. `shape-margin^p ~prop
`~level 1$ の `§ 図形の拡幅-法＠~CSSSHAPES#shape-margin-property$ をここに追加する — 次に挙げる変更も伴わせて ⇒ `shape-margin$p は`排他体$にも適用される。 ◎ Add the final level 1 section with the change that it applies to exclusions.
9.6. `shape-padding^p ~prop
`shape-padding$p ~propは、 `shape-inside^p に~paddingを追加する。 これは、 `shape-inside^p から【内方へ】指定された距離~以上にある点からなる新たな図形を定義する。 この~propは、 正な値に限り，とり得る。 ◎ The shape-padding property adds padding to a shape-inside. This defines a new shape where every point is the specified distance from the shape-inside. This property takes on positive values only.
◎名 `shape-padding@p ◎値 `length-percentage [0,∞]$t ◎初 `0^v ◎適 塊~levelの要素 ◎継 されない ◎百 `包含塊$の`行内~size$を~~基準にする ◎算 `length-percentage$t の算出d値 ◎順 文法に従う ◎ア 算出d値の型による ◎表終- `length-percentage [0,∞]$t
- 当の図形の~paddingを指定された値に設定する。 ◎ Sets the padding of the shape to the specified value.
`shape-padding^p により~offsetされる例 ◎ Example of a shape-padding offset
注記： `shape-padding$p ~propが影響するのは， それが適用される要素の内側にある内容の~layoutに限られる一方で、 `shape-margin$p ~propが影響するのは， 当の要素の外側にある内容の~layoutに限られる。 ◎ Note: The shape-padding property only affects layout of content inside the element it applies to while the shape-margin property only affects layout of content outside the element.
~privacyの考慮点
この仕様に対し報告された，新たな~privacyの考慮点は、無い。 ◎ No new privacy considerations have been reported on this specification.
~securityの考慮点
この仕様に対し報告された，新たな~privacyの考慮点は、無い。 ◎ No new security considerations have been reported on this specification.