- スタイルシートで縦書きページを作ろう

スタイルシートを書き直した理由、です。

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です。詳細はコチラのページをご覧ください。