Using CSS logical properties and values

[xfq]

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]

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

[xfq]

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? ]

Further reading

• Structural markup and right-to-left text in HTML
• Inline markup and bidirectional text in HTML
• Creating HTML Pages in Arabic, Hebrew and Other Right-to-left Scripts (tutorial)
• Styling vertical Chinese, Japanese, Korean and Mongolian text
• More related links in Authoring web pages