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

PC版へ 2010年10月21日
さてさて、長らく放置していた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にされていたらお手上げですが。

関連記事

<<前の記事 | HOME | 次の記事>>

コメント

lightbox

こんにちは。
素敵なCSSをありがとうございます。
IE9 になれば、transform できそうですが、とりあえず
現時点で IE にも追加実装してみました。

よろしければ、この CSS 使って縦書きを自動構成する
JavaScript のライブラリをいつか作ってみたいのですが、
ライセンス表示等の取り決めとかがあればありがたいです。

tyzからlightboxへの返信

ありがとうございます。

ライセンスなどについては→http://freefielder.jp/tate/license.html に書いてみました。ご覧ください。
MITライクなライセンスです。例えば、このCSSを使ってJavaScriptでなんたらする場合、生成されるWebページにクレジットが表示される必要は全くありません。元のJavaScriptのどこかに、コメントとしてCSSの元ネタの作者は誰なのか、みたいなことを入れていただければありがたいです。

ま、あんまりこだわりは無いのですが、いちおうキチンとしてみました。

ところで、Windows環境で表示フォントにメイリオを指定したとき、長音記号をtransformで回転させると、中心軸が結構ズレます、よね？ MSゴシックならどうでしょう？

どなたか確認できますか？ 近所には、最近のWindowsが動いているマシンが無いのです…。

lightbox

対応ありがとうございます。

今日、縦書き用スタイルシート[ 新版 ]
の手順書作っていて気がつきました。

span.tate-cho に、mirror=1 が抜けています。

また、縦書き変換スクリプト で長音が tate-kakko
に変換されるようです。