Download - RTL on Y!FP
RTL on Y!FPRIGHT-TO-LEFT ON THE YAHOO! FRONT PAGE
The Yahoo! US front page
Right-to-left on Yahoo! Maktoob
RTL, or right-to-left,is a reading direction
BiDi, or bidirectional,is text with both directionalities
Bidirectional website
One codebase,two text directions
Top 10 Languagesin the Internet
Yahoo! Products Operating Principles
#10. Build for global reach with local flexibility
1. Awareness of RTL and BiDi2. Why BiDi is important to Yahoo!3. How to build BiDi web sites
What to take with you
The Yahoo! US front page
Right-to-left on Yahoo! Maktoob
Left-to-right scrollbar
Scrollbar orientation changes
Let’s dive in
RTLification: The end goal
STEP 1: Localize strings
Always use Unicode
STEP 2: Text direction
?
HTML DIR attribute
dir = LTR | RTL
Specifies the base direction of text for an element and the directionality of tables. Default value is LTR.
<h3 dir=“rtl”>The 6 most delicious hamburgers</h3>
CSS direction and unicode-bidi
direction: ltr | rtl | inherit
Specifies the base direction of text for an element and the directionality of tables. Default value is ltr.
<h3 style=“direction: rtl; unicode-bidi: embed”>The 6 most delicious hamburgers</h3>
unicode-bidi: normal | embed | bidi-override | inherit
Gives some control over the Unicode bidirectional algorithm for text. Default value is normal.
Apply dir=“rtl” to root
DIR cannot fix CSS
<table dir=“ltr”>
<table dir=“rtl”>
DIR can also flip tables
STEP 3: Flip CSS horizontally
padding: 0 0 2px 10px;padding-left: 11px;
float: left;
background-position: left 8px;background-image: sprite_ltr.png;
border-right-width: 1px;
CSS: padding, margin, float
CSS: background-image, border
All together: Strings, HTML, CSS
CSSJanus
A CSS processor that horizontally flips properties and values
http://code.google.com/p/cssjanus/
http://dist.corp.yahoo.com/css_janus/
Flip CSS automatically
.sample-cssjanus-targets { background-position: top 23%; border-left-color: chartreuse; cursor: e-resize; float: right; left: 10px; margin-right: 2em; padding: 0.25em 15px 0pt 0ex;}
@noflip/* @noflip */.leave-me-alone { padding-left: 1em; float: left;}
.mostly-applicable { padding-left: 1em; /* @noflip */ float: left; margin-left: 1em;}
Swap URLs
./cssjanus.py --swap_ltr_rtl_in_url
.image { background-image: url(image_ltr.png);}
.image { background-image: url(image_rtl.png);}
.edit-sprite { background-position: left -1054px; background-image: url(/i/ww/met/th/slate/sprite_pg_slate_20100809_ltr.png);
padding-left: 16px;}
<button class=“edit-sprite”> Edit</button>
RTLzr(by Yahoo’s Marcel Duran)
A Firefox plugin that flips page direction
https://addons.mozilla.org/en-us/firefox/addon/rtlzr/
A quick demo
Tricks, bugs, and other subtleties
• One generic CSS source• Build RTLifies CSS to CDN• Serve a parallel CSS hierarchy
metro/g/masthead/masthead_0.2.115.cssmetro/xa/masthead/masthead_0.2.115.css
Front page CSSJanus integration
The Unicode bidirectional algorithmcomposes runs of LTR, RTL text.
Think of strings containing “Yahoo!”
2 31
23 1
Left-to-right mark ‎ is necessary to control neutral “!”
Otherwise “!” joins the RTL text
2 31
23 1
‎ is convenient.Markup is recommended.
2 31
23 1
<ul style="float:right"> <li style="float:right"> Content </li></ul>
<ul dir="rtl" style="float:right"> <li style="float:right"> Content </li></ul>
Nested right float:RTL-specific IE6 bug
<ul dir="rtl" style="float:right; width:150px"> <li style="float:right"> Content </li></ul>
Nested right float:The width fix
<ul dir="rtl" style="float:right;width:100%"> <li style="float:right;width:100%"> <ul style="float:right;width:100%"> <li style="float:right"> Content </li> </ul> </li></ul>
Nested right float:Width fix failure
<style type="text/css">.inner-block { display: inline-block; }.ua-ie6 .inner-block { display: inline; zoom: 1;}</style>
<ul dir="rtl" style="float:right"> <li class="inner-block"> Content </li></ul>
Nested right float:An alternative
Thank You!Slides available on FE Summit web page
Internal Resourceshttp://twiki.corp.yahoo.com/view/FrontDoors/MetroFrontEndRTLhttp://twiki.corp.yahoo.com/view/TrailBlazers/BidiGuidelineshttp://twiki.corp.yahoo.com/view/Frontpage/MaktoobQAhttp://twiki.corp.yahoo.com/view/Ued/BidiBestPractices
Toolshttp://labs.javascriptrules.com/rtlzr/http://cssjanus.commoner.com/http://dist.corp.yahoo.com/by-package/css_janus
External Resourceshttp://www.unicode.org/reports/tr9/http://www.i18nguy.com/markup/right-to-left.htmhttp://www.iamcal.com/understanding-bidirectional-text/http://www.alanflavell.org.uk/charset/text-direction.html