CSS図形モジュール レベル1

1. はじめに

このセクションは規範的ではありません。

図形は、CSS値として利用可能な任意の形状を定義します。 本仕様では、要素のフロート領域の形状を制御するためのプロパティを定義しています。 shape-outsideプロパティは、図形値を使用して フロートのフロート領域を定義します。

注: 将来のCSS図形モジュールでは、フロート以外の要素にも図形を利用できるようになります。 他のCSSモジュールでも図形を利用でき、例えばCSSマスキング[CSS-MASKING]やCSS Exclusions[CSS3-EXCLUSIONS]などがあります。

注: ユーザーエージェントがCSS ShapesとCSS Exclusionsの両方を実装している場合、 shape-outsideプロパティは 除外領域を定義します。

注: 将来のCSS Shapesでは、shape-insideプロパティが定義され、 要素内のコンテンツを回り込みさせる図形を指定できるようになります。

1.1. モジュール間の相互作用

このモジュールは、[CSS2] 第9章で定義されたフロート機能を拡張します。

1.2. 値

本仕様は、CSSプロパティ定義の慣例（[CSS2]）を 値定義構文（[CSS-VALUES-3]）で採用しています。 本仕様で定義されていない値型は、CSS Values & Units [CSS-VALUES-3]で定義されています。 他のCSSモジュールとの組み合わせによって、これらの値型の定義が拡張される場合があります。

各プロパティ定義に記載されている値に加え、 本仕様で定義されるすべてのプロパティは CSS全体キーワードもプロパティ値として受け付けます。 可読性のため、明示的に繰り返していません。

1.3. 用語

回り込み

本仕様では回り込みという用語を、 フロート領域の側面に沿って コンテンツを流すことを指します（[CSS2]第9章）。 左フロートボックスの右側にコンテンツが回り込み、 右フロートボックスの左側にコンテンツが回り込みます。 この回り込みの結果、フロートの隣にあるラインボックスは フロート領域との重なりを避けるために必要に応じて短くなります。

フロート領域

フロート要素の周りにコンテンツを回り込みさせるために使用される領域です。 フロートの動作ルールはフロート領域の側面を使って コンテンツの流れを決定します。 デフォルトでは、フロート領域はフロート要素のマージンボックスです（ただし margin-box値によって生成される margin-boxとは異なり、ボーダー半径の曲線が含まれます）。 本仕様のshape-outsideおよびshape-marginプロパティを使って、 任意の非矩形のフロート領域を定義できます。

方向非依存サイズ ボックスの方向非依存サイズは、ボックスの対角線の長さを √2で割った値です。

注: これはボックスの幅と高さの平均値を求める方法で、 SVGでは、ボックスサイズのパーセンテージを使いたいが、幅や高さどちらかに偏りたくない場合に利用されます。 正方形の場合は幅・高さと同じ値になります。

2. ボックスモデルとフロート動作との関係

フロートの外側にインラインフローコンテンツを回り込みさせる境界は 図形で定義できますが、実際のボックスモデルは変化しません。 要素にマージン、ボーダー、パディングが指定されている場合は、 [CSS3BOX]モジュールに従って計算・描画されます。 また、フロートの位置決めや積み重ねは、 図形でフロート領域を定義しても影響を受けません。

図形でフロート領域を定義する場合、 図形はフロートのマージンボックスにクリップされます。 つまり、図形はフロート領域を縮小することはできますが、 拡大することはできません。 縮小されたフロート領域は、 通常フロートによって影響を受けるラインボックスには 何も影響しない場合もあります。 図形が領域を囲まない場合でも、 図形のエッジはフロート領域の定義に使われます。

図形で定義されたフロート領域は 通常のフロート領域をすべての側で縮小できますが、 これによってコンテンツがフロートの両側で回り込みできるわけではありません。 左フロート＋shape-outsideでは コンテンツは右側のみ回り込み、 右フロートでは左側のみ回り込みとなります。

<img class="left" src="hand.svg"/>
<img class="right" src="hand.svg"/>
<p>
  時にはWebページのテキストが
  特定のリンクへ注意を向けるよう
  誘導しているように見えます。時には
  気づかないこともあります。
</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: polygon(0 0, 500% 500%, 0 500%);

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

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

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

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

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

3. 基本図形

<basic-shape>型は 基本図形関数で指定できます。 この構文で図形を定義する場合、 参照ボックスは <basic-shape>値を使う各プロパティによって定義されます。 図形の座標系の原点は参照ボックスの左上隅にあり、 x軸は右方向、y軸は下方向に伸びます。 パーセンテージで表される長さは 参照ボックスの使用寸法から解決されます。

