前回に引き続き具体的なレイアウトに縦書きを使ってみた例です。
DEMO:縦書きレイアウト1
レスポンシブ、Webフォント(typekit)で実装しています。
IE10＋、ほかはブラウザの最新版で検証しました。
- 句読点の禁則処理はword-wrap: break-word; overflow-wrap: break-word;としました。
- 要素の高さなどが不安定でいまいち読めないところがありました。
- SP時は縦書きをすべてクリアしました。
- SP時の3列の画像に object-fit: cover;を指定してみました。
一方でブラウザごとの差異もまだまだ有りますね。
- 縦書き部分のボックスの高さを決めないとブラウザ間で違った段数になる。
- 高さを決めてoverflow:scrollにした場合Chrome以外はスクロールバーが左に出る。
- Androidブラウザー（4.1.3で検証）はtypekitでのWebフォントは反映されませんでした。
とは言え、表現重視で行きたい場合は現状でも結構手応えを感じました。
広告
