縦書きレイアウトでの長音記号問題。

さてさて、長らく放置していたhtmlでの縦書きレイアウト方法です。

概要についてはコチラのページを見ていただくとして、縦書きレイアウトを実現する上で、いちばん気になっていたのが長音記号。「ー」ですね。Webブラウザ上では、この文字の縦書き字形が表示できないのです。代替案として、罫線用の縦棒を使ってごまかしています。ブラウザの種類に依存しないという点ではベターな選択なのですが、フォントによっては非常に美しくない。

ということで、ブラウザの種類に依存してしまいますが、CSS3で定義されるプロパティ「transform」を使って、美しさにこだわってみましょう。

CSS3のプロパティの実装はブラウザごとにバラつきがありますが、transformに関しては、各ブラウザの最新バージョンにおいて、
FireFox ... -moz-transform:なにがし
Safari / Google Chrome ... -webkit-transform:なにがし
Opera ... -o-transform:なにがし
...というかたちで実装されています。IEは、知りませんw

transformが文書にどんな効果を与えてくれるのかは以下のページなどを参照してみてください。
　　→ CSS3 変形処理を行う transform プロパティ｜CSS Lecture
　　→ CSS3大接近：第3回 transformプロパティ｜gihyo.jp

で、長音記号「ー」を時計回りに90度回転させて、かつ鏡像化してやれば、日本語の文字として違和感のない、美しい縦書き字形の「ー」が出来上がります。
span.tate-cho{
    display:block;
    -moz-transform: matrix(0, 1, 1, 0, 0, 0);
    -webkit-transform: matrix(0, 1, 1, 0, 0, 0);
    -o-transform: matrix(0, 1, 1, 0, 0, 0);
}

なんていうスタイルを適用してやると、いい感じに縦になるはず。

実際の表示↓(not for IE)
ホークスが敗退してしまいました
ちょっと行の中心からズレますか。適当に補正してください。

ただしこの方法だと、CSS3を実装していないブラウザで見ると長音記号が「ー」のままで表示されてしまいます。
ブラウザがCSS3のtransformを実装しているかを判断して(おそらくブラウザの種類とバージョンから判断するしかないのかな)、

実装している → そのまま。
実装していない → JavaScriptかなにかで、縦書きエリア内の「ー」を「┃」に置き換える

といった一手間かければ良いのかなぁ。JavaScriptをOFFにされていたらお手上げですが。

カテゴリ:

タグ: