このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
フローレイアウトと書字方向
通常フローの動きについて詳細を説明している CSS 2.1 仕様書は、横書きを想定しています。レイアウトプロパティは縦書きモードでも同様に動作するべきです。このガイドでは、異なる文書の書字方向が使われた場合のフローレイアウトの動作を見てみましょう。
これは CSS での書字方向の使用に関する包括的なガイドではなく、ここでの目的は、フローレイアウトと書字方向の起こりうる相互作用が予想できないような領域を文書化することです。この文書の関連情報の節で、書字方向に関するより多くのリソースを紹介します。
書字方向の仕様書
CSS Writing Modes Level 3 仕様書では、フローレイアウトで文書の書字方向が変更された時の影響を定義しています。仕様書の書字方向の導入部では、以下のように書かれています。
"CSS の書字方向は
writing-mode,direction,text-orientationプロパティによって決められます。これは主にインラインベース方向とブロックフロー方向から決まります。"
仕様書では「インラインベース方向」を、行内でコンテンツが並べられる方向として定義しています。ここでは、インライン方向の先頭と末尾を定義しています。先頭は文が始まるところであり、末尾はテキストの行が終わり、新しい行への折り返しが始まる前です。
「ブロックフロー方向」は、段落などのボックスが、その書字方向で積み重なる方向です。 CSS のwriting-mode プロパティは、ブロックフロー方向を制御します。ページまたはページの一部をvertical-lr に変更したい場合、要素にwriting-mode: vertical-lr と設定し、これがブロックの方向を変更して、従ってインライン方向も同様に変更します。
特定の言語では書字方向やテキストの方向が使用されますが、これらの方向を創造的な効果として、例えば見出しを縦書きにするために使用することができます。
<div> <h1>A heading</h1> <p> One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery. </p></div>body { font: 1.2em sans-serif;}h1 { writing-mode: vertical-lr; float: left;}ブロックフローの方向
writing-mode プロパティはhorizontal-tb,vertical-rl,vertical-lr の値を受け入れます。これらの値はページのブロックフローの方向を制御します。初期値はhorizontal-tb で、ブロックフロー方向は上から下で、インライン方向は横書きとなります。英語のような左書きの言語、アラビア語のような右書きの言語は、すべてhorizontal-tb です。
以下の例はhorizontal-tb を使用したブロックを示しています。
<div> <p> One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery. </p> <p> Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact. </p></div>body { font: 1.2em sans-serif;}.box { writing-mode: horizontal-tb;}vertical-rl の値は、次の例に見られるように、ブロックフロー方向は右から左で、インライン方向は縦書きになります。
<div> <p> One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery. </p> <p> Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact. </p></div>body { font: 1.2em sans-serif;}.box { writing-mode: vertical-rl;}最後の例ではwriting-mode の第三の値であるvertical-lr を紹介します。ブロックフロー方向は左から右で、インライン方向は縦書きになります。
<div> <p> One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery. </p> <p> Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact. </p></div>body { font: 1.2em sans-serif;}.box { writing-mode: vertical-lr;}書字方向が親と異なるボックス
親とは書字方向が異なる内部のボックスを作成した場合、インラインレベルボックスはdisplay: inline-block であるかのように表示されます。
<div> <p> One <span>November</span> night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery. </p></div>body { font: 1.2em sans-serif;}.box { writing-mode: vertical-rl;}.box span { writing-mode: horizontal-tb; padding: 10px; border: 1px solid rebeccapurple;}ブロックレベルボックスは新しいブロック整形コンテキストを生成し、つまり内部の display 種別がflow であれば、 display 種別の計算値はflow-root になります。次の例では、親が新しいブロック整形コンテキストを確立するため、horizontal-tb で表示される浮動ボックスを含むボックスがどこに表示されるかを確認できます。
<div> <p> One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. </p> <div> <div></div> This box should establish a new BFC. </div> <p> Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery. </p></div>body { font: 1.2em sans-serif;}.box { writing-mode: vertical-rl;}.box > div { writing-mode: horizontal-tb; padding: 10px; border: 1px solid rebeccapurple;}.float { width: 100px; height: 150px; background-color: rebeccapurple; float: left;}置換要素
画像などの置換要素は、writing-mode プロパティによって方向が変更されません。しかし、テキストを含むフォームコントロールのような置換要素は、使用中の書字方向に一致するでしょう。
<div> <p> One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. </p> <img alt="a colorful hot air balloon against a clear sky" src="https://mdn.github.io/shared-assets/images/examples/balloon.jpg" /> <p> Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery. </p></div>body { font: 1.2em sans-serif;}.box { writing-mode: vertical-rl;}論理的プロパティと値
書字方向をhorizontal-tb 以外にして作業をすると、画面の物理的な寸法に合わせられた多くのプロパティと値はおかしく見えます。例えば、horizontal-tb の中でボックスの幅を 100px に設定すると、インライン方向の寸法を制御することになります。vertical-lr では、ブロック方向の寸法を制御することになり、テキストに合わせて回転するわけではありません。
<div> <div>ボックス１</div> <div>ボックス２</div></div>body { font: 1.2em sans-serif;}.box1 { writing-mode: horizontal-tb; border: 5px solid rebeccapurple; width: 100px; margin: 10px;}.box2 { writing-mode: vertical-lr; border: 5px solid rebeccapurple; width: 100px; margin: 10px;}従って、新しいプロパティblock-size およびinline-size ができました。ブロックのinline-size を 100px に設定すると、書字方向が横書きか縦書きかに関わらず、inline-size は常にインライン方向の寸法を意味します。
<div> <div>ボックス１</div> <div>ボックス２</div></div>body { font: 1.2em sans-serif;}.box1 { writing-mode: horizontal-tb; border: 5px solid rebeccapurple; inline-size: 100px; margin: 10px;}.box2 { writing-mode: vertical-lr; border: 5px solid rebeccapurple; inline-size: 100px; margin: 10px;}CSS 論理的プロパティと値の仕様書は、マージン、パディング、境界の制御や、その他の通常は物理的な方向を使用して指定するものの論理バージョンのプロパティを含んでいます。
まとめ
多くの場合、フローレイアウトは文書や文書の一部の書字方向を変更したときに、期待通りに動作するでしょう。これはふつう、縦書きの言語や創造的な理由で使用することができます。 CSS は論理的プロパティと値を導入することで、縦書き時にインラインやブロック方向に基づいて寸法を決めやすくしています。これはどの書字方向でも動作するコンポーネントを作成するのに便利です。
関連情報
- 書字方向
- Writing modes and CSS layout - Smashing Magazine (2019)
- CSS writing modes - 24ways.org (2016)