3.1. 対応している図形

<basic-shape>関数は以下の通りです：

<inset()> = inset(
  <length-percentage>{1,4}
  [ round <'border-radius'> ]?
)

<xywh()> = xywh(
  <length-percentage>{2} <length-percentage [0,∞]>{2}
  [ round <'border-radius'> ]?
)

<rect()> = rect(
  [ <length-percentage> | auto ]{4}
  [ round <'border-radius'> ]?
)

<basic-shape-rect> = <inset()> | <rect()> | <xywh()>

<circle()> = circle(
  <radial-size>?
  [ at <position> ]?
)

<ellipse()> = ellipse(
  <radial-size>?
  [ at <position> ]?
)

<polygon()> = polygon(
  <'fill-rule'>? 
  [ round <length> ]? ,
  [<length-percentage> <length-percentage>]#
)

<path()> = path(
  <'fill-rule'>? ,
  <string>
)

<shape()> = shape(
  <'fill-rule'>?
  from <position>
  <shape-command>#
)

inset()

各辺からのインセット量で 参照ボックス内に矩形を定義します。

4つ未満の<length-percentage>値が指定された場合、 省略された値のデフォルトはmargin ショートハンドと同様です： 2番目・3番目の省略値は1番目に、4番目の省略値は2番目にデフォルトされます。

4つの<length-percentage>は 上・右・下・左の各辺までのインセット量を、 参照ボックスからの距離として定義します。

どちらか一方向のインセット値の合計が 使用寸法を超える場合（例：左右とも75%など）、 CSS Backgrounds 3 § 4.5 曲線の重なりルールに従い インセット効果が100%になるよう比例して縮小されます。

例： inset(75% 0 50% 0)と指定すると、上下の合計が 参照ボックスの高さの125%になり、 比例して合計100%に縮小され、 inset(60% 0 40% 0)と同じになります。

オプションの<'border-radius'>引数は border-radiusショートハンド構文で 矩形の角丸を定義します。

テスト

• inset-function-computed.html (ライブテスト) (ソース)
• inset-function-invalid.html (ライブテスト) (ソース)
• inset-function-valid.html (ライブテスト) (ソース)

xywh()

参照ボックスの 上端・左端からのオフセットと指定した幅・高さで矩形を定義します。

4つの<length-percentage>は順に、 参照ボックスの左端からのインセット、 参照ボックスの上端からのインセット、 矩形の幅、 矩形の高さを定義します。

注: この構文はSVGの viewBox 属性に着想を得ています。

オプションの<'border-radius'>引数は border-radiusショートハンド構文で インセット矩形の角丸を定義します。

テスト

• xywh-function-computed.html (ライブテスト) (ソース)
• xywh-function-invalid.html (ライブテスト) (ソース)
• xywh-function-valid.html (ライブテスト) (ソース)

rect() =

参照ボックスの 上端・左端からのインセットで矩形を定義します。

4つの<length-percentage>は、 上・右・下・左の各辺までの位置を、 それぞれ、 1番目・3番目は参照ボックスの上端、 2番目・4番目は参照ボックスの左端からの距離として定義します。

auto値はボックスの該当辺を 参照ボックスの同じ辺に一致させます： 上（1番目）や左（4番目）は0%、右（2番目）や下（3番目）は100%と同等です。

右（2番目）と下（3番目）の値は、 左（4番目）や上（1番目）の値で下限制限されます。

例： rect(10px 0 0 20px)と指定すると、 下辺が上辺より上に、右辺が左辺より左になり、 両方とも他の辺を越えないように修正されます。 rect(10px 20px 10px 20px)と同じ結果となります。

注: この構文は レガシーなrect()関数と似ていますが、 clip プロパティ専用で使われていたものとは完全には一致しません。

オプションの<'border-radius'>引数は border-radiusショートハンド構文で 矩形の角丸を定義します。

テスト

• rect-function-computed.html (ライブテスト) (ソース)
• rect-function-invalid.html (ライブテスト) (ソース)
• rect-function-valid.html (ライブテスト) (ソース)

circle()

• <radial-size>引数は 円の半径を定義します。 グラデーションボックスではなく、 参照ボックスに対して値が解決されます。

• 2つの<length-percentage>値は無効です。

  <position>引数は 円の中心を定義します。 特に指定がなければ、省略時はcenterがデフォルトです。

テスト

• circle-function-computed.html (ライブテスト) (ソース)
• circle-function-invalid.html (ライブテスト) (ソース)
• circle-function-valid.html (ライブテスト) (ソース)

ellipse()

