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.
17. While unconventional and
sometimes even confusing
for left-to-right oriented
brains, this mirrored layout
is what speakers of RTL
languages consider âcorrectâ.
18. What about ... dates?
dd/mm/yyyy
Although they sometimes have their own
calendars, theyâre used to western dates.
19. What about ... calendar tables?
Flip it. Monday goes on the right, Sunday
on the left. Yeah, I know.
http://drbl.in/17440
20. 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
24. <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.â
25. Step 1. HTML direction
.flips base direction â things like
.default text-align
.page flow (where elements start)
.tables
.for everything else, there's âŠ
26. 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, âŠ
27. 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; }
28. 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
29. 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 ...
30. 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>
31. 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
32. Firefox 2: images start on left side
<div style="width: 200px">
<img src="img.jpg" style="width: 300px" />
</div>
35. 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
36. 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
37. 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>
42. 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
43. 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
44. Direction mark characters
.leftâtoâright mark (‎)
rightâtoâleft mark (‏)
.force the directionality of directionally
neutral characters
(2 ‎)
!"#
({counter_photos} ||pictures||<!-- IF
languageDirection=="rtl" -->‎<!--
ENDIF -->)
45. 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
52. 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