[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 .
Potential Solution #1: use off-right on RTL: BAD
That's the most trivial solution. It seems to work on IE8, chrome and FF. However, IE7, even on RTL, keeps widening the page and creating a horiz. scroll bar when using right: -999px. as for my inspection IE7 does not cope well with off-right (nor off-left) on RTL!
Another, more minor downside, is that this solution requires different styling-code for LTR and RTL. It's always preferred to have code that is not direction-specific, so that even when not keeping RTL in mind, the page would be RTL-compliant.
Potential solution #2: off-top
As far as I know, there are no TTB (Top To Bottom) languages on the web, so hiding things off top would be best. From my tests, all common browsers (IE7, IE8, chrome, FF) like it. I wonder why people didn't use it in first place instead of off-left, did I miss any disadvantage?
Long-term solution: an intuitive new standard
Personally I believe that neither off-left, off-right nor off-top are intuitive, these looks more like hacks, and I bet that most web developers don't even know about these. So even, for the sake of accessibility, it's important to resolve this screen reader crisis (if it exists at all), and have an industry standard for setting elements as hidden.
First step should be figuring out why/whether screen readers don't support display:none; can readers confirm that and go into deeper details?
Second step might be fixing the standards so that screen readers would support it, if needed.
-----
And the patch for fixing the RTL horizontal-scroll bar bug in Drupal's Acquia Marina theme:
--- a/style.css
+++ b/style.css
@@ -1145,7 +1145,7 @@ div.rounded-inside {
#primary-menu ul.menu li ul {
background: transparent url('images/drop-bottom.png') no-repeat 0 bottom;
-Â left: -999em;
+Â top: -999em;
opacity: 0.95;
margin: 0 0 0 -10px;
padding: 2px 0 4px;
@@ -1157,7 +1157,7 @@ div.rounded-inside {
#primary-menu ul.menu li:hover ul,
#primary-menu ul.menu li.hover ul {
display: block;
-Â left: auto;
+Â top: auto;
}
#primary-menu ul.menu li ul li {
@@ -1195,7 +1195,7 @@ div.rounded-inside {
}
#primary-menu ul.menu li ul li ul.menu {
-Â left: -999em;
+Â top: -999em;
margin: 0 0 0 -14px;Â Â Â /* LTR */
padding: 6px 0 4px;
}
@@ -1231,7 +1231,7 @@ div.rounded-inside {
}
#primary-menu ul.menu li ul li ul.menu li ul.menu li ul.menu{
-Â left: -999em;
+Â top: -999em;
margin: 0 0 0 -14px;
padding: 6px 0 4px;
}
Update: I have opened a bug for acquia marina, and found another related bug (it's me commenting there about off-top).
This way of hiding elements is common for menu systems. In fact, until Firefox 3.0 it was working well because of a bug in Gecko making the horizontal scrollbar to not appear correctly.
It can be fixed easily by simulating the same effect on rtl environments with right:-999em; but it is not acceptable by me as I don't like these tricks. A better solution would be to set the element to be hidden when not needed. This can be made using visibility:hidden;, and the element won't be drawn until requested by another CSS rule which will change its appearance.
Tomer: as I wrote above "Potential solution #1" chapter, this is not only ugly, but it breaks on IE7.
Both visibility: hidden and display: none sound great for me, I wonder if there's a real reason that people chose not to use them.
I see at at many places (e.g: I'm maintaining a RTL support for ExtJS framework, they use the same trick).
BTW
visiblity:hidden and display:none have different effect (one still affects layout, the other will afect if set to block etc.)
Meir: When you set an element with position:fixed and visibility:none it won't affect the layout. Think about it as a invisible layer. Setting an element to display:block will require the browser to render it on run time, which might be slower than just making it visible.