1 / 48

RTL on Y!FP

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.

walter
Download Presentation

RTL on Y!FP

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. RTL on Y!FP Right-to-left on the Yahoo! Front page

  2. Chris Klaiber • cklaiber@yahoo-inc.com • Front page • SNV A2

  3. The Yahoo! US front page

  4. Right-to-left on Yahoo! Maktoob

  5. RTL, or right-to-left,is a reading direction BiDi, or bidirectional, is text with both directionalities

  6. Bidirectional website One codebase, two text directions

  7. Top 10 Languagesin the Internet

  8. Yahoo! Products Operating Principles #10. Build for global reach with local flexibility

  9. What to take with you • Awareness of RTL and BiDi • Why BiDi is important to Yahoo! • How to build BiDi web sites

  10. The Yahoo! US front page

  11. Right-to-left on Yahoo! Maktoob

  12. Left-to-right scrollbar

  13. Scrollbar orientation changes

  14. Let’s dive in

  15. RTLification: The end goal

  16. STEP 1: Localize strings

  17. Always use Unicode

  18. ? STEP 2: Text direction

  19. 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>

  20. 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>

  21. Apply dir=“rtl” to root

  22. DIR cannot fix CSS

  23. DIR can also flip tables <table dir=“ltr”> <table dir=“rtl”>

  24. 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

  25. CSS: padding, margin, float

  26. CSS: background-image, border

  27. All together: Strings, HTML, CSS

  28. CSSJanus A CSS processor that horizontally flips properties and values http://code.google.com/p/cssjanus/ http://dist.corp.yahoo.com/css_janus/

  29. 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; }

  30. @noflip /* @noflip */ .leave-me-alone { padding-left: 1em; float: left; } .mostly-applicable { padding-left: 1em; /* @noflip */ float: left; margin-left: 1em; }

  31. Swap URLs ./cssjanus.py --swap_ltr_rtl_in_url .image { background-image: url(image_ltr.png); } .image { background-image: url(image_rtl.png); }

  32. .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>

  33. RTLzr(by Yahoo’s Marcel Duran) A Firefox plugin that flips page direction https://addons.mozilla.org/en-us/firefox/addon/rtlzr/

  34. A quick demo

  35. Tricks, bugs, and other subtleties

  36. 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

  37. The Unicode bidirectional algorithm composes runs of LTR, RTL text. Think of strings containing “Yahoo!”

  38. Left-to-right mark &lrm; is necessary to control neutral “!” 1 3 2 3 2 1

  39. Otherwise “!” joins the RTL text 1 3 2 3 2 1

  40. &lrm; is convenient. Markup is recommended. 1 2 3 3 2 1

  41. 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>

  42. Nested right float: The width fix <uldir="rtl" style="float:right; width:150px"> <li style="float:right"> Content </li> </ul>

  43. 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>

  44. 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>

  45. Thank You! Slides available on FE Summit web page

  46. 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

More Related