The neighborhood library keeps a small garden beside its reading room. Volunteers label the seedlings, share spare pots, and record which plants attract insects. A curved illustration can sit beside this paragraph while the browser keeps the words in their original order. As the column becomes narrower, the same sentence needs different line breaks. The artwork remains the same size in this example, so the available room beside it changes. After the illustration ends, the paragraph can use the full column again. Editors can revise this text without moving individual words or drawing separate text lines. The layout belongs to the web page, while the SVG supplies the visible silhouette.
```
たとえば `python -m http.server 8000` でフォルダーをHTTP配信し、`http://localhost:8000/index.html` を開きます。2つのファイルは同一オリジンになります。ローカルのファイルURLは、ここで検証した読み込み方法ではありません。
`class="sample narrow contour"` を `class="sample narrow"` に変えると、通常の長方形のfloat回り込みと比較できます。`narrow` を `wide` に変えると520ピクセルのカラムを試せます。段落と画像は変えません。
[displayのリファレンス](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display#flow-root)は、`flow-root` がブロック整形コンテキストを作ると説明しています。ここでは各サンプル内にfloat画像を収めます。単語を配置する機能ではなく、その処理はブラウザーのインラインレイアウトが行います。
*4つの実際のHTMLレイアウトは、同じ独自のSVGと段落を使います。輪郭版にはshape-outsideと10pxの形状マージンを加え、単語を手動配置していません。*
## 3. 複数の幅で描画された行を確認する
Chromium 155で、Arialの16px、行の高さ24pxを使い、4つの表示サンプルを実行しました。画像は150 × 180pxに固定し、カラムのコンテンツ幅を360pxと520pxにしました。両方の輪郭サンプルに `shape-margin: 10px` と `shape-image-threshold: 0.5` を使いました。
| 実際のサンプル | 描画されたテキスト行数 | 1行目の開始位置 | テキストの高さ |
| ---------------- | ----------- | -------- | ------- |
| rectangle-narrow | 18 | 150px | 432px |
| rectangle-wide | 13 | 150px | 312px |
| contour-narrow | 18 | 115.5px | 432px |
| contour-wide | 12 | 115.5px | 288px |
狭い輪郭版では、合計行数は減りませんでしたが、折り返し方が変わりました。広い幅では、輪郭サンプルは長方形の対照例より1行少なくなりました。
各単語のネイティブなDOM Rangeの長方形を測り、縦位置でまとめました。これは描画されたテキスト行の測定であり、ブラウザー内部の行ボックスオブジェクトへアクセスしたものではありません。また、計算済みのfloatと形状の設定、読み込んだ画像の寸法、実際のSVG画像内のアルファサンプルも確認しました。
両方の幅で、輪郭に沿う一部の行は、長方形floatの150pxの除外境界より左から始まりました。画像の後には、テキストがカラム全幅へ戻りました。これらの観察から、試した輪郭がスクリーンショットの見た目だけでなく、実際のレイアウトに影響したことが分かります。
正確な行数と座標は、フォント、ブラウザー、段落、画像、幅によって変わります。文を置き換えたり別フォントを読み込んだりすると変わる場合があります。これらの数値をデザイン定数として残すのではなく、実際のコンテンツを狭い幅と広い幅で試してください。
## 4. 形状マージン・アルファ・読み込みを分けて考える
[`shape-margin`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-margin)は、回り込みの形状を広げ、その形とテキストの間に余白を作ります。ここでの10pxはレイアウト上の選択であり、見える各文字形とイラスト上のすべての点の間の最小距離を測った値ではありません。
[CSS Shapes仕様](https://www.w3.org/TR/css-shapes-1/)は、通常のボックスモデルを保ち、形状の効果をfloatのマージンボックス内に切り詰めます。形状マージンを大きくしても、画像のCSSボックスが大きくなるわけではありません。デザインにもっとスペースが必要なら、floatの寸法と通常のマージンも確認します。
[`shape-image-threshold`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-image-threshold)は、画像の形を取り出すためのアルファ閾値を選びます。元のサンプルは、外側が完全に透明で、中央のデザインが不透明です。柔らかい影や半透明の縁では、意図的な閾値の選択と目視確認が必要です。閾値を変えても、不透明な背景を透明にはできません。
画像URLは、形状用に読み込み可能である必要もあります。CSS Shapesは画像URLにCORSリクエストを指定し、読み込みに失敗するとカスタム形状なしへ戻ります。この例ではSVGをページと同じ場所で配信し、別オリジンへの依存を避けています。CDNで配信する場合は、そのサーバーのCORSレスポンスを設定し、リクエストとレイアウトを調べます。`img` 要素に画像が見えるだけでは、形状用リクエストの成功を示しません。
## 5. テキスト順序を保ち、完成ページを確認する
検証した4つの段落はいずれも、1つのテキストノードにまったく同じ文字列を保ち、`br` 要素や単語ごとの配置を使いませんでした。CSSは段落のDOM順序を書き換えずに、見た目の改行を変えました。スクリーンリーダーのセッションは実施しておらず、このソース確認からアクセシビリティ監査を行ったとはしていません。
画像が利用できない場合や配置が変わる場合も、段落を読みやすく保ちます。非常に狭いカラムでは、画像の隣の細いテキスト帯より、画像を段落の上に置く単純な配置のほうが読みやすい場合があります。輪郭の効果を無理に作るため文字を縮めず、自分のブレークポイントと内容を確認します。
floatは引き続きCSSボックスを確保します。形状への回り込みによって、あらゆる方向からテキストが回り込む汎用の障害物になるわけではありません。この左floatの例では、隣接するテキストが右に回り込み、その後は下に続きます。
## 症状の原因を修正する
| 症状 | 確認と修正 |
| -------------------------- | ----------------------------------------------------------------------- |
| テキストが長方形に沿う | floatが有効か、寸法が定義済みか、形状URLが読み込まれたか、元画像の周囲が透明かを確認する。 |
| テキストが見えるイラストに重なる | 表示するSVGと形状URL、それぞれの寸法と縦横比を比較する。アルファ閾値と形状マージンを調べる。 |
| 画像は出るが輪郭が効かない | imgリクエストとは別に、形状画像のリクエストとCORS動作を調べる。CDNを追加する前に同一オリジンの例を試す。 |
| flexやgridの子が想定どおりにfloatしない | float画像自体をflexやgridアイテムにせず、この例のようにfloatと段落を通常フローのコンテナー内に保つ。 |
| 狭い段落が読みにくくなる | 適切なブレークポイントで画像を小さくするかテキストの上に移し、実際の段落を再確認する。 |
| SVGラベルがまだ折り返されない | 上の表にあるSVG内部のテキスト手順を使う。Shape-outsideは隣接するHTMLの流れを変えるもので、SVGテキストの配置は変えない。 |
適切なフラットイラストがラスター画像にしかなく、編集可能なシルエットが必要なら、PerfectVectorの[クリップアートからSVGへの手順](https://perfectvector.com/ja/clipart-to-svg)で候補を取り出せます。輪郭と周囲の透明領域を元画像と比べ、ページ内で実際のSVG URLを試します。透明なラスター画像でも、画像ベースのCSS形状を提供できます。アルファによる回り込みを有効にするためだけなら、SVGは必須ではありません。
すでにきれいなSVGがあれば、それを使います。ベクター化は周囲のHTMLレイアウトを作らず、段落の意味構造を代わりに保つわけでも、特定ブラウザーの回り込み結果を保証するわけでもありません。
## よくある質問
**shape-outsideはSVG内の文字を折り返しますか？**
いいえ。この例は、float画像の隣のHTMLインラインフローを変えます。SVGラベル、SVG内部の埋め込みHTML、パスに沿う文字は、それぞれ別のレイアウト作業です。
**透明に見えるSVGなのに、長方形として回り込むのはなぜですか？**
ファイル内の不透明背景、形状画像のリクエスト失敗、floatの寸法不足、floatが無効なレイアウトコンテキストがないか確認します。白いピクセルと透明ピクセルは異なります。
**先にPNGをSVGに変換する必要がありますか？**
アルファによる回り込みだけが目的なら不要です。適切な透明ラスター画像も形状を提供できます。編集可能なデザインや他のベクター要件で必要なときにSVGを使います。
**どの画面サイズでも同じ改行になりますか？**
いいえ。利用可能な幅、フォントの寸法情報、テキスト、画像サイズ、ブラウザーのレイアウトが行に影響します。実際のコンテンツを複数の幅で確認してください。
## 出典
1. [MDN shape-outside](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-outside) — float領域とアルファから得られる画像形状を説明。
2. [MDN shape-margin](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-margin) — 回り込み形状の周囲に加える余白を定義。
3. [MDN shape-image-threshold](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-image-threshold) — 画像形状に使うアルファ閾値を定義。
4. [CSS Shapes Module Level 1](https://www.w3.org/TR/css-shapes-1/) — floatボックスの制限、画像読み込み、CORS動作を規定。
5. [MDN displayとflow-root](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display#flow-root) — floatを収めるための整形コンテキストを説明。
編集可能なデザインがなければ、[クリップアートのSVG候補を準備し](https://perfectvector.com/ja/clipart-to-svg)、シルエットと透明性を調べ、対応予定の幅でページ内の実際の段落レイアウトを確認してください。
## Explore
- [Read the HTML article](https://perfectvector.com/ja/blog/css-text-around-svg-shape)
- [SVGのtextLength：文字を変形せずラベルを収める](https://perfectvector.com/ja/blog/svg-textlength-fit.md)
- [SVG文字の縦位置：作り直したラベルを中央に揃える](https://perfectvector.com/ja/blog/svg-text-vertical-alignment.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)