SlideShare a Scribd company logo
1 of 58
Download to read offline
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
Design
main principle
.mirror layout
Web design for right-to-left languages
Web design for right-to-left languages
Web design for right-to-left languages
Web design for right-to-left languages
Web design for right-to-left languages
main principle
.mirror layout
.columns
.navigation
.form fields
.breadcrumbs
.banners
.(Internet Explorer even flips scrollbars)
Web design for right-to-left languages
Web design for right-to-left languages
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
October
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||<!-- IF
languageDirection=="rtl" -->&lrm;<!--
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
Web design for right-to-left languages
Web design for right-to-left languages
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?

More Related Content

What's hot

The Future is Modular, Jonathan Snook
The Future is Modular, Jonathan SnookThe Future is Modular, Jonathan Snook
The Future is Modular, Jonathan SnookFuture Insights
 
Face/Off: APEX Templates & Themes
Face/Off: APEX Templates & ThemesFace/Off: APEX Templates & Themes
Face/Off: APEX Templates & Themescrokitta
 
Boston Computing Review - Ruby on Rails
Boston Computing Review - Ruby on RailsBoston Computing Review - Ruby on Rails
Boston Computing Review - Ruby on RailsJohn Brunswick
 
LessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG MeetingLessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG MeetingMyles Braithwaite
 
Designing for the web - 101
Designing for the web - 101Designing for the web - 101
Designing for the web - 101Ashraf Hamdy
 
Round Table: Content-Content-Content - DaytonWP February 2013 MeetUp
Round Table: Content-Content-Content - DaytonWP February 2013 MeetUpRound Table: Content-Content-Content - DaytonWP February 2013 MeetUp
Round Table: Content-Content-Content - DaytonWP February 2013 MeetUpDaytonWP
 

What's hot (7)

The Future is Modular, Jonathan Snook
The Future is Modular, Jonathan SnookThe Future is Modular, Jonathan Snook
The Future is Modular, Jonathan Snook
 
Face/Off: APEX Templates & Themes
Face/Off: APEX Templates & ThemesFace/Off: APEX Templates & Themes
Face/Off: APEX Templates & Themes
 
Boston Computing Review - Ruby on Rails
Boston Computing Review - Ruby on RailsBoston Computing Review - Ruby on Rails
Boston Computing Review - Ruby on Rails
 
LessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG MeetingLessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG Meeting
 
Designing for the web - 101
Designing for the web - 101Designing for the web - 101
Designing for the web - 101
 
Blackhat techniques
Blackhat techniquesBlackhat techniques
Blackhat techniques
 
Round Table: Content-Content-Content - DaytonWP February 2013 MeetUp
Round Table: Content-Content-Content - DaytonWP February 2013 MeetUpRound Table: Content-Content-Content - DaytonWP February 2013 MeetUp
Round Table: Content-Content-Content - DaytonWP February 2013 MeetUp
 

Viewers also liked

Data, taste & confidence
Data, taste & confidenceData, taste & confidence
Data, taste & confidenceLennart Schoors
 
Learn WordPress - Live Session 2 Slides
Learn WordPress - Live Session 2 SlidesLearn WordPress - Live Session 2 Slides
Learn WordPress - Live Session 2 SlidesAhmed Mohammed Nagdy
 
Learn WordPress - Live Session 1 Slides
Learn WordPress - Live Session 1 SlidesLearn WordPress - Live Session 1 Slides
Learn WordPress - Live Session 1 SlidesAhmed Mohammed Nagdy
 
WordPress RTL
WordPress RTL WordPress RTL
WordPress RTL Yoav Farhi
 
Luke Johnstone’s Middle East Portfolio
Luke Johnstone’s Middle East PortfolioLuke Johnstone’s Middle East Portfolio
Luke Johnstone’s Middle East Portfolioluke_thinking
 
Ibrahim Badran_Student portfolio
Ibrahim Badran_Student portfolioIbrahim Badran_Student portfolio
Ibrahim Badran_Student portfolioIbrahim Badran
 
