Logical properties for floating and positioning
The CSS logical properties and values module contains logical mappings for the physical values of float
and clear
, and also for the positioning properties used with positioned layout. This guide takes a look at how to use these.
Mapped properties and values
The table below details the logical properties and values discussed in this guide along with their physical properties and values mappings. They assume a horizontal writing-mode
, with a left-to-right direction.
Logical property or value | Physical property or value |
---|---|
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 |
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 inset
property.
Logical property | Purpose |
---|---|
inset-inline |
Sets both of the above inset values for the inline dimension simultaneously. |
inset-block |
Sets both of the above inset values for the block dimension simultaneously. |
inset |
Sets all four inset values simultaneously with physical mapping of multi-value. |
Float and clear example
The physical values used with the float
and clear
properties are left
, right
and both
. The CSS logical properties and values module defines the values inline-start
and inline-end
as mappings for left
and right
.
This example has two boxes — the first has the box floated with float: left
, the second with float: inline-start
. If you change the writing-mode
to vertical-rl
or the direction
to rtl
you will see that the left-floated box always sticks to the left, whereas the inline-start
-floated item follows the direction
and writing-mode
.
Example: Inset properties for positioned layout
CSS 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 position an element relative to the viewport, use the physical properties top
, right
, bottom
and left
. When you want the positioning to relate to the flow of text in your writing mode, use inset-block-start
, inset-block-end
, inset-inline-start
and inset-inline-end
instead.
These properties take a length or a percentage as a value, and relate to the user's screen dimensions.
In the below example, the inset-block-start
and inset-inline-end
properties are used 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.
New two- and four-value shorthands
As with other properties in the module, we have shorthand properties which give the ability to set two or four values at once.
inset
— sets all four sides together with physical mapping.inset-inline
— sets both logical inline insets.inset-block
— sets both logical block insets.
Example: Logical values for text-align
The text-align
property has logical values that relate to text direction — rather than using left
and right
you can use start
and end
. In the below example, text-align: right
is set 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 more consistently when using box alignment that uses start and end rather than physical directions for alignment.