CSSの縦書きレイアウト｜CSS3－CSS辞書

＃

テキストを縦書きにする

CSS2.1まではCSSによってスタイリングされるHTML文書は特殊な方法を使用しなければ横書きでしかレイアウトすることができませんでした。しかし、CSS3で導入された“書字モード(Writing Mode)”によって横書きだけでなく縦書きのウェブページも簡単に実現することができるようになりました。

現在でも日本語のウェブページでもほとんどが横書きなので、縦書きでレイアウトすると少し個性的で新鮮な印象をユーザーに与えることができます。

既定の書字モードはこれまで通りの横書きで、“writing-mode”プロパティの値が“horizontal-tb”の状態です。ここで、“writing-mode”プロパティの値を“vertical-rl”とすると要素の中のテキストを日本語で一般的な右から左の縦書き(右縦書き)にすることができます。



<div>


<h1>三毛猫</h1>

<p>


三毛猫とは白と茶色と黒の3色の毛が生えている猫のことで英語では“calico cat”と言います。

</p>

<h1>縁起物の三毛猫</h1>

<p>


猫の遺伝子の特徴上オスの三毛猫は大変珍しいので縁起が良いと信じられています。1956年11月8日に東京港を出発した第1次南極観測隊には1匹の三毛猫が同行し、翌年まで南極の昭和基地に滞在しました。観測隊の隊長の名前にちなんで“たけし”と名づけられたこの三毛猫は観測隊とともに帰国しましたが、引き取った隊員のもとから脱走してしまいました。猫は帰巣本能が強いので昭和基地へ帰ろうとしたのではないかと言われています。

</p>


</div>

＃

“writing-mode”プロパティ

“writing-mode”プロパティは一部の要素だけに適用することもできますが、“body”要素に適用するとウェブページ全体に適用することができます。“body”要素に“writing-mode: vertical-rl;”を縦書きになるのに合わせて通常の縦スクロールのウェブページではなく一番右側から見る横スクロールのウェブページになります。

“writing-mode”プロパティには“horizontal-tb”と“vertical-rl”以外にもいくつかの値があります。

一つは“vertical-lr”で、左から右の縦書き(左縦書き)になります。日本語をそのように書くことは普通はありませんが、モンゴル語などでは左から右の縦書きが使用されます。

他には“sideways-rl”と“sideways-lr”があり、これらは横書きをそのまま90度横倒しにしたような縦書きです。

＃

文字の向きを変更する

“writing-mode”プロパティとともに使用して書字モードを設定できるプロパティには他に“text-orientation”プロパティがあります。

“writing-mode”プロパティを“horizontal-tb”か“vertical-rl”で縦書きに設定した場合、日本語の漢字や仮名、カタカナのような縦書きの慣習がある文字はそのままの向きで配置されますが、アルファベットや数字など、本来は縦書きにされない文字は既定では時計回りに90度回転した横倒しの状態で配置されます。“text-orientation”プロパティを使用するとすべての文字をそのままの向きで配置するようにしたり、逆にすべての文字を横倒しにして配置するようにすることができます。

＃

縦中横

日本語を縦書きにした時、数桁の数字を1文字分の空間に横並びで書くことがあります。これは縦中横と呼ばれるレイアウト方法で、CSSでも“text-combine-upright”プロパティを使用することで実装することができます。

縦中横にする場合、対象とする数字を“span”要素などで囲って“text-combine-upright”プロパティを適用します。



<div>


<h1>三毛猫</h1>

<p>


三毛猫とは白と茶色と黒の<span class="numbers">3</span>色の毛が生えている猫のことで英語では“calico cat”と言います。

</p>

<h1>縁起物の三毛猫</h1>

<p>


猫の遺伝子の特徴上オスの三毛猫は大変珍しいので縁起が良いと信じられています。<span class="numbers">1956</span>年<span class="numbers">11</span>月<span class="numbers">8</span>日に東京港を出発した第<span class="numbers">1</span>次南極観測隊には<span class="numbers">1</span>匹の三毛猫が同行し、翌年まで南極の昭和基地に滞在しました。観測隊の隊長の名前にちなんで“たけし”と名づけられたこの三毛猫は観測隊とともに帰国しましたが、引き取った隊員のもとから脱走してしまいました。猫は帰巣本能が強いので昭和基地へ帰ろうとしたのではないかと言われています。

</p>


</div>

縦中横は2桁から多くて4桁程度の数字に使用されますが、“text-combine-upright”プロパティで縦中横にできる文字数は制限されていません。しかし、縦中横にした文字は合計の横幅が1文字分になるように圧縮されますので、あまり多くの文字を縦中横として組み合わせるのは好ましくありません。なお、数字以外も縦中横にすることができます。

数字を一つずつ要素で囲まなくて済み、より簡単にマークアップが可能になる“text-combine-upright: digits;”も仕様書では定義されましたが、こちらはまだブラウザによる対応が進んでいません。

＃

縦書きにした時に変わること

“writing-mode”プロパティを使用すると単純にテキストが並ぶ向きが変わるだけでなく、書字モードの変更に伴って多くのレイアウトに関する規則が変更されます。

一言で言うと、多くのレイアウトの規則で横書きの場合に上下方向を対象としていた規則が縦書きの場合には左右方向を対象とするようになり、横書きの場合に左右方向を対象としていた規則が縦書きの場合には上下方向を対象とするようになります。

例えば、ブロック・レベルの要素は横書きでは縦に並べられていきますが、縦書きになると横に並べられるようになります。これに合わせて、隣接する要素や親子要素のマージンが重なり合ういわゆる“マージンの相殺”も横書きの場合は上下のマージンのみで起こり、左右では起こりませんが、縦書きの場合には逆に左右のマージンで起こり、上下では起こりません。

