Internationalizing a React application is not just a matter of translating strings. For Arabic, Hebrew, Persian, Urdu, and other languages written with right-to-left scripts, the interface itself must respect directionality: text flow, alignment, icons, spacing, table order, form behavior, and mixed-language content all need attention.

The W3C Internationalization guidance is clear on the foundation: use HTML directionality to establish the base direction. The dir attribute is the semantic mechanism browsers use to apply the Unicode Bidirectional Algorithm correctly, and W3C recommends adding dir="rtl" to the html element when the overall document direction is right-to-left.

Start with document direction

A common React anti-pattern is to scatter conditional class names across components:

< div className = { locale === " ar " ? " text-right flex-row-reverse " : " text-left " } > ... </ div >

Enter fullscreen mode

Exit fullscreen mode

This is brittle and repetitive.…