Web design for right-to-left languages


Published on

Presented at the first Belgian meetup of Fronteers (http://fronteers.be) these slides delve into web design for right-to-left languages like Arabic and Hebrew. Focussing on all aspects like layout, implementation (HTML, CSS, images, ...) and even content.

Published in: Technology
  • Lennart,
    I came across your presentation when doing some research on right to left languages.

    I'm current working on a mobile app that uses a linear next/last navigation where next is on the right and last is on the left. The user can also swipe between screens.

    For cultures that read right to left, should next be at the left and last be at the right?

    Have you ever come across this situation?

    Are you sure you want to  Yes  No
    Your message goes here
  • Thank you! I've been looking for this information for some time and you had collected most of the info I need in a nice clear presentation!
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web design for right-to-left languages

  1. web design for RIGHT-to-LEFT languages Lennart Schoors
  2. Me .web designer at Netlog http://www.netlog.com .blog at http://lensco.be
  3. Small rectification .Languages don't have direction, scripts do. .scripts: Arabic, Hebrew, Urdu, Syriac, ... .languages that use these scripts: Arabic, Farsi, Hebrew, Yiddish, Urdu, ...
  4. One day ... “Hey, can you do a quick check to see if our site works in Arabic?” “Sure thing!”
  5. Piece of cake! http://www.flickr.com/photos/myfrenchcuisine/106124203
  6. Instead... .I spent about 4 weeks doing research .piecing the puzzle together .... without the picture on the box
  7. Design
  8. main principle .mirror layout
  9. main principle .mirror layout .columns .navigation .form fields .breadcrumbs .banners .(Internet Explorer even flips scrollbars)
  10. While unconventional and sometimes even confusing for left-to-right oriented brains, this mirrored layout is what speakers of RTL languages consider ‘correct’.
  11. What about ... dates? dd/mm/yyyy Although they sometimes have their own calendars, they’re used to western dates.
  12. What about ... calendar tables? Flip it. Monday goes on the right, Sunday on the left. Yeah, I know. http://drbl.in/17440
  13. What about ... HTML editing? RTL source editing is hell. Best practice is to have a button to switch direction modes. More on bidi source editing: http://www.sw.it.aoyama.ac.jp/2005/pub/IUC28-bidi/IUC28.html
  14. Design .mirror layout .some exceptions .When in doubt, ask a local.
  15. Implement
  16. Implement: 4 steps 1. dir="rtl" 2. CSS 3. images 4. HTML tweaks
  17. <html dir="rtl"> Step 1. HTML direction .in markup, not CSS .W3C: “Because it is so closely tied to the content and so necessary to the readability of the document, bidi information should be embedded in the document with the (X)HTML 'dir' attribute.”
  18. Step 1. HTML direction .flips base direction – things like .default text-align .page flow (where elements start) .tables .for everything else, there's …
  19. Step 2. CSS .manually edit all attributes that have some kind of directionality margin, padding, text-align, background-position, float, clear, left, right, text-indent, border, border-radius, direction, …
  20. Step 2. CSS .seperate stylesheet, or in existing CSS file combined with class on body .make it easy for yourself, use classes like: .left { float: right !important; } .right { float: left !important; } .textAlignLeft { text-align: right !important; } .textAlignRight { text-align: left !important; }
  21. RTL CSS issues .common complaint that text is too small, so bump the body text size .background-position problems: “3px top” becomes what in RTL context? .proposals for attributes like margin-start & margin-end
  22. RTL browserbugs .OH YEAH! .of course, Internet Explorer 6 & 7 .but also Firefox 2 (Gecko 1.8) .fortunately, most of these bugs are relatively simple to fix .let’s take a look at some of them ...
  23. Firefox 2: margins on list items Applying a right margin on a list item pushes the item to the right, but not the list bullet. Applying a left margin on a list item doesn’t push the item to the left, only the list bullet. <ul> <li>foo</li> <li style="margin-right: 20px;">bar</li> <li style="margin-left: 20px;">bar</li> </ul>
  24. Firefox 2: margins on list items Applying a right margin on a list item pushes the item to the right, but not the list bullet. Applying a left margin on a list item doesn’t push the item to the left, only the list bullet. Safari Firefox 2
  25. Firefox 2: images start on left side <div style="width: 200px"> <img src="img.jpg" style="width: 300px" /> </div>
  26. Firefox 2: images start on left side
  27. Firefox 2: images start on left side
  28. IE6&7: shifted/disappearing borders on relative positioned inline elements fix: trigger hasLayout <span style="position: relative; border- bottom: 1px solid red;"> This should have a red underline </span> Safari IE6&7
  29. IE6&7: nested floats Right floated elements inside floated elements are not rendered fix: trigger hasLayout <div style="background: red; float: right;"> <div style="background: yellow; float: right;"> test </div> </div> Safari IE6&7
  30. IE6&7: pushy margins bug Left or right margins on inline elements work correctly on the content, but not on back- grounds. The margin seems to be applied seperately on the background as well. <div style="background: yellow; margin: 10px;"> div div div div div </div> <span style="background: lightblue; margin: 10px;"> span span span span </span>
  31. IE6&7: pushy margins bug fix: trigger hasLayout Safari IE6&7
  32. Browser usage 0% 10% 20% 30% 40% 50% February March April May June July August September October IE8 IE7 IE6 Firefox Chrome Safari ar.netlog.com
  33. October ar.netlog.com
  34. Step 3. images .mirror arrows, layout images, ... .avoid text in images .CSS3 wins (shadows, rounded corners, … less images!) .sprites win img.arrowLeft { background-position: 0 -400px; } img.arrowRight { background-position: 0 -384px; }
  35. Step 4. HTML tweaks .directionally neutral characters .parentheses, numbers, punctuation .will mess with your text flow, like: )6 !"#) .solution: bidirectional override and direction mark characters http://www.robinlionheart.com/stds/html4/dir.html
  36. Bidirectional override <bdo> The <bdo> tag allows you to specify the text direction and override the bidirectional algorithm <bdo dir="rtl">foo bar</bdo> renders like: rab oof
  37. Direction mark characters .left‐to‐right mark (&lrm;) right‐to‐left mark (&rlm;) .force the directionality of directionally neutral characters (2 &lrm;)!"# ({counter_photos} ||pictures||<!-- IF languageDirection=="rtl" -->&lrm;<!-- ENDIF -->)
  38. RTL mobile websites? .lots of mobile use in Middle East, India, … .Blackberry, Opera Mini .mobile sites are often rather limited in terms of layout and CSS, so usually few severe issues .test
  39. Content
  40. “ethical” concerns .often muslim countries, with different views on privacy, decency, ... .moderate your user generated content
  41. Netlog logged out homepage
  42. Netlog logged out homepage
  43. Netlog logged out homepage
  44. fromrighttoleft.org
  45. so I was frustrated... .faced with lack of information and resources .idea: a collaborative platform that centralizes all bits and pieces of information on right to left web development
  46. fromrighttoleft.org .registered domain in september 2008 .was finished for 70% .but I killed it, because I couldn't invest the time it needed to survive
  47. fromrighttoleft.org .information is partly outdated .this presentation is the first step in making the information public
  48. RTL web design: roundup .research (+ ask a local) .mirror your layout .adapt your code (CSS, HTML, images) .adapt your content .test
  49. That’s all folks! Read on at http://lensco.be Questions?