• <radial-size>引数は 楕円の水平・垂直半径を定義します。 グラデーションボックスではなく、 参照ボックスに対して値が解決されます。

• <position>引数は 楕円の中心を定義します。 特に指定がなければ、省略時はcenterがデフォルトです。

テスト

• ellipse-function-computed.html (ライブテスト) (ソース)
• ellipse-function-invalid.html (ライブテスト) (ソース)
• ellipse-function-valid.html (ライブテスト) (ソース)

polygon()

• <'fill-rule'>は 内部判定に使う充填ルールを指定します。 省略時はnonzeroがデフォルトです。

• オプションでroundキーワードの後に <length>を指定すると、 ポリゴン各頂点の角丸を定義します。 長さは頂点の小さい角の二等分線上にある円の半径で、 両辺に接する円となります。

  

  各頂点の角丸が線分の半分以上にならないよう、 各頂点ごとに半径をそれぞれ独立して調整し、 半径が両頂点の線分に対してtan(angle/2) segment / 2の小さい方を超えないようクランプします。

  

• 各<length-percentage>ペアは ポリゴン頂点を指定し、 参照ボックスの左端・上端からのオフセットとして 水平方向・垂直方向の距離を示します。

UAはポリゴンの最後の頂点と最初の頂点を結ぶことでポリゴンを閉じる必要があります。

テスト

• polygon-function-computed.html (ライブテスト) (ソース)
• polygon-function-invalid.html (ライブテスト) (ソース)
• polygon-function-valid.html (ライブテスト) (ソース)

path()

• <'fill-rule'>は 内部判定に使う充填ルールを指定します。 省略時はnonzeroがデフォルトですが、 SVG図形などfill-ruleプロパティが 関連するコンテキストでは省略値はそのプロパティの算出値となります。

• <string>は SVG Pathデータ文字列を表します。 SVG 1.1の文法・構文ルールに準拠しないか、 準拠しても空パスとなる場合は 無効となり、path()全体が無効となります。

  初期位置はパス文字列の最初の“move to”引数で定義されます。 初期方向はSVG 1.1に従います。

UAは、閉じたループが必要なプロパティ（shape-outsideやclip-pathなど）で パス文字列にclosepathコマンド("z"または"Z")が入っていない場合は、暗黙的に追加してパスを閉じる必要があります。

テスト

• path-function-computed.html (ライブテスト) (ソース)
• path-function-invalid.html (ライブテスト) (ソース)
• path-function-valid.html (ライブテスト) (ソース)

shape()

shape()関数の項を参照してください。

テスト

3.1.1. shape()関数

path()関数は、SVGパス構文の再利用によって、より特化された図形関数よりも自由な図形を定義できますが、パス全体を1つの文字列として記述する必要があります（例えばvar()で部分的に構築することはできません）。また、SVG由来の制限も引き継いでおり、例えば暗黙的にpx単位しか使えません。

shape()関数は、path()関数で使われるコマンドとほぼ同等のコマンド群を、より標準的なCSS構文で記述できます。また追加の単位や数値関数など、CSSの全機能を利用できます。 shape()で使われるコマンドは、描画時に動的にパスセグメントへ変換されます（例えばレンダリングされたclip-pathの計算時など）。

この意味でshape()はpath()の上位互換です。path()は容易にshape()へ変換できますが、shape()を再びpath()やSVGへ戻すには、CSS環境（例: CSSカスタムプロパティの値、em単位なら現在のフォントサイズなど）の情報が必要です。

<'fill-rule'>はpath()の同じ引数と同様に解釈されます。

残りの引数は、SVGパスと同じパスデータコマンドのリストを定義し、その図形を表します。

from <coordinate-pair>は最初のshape-commandの開始点を表します。 パスデータコマンドのリストに最初の絶対movetoを追加します。

<shape-command>の並びは、以降のパスデータコマンドを表します。 各コマンドの開始点は直前コマンドの終点となります。

<shape-command> = <move-command> | <line-command> | close |
                  <horizontal-line-command> | <vertical-line-command> |
                  <curve-command> | <smooth-command> | <arc-command>

<move-command> = move <command-end-point>
<line-command> = line <command-end-point>
<horizontal-line-command> = hline
        [ to [ <length-percentage> | left | center | right | x-start | x-end ]
        | by <length-percentage> ]
<vertical-line-command> = vline
        [ to [ <length-percentage> | top | center | bottom | y-start | y-end ]
        | by <length-percentage> ]
<curve-command> = curve
        [ [ to <position> with <control-point> [ / <control-point> ]? ]
        | [ by <coordinate-pair> with <relative-control-point> [ / <relative-control-point> ]? ] ]
