浮動と位置指定の論理的プロパティ

論理的プロパティと値仕様書 (Logical Properties and Values specification) には、 float および clear の物理的な値の論理的な対応付けと、位置指定レイアウトで使用する位置指定プロパティを含んでいます。このガイドはこれらの使い方を見てみます。

以下の表はこのガイドで物理的なマッピングに沿って議論されるプロパティや値を説明しています。水平方向の writing-mode は、左書きを想定しています。

論理的プロパティまたは値	物理的プロパティまたは値
float: inline-start	float: left
float: inline-end	float: right
clear: inline-start	clear: left
clear: inline-end	clear: right
inset-inline-start	left
inset-inline-end	right
inset-block-start	top
inset-block-end	bottom
text-align: start	text-align: left
text-align: end	text-align: right

これらの対応付けられたプロパティに加えて、ブロック方向やインライン方向を示すことができる一括指定プロパティがいくつかあります。これらは inset プロパティを除いて物理的なプロパティに対応付けられていません。

論理的プロパティ	目的
inset-inline	上記のインライン方向における両方の inset 値を同時に設定します。
inset-block	上記のブロック方向における両方の inset 値を同時に設定します。
inset	4つの inset 値をすべて同時に設定し、複数値の物理的な対応付けを行います。

float および clear プロパティで用いられる物理的な値 left, right, both です。論理的プロパティの仕様書は、 inline-start および inline-end の値を left および right に対応付けて定義しています。

下記の例では、二つのボックスがあります。 — 一つ目は float: left で、二つ目は float: inline-start で浮動させています。 writing-mode を vertical-rl に変更したり、 direction を rtl に変更したりすると、 left で浮動させたボックスは常に左にくっつきますが、 inline-start で浮動させたアイテムは direction や writing-mode に従います。

一般的に位置指定では、要素を含むブロックに対して相対的に要素を配置することができます。基本的に、通常のフローに基づいてアイテムが配置された場所に対して相対的にアイテムを挿入します。これを行うために、歴史的には top, right, bottom, left の物理的なプロパティを使用してきました。

これらのプロパティは、長さまたはパーセント値を値として取り、ユーザーの画面寸法に関連します。

論理的プロパティの仕様書では、指定した書字方向におけるテキストの流れに関連した位置合わせを行いたい場合のために、新しいプロパティが作成されました。これらは inset-block-start, inset-block-end, inset-inline-start, inset-inline-end になります。

以下の例では、 inset-block-start と inset-inline-end プロパティを使用して、青枠を灰色の点線で囲まれた領域 (position: relative) の内側に絶対位置を使用して配置しています 。 writing-mode プロパティを vertical-rl に変更するか、 direction: rtl を追加して、フロー相対ボックスがテキストの方向に従う様子を見てみましょう。

仕様書の他のプロパティと同様に、いくつかの新しい一括指定プロパティがあり、一度に 2 つまたは 4 つの値を設定することができます。

• inset — 物理的な対応付けを使用して四辺をすべて設定します。
• inset-inline — 論理的なインライン方向の内側の距離を両方設定します。
• inset-block — 論理的なブロック方向の内側の距離を両方設定します。

text-align プロパティは、テキストの方向に関連する論理値を持っています。 left と right に代わり、 start と end を使用することができます。以下の例では、最初のブロックで text-align: right、2番目のブロックで text-align: end を設定しています。

direction の値を rtl に変更すると、最初のブロックでは配置が右に留まりますが、2番目のブロックでは論理的な末尾が左になることがわかります。

これは、物理的な方向ではなく、先頭と末尾を使用したボックス配置を使用した場合に、より一貫性のある方法で動作します。