2010年10月30日、以前から公開していた縦書きレイアウト用スタイルシートを全面的に書き直してみました。
従来版に重大な不具合があったわけではありませんので、従来版のスタイルシート(tategaki.css と呼んでいます)を使い続けても、特に問題は無ありません。
でも、この従来版を使うと、htmlのコーディングがえらく汚くなるのです。
まぁこれは「スタイルシートで無理矢理縦書きを実現する」という無茶なことをやっている関係上、ある程度はしかたのないことなのですが。しかもこのスタイルシートを使って縦書きするときに、
横書き字形を縦書き字形に置き換える、という処理が伴います。これもイヤラシイ。元のテキストの中身を弄らなくてはならないわけですから。
で、そろそろ主要なウェブラウザで
CSS3のtransformプロパティ先行実装が出そろってきたので、それを使ってみようかな…と思ったのです。
新しい(現行の)スタイルシートには tate-style.css という名前をつけました。
これから初めて「縦書きレイアウトを試してみたい」という方は、この
tate-style.css を使ってみてください。
現在 tategaki.css を使われている方は、今まで作成したページではそのまま tategaki.css を、これから作成するページでは tate-style.css を…という使い方もできますし（tate-style.css と tategaki.css を同時に読み込んでも、セレクタが衝突を起こすことはありません。特に何も考えなくても同一ページの中で共存できます）、これまでどおり tategaki.css だけを使う…というのでも構いません。
いちばん大きな違いは、新版 tate-style.css では元のテキストにいっさい手を加えない、ということです。
これで、どんなメリットが出てくるかというと…、実例で見てみます。
「現行版」のスタイルシートで
コーディングした縦書き。
右の例を比べてみても、表示フォントに依るでしょうが、そんなに違いは感じないかもしれません。
でも旧来版だと、元のテキストに手を加えている（具体的には…鍵括弧を﹁﹂という文字に、長音記号を⼁という文字に置き換えている）のです。対して現行版では、元の文字には変更を加えていません。スタイルシートで回転させて表示させているだけです。
試しに "コーディング" という文字列を、お使いのブラウザでページ内検索してみてください。
旧版の縦書き文章に含まれる "コーディング" は検索に引っかかりませんね。
まぁ当然です。旧版では、文字を置換してしまっているからです。
今お使いのブラウザがFireFoxだったら、「表示」メニュー → 「スタイルシート」から「スタイルシートを使用しない」を選択してみてください。
スタイルシートが外れた状態では、旧版のほうはなんだか訳が分からないことになってしまいます。対して現行版では、ちゃんと文章として読める。これ、けっこう大事なことです。
それから、旧版の文字列を選択コピーして、テキストエディタか何かにペーストしてみてください。がっかりな感じになると思います。現行版のほうでは、キチンと思ったとおりの文字列がコピーできますね。
…ということで、特にこだわりがないのであれば、現行版の
tate-style.css を使用されることをオススメします。
ただしtransformを解さないブラウザでは間抜けな表示になってしまうので、
また別の仕掛けが必要になってくるかもしれません。→
「別の仕掛け」を用意してみました。JavaScriptです。詳細は
コチラのページをご覧ください。