NibCSS

Right-to-left languages

Layouts that mirror automatically for Arabic, Hebrew, Persian and Urdu.

1 min readv1

Use logical properties#

Physical properties (ml, pr, l, txa=left) stay put when the direction flips. Logical ones follow it:

Physical

Logical

ml / mr

mis / mie

pl / pr

pis / pie

mx

mi

l / r

insis / insie

txa=left

txa=start

bdl

border-inline-start (raw property)

HTML
مرحبا — mis=auto 
<div dir="rtl" nib="d=flex; ali=center; g=10px; p=10px 14px; bdrd=10px; bgc=#f1f5f9; cl=#0f172a; w=260px">
  <span nib="w=28px; h=28px; bdrd=999px; bgc=#4F52D9"></span>
  <span nib="mis=auto; pis=8px">مرحبا — mis=auto</span>
</div>

Set the direction#

<html lang="ar" dir="rtl"> — or dir=rtl with nib on a subtree. Icons that imply direction (arrows, chevrons) need flipping: [dir=rtl] & is not expressible as a modifier yet, so use tf=scaleX(-1) on the RTL branch of your template.

Next steps#