書き込みモードとCSSレイアウト

これは、このプロパティの実用的または創造的なアプリケーションに関する記事ではありません。 代わりに、ページやコンポーネントの書き込みモードを変更する必要がほとんどない私たちにとっても、書き込みモードを理解することが非常に重要である理由を示したいと思います。 複数の書き込みモードのサポートは、Flexboxとグリッドレイアウトの新しいレイアウト方法を設計する方法の鍵となります。 これを理解することで、これらのレイアウト方法がどのように機能するかをよりよく理解することができます。

書き込みモードとは何ですか？

ドキュメントまたはコンポーネントの書き込みモードは、テキストが流れる方向を指します。 CSSでは、書き込みモードを操作するために、 writing-modeプロパティを使用します。 このプロパティは、次の値を取ることができます。

• horizontal-tb
• vertical-rl
• vertical-lr
• sideways-rl
• sideways-lr

Smashing Magazineのこの記事を英語で読んでいる場合、このドキュメントの書き込みモードは、 horizontal-tb 、またはHorizo​​ntal Top ToBottomです。 英語では、文章は横書きで書かれています—左から始まる各行の最初の文字。

アラビア語などの言語にも、 horizontal-tb書き込みモードがあります。 上から下に水平に書かれていますが、アラビア文字は右から左に書かれているので、アラビア語の文章は右から始まります。

中国語、日本語、韓国語は縦書きで、最初の文の最初の文字が右上になります。 次の文が左側に追加されています。 したがって、使用される書き込みモードはvertical-rlです。 右から左に実行される垂直書き込みモード。

モンゴル語も縦に書かれていますが、左から右に書かれています。 したがって、モンゴル文字を植字する場合は、書き込みモードvertical-lrを使用します。

writing-modeの他の2つの値は、垂直スクリプトの植字よりも創造的な目的のために設計されています。 sideways-lrとsideways-rlを使用すると、テキストが横向きになります。通常、縦向きで直立して書かれている文字も同様です。 残念ながら、これらの値は現時点ではFirefoxでのみサポートされています。 次のCodePenは、 writing-modeのさまざまな値をすべて示しています。 sideways-*に表示したい場合は、Firefoxを使用する必要があります。

書き込みモードは、その書き込みモードを使用して記述された言語を使用するドキュメントを作成するときに使用できます。 また、たとえば、一部のコンテンツの横に垂直に見出しを設定するために、クリエイティブに使用することもできます。 ただし、この記事では、垂直言語のサポート、および垂直テキストの可能性がCSSレイアウト、および一般的なCSS全体に与える影響を確認したいと思います。

私がそうする前に—あなたが垂直テキストのための書き込みモードの使用に興味があるなら—ここにいくつかの有用なリソースがあります：

• W3C Internationalizationサイトには、役立つ情報が豊富にあります。 RTLスクリプトと垂直テキストについて読んでください。
• Jen Simmonsは、CSS書き込みモードに関する優れた記事を作成しました。この記事には、使用中のこれらのモードの印刷からのいくつかの例も含まれています。
• 世界と私たちの書記体系についての考え-ChenHui Jing
• 書き込みモードでの垂直組版の再検討-ChenHui Jing
• MDNの書き込みモードプロパティ

ブロックとインラインの寸法

ドキュメントの書き込みモードを変更すると、ブロックフローの方向が切り替わります。 したがって、ブロックとインラインの意味を理解することは、すぐに非常に役立ちます。

CSSについて最初に学ぶことの1つは、一部の要素がブロック要素であるということです。たとえば、段落です。 これらの要素は、ブロック方向に次々に表示されます。 文中の単語などのインライン要素は、インライン方向に次々に表示されます。 水平方向の書き込みモードで作業すると、ブロックの寸法が垂直方向に上から下に、インラインの寸法が水平方向に左から右に伸びるという事実に慣れます。

ただし、ブロック要素とインライン要素はドキュメントの書き込みモードに関連しているため、水平書き込みモードの場合にのみ、インライン寸法は水平になります。 幅ではなく、インラインサイズに関係します。 ブロックの寸法は、水平書き込みモードの場合にのみ垂直になります。 したがって、高さではなく、ブロックサイズに関係します。

論理的なフロー相対プロパティ

