xfq commented 4 months ago

We can write an article to talk about logical properties/values in CSS and their application in RTL and vertical text, and talk about the differences between physical properties/values and logical properties/values.

xfq commented 4 months ago

I'll try writing a rough draft in this issue.

xfq commented 4 months ago

Using CSS logical properties and values

The start of a line is not always the left side of a line. Text aligned to the right in an English page should align to the left on a RTL page. It should align to the top on a page in vertical writing mode. It is possible to make that happen automatically, without the hassle of changing all the CSS in your style sheet. The solution is to use 'logical properties' and 'logical values' when setting up your style: i.e., use 'start' and 'end', rather than 'left' or 'right'.

[ Add illustrations for typical English, Arabic, and vertical Chinese text layout ]

Many people use CSS to style web pages using physical properties and values, such as the familiar margin, padding, and border properties, and the top, right, bottom, and left values.

If we localize this page from English to Arabic, we need to write two sets of style rules for LTR and RTL, like:

[dir="ltr"] .box {
    margin-right: 20px;
}

[dir="rtl"] .box {
    margin-left: 20px;
}

If we use logical properties, it is much simpler:

.box {
    margin-inline-end: 20px;
}

[ List the common logical properties/values and their corresponding physical properties/values, and briefly describe their differences ]

[ Describe the inline dimension and the block dimension ]

[ Talk about browser support? ]

w3c / i18n-drafts

Using CSS logical properties and values #592

Using CSS logical properties and values

Further reading