<smooth-command> = smooth
        [ [ to <position> [ with <control-point> ]? ]
        | [ by <coordinate-pair> [ with <relative-control-point> ]? ] ]
<arc-command> = arc <command-end-point>
            [ [ of <length-percentage>{1,2} ]
              && <arc-sweep>? && <arc-size>? && [rotate <angle>]? ]

<command-end-point> = [ to <position> | by <coordinate-pair> ]
<control-point> = [ <position> | <relative-control-point> ]
<relative-control-point> = <coordinate-pair> [ from [ start | end | origin ] ]?
<coordinate-pair> = <length-percentage>{2}
<arc-sweep> = cw | ccw
<arc-size> = large | small

<coordinate-pair> = <length-percentage>{2}

座標のペアを定義し、それぞれ指定された基準点から右方向・下方向へのオフセットを表します。 パーセンテージ値はreference boxの幅または高さから解決されます。

<command-end-point> = [ to <position> | by <coordinate-pair> ]

すべてのコマンドは "absolute" または "relative" 座標で指定でき、それはbyまたはtoのコンポーネントにより決まります。toはコマンド内の<coordinate-pair>がreference boxの左上隅からの距離であることを示し、 byはコマンドの開始点からの相対距離となります。

<relative-control-point>は curve制御点のby/toの解釈方法を定義し、 <horizontal-line-command>や <vertical-line-command>は 水平線・垂直線のby/toの解釈方法を定義します。

toを使う場合、座標は<position>としても指定できます。

注: どちらの場合でも、<percentage>値は<coordinate-pair>内で 常にreference boxのサイズで解決されます。

<move-command> = move <command-end-point>

パスデータコマンドリストにmovetoコマンドを追加します。 終点は<coordinate-pair>で指定されます。

このコマンドは何も描画せず、次のコマンドのために「ペンを移動」するだけです。

注: これはcloseコマンドのために新しいサブパスを開始します。

<line-command> = line <command-end-point>

パスデータコマンドリストにlinetoコマンドを追加します。 終点は<coordinate-pair>で指定されます。

開始点から終点まで直線を描画します。

<horizontal-line-command> = hline [ to [ <length-percentage> | left | center | right | x-start | x-end ] | by <length-percentage> ]

パスデータコマンドリストに水平linetoコマンドを追加します。

これはlineコマンドで <length-percentage>を <coordinate-pair>の水平方向成分として指定した場合と同等です。 <position>（left, center, right, x-start, x-end）を <length-percentage>の代わりに指定すると、 その<position>へ線を描画し、 <position>の垂直成分は開始点と同じになります。

<vertical-line-command> = vline [ to [ <length-percentage> | top | center | bottom | y-start | y-end ] | by <length-percentage> ]

パスデータコマンドリストに垂直linetoコマンドを追加します。

これはlineコマンドで <length-percentage>を <coordinate-pair>の垂直方向成分として指定した場合と同等です。 <position>（top, center, bottom, y-start, y-end）を <length-percentage>の代わりに指定すると、 その<position>へ線を描画し、 <position>の水平方向成分は開始点と同じになります。

<curve-command> = curve [ [ to <position> with <control-point> [ / <control-point> ]? ] | [ by <coordinate-pair> with <relative-control-point> [ / <relative-control-point> ]? ] ]

パスデータコマンドリストにベジェ曲線コマンドを追加します。 toキーワードに続く<position>や、 byキーワードに続く<coordinate-pair>で終点を指定します。

with成分で曲線の制御点を指定します： 制御点が1つの場合は2次曲線、 2つの場合は3次曲線となります。

<smooth-command> = smooth [ [ to <position> [with <control-point> ]? ] | [ by <coordinate-pair> [ with <relative-control-point> ]? ] ]

パスデータコマンドリストにスムーズなベジェ曲線コマンドを追加します。 toキーワードに続く<position>や、 byキーワードに続く<coordinate-pair>で終点を指定します。 with成分が省略された場合はスムーズな2次曲線、 指定された場合はスムーズな3次曲線となります。

注: smoothコマンドは curveコマンドと等価で、 最初の制御点は直前の曲線コマンドの2つ目の制御点を開始点に対して反転した位置となり、 直前が曲線でなければ開始点自身となります。 これにより前のコマンドとG1連続性（滑らかな繋ぎ）を保証し、 曲線が前のコマンドから急激に方向を変えることを防ぎます。

<control-point> = [ <position> | <relative-control-point> ]

2次または3次ベジェ曲線の制御点を指定します。

<relative-control-point> = <coordinate-pair> [ from [ start | end | origin ] ]?

