The Scenario
When designing a website for a right to left (RTL) language the scrollbar should automatically be on the left hand side. The logic is that it should be at the end of the line, just as it is on the right for a left to right (LTR) language. This works fine in IE, but Firefox will always show the scrollbar on the right.
The Cause
Unfortunately this is by design. Firefox believes that the scrollbar is part of the browser, not the webpage and so by default a website should not have the ability to override the user’s settings. IE believes the scrollbar is not part of the browser but part of the page. Therefore, if a page is RTL the scrollbar should be on the left.
The Solution
This can be fixed on an individual instance of Firefox.
- Open Firefox
- Navigate to about:config
- Set the filter to layout.scrollbar.side
- Double click the layout.scrollbar.side line
- Change the setting to 1 and click OK
Now Firefox will behave like IE and show the scrollbar on which ever side the page dictates. Unfortunately, this will not help any of your users. The best solution to assure your RTL website displays the scrollbar on the correct side is to use a third party customizable scrollbar, such as jQuery Scrollbar or jScrollPane.
I am not sure if the logic of IE is correct, because it become more complicated to locate the scrollbar if it flip sides according to the document direction. Moreover, there are some common scenarios which make things more complicated such as setting the direction property to document elements, and scrollbar will appear on the wrong sides.
I don’t like the idea of UI which change its behavior because of the loaded document, but feel free to report it as a bug to Mozilla. Please use the keyword ‘rtl’ to make it easier for us to locate your request, and you are more than welcome to CC me to your issue.
Tomer.
Comment by Tomer — October 26, 2009 @ 10:31 pm