[This post presents a web designers technical problem, in which a hack for improved accessibility damages RTLability]
This weekend I tried to debug an annoying problem in Drupal's Acquia Marina theme on RTL mode, in which a horizontal scroll bar appears with no good reason (layout doesn't scale horizontally).
I turned to monkey HTML debugging, a term I just invented for removing element-by-element until getting to a super simple HTML file which reproduces the bug.
Eventually the one to blame was an element placed at "left: -999em" absolute position, a far place horizontally, and triggered the scroll bar to appear (on FF and IE, not on Chrome). When on LTR mode, it didn't, and things work perfectly. This setting aims to simply hide the drop-down menu when mouse is not hovering above it.
Q: Why don't they use CSS display:none, which seems to make more sense than hiding things off the screen?
A: looks like it has to do with screen readers (as this article suggests), which are apparently not aware of display:none text but are aware of off-screen text. A little puzzling. I suspect that it's too old info, for it seems to be written on 2003. I wonder if new screen readers have this problems as well, and whether the reason for using off-left is not just an ancient myth.
The problem with RTL
When placing things off-left (e.g. left: -999px) on LTR mode, all browsers do NOT widen the page horizontally. It makes sense - the page goes from left to right, not from left to even-more left.
However, when on RTL mode, left: -999px does widen the page horizontally to the right (and the off-left element is actually visible when scrolling there), which is a very unwanted effects.
Here's a related drupal discussion about the problem and possible solutions. The problem seems broader than just acquia marina .