2次または3次ベジェ曲線の制御点を指定します。 fromキーワードの後にstart、end、originを指定した場合、 与えられた<coordinate-pair>は それぞれコマンドの開始点・終点・reference boxに対する相対値となります。 指定しない場合はセグメントの開始点に対する相対値となります。

<arc-command> = arc <command-end-point> [of <length-percentage>{1,2}] && <arc-sweep>? && <arc-size>? && rotate <angle>? ]

パスデータコマンドリストに楕円弧コマンドを追加します。 終点は<command-end-point>で指定されます。

of成分は弧を構成する楕円のサイズを指定します。 1つ目の<length-percentage>が水平方向半径、 2つ目が垂直方向半径となります。 <coordinate-pair>と同様、 <percentage>値はreference boxの幅・高さで解決されます。

半径値が1つだけの場合は両方に同じ値を使い、 この時<percentage>値は direction-agnostic sizeで解決されます（circle()関数と類似）。

SVGでは楕円半径のエラー処理が仕様化されています:

• 終点と開始点が同じ場合、コマンドは何もしません

• いずれかの半径が0の場合、そのコマンドは終点への<line-command>と同等です

• いずれかの半径が負の場合は絶対値が使われます

• 指定した半径で開始点と終点を通る楕円が存在しない場合（指定した回転後）、 楕円は両点を通るよう均等に拡大されます。

指定した半径による楕円は軸揃えがデフォルトですが、 <angle>で回転できます。 transformのrotate()関数同様、正の角度は時計回り、負の角度は反時計回りです。省略時は0degです。

終点・半径・角度で 通る楕円は通常2つあり、どちらも両点を通る弧が2通りずつで計4つの弧が選べます。 <arc-sweep>と<arc-size>でどの弧を選ぶか指定します:

• <arc-sweep>はcwまたはccwで、 楕円の中心から時計回り・反時計回りの弧を選択します。省略時はccwです。

  注: SVGのarcコマンドではcwはsweepフラグ1、ccwは0に対応します。

• <arc-size>はlargeまたはsmallで、 2つの弧のうち大きい方・小さい方を選択します。省略時はsmallです。

  注: SVGのarcコマンドではlargeはlargeフラグ1、smallは0に対応します。

  注: 開始点と終点が楕円の完全に反対側にある場合は、両弧は同じ長さとなり楕円は1つだけです。 この場合、<arc-sweep> がどちらの弧を選ぶか決め、<arc-size>は効果がありません。

close

パスデータコマンドリストにclosepathコマンドを追加します。

注: これはline コマンドで終点をサブパス開始点にしたものと類似です。 生の図形指定では同じですが、パスにストローク指定がある場合は closeコマンドの終点がサブパスの最初と滑らかにつながり、 line-joinやline-capの描画に影響します。

3.1.1.1. shape()を使ったレスポンシブ・パラメトリックな吹き出しの作成

.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") };

.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%); }

.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%); }

.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); }

: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() 関数の補間

shape() および path() 関数は、関連するパスデータコマンドのリストが同じ長さで、同じコマンドが同じ順序で並んでいる場合に、互いに補間できます。 path() 関数の最初のコマンドは、shape() 関数の初期 <coordinate-pair> と補間されます。

注: path() 関数の最初のコマンドは必ず move です。SVG仕様の moveTo を参照してください。

開始値と終了値が両方とも path() 関数の場合、 補間値は path() 関数となります。 それ以外の場合は shape() 関数となります。 どちらの場合も、 補間値は同じパスデータコマンドのリストを表し、 各コマンドの数値成分が開始リストと終了リストの対応する成分間で補間されます。

この目的のため、「同じ」コマンドとは、同じコマンドキーワードと同じ <by-to> キーワードを使う場合です。 curve や smooth では、制御点の数も同じでなければなりません。

arc コマンドで開始リストと終了リストで <arc-sweep> が異なる場合、 補間結果は進捗値が0から1の間で cw を使用します。 <arc-size> キーワードが異なる場合も、 補間結果は進捗値が0から1の間で large を使用します。

注: arc キーワードの補間規則は 既存のSVG path の補間規則に合わせたものです。

3.2. 基本図形の算出値

<basic-shape>関数内の値は、次の例外を除き指定通りに算出されます：

• 省略された値は補完され、デフォルト値で算出されます。
• <position>値はcircle()やellipse()で、 原点（左上）からの水平方向・垂直方向オフセットのペア（<length-percentage>）として算出されます。
• <'border-radius'>値は<basic-shape-rect>関数で、 8個の<length-percentage>値に展開されて算出されます。
• すべての<basic-shape-rect>関数は等価なinset()関数で算出されます。

  注: rect(t r b l)なら、等価な関数はinset(t calc(100% - r) calc(100% - b) l)です。 xywh(x y w h)なら、等価な関数はinset(y calc(100% - x - w) calc(100% - y - h) x)です。

