Comments (2)
I'll try writing a rough draft in this issue.
from i18n-drafts.
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
from i18n-drafts.
Related Issues (20)
- Skip Navigation Links
- Cultural norms & expectations HOT 3
- [questions/qa-no-language] Tagging text with no language HOT 1
- [articles/idn-and-iri/index] Information in the multilingual web addresses article needs to be updated HOT 4
- [techniques/authoring-html] Broken link HOT 1
- [techniques/authoring-html] Links to the vertical text article HOT 1
- [questions/qa-bidi-controls] i18n-html-tech-bidi is outdated HOT 1
- [techniques/authoring-html] Link to qa-bidi-source in the techniques page
- [articles/definitions-characters/index] BRIEF_TITLE_GOES_HERE
- [articles/typography/fontstyles] Add more information to the Japanese section
- Update ja boilerplate
- [articles/language-tags/index] language tags in XHTML HOT 2
- Unused style HOT 1
- [techniques/authoring-html]
- [questions/qa-i18n] BRIEF_TITLE_GOES_HERE
- Fix Arabic example
- [tutorials/language-decl/index] BRIEF_TITLE_GOES_HERE
- [questions/qa-direction-native] A few commonts on the APIs
- Language flags standard
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from i18n-drafts.