Website Layout For Arabic Countries

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, the layout will start from right to left.

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 unless you want text-algin: center. Because once you set text-align, it means you have to write two set of styles.

Avoid position: relative

Relative position will start from different direction therefore it will ruin the layout if applying position: relative and left: 10px for the element. Avoid position: absolute if possible.

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.