3.3. 基本図形のシリアライズ

<basic-shape>関数のシリアライズは、 それぞれの文法に従って、文法の記述順で、 空白区切りのトークンを1つのスペースで連結し、 シリアライズされたカンマの後には1つのスペースを入れて行います。 算出値をシリアライズする場合は、 コンポーネント値を算出し、 意味が変わらなければ省略します。

3.4. 基本図形の補間

2つの基本図形間の補間では 以下の規則が適用されます。 shape関数内の値は算出値で補間されます。 リスト値は、可能な限り 長さ・パーセンテージ・calcとして補間されます。 リスト値がそれらの型でなくても 両リスト同じ値の場合 （例えば両方の同じ位置にnonzeroがある場合） それらの値も補間されます。

• 両方の図形は同じreference boxを使用する必要があります。
• 両方の図形が同じ型で、 型がellipse()またはcircle()で、 半径が<length-percentage>（キーワードでなく）で指定されている場合、 shape関数内の各値を補間します。
• 両方の図形がinset()型の場合、 shape関数内の各値を補間します。
• 両方の図形がpolygon()型で、 両方のポリゴンが同じ頂点数で、 同じ<'fill-rule'>を使っている場合、 shape関数内の各値を補間します。
• その他の場合は補間は指定されません。

4. 画像からの図形

図形を定義するもう一つの方法は、 アルファチャンネルを使って図形を計算する ソースとなる<image>を指定することです。 図形は指定した画像の不透明度が shape-image-threshold値より大きい領域を 囲むパス（複数可）として計算されます。 指定したしきい値より大きいアルファ値のピクセルがなければ、 空のフロート領域となり回り込みに影響しません。 shape-image-thresholdが 指定されていない場合、初期値は0.0です。

画像は、要素の 使用コンテンツボックスサイズと同じ幅・高さを持つ 置換要素としてサイズ・位置決めされます。

アニメーションラスター画像形式（GIFなど）の場合は、 アニメーションの最初のフレームが使われます。

画像が段落の左側にフロートしています。 画像は透明な背景付きのCSSロゴの3Dバージョンを表示しています。 ロゴにはアルファチャンネルによる影が付いています。

画像はfloat areaを shape-outsideプロパティで定義しています。

  <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プロパティはimg要素のsrc属性のurlを再利用しています。

画像を表示しつつ、フロート領域用には別の画像を使うことも可能です。

下図では、アルファチャンネルのしきい値がCSSロゴの周囲の点線で示されています。

段落の行頭位置は次の3つの方法で調整できます：

1. 画像のアルファチャンネルを変更する
2. shape-image-thresholdプロパティの値を変更する
3. shape-marginプロパティの値を変更する（例8参照）

5. ボックス値から作成する図形

図形はCSSボックスモデルのエッジを参照して定義できます。 これらのエッジには、使用されたborder-radius値によるborder-radiusの曲線 [CSS3BG]も含まれます。 <shape-box>値は、<visual-box>値を拡張し、 margin-boxも含めます。 構文は以下の通りです：

<shape-box> = <visual-box> | margin-box

値の定義は以下の通りです：

margin-box値は、外側のマージンエッジで囲まれる図形を定義します。 この図形の角の半径は、対応するborder-radiusとmargin値で決まります。 border-radius/marginの比が1以上の場合、 またはmarginが負または0の場合は、 マージンボックスの角丸はmax(border-radius + margin, 0)となります。 border-radius/marginの比が1未満かつmarginが正の場合は、 マージンボックスの角丸はborder-radius + margin * (1 + (ratio-1)^3)となります。

border-box値は、外側のボーダーエッジで囲まれる図形を定義します。 この図形は、外側のボーダーに対する通常のボーダー半径の形状規則に従います。

padding-box値は、外側のパディングエッジで囲まれる図形を定義します。 この図形は、内側のボーダーに対する通常のボーダー半径の形状規則に従います。

content-box値は、外側のコンテンツエッジで囲まれる図形を定義します。 このボックスの各角丸は、 border-radius - border-width - paddingの値か0のうち大きい方となります。

下の100px四方のボックスで パディング・ボーダー・マージンがすべて10pxの場合、 各ボックス値は次の図形を定義します：

• margin-box：黄色のピクセル全体を含む図形
• border-box：黒色のピクセル全体を含む図形
• padding-box：藤色のピクセル全体を含む図形
• content-box：青色のピクセル全体を含む図形