Designing smart city urban environments for the Middle East
Designing smart city urban environments for the Middle EastDesigning smart city urban environments for the Middle East
Designing smart city urban environments for the Middle EastAtkins
 
How To Make Company
How To Make CompanyHow To Make Company
How To Make CompanyDhanish Gm
 
Theories and Design Principles of Multimedia Courseware for Teaching Arabic V...
Theories and Design Principles of Multimedia Courseware for Teaching Arabic V...Theories and Design Principles of Multimedia Courseware for Teaching Arabic V...
Theories and Design Principles of Multimedia Courseware for Teaching Arabic V...Nurkhamimi Zainuddin
 
2007.02.12 Lecture - Dr. Maher Stino - Landscape Architecture Design in the...
2007.02.12   Lecture - Dr. Maher Stino - Landscape Architecture Design in the...2007.02.12   Lecture - Dr. Maher Stino - Landscape Architecture Design in the...
2007.02.12 Lecture - Dr. Maher Stino - Landscape Architecture Design in the...Sites International
 
A-Z of Millennials in the Middle East
A-Z of Millennials in the Middle EastA-Z of Millennials in the Middle East
A-Z of Millennials in the Middle EastButterfly London
 
Calligraphy presentation
Calligraphy presentationCalligraphy presentation
Calligraphy presentationNorah Duailej
 
Islamic architecture report
Islamic architecture reportIslamic architecture report
Islamic architecture reportIcah Quinto
 
Islamic Art And Geometric Design
Islamic Art And Geometric DesignIslamic Art And Geometric Design
Islamic Art And Geometric Designisabelri
 
You Already Speak Arabic! : Arabic Loanwords in European Languages
You Already Speak Arabic! : Arabic Loanwords in European LanguagesYou Already Speak Arabic! : Arabic Loanwords in European Languages
You Already Speak Arabic! : Arabic Loanwords in European LanguagesMourad Diouri
 
Islamic Architecture
Islamic ArchitectureIslamic Architecture
Islamic ArchitectureShahan Saheed
 
Islamic Architecture History
Islamic Architecture HistoryIslamic Architecture History
Islamic Architecture HistoryAira Altovar
 
Islamic architecture final
Islamic architecture finalIslamic architecture final
Islamic architecture finalRiya Bagchi
 

Viewers also liked (20)

Data, taste & confidence
Data, taste & confidenceData, taste & confidence
Data, taste & confidence
 
Learn WordPress - Live Session 2 Slides
Learn WordPress - Live Session 2 SlidesLearn WordPress - Live Session 2 Slides
Learn WordPress - Live Session 2 Slides
 
Learn WordPress - Live Session 1 Slides
Learn WordPress - Live Session 1 SlidesLearn WordPress - Live Session 1 Slides
Learn WordPress - Live Session 1 Slides
 
WordPress RTL
WordPress RTL WordPress RTL
WordPress RTL
 
Infographie : RTL
Infographie : RTLInfographie : RTL
Infographie : RTL
 
Luke Johnstone’s Middle East Portfolio
Luke Johnstone’s Middle East PortfolioLuke Johnstone’s Middle East Portfolio
Luke Johnstone’s Middle East Portfolio
 
cv
cvcv
cv
 
Ibrahim Badran_Student portfolio
Ibrahim Badran_Student portfolioIbrahim Badran_Student portfolio
Ibrahim Badran_Student portfolio
 
Designing smart city urban environments for the Middle East
Designing smart city urban environments for the Middle EastDesigning smart city urban environments for the Middle East
Designing smart city urban environments for the Middle East
 
How To Make Company
How To Make CompanyHow To Make Company
How To Make Company
 
Theories and Design Principles of Multimedia Courseware for Teaching Arabic V...
Theories and Design Principles of Multimedia Courseware for Teaching Arabic V...Theories and Design Principles of Multimedia Courseware for Teaching Arabic V...
Theories and Design Principles of Multimedia Courseware for Teaching Arabic V...
 
