WordPress RTL

RIGHT TO LEFTWORDPRESS

Yoav Farhi@yoavfyoav@farhi.org

العربيةעבריתעברית

فارسیفارسیاردو

ئۇيغۇرچە

500,000,000500,000,000(~ 7 % of the world population)(~ 7 % of the world population)

#1#1

#1#1

CC BY-NC-SA CC BY-NC-SA http://flickr.com/photos/mait/

In the repository...In the repository...

CC BY CC BY http://www.flickr.com/photos/bixentro

rtl.cssrtl.css

rtl.cssrtl.css• The BasicsThe Basics• Text AlignmentText Alignment• FloatsFloats• PositioningPositioning• Padding, Margin and BordersPadding, Margin and Borders• FontsFonts• BackgroundsBackgrounds

The basicsThe basics

body { direction:rtl; unicode-bidi:embed; }

Text AlignmentText Alignment

#footer { text-align: right;}

#footer { text-align: left;}

rtl.css

style.css

FloatsFloats

#comment-form label { float: left; clear: right;}

#comment-form label{ float: right; clear: left; }

rtl.css

style.css

PositioningPositioning

#logo { position: relative; left: 10px; top: 20px;}

#logo {

}

rtl.css

style.css

left: auto; right: 10px;

The Box ModelThe Box Model

blockquote { margin-left: 10px; padding: 5px 15px 5px 0; border-left: 1px solid #000;}

blockquote {

}

rtl.css

style.css

margin-left: 0; margin-right: 10px; padding: 5px 0 5px 15px;

border-left: none; border-right: 1px solid #000;

BackgroundsBackgrounds

#header { background: url(header.png) 0 0 no-repeat;}

#header { background-position: 100% 0;

}

rtl.css

style.css

background-image: url(header-rtl.png);

BackgroundsBackgrounds

#header { background: url(header.png) 22px 0 no-repeat;}

#header { background-position: ??? 0;}

rtl.css

style.css

FontsFonts

use basic sans-serif fontsuse basic sans-serif fontsno italicsno italics

FontsFonts

h1, h2 { font-family: Georgia, serif; font-style: italic;}

h1, h2 { font-family: Arial, Helvetica, sans-serif; font-style: normal;}

rtl.css

style.css

Basic classesBasic classes

rtl.css

style.css.alignleft { float: left;}

DonDon’’t!t!

pluginsplugins

pluginspluginsfunction my_plugin_css() {

if ( 'rtl' == get_bloginfo('text_direction') ) {  // RTL CSS } }

Almost doneAlmost doneRTL Tester pluginRTL Tester plugin

CSS Janus (RTLize your css)CSS Janus (RTLize your css)

The RTL guide in the codexThe RTL guide in the codex

Thank Thank You!You!