紙媒体ライクなテキストコンテンツのレイアウト実装をスタイルで実装してみる

posted： 2016-05-16　　category：web

Webブラウザ上のテキストコンテンツのレイアウトでは、横書きや四角いブロック要素で考えることが長い間一般的とされていると思います。
そこで紙媒体のようなテキスト要素のレイアウトを、現段階で実装可能な機能を紹介します。
ブラウザによって制限がある機能を幾つか取り上げますが、環境によっては現実的に運用も可能な機能もありますので、参考にしていただければと思います。

縦書き（+おまけ）

雑誌・新聞、書籍など日本では馴染みのある表記方法。
既に現実的にサイト運用できるレベルのであり、ブラウザも最新版であれば仕様も固まり実装できる機能。最近使用しているサイトもちょくちょく見るようになりました。

See the Pen 20160516-01 by TOBAatsushi (@birdwing3) on CodePen.

writing-mode:プロパティ

vertical-rl;で上から下へ垂直に流れ、左から右へ改行される。
IEはtb-rl;と異なる値を与える必要があるので注意。

text-orientation:プロパティ

文字の向きを縦か横か、大文字小文字別で指定できる。
値は以下の通り3つ。

mixed;: 全角は縦、半角は横（デフォルト値）
upright;: 全角・半角共に縦
sideways;: 全角・半角共に横

あとおまけで横書きで右から左へ流す指定もできます。
アラビア語、ペルシャ語、ヘブライ語、戦前の日本語表記などで使用できそうです。

おまけ

direction: rtl;: 右から左へ流す
unicode-bidi: bidi-override;: Unicodeによる文字表記の流れを無効にする。これによってdirectionプロパティで設定した値が適用される

幾何学的な形状要素の流し込み

全ての要素が四角形で配置されるのがCSSの制限の1つと言われています。
角丸やアルファチャンネルを含んだ画像にしても、元のボックス領域は四角いままなので、フロートでテキストを流し込んでも四角いボックス領域に流し込まれる形になります。

そこで流し込まれる要素に対して形状を設定するshapesモジュールが使えるようになりました。

以下が実装例、IE以外のモダンブラウザで確認ができます。

See the Pen 20160516-02 by TOBAatsushi (@birdwing3) on CodePen.

shape-outside:プロパティ

流し込まれる同じ要素にフロート指定をしてshape-outside:を使うとその値で設定した形状でレイアウトされます。

使用できる値は以下の5つ、これら関数に引数を渡して具体的な形状が定義される。

inset(): 長方形の定義、引数は4辺と角丸の値。
circle(): 円の定義、引数は円の半径と円の中心座標。
ecllipse(): 楕円の定義、引数はx軸とy軸の半径とそれぞれの中心座標。
polygon();: 多角形の定義、引数は2組の座標値を任意の個数指定。
座標値の取得はchrome拡張のCSS Shapes Editorが便利
url();: 画像の定義、引数は画像のパス
※ 相対パスしか読み込まない？

shape-margin:プロパティ

形状と周囲のコンテンツの間に余白を表示させる。margin:とは異なって値は1つしか指定できない。
例：shape-margin: .5em;

shape-image-threshold:プロパティ

url();で読み込んだ.png、.gif画像などのアルファチャンネルの不透明度をしきいちとして形状の領域はブラウザが自動判定する。

フロート以外で配置されている要素に対しての流し込み（エクスクルージョン）

フロートを使えば自動的に左右どちらかに流し込みが発生します。
しかし、中央に要素を配置してその周りにテキストコンテンツを流し込みたい場合などはフロートで配置することはできません。
その場合、テキストを流し込みの対象となる要素はpositionプロパティで配置しますが、流し込みはどうすればいいでしょうか？

そこで用意されたのがExclusionsモジュールです。

フロートではなくpositionプロパティで流し込みができるとなると、もっとフレキシブルなレイアウトが可能になります。
しかし非常に強力な機能ではあるのですが、このExclusions現在のところIEのみの対応となっています。

以下IEでご確認ください。

See the Pen 20160516-03 by TOBAatsushi (@birdwing3) on CodePen.