2007.02.12 Lecture - Dr. Maher Stino - Landscape Architecture Design in the...
2007.02.12   Lecture - Dr. Maher Stino - Landscape Architecture Design in the...2007.02.12   Lecture - Dr. Maher Stino - Landscape Architecture Design in the...
2007.02.12 Lecture - Dr. Maher Stino - Landscape Architecture Design in the...
 
A-Z of Millennials in the Middle East
A-Z of Millennials in the Middle EastA-Z of Millennials in the Middle East
A-Z of Millennials in the Middle East
 
Calligraphy presentation
Calligraphy presentationCalligraphy presentation
Calligraphy presentation
 
Islamic architecture report
Islamic architecture reportIslamic architecture report
Islamic architecture report
 
Islamic Art And Geometric Design
Islamic Art And Geometric DesignIslamic Art And Geometric Design
Islamic Art And Geometric Design
 
You Already Speak Arabic! : Arabic Loanwords in European Languages
You Already Speak Arabic! : Arabic Loanwords in European LanguagesYou Already Speak Arabic! : Arabic Loanwords in European Languages
You Already Speak Arabic! : Arabic Loanwords in European Languages
 
Islamic Architecture
Islamic ArchitectureIslamic Architecture
Islamic Architecture
 
Islamic Architecture History
Islamic Architecture HistoryIslamic Architecture History
Islamic Architecture History
 
Islamic architecture final
Islamic architecture finalIslamic architecture final
Islamic architecture final
 

Similar to Web design for right-to-left languages

Killing the Angle Bracket
Killing the Angle BracketKilling the Angle Bracket
Killing the Angle Bracketjnewmanux
 
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011brucelawson
 
Modern Front-End Development
Modern Front-End DevelopmentModern Front-End Development
Modern Front-End Developmentmwrather
 
Web Designing Bugs - Fixes By Nyros Developer
Web Designing Bugs - Fixes By Nyros DeveloperWeb Designing Bugs - Fixes By Nyros Developer
Web Designing Bugs - Fixes By Nyros DeveloperNyros Technologies
 
Introduction to Ruby on Rails
Introduction to Ruby on RailsIntroduction to Ruby on Rails
Introduction to Ruby on RailsAlessandro DS
 
Making Your Site Look Great in IE7
Making Your Site Look Great in IE7Making Your Site Look Great in IE7
Making Your Site Look Great in IE7goodfriday
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.docbutest
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.docbutest
 
Ease into HTML5 and CSS3
Ease into HTML5 and CSS3Ease into HTML5 and CSS3
Ease into HTML5 and CSS3Brian Moon
 
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 Jeffrey Barke
 
Introduction To Ruby On Rails
Introduction To Ruby On RailsIntroduction To Ruby On Rails
Introduction To Ruby On RailsSteve Keener
 
10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site AccessibleHelena Zubkow
 
Stc 2015 preparing legacy projects for responsive design - technical issues
Stc 2015   preparing legacy projects for responsive design - technical issuesStc 2015   preparing legacy projects for responsive design - technical issues
Stc 2015 preparing legacy projects for responsive design - technical issuesNeil Perlin
 
Topsy Turvy Design
Topsy Turvy DesignTopsy Turvy Design
Topsy Turvy DesignRich Quick
 
Content Management That Won't Rot Your Brain
Content Management That Won't Rot Your BrainContent Management That Won't Rot Your Brain
Content Management That Won't Rot Your BrainSean Cribbs
 
01 Introduction To CSS
01 Introduction To CSS01 Introduction To CSS
01 Introduction To CSScrgwbr
 
How to Become a Front-end Developer in 2022 | Optymize
How to Become a Front-end Developer in 2022 | OptymizeHow to Become a Front-end Developer in 2022 | Optymize
How to Become a Front-end Developer in 2022 | OptymizeOptymizeHireRemoteEn
 

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

