CSS3で縦書き

以前一度挑戦してあえなく挫折した縦書きですが、偶然面白いテーマを発見しまして、再挑戦してみました。

そのテーマはtanzakuといういわゆる可変グリッドレイアウトのテーマです。えー、可変グリッドレイアウトとはブラウザのウィンドウサイズによってコンテンツが再配置されるレイアウト、だそうです。この”コンテンツが再配置される”ところにjQueryのプラグインが使用されているようで、ウィンドウのサイズに合わせてコンテンツが並び替えられる動きが面白いです。

それでこのtanzakuなんですが、その名の通り短冊をイメージしたテーマで、配布元はトリプルシックスさんです。で、このテーマ、html5には対応していないんですが、もしもワークスさんでカスタマイズされたhtml5対応版を配布されております。ありがとうございます。

さて、まずは縦書きにしてみる。

1
2
3
4
5
6
7
.entry {
	writing-mode: tb-rl;
	-ms-writing-mode: tb-rl;
	-moz-writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	-o-writing-mode: vertical-rl;
}

CSSで縦書きを指定するプロパティは”writing-mode”です。指定する数値は”tb-rl”(Top to Bottom – Right to Leftの略)で、”lr-tb”(Left to Right – Top to Bottomの略)とすると横書きになります。

さてこの縦書きの機能なんですが、まだまだ暫定的な実装に過ぎず、対応もブラウザによってまちまちです。ですのでベンダープレフィックスを頭に付けたプロパティをブラウザ別に記述しておきます。”-ms”がExplorer、”-moz”がFirefox、”-webkit”がSafariとChrome、”-o”がOperaと、それぞれ対応した物になります。ただ現時点ではFirefoxは縦書きに全く対応していないので、”-moz-writing-mode”は必要ないと思いますがね。

ところで”writing-mode”で指定した数値が、Explorerとそれ以外のブラウザで少し違っていますね。Explorerでは”tb-rl”ですが、それ以外のブラウザだと”vertical-rl”になっています。これは”writing-mode”プロパティが元々Explorerの独自規格だったからです。それをCSS3で正規の仕様として取り入れた訳ですが、指定する数値に変更が加えられました。ですから標準規格では”vertical-rl”を使用するようになると思います。ちなみに”vertical”が縦書きの指定になり、横書きだと”horizontal”と指定します。

まあ、とにかくこの”tb-rl”なんですが、ハイフンの前後で、行内のテキストの進行方向と行の進行方向を指定しています。ハイフンの前が行内のテキストの進行方向で、ハイフンの後が行の進行方向で、”tb-rl”だと行内のテキストの進行方向が上から下、行の進行方向は右から左に、という訳です。そこで”vertical-rl”ですが、行内のテキストの進行方向は別のプロパティ、”direction”を使用する、となっています。世界には様々な言語があり、その表記方法も様々ですから、より柔軟に対応するためにこういう仕様になったんだろうと思いますが、ですがね、この”direction”プロパティを使用しなくても、一応縦書きで表示されちゃうんですよねー。うーん、で、この”direction”プロパティを使用してもしなくても、違いが分からんのです。まあ、指定しておいた方が無難かと思い、とにかく”direction”プロパティを使用しておきましたがね。この”direction”プロパティで指定する数値は”ltr”(Left to Rightの略)です。つまりテキストの進行方向を左から右へ、と指定しています。縦書きだから左とか右とか関係ないんじゃないの?と思いますが、”writing-mode”で”vertical”と指定してやると、左を下にして、時計回りに90度回転、という解釈になるのです。少しややこしい話ですがね。

ですから先ほどのCSSを少し修正すると

1
2
3
4
5
6
7
8
9
.entry {
	direction: ltr;
	-webkit-direction: ltr;
	-o-direction: ltr;
	writing-mode: tb-rl;
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	-o-writing-mode: vertical-rl;
}

こうですかね。Firefox用の記述は省きました。

これだけで、対応ブラウザで表示させると一応縦書きになります。レイアウトの問題が残りますが。

ところでお気付きの方も居られると思いますが、このCSSで指定しているのは”entry”の部分だけです。この”entry”の部分を”body”にすれば全体が縦書きになる訳ですが、全体を縦書きレイアウトにするのは、結局諦めました。というのも、ウェブサイトを縦書きレイアウトにする、という事は恐ろしく労力を使う事だなと思い知りまして。当たり前の事なんですが、HTMLという物は徹底的に横書き文化なんですね。これを全て縦書きのレイアウトにして、しかも少しの破綻も無い、これは僕のスキルでは無理があります。まあ、この事は以前縦書きに挑戦した時も思った事なんですが。それで取り敢えず投稿部分だけ縦書きにしてみようかと漠然と考えていた時に、このtanzakuを見付けまして、ならばこの投稿部分のグリッド内だけ縦書きでやってみようと思い付いた訳です。

ちなみにこの”entry”タグは僕が自分で追加した物で、オリジナルのtanzakuにそんなタグはありません。

で、先ほど「レイアウトの問題が残りますが」と書きましたが、これについて一々書き連ねる事はしません、というか出来ません。かなりの量になる上に、この縦書き機能はあくまで暫定的な仕様である為、ブラウザの対応によって挙動がまちまちだからです。僕も色々考えた末、結局縦書き対応はSafariとChromeだけにしました。それ以上はサポート出来ないと思いましてね。で、ブラウザの振り分けに使用したのはBrowser Specific CSSというプラグインです。このプラグインはブラウザごとのクラスを付加してくれる物でして

1
2
3
4
.webkit .entry {
	-webkit-direction: ltr;
	-webkit-writing-mode: vertical-rl;
}

先ほどのCSSですが、プロパティの先頭に”.webkit”と付けるとSafariとChromeでページが表示された時だけ、この指定が有効になる、という訳です。指定する数値もSafariとChromeだけの物に修正しました。

この他色々力技でなんとか縦書きの体裁はついたかな、という感じです。とりあえずCSSで縦書きはまだまだ大変だなぁ、というのが感想でして、とにかく思い通りのレイアウトにするには大変ですね。プロパティの指定方法も何やら間違っているかもしれませんが。まあ、SafariとChromeをお持ちの方で縦書きに興味のある方は下のリンクメニューから完成したサイトに飛べますから、チェックしてみてください。