web design for RIGHT-to-LEFT languages Lennart Schoors
Web design for right-to-left languages
Jan 18, 2015
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.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
web design forRIGHT-to-LEFT
languages
Lennart Schoors
Me
.web designer at Netloghttp://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
Design
main principle
.mirror layout
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
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
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
fix: trigger hasLayout
<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
fix: trigger hasLayout
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
Octoberar.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 (‎)right‐to‐left mark (‏)
. force the directionality of directionally neutral characters
(2 ‎)!"#
({counter_photos} ||pictures||<!-- IF languageDirection=="rtl" -->‎<!-- ENDIF -->)
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
Content
“ethical” concerns
.often muslim countries, with different views on privacy, decency, ...
.moderate your user generated content
Netlog logged out homepage
Netlog logged out homepage
Netlog logged out homepage
fromrighttoleft.org
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
Related Documents