同じ100px四方のボックスでも、ボーダー・パディング・マージンのプロパティが下記の場合は、定義は同じです：

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

通常のフロート回り込みと margin-box値で定義された図形による回り込みの違いは、 margin-box図形には角丸形状が含まれる点です。 100px四方、パディング・ボーダー・マージンがすべて10px、 border-radiusが60pxの場合、 左フロートにすると、コンテンツは通常このように回り込みます：

フロートにmargin-box図形を追加すると、 コンテンツは丸いmargin-boxの角の周りに回り込みます。

  shape-outside: margin-box;

6. 図形の宣言

図形はshape-outsideプロパティで宣言し、 必要に応じてshape-marginプロパティで修正できます。 shape-outsideとshape-marginプロパティで定義された図形は、 フロート要素のfloat areaの形状を変更します。

6.1. フロート領域の図形: shape-outside プロパティ

このプロパティの値の意味は以下の通りです：

none

float areaには影響しません。

<shape-box>

これらの値のみが指定された場合、 図形はmargin-box、 border-box、 padding-box、 content-boxのいずれかで計算されます。 これらはそれぞれのボックス（border-radiusの曲線含む）を使い、 background-clip [CSS3BG] と同様です。

<basic-shape>

図形は<basic-shape>関数のいずれかで計算されます。 <shape-box>も指定された場合は、 <basic-shape>関数のreference boxを定義します。 <shape-box>が指定されなければ、 reference boxはmargin-boxがデフォルトになります。

<image>

図形は指定した<image>の アルファチャンネルに基づいて shape-image-thresholdで定義された方法で計算されます。

ユーザーエージェントはCORSプロトコル （[FETCH]仕様）を shape-outside値のすべてのURLに対して使用しなければなりません。 取得時は"Anonymous"モードを使い、 リファラーソースをスタイルシートのURLに設定し、 オリジンは含む文書のURLに設定します。 これによりネットワークエラーとなり有効なフォールバック画像が得られなければ、 none値が指定された場合と同じ扱いになります。

6.2. 画像ピクセルの選択: shape-image-thresholdプロパティ

shape-image-thresholdは 画像を使って図形を抽出する際に用いるアルファチャンネルのしきい値を定義します。 例えば値が0.5の場合、 50%以上不透明なピクセルをすべて囲む図形になります。

このプロパティの値の意味は以下の通りです：

<number>

画像から図形を抽出する際のしきい値を設定します。 図形はアルファ値がしきい値より大きいピクセルで定義されます。 しきい値が0.0（完全に透明）から1.0（完全に不透明）の範囲外で指定された場合は この範囲にクランプされます。

注: 将来のCSS Shapesでは、 画像のアルファデータではなく輝度データを使うスイッチが定義される可能性があります。 その場合、shape-image-thresholdはそのスイッチ状態により アルファまたは輝度のいずれかにしきい値を適用するよう拡張されます。

6.3. 図形の拡張: shape-marginプロパティ

shape-marginプロパティは、 shape-outsideにマージンを追加します。 これは、元の図形の各点からshape-marginの距離だけ 外側（垂直方向）に伸ばした、最小の輪郭（シュリンクラップ的な意味で）となる新しい図形を定義します。 これには元の図形の任意のエッジや線分も含まれます。 垂直方向が定義できない点（鋭角な点や線端など）では、 その点を中心とした半径shape-marginの円周上のすべての点を取ります。

shape-outsideを適用した新しい図形が float areaを決定し、 回り込みの判断前に 必ず構成されなければなりません。

このプロパティは負でない値のみを取ります。

<length-percentage [0,∞]>

図形のマージンを指定した値に設定します。

注: shape-marginを追加しても float areaがフロート要素のmargin boxの外まで広がることはありません。 shape-marginによるクリッピングを避けるために 追加のmarginが必要な場合があります。

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

shape-marginを例6のCSSロゴに追加すると、 図形の周りの回り込み行ボックスがさらに短くなります。 画像のアルファチャンネルが画像の右端まで達している場合は、 shapeがmargin boxでクリップされないように追加でmargin-rightを指定する必要があります。

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

7. プライバシーに関する考慮事項

この仕様に対してプライバシー上の懸念は提起されていません。

8. セキュリティに関する考慮事項

shape-outsideの<image>値は 一部の画像データを新たな方法で公開する可能性があるため、 CORS承認済み画像のみ利用が可能です。

謝辞

この仕様は以下の方々や CSSワーキンググループのメンバーからの貢献により実現しています: 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 など。

変更履歴

2022年11月15日以降

