snippetcssTip
Logical and physical CSS properties equivalents
Viewed 0 times
andphysicalequivalentscsslogicalproperties
Problem
Logical properties are a new way to define layout in CSS. They allow you to use logical directions (like
<baseline-support featureId="logical-properties">
</baseline-support>
However, if you're used to working with physical properties, it can be a bit confusing at first. To help you out, here's a handy map of logical properties to their physical counterparts!
> [!NOTE]
start, end, inline, and block) instead of physical directions (like left, right, top, and bottom). This makes it easier to create layouts that work well in different writing modes and languages.<baseline-support featureId="logical-properties">
</baseline-support>
However, if you're used to working with physical properties, it can be a bit confusing at first. To help you out, here's a handy map of logical properties to their physical counterparts!
> [!NOTE]
Solution
</baseline-support>
However, if you're used to working with physical properties, it can be a bit confusing at first. To help you out, here's a handy map of logical properties to their physical counterparts!
> [!NOTE]
>
> In this article, I'm assuming you're writing from left to right (LTR). If you're writing from right to left (RTL), the physical properties will be reversed. For example,
| Logical Property | Physical Property (LTR) |
However, if you're used to working with physical properties, it can be a bit confusing at first. To help you out, here's a handy map of logical properties to their physical counterparts!
> [!NOTE]
>
> In this article, I'm assuming you're writing from left to right (LTR). If you're writing from right to left (RTL), the physical properties will be reversed. For example,
left becomes right, and top becomes bottom.| Logical Property | Physical Property (LTR) |
Context
From 30-seconds-of-code: logical-physical-properties-map
Revisions (0)
No revisions yet.