RTL on Y!FP
description
Transcript of RTL on Y!FP
![Page 1: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/1.jpg)
RTL on Y!FPRIGHT-TO-LEFT ON THE YAHOO! FRONT PAGE
![Page 3: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/3.jpg)
The Yahoo! US front page
![Page 4: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/4.jpg)
Right-to-left on Yahoo! Maktoob
![Page 5: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/5.jpg)
RTL, or right-to-left,is a reading direction
BiDi, or bidirectional,is text with both directionalities
![Page 6: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/6.jpg)
Bidirectional website
One codebase,two text directions
![Page 7: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/7.jpg)
Top 10 Languagesin the Internet
![Page 8: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/8.jpg)
![Page 9: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/9.jpg)
![Page 10: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/10.jpg)
Yahoo! Products Operating Principles
#10. Build for global reach with local flexibility
![Page 11: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/11.jpg)
1. Awareness of RTL and BiDi2. Why BiDi is important to Yahoo!3. How to build BiDi web sites
What to take with you
![Page 12: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/12.jpg)
The Yahoo! US front page
![Page 13: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/13.jpg)
Right-to-left on Yahoo! Maktoob
![Page 14: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/14.jpg)
Left-to-right scrollbar
![Page 15: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/15.jpg)
Scrollbar orientation changes
![Page 16: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/16.jpg)
Let’s dive in
![Page 17: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/17.jpg)
RTLification: The end goal
![Page 18: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/18.jpg)
STEP 1: Localize strings
![Page 19: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/19.jpg)
Always use Unicode
![Page 20: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/20.jpg)
STEP 2: Text direction
?
![Page 21: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/21.jpg)
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>
![Page 22: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/22.jpg)
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.
![Page 23: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/23.jpg)
Apply dir=“rtl” to root
![Page 24: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/24.jpg)
DIR cannot fix CSS
![Page 25: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/25.jpg)
<table dir=“ltr”>
<table dir=“rtl”>
DIR can also flip tables
![Page 26: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/26.jpg)
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;
![Page 27: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/27.jpg)
CSS: padding, margin, float
![Page 28: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/28.jpg)
CSS: background-image, border
![Page 29: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/29.jpg)
All together: Strings, HTML, CSS
![Page 30: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/30.jpg)
CSSJanus
A CSS processor that horizontally flips properties and values
http://code.google.com/p/cssjanus/
http://dist.corp.yahoo.com/css_janus/
![Page 31: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/31.jpg)
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;}
![Page 32: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/32.jpg)
@noflip/* @noflip */.leave-me-alone { padding-left: 1em; float: left;}
.mostly-applicable { padding-left: 1em; /* @noflip */ float: left; margin-left: 1em;}
![Page 33: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/33.jpg)
Swap URLs
./cssjanus.py --swap_ltr_rtl_in_url
.image { background-image: url(image_ltr.png);}
.image { background-image: url(image_rtl.png);}
![Page 34: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/34.jpg)
.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>
![Page 35: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/35.jpg)
RTLzr(by Yahoo’s Marcel Duran)
A Firefox plugin that flips page direction
https://addons.mozilla.org/en-us/firefox/addon/rtlzr/
![Page 36: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/36.jpg)
A quick demo
![Page 37: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/37.jpg)
Tricks, bugs, and other subtleties
![Page 38: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/38.jpg)
• 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
![Page 39: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/39.jpg)
The Unicode bidirectional algorithmcomposes runs of LTR, RTL text.
Think of strings containing “Yahoo!”
![Page 40: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/40.jpg)
2 31
23 1
Left-to-right mark ‎ is necessary to control neutral “!”
![Page 41: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/41.jpg)
Otherwise “!” joins the RTL text
2 31
23 1
![Page 42: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/42.jpg)
‎ is convenient.Markup is recommended.
2 31
23 1
![Page 43: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/43.jpg)
<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
![Page 44: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/44.jpg)
<ul dir="rtl" style="float:right; width:150px"> <li style="float:right"> Content </li></ul>
Nested right float:The width fix
![Page 45: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/45.jpg)
<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
![Page 46: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/46.jpg)
<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
![Page 47: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/47.jpg)
Thank You!Slides available on FE Summit web page
![Page 48: RTL on Y!FP](https://reader035.fdocuments.net/reader035/viewer/2022081505/568163f2550346895dd57616/html5/thumbnails/48.jpg)
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