480 likes | 650 Views
RTL on Y!FP. Right-to-left on the Yahoo! Front page. Chris Klaiber. cklaiber@yahoo-inc.com Front page SNV A2. 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.
E N D
RTL on Y!FP Right-to-left on the Yahoo! Front page
Chris Klaiber • cklaiber@yahoo-inc.com • Front page • SNV A2
RTL, or right-to-left,is a reading direction BiDi, or bidirectional, is text with both directionalities
Bidirectional website One codebase, two text directions
Yahoo! Products Operating Principles #10. Build for global reach with local flexibility
What to take with you • Awareness of RTL and BiDi • Why BiDi is important to Yahoo! • How to build BiDi web sites
? 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. unicode-bidi: normal | embed | bidi-override | inherit Gives some control over the Unicode bidirectional algorithm for text. Default value is normal. <h3 style=“direction: rtl; unicode-bidi: embed”> The 6 most delicious hamburgers </h3>
DIR can also flip tables <table dir=“ltr”> <table dir=“rtl”>
padding: 0 0 2px 10px; padding-left: 11px; float: left; background-position: left 8px; background-image: sprite_ltr.png; border-right-width: 1px; STEP 3: Flip CSS horizontally
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/
Front page CSSJanus integration • One generic CSS source • Build RTLifies CSS to CDN • Serve a parallel CSS hierarchy metro/g/masthead/masthead_0.2.115.css metro/xa/masthead/masthead_0.2.115.css
The Unicode bidirectional algorithm composes runs of LTR, RTL text. Think of strings containing “Yahoo!”
Left-to-right mark ‎ is necessary to control neutral “!” 1 3 2 3 2 1
Otherwise “!” joins the RTL text 1 3 2 3 2 1
‎ is convenient. Markup is recommended. 1 2 3 3 2 1
Nested right float: RTL-specific IE6 bug <ul style="float:right"> <li style="float:right"> Content </li> </ul> <uldir="rtl" style="float:right"> <li style="float:right"> Content </li> </ul>
Nested right float: The width fix <uldir="rtl" style="float:right; width:150px"> <li style="float:right"> Content </li> </ul>
Nested right float: Width fix failure <uldir="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: An alternative <style type="text/css"> .inner-block { display: inline-block; } .ua-ie6 .inner-block { display: inline; zoom: 1; } </style> <uldir="rtl" style="float:right"> <liclass="inner-block"> Content </li> </ul>
Thank You! Slides available on FE Summit web page
Internal Resources http://twiki.corp.yahoo.com/view/FrontDoors/MetroFrontEndRTL http://twiki.corp.yahoo.com/view/TrailBlazers/BidiGuidelines http://twiki.corp.yahoo.com/view/Frontpage/MaktoobQA http://twiki.corp.yahoo.com/view/Ued/BidiBestPractices Tools http://labs.javascriptrules.com/rtlzr/ http://cssjanus.commoner.com/ http://dist.corp.yahoo.com/by-package/css_janus External Resources http://www.unicode.org/reports/tr9/ http://www.i18nguy.com/markup/right-to-left.htm http://www.iamcal.com/understanding-bidirectional-text/ http://www.alanflavell.org.uk/charset/text-direction.html