Web design for right-to-left languages

web design for
RIGHT-to-LEFT
languages
Lennart Schoors

Me
.web designer at Netlog
http://www.netlog.com
.blog at http://lensco.be

Small rectification
.Languages don't have direction, scripts do.
.scripts: Arabic, Hebrew, Urdu, Syriac, ...
.languages that use these scripts:
Arabic, Farsi, Hebrew, Yiddish, Urdu, ...

One day ...
“Hey, can you do a
quick check to see
if our site works in
Arabic?”
“Sure thing!”

Piece of cake!
http://www.flickr.com/photos/myfrenchcuisine/106124203

Instead...
.I spent about 4 weeks doing research
.piecing the puzzle together
.... without the picture on the box

main principle
.mirror layout
.columns
.navigation
.form fields
.breadcrumbs
.banners
.(Internet Explorer even flips scrollbars)

While unconventional and
sometimes even confusing
for left-to-right oriented
brains, this mirrored layout
is what speakers of RTL
languages consider ‘correct’.

What about ... dates?
dd/mm/yyyy
Although they sometimes have their own
calendars, they’re used to western dates.

What about ... calendar tables?
Flip it. Monday goes on the right, Sunday
on the left. Yeah, I know.
http://drbl.in/17440

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

Design
.mirror layout
.some exceptions
.When in doubt, ask a local.

Implement: 4 steps
1. dir="rtl"
2. CSS
3. images
4. HTML tweaks

<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.”

Step 1. HTML direction
.flips base direction – things like
.default text-align
.page flow (where elements start)
.tables
.for everything else, there's …

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, …

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; }

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

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 ...

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>

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

Firefox 2: images start on left side
<div style="width: 200px">
<img src="img.jpg" style="width: 300px" />
</div>

Firefox 2: images start on left side

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

IE6&7: nested floats
Right floated elements inside floated
elements are not rendered
<div style="background: red; float: right;">
<div style="background: yellow; float: right;">
test
</div>
</div>
Safari IE6&7

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>

IE6&7: pushy margins bug
Safari
IE6&7

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

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; }

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

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

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||&lrm;)

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

“ethical” concerns
.often muslim countries, with different
views on privacy, decency, ...
.moderate your user generated content

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

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

fromrighttoleft.org
.information is partly outdated
.this presentation is the first step in making
the information public

RTL web design: roundup
.research (+ ask a local)
.mirror your layout
.adapt your code (CSS, HTML, images)
.adapt your content
.test

That’s all folks!
Read on at http://lensco.be
Questions?

Web design for right-to-left languages

Recommended

Recommended

More Related Content

What's hot

What's hot (7)

Viewers also liked

Viewers also liked (20)

Similar to Web design for right-to-left languages

Similar to Web design for right-to-left languages (20)

Recently uploaded

Recently uploaded (20)

Web design for right-to-left languages