Killing the Angle Bracket
Killing the Angle BracketKilling the Angle Bracket
Killing the Angle Bracket
 
Look ma! No images!
Look ma! No images!Look ma! No images!
Look ma! No images!
 
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
 
Modern Front-End Development
Modern Front-End DevelopmentModern Front-End Development
Modern Front-End Development
 
SiteMesh
SiteMeshSiteMesh
SiteMesh
 
Web Designing Bugs - Fixes By Nyros Developer
Web Designing Bugs - Fixes By Nyros DeveloperWeb Designing Bugs - Fixes By Nyros Developer
Web Designing Bugs - Fixes By Nyros Developer
 
Introduction to Ruby on Rails
Introduction to Ruby on RailsIntroduction to Ruby on Rails
Introduction to Ruby on Rails
 
Making Your Site Look Great in IE7
Making Your Site Look Great in IE7Making Your Site Look Great in IE7
Making Your Site Look Great in IE7
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Ease into HTML5 and CSS3
Ease into HTML5 and CSS3Ease into HTML5 and CSS3
Ease into HTML5 and CSS3
 
LESS
LESSLESS
LESS
 
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
 
Introduction To Ruby On Rails
Introduction To Ruby On RailsIntroduction To Ruby On Rails
Introduction To Ruby On Rails
 
10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible
 
Stc 2015 preparing legacy projects for responsive design - technical issues
Stc 2015   preparing legacy projects for responsive design - technical issuesStc 2015   preparing legacy projects for responsive design - technical issues
Stc 2015 preparing legacy projects for responsive design - technical issues
 
Topsy Turvy Design
Topsy Turvy DesignTopsy Turvy Design
Topsy Turvy Design
 
Content Management That Won't Rot Your Brain
Content Management That Won't Rot Your BrainContent Management That Won't Rot Your Brain
Content Management That Won't Rot Your Brain
 
01 Introduction To CSS
01 Introduction To CSS01 Introduction To CSS
01 Introduction To CSS
 
How to Become a Front-end Developer in 2022 | Optymize
How to Become a Front-end Developer in 2022 | OptymizeHow to Become a Front-end Developer in 2022 | Optymize
How to Become a Front-end Developer in 2022 | Optymize
 

Recently uploaded

IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfAnna Loughnan Colquhoun
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 

Recently uploaded (20)

IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdf
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 

Web design for right-to-left languages

  • 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!”
  • 6. Instead... .I spent about 4 weeks doing research .piecing the puzzle together .... without the picture on the box
  • 14. main principle .mirror layout .columns .navigation .form fields .breadcrumbs .banners .(Internet Explorer even flips scrollbars)
  • 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
  • 23. Implement: 4 steps 1. dir="rtl" 2. CSS 3. images 4. HTML tweaks
  • 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>
  • 33. Firefox 2: images start on left side
  • 34. Firefox 2: images start on left side
  • 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>
  • 38. IE6&7: pushy margins bug fix: trigger hasLayout Safari IE6&7
  • 39. 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
  • 41. 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; }
  • 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 (&lrm;) right‐to‐left mark (&rlm;) .force the directionality of directionally neutral characters (2 &lrm;) !"# ({counter_photos} ||pictures||<!-- IF languageDirection=="rtl" -->&lrm;<!-- 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
  • 47. “ethical” concerns .often muslim countries, with different views on privacy, decency, ... .moderate your user generated content
  • 48. Netlog logged out homepage
  • 49. Netlog logged out homepage
  • 50. Netlog logged out homepage
  • 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
  • 53. 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
  • 56. fromrighttoleft.org .information is partly outdated .this presentation is the first step in making the information public
  • 57. RTL web design: roundup .research (+ ask a local) .mirror your layout .adapt your code (CSS, HTML, images) .adapt your content .test
  • 58. That’s all folks! Read on at http://lensco.be Questions?