As we were working on adapting one of our applications to support right-to-left (RTL) languages like Hebrew and Arabic, we tripped over an issue with a static HTML document.
Changing a page to by RTL is pretty easy. You can shift the web page over to RTL mode just by setting the “dir” attribute of the root HTML tag:
<html dir="rtl">
This does most of the heavy lifting by causing the HTML to layout from right to left, automatically flipping tables, text, etc., and it moves the scroll bars so that the page is horizontally scrolled to the right, and the vertical scroll bar is on the left hand side.
Since most of the pages are dynamic, we just had to detect which type of language the user was in, and if it was RTL, we added the dir attribute.
However, we came across a page where an engineer had done something “clever.” They had a dropdown that could contain a large number of elements, and they provided a pop-out link that would allow the user to see a bigger view of the data. This would open up in a new window, allow them to make their selection, and then save it back.
Rather than write a separate page, they had written a static html page with javascript. When opened, it would grab the options out of the list, allow the user to select what they wanted, and then save the selection back. Since the HTML page was static, we didn’t have a server-side opportunity to change the html tag to activate the “dir” flag for RTL users. As a result, while the main page was in an RTL mode, clicking the pop-out link would render in the default left-to-right mode.
Fortunately, there is an easy fix for this. It is possible to change a page’s direction attribute on the fly, so we just edited the static html pop-out page to make an adjustment. If its opener was in RTL mode, it would just shift to RTL mode as well:
if (opener.document.dir == "rtl") {
document.dir = "rtl";
}
While the page would start to load in LTR mode, it would automatically shift to RTL, and the end user wouldn’t see an issue.
Update: I have discovered that Firefox always return “ltr”, even when the direction for the page is “rtl”. However, it seems that there is a workaround by checking with the document element. Instead, use:
if (opener.document.documentElement.dir == "rtl") {
document.dir = "rtl";
}
Jeremy Rothman-Shore Blog 