Working on Arabic interfaces quickly reveals the limits of traditional CSS. padding-left and margin-right flip on you in RTL and cause unwanted surprises.

Logical properties: the basics

Instead of left/right and top/bottom, use:

  • inline-start / inline-end instead of left/right
  • block-start / block-end instead of top/bottom
  • padding-block and padding-inline
  • margin-block and margin-inline

Practical examples

Everything you write with logical properties works automatically in both directions, with no extra RTL code.

When building for an Arabic project, treat every left or right as a potential bug.

Exceptions

There are a few places you do need physical direction: icons that should not flip (video play arrows, for example), or Latin content inside an Arabic context.

Got a project in mind?

We'll do a 30-minute discovery call at no cost. You'll leave with a clear understanding of your needs.

Start your project