Website Layout For Arabic Countries
阿新 • • 發佈:2018-11-08
direction: rtl
The direction
property set the direction of text, table columns and horizontal overflow. direction: rtl
will change to writing mode from right to left.
Flexbox over floating layout
Use flex layout instead of floating layout, because flex items always start from the start edge of the flex container. With direction: rtl
Symmetric margin and padding
If just setting margin-left
or padding-left
, then you have to overwrite them for Arabic web. The best solution is to set symmetric margin and padding to avoid two set of styles.
Avoid text-align
Avoid setting text-align
text-algin: center
. Because once you set text-align
, it means you have to write two set of styles.
Issues
Layout-related Javascript logic
If appling positioning styles like position: relative
and left: 10px
in Javascript, then you will find it hard to reverse for Arabic countries.