Result
オブジェクトの形状に沿ってテキストを折り返すshape-outsideというプロパティがあるけど今のところは名前の通り外側に合わせたものですが、内側に合わせたいという事もあると思います。
shape-insideはこれから定義されるみたいですのでそれまでの間の代替として、という趣旨の記事です。数年前から行われている方法ですが書いたことない気がしたので備忘録。
具体的にはSVGの形状になるよう外側のSVGを2枚用意して左と右に配置してshape-outsideを使って疑似的にshape-insideを実現しよう、というもの。shape-insideが実装されれば不要のものになります。
css
.wrapper {
width: 500px;
height: 500px;
margin: 0 auto;
overflow: hidden;
}
svg {
width: 250px;
height: auto;
visibility: hidden;
}
p {
hyphens: auto;
font-size: 12px;
display: block;
text-align: justify;
font-weight:bold;
}
.left {
float: left;
shape-outside: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' viewBox='0 0 250 500' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M250,-0L250,10.652C228.26,17.372 208.13,29.387 189.604,46.698C143.127,90.128 101.602,135.082 65.029,181.559C28.457,228.036 26.171,276.8 58.172,327.849C90.173,378.898 131.698,423.851 182.747,462.709C204.345,479.15 226.763,489.453 250,493.619L250,500L0,500L0,-0L250,-0Z'/%3E%3C/svg%3E%0A");
}
.right {
float: right;
shape-outside: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' viewBox='0 0 250 500' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg transform='matrix(1,0,0,1,-250,0)'%3E%3Cpath d='M250,-0L500,-0L500,500L250,500L250,493.619C281.68,499.298 314.883,493.567 349.608,476.424C409.8,446.709 444.468,401.755 453.611,341.563C462.754,281.371 465.992,217.941 463.325,151.273C460.659,84.604 425.991,39.651 359.323,16.412C319.228,2.436 282.785,0.517 250,10.652L250,-0Z'/%3E%3C/g%3E%3C/svg%3E%0A");
}全体のサイズを決めておき、SVGはその半分のサイズに指定、それぞれの形状を作り、左右に配置します。樹脂などを流し込んで物を作る時に使う「型」を作るイメージ。
あとはテキストを加えれば左右のshape-outsideに指定した形に添ってテキストが折り返されます。
html
<div class="wrapper">
<svg class="left" width="250" height="500" viewBox="0 0 250 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M250,-0L250,10.652C228.26,17.372 208.13,29.387 189.604,46.698C143.127,90.128 101.602,135.082 65.029,181.559C28.457,228.036 26.171,276.8 58.172,327.849C90.173,378.898 131.698,423.851 182.747,462.709C204.345,479.15 226.763,489.453 250,493.619L250,500L0,500L0,-0L250,-0Z" />
</svg>
<svg class="right" width="250" height="500" viewBox="0 0 250 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,-250,0)">
<path d="M250,-0L500,-0L500,500L250,500L250,493.619C281.68,499.298 314.883,493.567 349.608,476.424C409.8,446.709 444.468,401.755 453.611,341.563C462.754,281.371 465.992,217.941 463.325,151.273C460.659,84.604 425.991,39.651 359.323,16.412C319.228,2.436 282.785,0.517 250,10.652L250,-0Z" />
</g>
</svg>
<p>
東京は、日本における政治・経済・文化の中心である。政治面では、日本国政府が本拠地とする。立法府である国会議事堂、司法府の頂点である最高裁判所、行政府の長である内閣総理大臣の官邸、中央省庁街（「霞が関」）などは、いずれも東京の中心部である東京23区にある。経済面では、日本の株式上場企業の本社のほとんどが東京に集中し、近年では（東京圏では）購買力平価（PPP）を基にしても東京都市圏のGDPは1兆5369億ドル（2014年）であり、世界的な経済都市であり、大消費地でもある。文化面では、たとえば現在では（東京都内に）千数百におよぶ劇場・ホール・ライブハウス類があり多数のアーティストたちが活動する場であり、ポップカルチャーなどの新しい文化の発信地でもあり、ミシュランガイドの星つきの飲食店の数は世界最多で、世界各国の食文化が華開いている場所でもある。東京は、日本各地、近隣の国々、世界各国から人々が観光に訪れる都市であり、さらに東京に移住した外国人の人口は2020年1月時点でおよそ57万7千人で、独り暮らしや家族単位の暮らしをしている人々も多いが移民街も形成されており、《多文化共生》、つまり様々な国の文化背景を持つ人々が仲良く暮らすことが、以前からそれぞれの地区の善意の人々によって進められており、近年では行政によっても積極的に推進されている場所でもある。東京のこれまでの道程は決して平坦であったわけではなく、関東大震災や東京大空襲で焼け野原となってしまったこともあるのだが、戦後に復興のために膨大な努力をしたおかげで、現在では世界最大級のメトロポリス・世界都市となっている。東京は明治期にも課題が山積みの都市であったが、現在も、高い犯罪率、人口過密、通勤ラッシュなど、さまざまな課題を抱えている都市である。
</p>
</div>