これらの用語、インラインサイズおよびブロックサイズは、新しい書き込みモード対応の世界を反映するように設計された新しいCSSプロパティの名前としても使用されます。 水平書き込みモードで、 widthの代わりにinline-sizeプロパティを使用すると、コンポーネントの書き込みモードを切り替えるまで、widthとまったく同じように機能します。 常に物理的な寸法になるwidthを使用する場合、それは常にコンポーネントの水平方向のサイズになります。 inline-sizeを使用する場合、次の例に示すように、それがインライン寸法のサイズになります。

同じことがheightにも当てはまります。 heightプロパティは、常に垂直方向のサイズになります。 アイテムの高さに関係します。 ただし、 block-sizeプロパティは、ブロックディメンションのサイズを示します。水平書き込みモードの場合は垂直方向、垂直書き込みモードの場合は水平方向です。

記事「論理プロパティと値について」で説明したように、画面のサイズに関連付けられているすべての物理プロパティのマッピングがあります。 考え始めると、CSSの多くは画面の物理的なレイアウトに関連して指定されます。 上、右、下、左を使用して、位置、マージン、パディング、境界線を設定します。 物事を左右に浮かせます。 物事を物理的な次元に結び付けることが私たちが望むものになることもありますが、物理的な場所を参照せずにレイアウトについて考えることがますます増えています。 論理プロパティと値の仕様は、CSS全体で機能するこの書き込みモードに依存しない方法を展開します。

書き込みモード、グリッド、フレックスボックス

私たちの新しいレイアウト方法が登場したとき、それらは、フレックスまたはグリッドレイアウトとしてレイアウトされているコンポーネントの書き込みモードを見る不可知論的な方法をもたらしました。 人々は初めて、左右、上下ではなく、始まりと終わりについて考えるように求められました。

私が最初にCSSグリッドのテーマでプレゼンテーションを始めたとき、私の初期のプレゼンテーションは仕様のすべてのプロパティの要約でした。 grid-areaプロパティを使用して、グリッドアイテムを配置するための4行すべてを設定できることを説明しました。 ただし、これらの行の順序は、4つのマージンすべてを設定するために使用する、おなじみの上下左右ではありませんでした。 代わりに、上、左、下、右を使用する必要があります-その順序の逆です！ グリッドモードと書き込みモードの関係を理解するまで、これは非常に奇妙な決定のように思われました。 私たちがやっていることは、両方のスタートラインを設定し、次に両方のエンドラインを設定することであることに気づきました。 上、右、下、左を使用すると、水平書き込みモードの場合は問題なく機能しますが、グリッドを横向きにしますが、それは意味がありません。 grid-area: 1 / 2 / 3 / 5; 下のペンのように、線は次のように設定されます。

• grid-row-start: 1; -ブロック開始
• grid-column-start: 2インラインスタート
• grid-row-end: 3ブロックエンド
• grid-column-end: 5インラインエンド

Flexboxの行と列

Flexboxを使用してdisplay: flexをコンテナに追加すると、 flex-directionプロパティの初期値がrowであるため、アイテムは行として表示されます。 行は、使用中の書き込みモードのインラインディメンションに従います。 したがって、書き込みモードがhorizontal-tbの場合、行は水平方向に実行されます。 現在のスクリプトのテキストの方向が左から右の場合、アイテムは左から並んでいます。右から左の場合、アイテムは右から並んでいます。

ただし、 vertical-rlやflex-direction: rowを使用するとアイテムが垂直に配置されます。 この次のCodePenでは、すべての例にflex-direction: rowがあり、書き込みモードまたは方向のみが変更されています。

flex-direction: columnを追加し、書き込みモードのブロックディメンションにアイテムのレイアウトを追加します。 水平書き込みモードでは、ブロックの寸法は上から下になるため、列は垂直になります。 vertical-rlの書き込みモードでは、列は水平になります。 前の例と同様に、以下のフレックスレイアウトの唯一の違いは、使用されている書き込みモードです。

グリッドの自動配置

グリッドで自動配置を使用すると、フレックスレイアウトと同様の動作が見られます。 グリッドアイテムは、ドキュメントの書き込みモードに従って自動配置されます。 デフォルトでは、アイテムを行に配置します。これはインライン方向になります。水平方向の書き込みモードでは水平方向、垂直方向の書き込みモードでは垂直方向になります。

次の例のように、アイテムのフローをcolumnに変更してみてください。 アイテムはブロック次元で流れます-水平書き込みモードでは垂直に、垂直書き込みモードでは水平に流れます。

グリッド線-配置された配置

