RTL Gotchas

Things I/others have found.

There might will be more. Will update.

.gel-layout
Breaks rtl text direction, forcing it back ltr. You should be able to get around this using .gel-layout--rev, but this is hard to do conditionally inside the scaffold currently.

SVG direction tags
Is dir="rtl" as an inline parameter (thanks, Joe), rather than direction: rtl in CSS. IE and other browsers disagree on text-anchor if you don't set this.

Absolute positioning
left: 0 goes to left: auto; right: 0 - if you are reversing the layout (which we have been doing in bespoke builds).
Also can apply to padding sometimes, I have swapped a large padding-left for a padding-right using unset.

Radio (possibly other form buttons) hitbox
Was wrong on RTL defaults last time I looked - it was setup for LTR.

scrollLeft - interpreted differently between browsers. Was found in the World Cup project so check that out for the solution(?). Some returned negative numbers, some positive.

Fun bonus:
-webkit-rtl-ordering: logical;

RTL Gotchas
Share this