2013/06/19

縦書きのブログをリキッドデザインにしてみる

縦書きのブログ「アポロ漫録」はもともと横幅が 1000 ピクセルくらいまでは画面の幅に合わせて伸縮する半リキッド(可変)デザインだったのですが、その設定を少し変えて、横幅がどんなに広くなっても常に 100% の横幅で表示するようにしてみました。

縦書きの場合は画面が横に広くなればなるほど読みやすくなりますからね。高解像度のワイドスクリーンで表示するようなときには縦書きのメリットが最大限に生かされると思います。
ただ、IE 以外のブラウザでは横書きで表示されるので、その場合には横幅が広すぎると読みづらくなってしまいます。

そこで、IE 以外のブラウザの場合には今まで通り 1000 ピクセルくらいまでを上限としました。

ついでに IE 以外のブラウザについては記事の高さを可変に変更しました。
(というか、本当はこちらの対応のついでに IE の横幅を可変にしてみたんですけどね。)

今まではブラウザの種類に関係なく全て高さを固定して、はみ出た部分はスクロールして読むようになっていました。

これはこれで便利だとは思っていたのですが、アンドロイドのスマートフォンのブラウザで見たときにスクロールできなくて記事の全文が表示できなかったりしたので、このような問題の対処もかねて、IE 以外のブラウザの表示を修正しました。

最新の CSS3 では縦書きの対応が進んでいて、Safari や Chrome でも縦書きができるということで話題になっていたりもしますが、現段階では実装が中途半端で使い物にならないので、アポロ漫録での採用は見送っています。

iPhone のブラウザ iOS5 の Safari でも縦書きに対応したというような記事を見かけたような気がしますが、実用レベルに達したものとなっているのでしょうか?

Chrome の縦書き対応については割といいところまで来ているのですが、長文の記事が画面からはみ出て横にスクロールしなければ読めないようなときに、IE ならマウスホイールで普通にスクロールできるのですが、Chrome の場合はスクロールバーをドラッグしたりしないとスクロールできないというのが致命的でした。

Firefox においては縦書きに手をつける気配すらありません。将来的に WebKit に切り替わる Opera は自動的に縦書き対応となることを期待してもいいのかな?

最近の EPUB などの電子書籍の流行のせいもあってか、WebKit 系のウェブブラウザで今さらになってやっと縦書きができるようになったことが注目されているようですが、IE ではもう何年も前から実用的な縦書きの実装が完了していたことの方がよっぽどすごいと思いますけどね。

縦書きに関する情報も、今のところほとんどが「縦書きにできます」という解説記事ばかりで、実際にニュースやブログで標準的なスタイルとして採用しているサイトは全く見かけません。

ちょっと前は「ウェブで縦書きなんてありえない」「縦書きは読みづらいから必要ない」などという意見が多かったと思いますが、今では「どうしても縦書きで読みたい」というような人も増えてきていると思います。

日本人は本当は縦書きが好きなんだってこともそろそろ気づいてきたと思うので、縦書きのサイトもどんどん増えてくれるといいんですけどね。

0 件のコメント:

コメントを投稿