BEFORE / RECTANGLE
四角い領域で回り込む
FIELD NOTES / 01
かたちの外側に、言葉の流れをつくる。
10月の展示では、紙の飾りや灯りを使った小さな作品を紹介します。
丸いランタン、細長い葉、角のある星。作品ごとに形は違いますが、文章は同じ順序で読み進められます。
会場の入口から奥の壁まで、展示をゆっくり巡ってください。
CSS SHAPES · 095
CSS Shape Outside Lab
図形の輪郭に沿って、文章を回り込ませる。
01SAME SHAPE · SAME TEXT
LIVE TEXT WRAP COMPARISON
回り込みの形を比べる
shapes.local / articleTEXT WRAP
CLIP THE SHAPE / CHANGE THE WRAP
見た目は同じ。文章の流れが違う。
AFTER / SHAPE-OUTSIDE
輪郭に沿って回り込む
FIELD NOTES / 01
かたちの外側に、言葉の流れをつくる。
10月の展示では、紙の飾りや灯りを使った小さな作品を紹介します。
丸いランタン、細長い葉、角のある星。作品ごとに形は違いますが、文章は同じ順序で読み進められます。
会場の入口から奥の壁まで、展示をゆっくり巡ってください。
左はclip-pathで図形を切り抜いただけ。右は同じ切り抜きにshape-outsideを追加しています。
02
HOW IT WORKS
回り込みを決める4つの指定
文章を回り込ませる
shape-outsideは、左右にfloatした要素の周りを流れる文章に作用します。2カラムの配置に使うものではありません。
図形を切り抜く
clip-pathは見た目の形を変えます。それだけでは文章の回り込みは変わりません。
輪郭に余白を足す
shape-marginで図形と文章の間隔を調整します。文字が輪郭に近すぎないか、実際の文章で確認できます。
透明部分から輪郭を取る
SVGではshape-outside: url(...)を使用。透明度のしきい値はshape-image-thresholdで指定します。
参考：shape-outside · shape-margin · shape-image-threshold · clip-path