行ベースの配置は、書き込みモードも尊重します。 グリッドの行は、行と列の両方で1から始まります。 アイテムを1列目から3列目に配置し、左から右方向の水平書き込みモードにすると、そのアイテムは左端の列線から2つのグリッドトラックに水平に伸びます。 したがって、2つの列にまたがります。

書き込みモードをvertical-rlに変更すると、列の行1がグリッドの一番上に表示され、アイテムは2つのトラックに垂直にまたがります。 まだ2つの列にまたがっていますが、列は水平方向に実行されています。

グリッドとフレックスボックスの配置

Flexboxが書き込みモードを処理する方法に多くの人が最初に接触する場所の1つは、Flexレイアウトでアイテムを整列するときです。 上記のflex-direction: row例を使用し、 justify-contentプロパティを使用してすべてのアイテムを整列させ、アイテムをflex-endにすると、アイテムは行の最後に移動します。 これは、左から右に向ける水平書き込みモードでは、その行の終わりが右側にあるため、アイテムはすべて右に移動することを意味します。 方向が右から左の場合、それらはすべて左に移動します。

縦書きモードでは、スペースがあると仮定して、下に移動します。 この例のコンポーネントにinline-sizeを設定して、フレックスコンテナに空きスペースを確保し、実際の配置を確認できるようにしました。

グリッドレイアウトでは、常に2つの軸を使用できるため、配置が少しわかりやすくなります。 グリッドは2次元であり、これらの2次元はブロックとインラインです。 したがって、 justify- align-始まるプロパティを使用するかを知りたい場合は、1つのルールを覚えておくことができます。 グリッドレイアウトでは、 align-プロパティ：-align align-content 、 align-items 、 align-selfを使用して、ブロック軸の位置合わせを行います。 垂直方向を意味する水平書き込みモード、および水平方向の垂直書き込みモード。

繰り返しになりますが、書き込みモードに関係なくグリッドレイアウトがまったく同じように機能するようにするため、左右または上下を使用しません。 したがって、 startとendを使用して整列します。 ブロックの寸法からstartするように位置合わせすると、horizo​​ntal horizontal-tb場合はtopになりますが、 vertical-rl場合はrightなります。 以下の例を見てください。配置値は両方のグリッドで同じです。唯一の違いは、使用される書き込みモードです。

プロパティjustify-content 、 justify-items 、 justify-selfは、グリッドレイアウトのインライン配置に常に使用されます。 これは、水平書き込みモードでは水平になり、垂直書き込みモードでは垂直になります。

Flexboxの配置は、主軸を行から列に切り替えることができるため、多少複雑になります。 したがって、Flexboxでは、位置合わせ方法を主軸と交差軸として考える必要があります。 align-プロパティは交差軸で使用されます。 Flexboxではアイテムをグループとして扱うため、主軸では、 justify-contentだけがあります。 クロス軸では、フレックスコンテナ内に複数のフレックスラインとスペースがあり、それらのスペースを空ける場合に、 align-contentを使用できます。 また、 align-itemsとalign-selfを使用して、フレックスアイテムを相互におよびそれらのフレックスラインとの関係で交差軸上で移動することもできます。

CSSレイアウトでの配置の詳細については、以前のSmashingMagazineの記事を参照してください。

• CSSで物事を調整する方法
• Flexboxでの配置について知っておくべきことすべて

書き込みモードの認識と古いCSS

すべてのCSSが、このフローに相対的な書き込みモードに依存しない作業方法に完全に追いついているわけではありません。 ブロックとインライン、開始と終了の観点から物事を考えるほど、それが珍しいものとして目立ち始めていない場所。 たとえば、複数列のレイアウトでは、 column-widthを指定します。これは、垂直書き込みモードで作業しているときに物理的な幅にマップされないため、実際には列のインラインサイズを意味します。

ご覧のとおり、 horizontal-tb以外の書き込みモードを使用したことがない場合でも、書き込みモードはCSSで行うことの多くを支えています。

この書き込みモードにとらわれない方法でCSSレイアウトについて考えることは非常に役に立ちます。 すべてのプロパティと値を論理的なものに切り替えるのはおそらく少し早いですが、新しいレイアウト方法を扱うときはすでにフロー相対の世界にいます。 メンタルモデルを画面の四隅に結び付けるのではなく、ブロックとインライン、開始と終了の1つにすることで、FlexBoxとグリッドを使用するときに遭遇する多くのことが明らかになります。