Upload
yoav-farhi
View
10.087
Download
0
Embed Size (px)
DESCRIPTION
My flash talk about Right To Left languages in WordPress from WordCamp San-Francisco 2010
Citation preview
العربيةעבריתעברית
فارسیفارسیاردو
ئۇيغۇرچە
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!