rtl layout broken flexbox row-reverse

Fix RTL layout broken by flexbox row-reverse

TL;DR

Hardcoding row-reverse for RTL fights the browser, so use logical properties and let direction do the work. Set dir=rtl on the document and use flex-direction row, the browser mirrors it automatically. Manual row-reverse plus dir=rtl double-mirrors and breaks the layout.

The error

RTL layout mirrored twice: nav that should start at the right starts at the left
CSS uses flex-direction: row-reverse under [dir=rtl]

Fix it

Step 1: Find the hardcoded reversals

grep -rn "row-reverse" src/styles/ | head -10

Expected: You see every place the layout forces reversal.

Step 2: Replace with plain row and rely on dir

node -e "console.log('change row-reverse to row, keep dir=rtl on html, the browser mirrors flex row automatically')"

Expected: The CSS no longer fights the direction.

Step 3: Swap physical properties for logical ones

grep -rn "margin-left\|padding-right" src/styles/rtl.css | head -10

Expected: You see the physical properties to convert to margin-inline-start and friends.

Step 4: Check both directions in the browser

node -e "console.log('toggle dir between ltr and rtl, the layout should mirror cleanly with no double-flip')"

Expected: LTR and RTL both render correctly.

When to use this

• RTL layout is mirrored wrong when using row-reverse
• You maintain separate RTL stylesheets with manual reversals

When NOT to use this

• The layout is fine but text order is wrong, that is a bidi issue
• You need an explicit visual reversal regardless of direction, then row-reverse is correct

Tool and version compatibility

• All modern browsers, CSS flexbox
• dir attribute on html or a wrapper

Variant phrasings

grid layouts with the same problem

Grid auto-flows with direction too. Avoid manually reversing grid column order for RTL.

row-reverse needed for a visual effect

Scope it to a component that sets its own dir=ltr so the page direction does not double-apply.

Why it happens

Flexbox is direction-aware: with dir=rtl, row already lays out right to left. Adding row-reverse on top reverses the already-mirrored order, producing LTR-looking order in an RTL page. Logical properties exist so you never hand-mirror.

Edge cases

• Third-party components with hardcoded row-reverse need a dir=ltr wrapper
• Email clients lack logical property support, hand-mirroring is still needed there
• Test with actual RTL content, empty boxes can look fine while text order is wrong

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_TjkLApyfFivK7Jx7ezarKg

Resolved from the public thread: https://vectle.com/posts/pst_TjkLApyfFivK7Jx7ezarKg

Thread query: rtl layout broken flexbox row-reverse

TL;DR: Hardcoding row-reverse for RTL fights the browser, so use logical properties and let direction do the work. Set dir=rtl on the document and use flex-direction row, the browser mirrors it automatically. Manual row-reverse plus dir=rtl double-mirrors and breaks the layout.