論理的プロパティと値仕様書には、 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-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 に従います。
例: 位置指定レイアウトにおける inset プロパティ
Positioning generally allows us to position an element in a manner relative to its containing block — we essentially inset the item relative to where it would fall based on normal flow. To do this we have historically used the physical properties top, right, bottom and left.
These properties take a length or a percentage as a value, and relate to the user's screen dimensions.
New properties have been created in the Logical Properties specification for when you want the positioning to relate to the flow of text in your writing mode. These are as follows: inset-block-start, inset-block-end, inset-inline-start and inset-inline-end.
In the below example I have used the inset-block-start and inset-inline-end properties to position the blue box using absolute positioning inside the area with the grey dotted border, which has position: relative. Change the writing-mode property to vertical-rl, or add direction: rtl, and see how the flow relative box stays with the text direction.
新しい2または4値の一括指定
As with other properties in the specification we have some new shorthand properties, which give the ability to set two or four values at once. These do not have a direct mapping to physical equivalents.
inset— sets all four sides together.inset-inline— sets both the inline insets.inset-block— sets both the block insets.
Note: The browsers that have implemented the Logical Properties specification have so far implemented the direct mappings and not the new shorthands. Look to the browser compatibility data section on each property page reference for more details.
例: text-align の論理値
The text-align property has logical values that relate to text direction — rather than using left and right we can use start and end. In the below example I have set text-align: right in the first block and text-align: end in the second.
If you change the value of direction to rtl you will see that the alignment stays to the right for the first block, but goes to the logical end on the left in the second.
This works in a more consistent way when using box alignment that uses start and end rather than physical directions for alignment.