The Logical Properties and Values specification contains logical mappings for the physical values of
clear, and also for the positioning properties used with positioned layout. This guide takes a look at how to use these.
The table below details the properties and values discussed in this guide along with their physical mappings. They assume a horizontal
writing-mode, with a left-to-right direction.
|Logical property or value
|Physical property or value
In addition to these mapped properties there are some additional shorthand properties made possible by being able to address block and inline dimensions. These have no mapping to physical properties, aside from the
The physical values used with the
clear properties are
both. The Logical Properties specification defines the values
inline-end as mappings for
In the example below I have two boxes — the first has the box floated with
float: left, the second with
float: inline-start. If you change the
vertical-rl or the
rtl you will see that the left-floated box always sticks to the left, whereas the
inline-start-floated item follows the
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
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:
In the below example I have used the
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.
text-align property has logical values that relate to text direction — rather than using
right we can use
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
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 more consistently when using box alignment that uses start and end rather than physical directions for alignment.