{"id":260,"date":"2010-03-22T02:45:58","date_gmt":"2010-03-21T23:45:58","guid":{"rendered":"http:\/\/www.held.org.il\/blog\/?p=260"},"modified":"2012-05-21T02:22:45","modified_gmt":"2012-05-20T23:22:45","slug":"off-left-convention-is-bad-news-for-rtl","status":"publish","type":"post","link":"http:\/\/www.held.org.il\/blog\/2010\/03\/off-left-convention-is-bad-news-for-rtl\/","title":{"rendered":""off-left" convention is bad news for RTL"},"content":{"rendered":"

[This post presents a web designers technical problem, in which a hack for improved accessibility damages RTLability]<\/strong><\/span><\/p>\n

This weekend I tried to debug an annoying problem in Drupal<\/a>'s Acquia Marina<\/a> theme on RTL<\/a> mode, in which a horizontal scroll bar appears with no good reason (layout doesn't scale horizontally).<\/p>\n

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.<\/p>\n

Eventually the one to blame was an element placed at \"left: -999em\"<\/strong> absolute position,\u00c2\u00a0 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.<\/p>\n

Q: Why don't they use CSS display:none,<\/strong> which seems to make more sense than hiding things off the screen?<\/p>\n

A<\/strong>: looks like it has to do with screen readers (as this article<\/a> 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<\/strong>, 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.<\/p>\n

The problem with RTL<\/strong><\/p>\n

When placing things off-left (e.g. left: -999px<\/em>) 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.<\/p>\n

However, when on RTL mode, left: -999px<\/em> does<\/strong> widen the page horizontally to the right (and the off-left element is actually visible when scrolling there), which is a very unwanted effects.<\/p>\n

Here's a related drupal discussion<\/a> about the problem and possible solutions.\u00c2\u00a0 The problem seems broader than just acquia marina<\/a> .<\/p>\n

<\/p>\n

Potential Solution #1: use off-right on RTL: BAD<\/h3>\n

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<\/em>. as for my inspection IE7 does not cope well with off-right<\/strong> (nor off-left) on RTL!<\/p>\n

Another, more minor downside, is that this solution requires different styling-code for LTR and RTL.\u00c2\u00a0 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.<\/p>\n

Potential solution #2: off-top<\/h3>\n

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?<\/p>\n

Long-term solution: an intuitive new standard
\n<\/strong><\/h3>\n

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.<\/p>\n

First step should be figuring out why\/whether screen readers don't support display:none<\/em>; can readers confirm that and go into deeper details?<\/strong><\/p>\n

Second step might be fixing the standards so that screen readers would support it, if needed.<\/p>\n

-----
\n<\/strong><\/p>\n

And the patch for fixing the RTL horizontal-scroll bar bug in Drupal's Acquia Marina theme:<\/strong><\/p>\n

--- a\/style.css
\n+++ b\/style.css
\n@@ -1145,7 +1145,7 @@ div.rounded-inside {<\/p>\n

#primary-menu ul.menu li ul {
\nbackground: transparent url('images\/drop-bottom.png') no-repeat 0 bottom;
\n-\u00c2\u00a0 left: -999em;
\n+\u00c2\u00a0 top: -999em;
\nopacity: 0.95;
\nmargin: 0 0 0 -10px;
\npadding: 2px 0 4px;
\n@@ -1157,7 +1157,7 @@ div.rounded-inside {
\n#primary-menu ul.menu li:hover ul,
\n#primary-menu ul.menu li.hover ul {
\ndisplay: block;
\n-\u00c2\u00a0 left: auto;
\n+\u00c2\u00a0 top: auto;
\n}<\/p>\n

#primary-menu ul.menu li ul li {
\n@@ -1195,7 +1195,7 @@ div.rounded-inside {
\n}<\/p>\n

#primary-menu ul.menu li ul li ul.menu {
\n-\u00c2\u00a0 left: -999em;
\n+\u00c2\u00a0 top: -999em;
\nmargin: 0 0 0 -14px;\u00c2\u00a0\u00c2\u00a0\u00c2\u00a0 \/* LTR *\/
\npadding: 6px 0 4px;
\n}
\n@@ -1231,7 +1231,7 @@ div.rounded-inside {
\n}<\/p>\n

#primary-menu ul.menu li ul li ul.menu li ul.menu li ul.menu{
\n-\u00c2\u00a0 left: -999em;
\n+\u00c2\u00a0 top: -999em;
\nmargin: 0 0 0 -14px;
\npadding: 6px 0 4px;
\n}<\/p>\n

Update: <\/strong>I have opened a bug for acquia marina<\/a>, and found another related bug<\/a> (it's me commenting there about off-top).<\/p>\n","protected":false},"excerpt":{"rendered":"

[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, […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[15],"tags":[17,30,35,198,99,202],"_links":{"self":[{"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/posts\/260"}],"collection":[{"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/comments?post=260"}],"version-history":[{"count":0,"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/posts\/260\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/media?parent=260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/categories?post=260"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/tags?post=260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}