また、前述した通り、“body”要素に適用した場合にはウェブページのスクロールする方向が変わります。これは“overflow: scroll;”を適用した要素を縦書きにした場合も同様です。

＃

特殊な要素の縦書き

表(“table”要素)やリスト(“ol”要素や“ul”要素)、ルビ(“ruby”要素)など特殊な要素はどのようにレイアウトされるかが横書きなのか縦書きなのか変わります。

“table”要素のコンテンツは行と列が入れ替わって90度横倒しにしたようになります。



<div>


<p>


バナナは世界で1億3000万トン以上生産されていてジャンボジェットの重さで70万機分以上になります。日本で食べられるバナナはそのほとんどがフィリピン産ですが、インドが最もバナナを生産している国で、中国、インドネシアなどが続きます。ただし、インドでは国内でそのほとんどを消費していて、輸出されるバナナは中南米のものが半分以上を占めます。

</p>


<table>


<tr>


<th>順位</th>

<th>国名</th>

<th>生産量</th>


</tr>

<tr>


<td>1</td>

<td>インド</td>

<td>29,667,000</td>


</tr>

<tr>


<td>2</td>

<td>中国</td>

<td>10,705,740</td>


</tr>

<tr>


<td>3</td>

<td>フィリピン</td>

<td>9,165,040</td>


</tr>


</table>



</div>

順位	国名	生産量
1	インド	29,667,000
2	中国	10,705,740
3	フィリピン	9,165,040

“ol”要素や“ul”要素によるリストも横向きになり、リストマーカーは上に表示されます。



<div>


<p>


私が好きなタイプの猫を並べてみた。

</p>

<ol>


<li>三毛猫</li>

<li>黒猫</li>

<li>白猫</li>


</ol>


</div>

“ruby”要素によるルビはテキストの横に表示されます。また、ルビ・テキストも縦書きになります。



<p>


昨日の昼、天気が良かったので市場へ出かけた。そこで美味しそうな<ruby>林檎<rp>(</rp><rt>りんご</rt><rp>)</rp></ruby>が売っていたので5個ほど買って帰った。

</p>

＃

縦書き時に変わるプロパティと値

値として“left”と“right”を指定するプロパティでは横書きの場合に文字通り左と右を指しますが、縦書きでは上と下を指すようになります。

例えば、“float: left;”と“float: right;”は横書きの場合には値がそのまま表すように左右への要素の浮動を指定しますが、縦書きレイアウトの中では上下に浮動します。



<p>


バナナにはクロロフィルという葉緑素が含まれています。このクロロフィルは紫外線を吸収する働きがあり、植物は細胞や遺伝子を壊してしまう紫外線から自らを守っています。さらにバナナにはカロテノイドという黄色い色素も含まれていますが、成熟していないバナナはクロロフィルの緑色の方が濃いのでバナナは緑色に見えます。

<img src="banana.png" alt="バナナ" class="right">

バナナが熟してくると実を守っていた色素が分解されていきますが、カロテノイドよりも早くクロロフィルの方が分解されていくので徐々に緑色が薄くなっていきます。そうすると残ったカロテノイドによってバナナは黄色く見えるようになります。これはイチョウの葉が緑から黄色に変わっていく様子と同じです。


</p>

“text-align”プロパティや“clear”プロパティも同様です。

なお、“left”プロパティや“right”プロパティ、“margin-left”プロパティや“margin-right”プロパティといったプロパティは横書きでも縦書きでも指定する方向はプロパティ名の通りで変わりません。

テーブルのセルの配列が横書きと縦書きで変わるように、マルチカラム・レイアウトでのカラム・ボックスの並び方やフレキシブル・ボックス・レイアウトのフレックス・ボックスの並び方なども縦書きか横書きかによって変わります。

CSS3で新たに定義されたプロパティは横書きと縦書きの両方に対応して定義されています。横書きのみが想定されていたCSS2.1で定義されているプロパティについてはどのように定義を縦書き用に読み替えるかが“CSS Writing Modes”仕様書で示されています。

＃

傍線の向き

“text-decoration: underline;”で引かれる下線は縦書きではテキストの横に引かれる傍線となります。基本的には“下線”はラテン文字などを縦書きにした時に文字の“下”が右側になるので右側に引かれることになりますが、傍線をどちら側に引くかは言語によって異なります。例えば、日本語では傍線は一般的に右側に引かれます。その言語での慣習と異なる側に傍線を引くと不自然に見えてしまうため、ブラウザはテキストの記述言語に応じて傍線をどちら側に引くかを自動的に変更することができます。

対応するブラウザでは日本語で記述されたテキストに“text-decoration: underline;”で引かれる“下線”は右側に引かれます。



<p lang="ja">


昨日の昼、天気が良かったので市場へ出かけた。そこで美味しそうな<span class="underline">林檎</span>が売っていたので5個ほど買って帰った。

</p>

逆に中国語では傍線は左側に引かれることが多いので“text-decoration: underline;”で引かれる“下線”は左側に引かれます。



<p lang="zh-CN">


昨天天气很好，所以我去了市场。有一个看起来很好吃的<span class="underline">苹果</span>，所以我买了五个。

</p>

英語は縦書きにされると横倒しになるので、傍線は左側に引かれるのが自然です。なので、“text-decoration: underline;”で引かれる“下線”は左側に引かれます。



<p lang="en">


Yesterday was a beautiful day, so I went to the market. There, I found some nice looking <span class="underline">apples</span>, so I bought five of them.

</p>