cssで 縦書き

javascriptやブラウザによる縦書き実装はあった。css3では縦書きサポートが実装される予定だが、実現するのはwebkit2辺りらしい。

電子書籍の日本国内での普及も当然絡んでくるのはもちろんだが、電子書籍自体がまだ不透明だ。標準規格の凌ぎ合いやviewer間のシェア争いは、ブラウザが縦書きを実装すれば消し飛んでしまう不毛な争いで、全く本質的ではない。いつもの様にAppleの「業界枠組み壊し」に期待してしまう。闘病中のジョブスには酷な話だが、iPad普及の鍵はcssの縦書き実装だ、と誰か伝えて下さい。

さて、実はcss2.1の実装レベルでも縦書き表現は可能だ。必要なのは知恵と工夫と力技。当然、数ページに渡る長文では無理なので、そんな時はスクリプトを使うべきだが、要所要所に使用する事は問題ない。多少DOMが汚れるのは致し方ないとしよう。以下にサンプルとして、Not Foundページを作成してみた。

そのコンテンツは見つからない

ゆく河の流れは絶えずして しかももとの水にあらず よどみに浮かぶうたかたは かつ消えかつ結びて 久しくとどまりたるためしなし

鴨長明方丈記より

Not found.

今回は縦書きの為にcss3は使用していない(その他もbox-shadowを使ったのみ。ieではborderにしている)。よって、いつもは一切の断り無く無視しているieでも、縦書きで表示されるはずだ。詳しい仕組みが調べたい人はfirebugを使うなり、ソースを見るなりして欲しい。

カテゴリー: css タグ: , パーマリンク

シェア

cssで 縦書き への4件のフィードバック

  1. GO のコメント:

    縦書き部分が、河の流れのようにうねって見えるのは目の錯覚?

  2. ksk のコメント:

    プロポーショナルフォントだと文字幅が調節されるので、縦のセンターがそろわなくなる為でした。
    ieだけMeiryoにしてたんだけども、Windowsの他のブラウザの人の事を忘れていました。
    winの人はMeiryoになるようにしたので、ウネウネはなくなったはずです。(同時に明朝の持つ和風感も消え去りました…)

  3. GO のコメント:

    WindowsXPでFirefox5.0使って閲覧してます。
    Meiryoインストールしたらウネウネなくなりました。
    鴨長明、深い事言うなあ(爆)

  4. ピンバック: snabblテ・n med betalningsanmテ、rkningar

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA