SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Location
    London, UK
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy CSS that works with RTL (right to left) languages

    Hi,

    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.

    Thanks
    Ziad

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You might find some tips here:

    http://www.w3.org/International/tutorials/bidi-xhtml/

    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Location
    London, UK
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    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.

    Thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •