I’m working on a site that needs to be internationalised, including RTL languages (e.g. Arabic). The layout is done using CSS but this seems to a problem for implementing a site that should work in LTR and RTL as divs are floated to left or right so they are fixed in these positions.
So when you add the dir=“rtl” onto the HTML tag, the texts are generally ok but the overall layout is messed up because things that are on the left (say a navigation bar on the left) stay on the left, they don’t go to the right. Also I have forms that are done using fieldset and labels which are also messed up.
Whats the best way to internationalise a design done in CSS that will work with LTR and RTL languages? Didn’t find much when I googled so any pointers would be appreciated.
I think generally you would need to layout your page from right to left from the start rather than thinking that you can add direction to html and expect every element to be reversed. (The css direction property shouldn’t really be used anyway according to the article above.)
Floats won’t change sides but table cells will. Hopefully someone with more experience of rtl can chime in.
Thanks for the link, it looks very comprehensive, I’ll have to go through it properly a bit later.
Regarding your comment about laying out the page from right to left from the start, I need my page to work LTR and RTL because the site needs to run in several languages. So when its running in English say, then things should be LTR but if the user switches to Arabic say, then things need to be RTL. So its not really a case of starting out RTL although what I should have done is start out with this requirement (be able to display properly in LTR and RTL) in mind from the beginning.
The design I’m working with is actually a template from somewhere else so I didn’t produce it from scratch.
Anyway, hoping to get some more feedback from others.
