CSS:今日から始める縦書き表現

PCブラウザ環境が変化してきましたので、そろそろ縦書き表現も
こなれてきたのだろうかと始めてみた気づきを書いておきます。


DEMO:縦書き(カラム有り)

  • 縦書きの段組はCSS3 Multiple column layoutで実現可能(IE9除く)
  • IEだけに有効なジャスティファイの設定がある(text-justify: inter-ideograph;)
  • (まだ)ベンダープレフィックスが必要
  • 等幅のほうが見やすい(font-family: monospace;)

今回はカラムの親に幅と高さを指定して調整しています。
指定しないとブラウザ間でまちまちな動きをします。
最初column-widthで調整していたのですが、動きが読めなくなってきたのでcolumn-countで指定する方法にしました。もしかしたらcolumn-widthでもうまくいく方法があるのかもしれません。

参考

広告

CSS:今日から始める縦書き表現」への1件のフィードバック

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中