• Web Platform Testの注釈追加
• SVG shapes の path() の fill-rule のデフォルト値を変更
• shape-marginとfloat areaの関係を明確化
• polygonの角丸例を追加
• issue #9728のためプロパティ解説に全ての基本図形を含めた
• polygon頂点角丸の開始を追加
• issue #8311について、shape-image-thresholdの値にopacity-valueを使用
• opacity値として <alpha-value> を置換
• issue #5160のため、shape-outsideがinitial letter boxにも適用されることを明確化
• issue #824のためellipse()/circle()定義をImagesの&radial-size;ベースに変更
• 位置のデフォルト化は他仕様（Motion等）で上書き可能であることを明確化
• issue #8695のためshapeのシリアライズセクションと例を修正
• issue #9053のためxywh()算出値を修正
• PR #9650で暗黙的なカンマが任意となるよう構文を書き直し
• PR #9505で<*-box>定義を整理
• プロパティ定義に範囲記法を追加
• issue #9843でpolygon()の頂点角丸を追加
• <basic-shape>について issue #9728のためshape-outside解説を更新
• issue #2949のためshape-marginのfloat areaへの寄与を明確化
• issue #3468からSVG shapesのfill-ruleデフォルト処理を追加
• 'shape()'をレベル2から移動

2014年3月20日以降

• shape-marginの算出値を明確化
• デフォルト位置値のシリアライズを明確化（issue #402）
• 空のcircle/ellipseについて明確化（issue #850）
• propdefテーブルから"Media:"項目削除（すべてのCSSモジュールと同様）
• ボックスモデル参照をCSS 2からCSS Box Model 3へ更新
• propdefテーブルの算出値とアニメーション型を更新
• shape-outsideプロパティの算出値を明確化（issue #4042）
• shape-image-thresholdがパーセンテージ値も取れることを明確化（issue #4102）
• path()をレベル2から戻した
• margin-boxの負マージン処理を追加（issue #675）
• position値の特別扱いシリアライズを削除（issue #2301）
• shape-marginの例を明確化
• margin=0の場合のmargin-box shape追加（issue #675）
• 変形図形のルールをshape edge基準に変更（issue #2375）
• 無効なpath文字列はpath()も無効とすることを明確化（issue #392）
• inset矩形の定義を書き直し、auto値追加、例追加
• 基本図形rect関数の算出値を明確化
• 範囲記法や定義用語のエクスポートなどマークアップ修正
• プライバシー/セキュリティ考慮事項を分離

2014年2月11日以降

• 最初の例でdivから画像に変更
• 最後のシリアライズ例に0px追加

2013年12月3日以降

• 基本図形の算出値・シリアライズを更新
• margin-boxの例を追加
• shape-outsideのauto値をnoneに変更
• shape-box定義を追加しbox再定義を廃止
• 画像からのshapeで複数のpathが生成される場合があることを明確化

2013年6月20日以降

• ボックス値からshapeを定義する節追加
• 基本図形補間を更新
• 負のinsetを許可、負のradiusは禁止
• relevantをreferenceに変更
• box-sizing依存削除とboxキーワード追加
• circle()/ellipse()をradial gradient構文に変更
• rectangle()をレベル2へ延期
• 画像からのshapeのサイズ・位置決め仕様を明確化
• inset-rectangle()をinset()へ変更
• shape-image-thresholdを将来輝度にも対応できるよう記述
• shape-outside URLにCORS取得追加
• shape-outside値を<uri>から<image>へ変更
• auto-sizingでパーセンテージが0になる特例を削除
• shape-image-thresholdの初期値を0.0に変更
• shape-outsideによるfloat位置への影響をなくした
• floatのshapeはmargin boxでクリップ

2012年5月3日以降

• SVG要素由来shapeは将来のShapesレベルへ延期
• shape-insideを将来のShapesレベルへ延期
• exclusionsとshapesを別モジュールに分割
• inset-rectangle()を基本図形に追加
• shape-insideオーバーフロー図をexclusion動作で示すよう変更
• shape-insideがラッピングコンテキストに寄与するよう変更
• 排他エッジをラッピングコンテンツのwriting mode基準に定義
• start, end, before, afterの使い方を一貫化
• 基本図形の補間を追加
• 基本図形がbox-sizingで指定されたボックスに依存するよう変更
• shape-insideオーバーフロー動作追加
• wrap-flow:minimum追加
• 処理モデルを明確化
• wrap-margin/wrap-paddingをshape-margin/shape-paddingに名称変更
• wrapショートハンド削除

2011年12月13日以降

• 処理モデルを明確化
• floatとの関係を明確化
• 除外要素が新しいブロックフォーマットコンテキストを確立することを明確化