スタイルシートで縦書きホームページ。

ブラウザの種類に依存しないで、日本語の縦書きを実現してみよう。

ということで、スタイルシートの適用のみで縦書きのホームページがどこまで実現可能かトライしてみた。サンプルは → コチラのページ。

如何なもんでございましょうか。スタイルシートのサンプルなども置いてあります。

なかなか新鮮な感じがして良いですな。

いちおうFireFoxとSafariでは、なんとなく上手くいっているかなぁ...という感じなのですが、IEで見た時はどうだろう。

実現の仕方は至ってシンプル。
  • 幅がひと文字分の<div>〜</div>内に一行を記述。
  • 句読点や小さい「っ」などは場所がずれるので、それらは個別に<div>〜</div>で囲って位置を調整してやる。
  • 表示フォントには等幅フォントを指定する。

他の方法としては、テーブルを使ったり、JavaScriptで文字を縦に並べ替えたりしても実現できるみたいですが、それだと元の文章がブツ切れになってしまうのです。
スタイルシートのみで縦書きが実現できれば、元の文章はほぼそのままで行けるので、これはなんだか気分がよろしい。後々、文章を書き換える時も楽だし。検索エンジンにも文中のワードが引っかかってくれるでしょう。

今のところの問題点は
  • 括弧などの記号をどうするか。縦書き用フォントを用意しなくても、ある程度見られるようにしたいなぁ。
  • 長音記号は罫線の「┃」で代用。
  • htmlの記述に時間がかかる。句読点や「っ」が出てくるたびに<div>〜</div>で囲んでやらなければならない。面倒くさい。
  • 行送りも手動。面倒くさい。

句読点や「っ」が出るたびに、機械的に<div>要素で囲むスクリプトは簡単に作れそうだ。行送りも、一行に含まれる文字数を指定して自動的に切り分けるスクリプトを組めばいいのか。

ヒマな時にやってみよう。


カテゴリ:

タグ: