- From: Fuqiao Xue via GitHub <sysbot+gh@w3.org>
- Date: Fri, 21 Jun 2024 06:48:35 +0000
- To: public-i18n-archive@w3.org
# 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: ```css [dir="ltr"] .box { margin-right: 20px; } [dir="rtl"] .box { margin-left: 20px; } ``` If we use logical properties, it is much simpler: ```css .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](https://www.w3.org/International/questions/qa-html-dir.en.html) * [Inline markup and bidirectional text in HTML](https://www.w3.org/International/articles/inline-bidi-markup/) * [Creating HTML Pages in Arabic, Hebrew and Other Right-to-left Scripts (tutorial)](https://www.w3.org/International/tutorials/bidi-xhtml/) * [Styling vertical Chinese, Japanese, Korean and Mongolian text](https://www.w3.org/International/articles/vertical-text/index.en.html) * More related links in [Authoring web pages](https://www.w3.org/International/techniques/authoring-html) -- GitHub Notification of comment by xfq Please view or discuss this issue at https://github.com/w3c/i18n-drafts/issues/592#issuecomment-2182114920 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 21 June 2024 06:48:36 UTC