RTL on Y!FPRIGHT-TO-LEFT ON THE YAHOO! FRONT PAGE

Chris KlaiberCKLAIBER@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

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 &lrm; is necessary to control neutral “!”

Otherwise “!” joins the RTL text

2 31

23 1

&lrm; 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