SlideShare a Scribd company logo
1 of 29
RIGHT TO LEFT WORDPRESS ,[object Object],[object Object]
العربية עברית فارسی اردو ئۇيغۇرچە
 
500,000,000 (~ 7 % of the world population)
#1
#1
 
 
 
CC BY-NC-SA  http://flickr.com/photos/mait/
In the repository...
CC BY  http://www.flickr.com/photos/bixentro
rtl.css
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],rtl.css
The basics body  { direction : rtl ; unicode-bidi :embed; }
The basics input#url  { direction : ltr ; }
Text Alignment #footer  { text-align :  right ; } #footer  { text-align :  left ; } rtl.css style.css
Floats #comment-form label  { float :  left ;   clear :  right ; } #comment-form label { float :  right ;   clear :  left ;  } rtl.css style.css
Positioning #logo  { position :  relative ; left :  10 px ; top :  20 px ; } #logo  { } rtl.css style.css left :  auto ; right :  10 px ;
The Box Model blockquote  { margin-left :  10 px ;   padding :  5 px  15 px  5 px  0 ;   border-left :  1 px   solid   #000 ; } blockquote  { } rtl.css style.css margin-left :  0 ;   margin-right :  10 px ; padding :  5 px  0 5 px  15 px ; border-left :  none ;   border - right :  1 px   solid   #000 ;
Backgrounds #header  { background :  url (header.png)  0 0   no-repeat ; } #header  { background-position :  100 %  0 ; } rtl.css style.css background-image :  url (header-rtl.png);
Backgrounds #header  { background :  url (header.png)  22px 0   no-repeat ; } #header  { background-position :  ??? 0 ; } rtl.css style.css
Fonts use basic sans-serif fonts no italics
Fonts 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 classes rtl.css style.css .alignleft  { float :  left ; } Don ’ t!
plugins
plugins function   my_plugin_css () { if  (  'rtl'   ==  get_bloginfo( 'text_direction' ) ) {   // RTL CSS } }
Almost done RTL Tester plugin CSS Janus (RTLize your css) The RTL guide in the codex
Thank  You!

More Related Content

More from Yoav Farhi

Gender-fair WordPress: Fixing translation inequality at the core
Gender-fair WordPress: Fixing translation inequality at the coreGender-fair WordPress: Fixing translation inequality at the core
Gender-fair WordPress: Fixing translation inequality at the coreYoav Farhi
 
Right To Left Languages Support – The Right Way
Right To Left Languages Support – The Right WayRight To Left Languages Support – The Right Way
Right To Left Languages Support – The Right WayYoav Farhi
 
Localization: beyond translation
Localization: beyond translationLocalization: beyond translation
Localization: beyond translationYoav Farhi
 
WordPress in NOT English - WordCamp Hamburg 2014
WordPress in NOT English - WordCamp Hamburg 2014WordPress in NOT English - WordCamp Hamburg 2014
WordPress in NOT English - WordCamp Hamburg 2014Yoav Farhi
 
Contributing to WordPress (Hebrew)
Contributing to WordPress (Hebrew)Contributing to WordPress (Hebrew)
Contributing to WordPress (Hebrew)Yoav Farhi
 
WordPress: From Antispambot to Zeroize
WordPress: From Antispambot to ZeroizeWordPress: From Antispambot to Zeroize
WordPress: From Antispambot to ZeroizeYoav Farhi
 
Distributed: Reinventing the Workplace
Distributed: Reinventing the WorkplaceDistributed: Reinventing the Workplace
Distributed: Reinventing the WorkplaceYoav Farhi
 
וורדפרס.קום - אתרי וורדפרס בקלות
וורדפרס.קום - אתרי וורדפרס בקלותוורדפרס.קום - אתרי וורדפרס בקלות
וורדפרס.קום - אתרי וורדפרס בקלותYoav Farhi
 
WordCamp Jerusalem - Doing it Wrong
WordCamp Jerusalem - Doing it WrongWordCamp Jerusalem - Doing it Wrong
WordCamp Jerusalem - Doing it WrongYoav Farhi
 
התוסף הראשון שלי - וורדפרס
התוסף הראשון שלי - וורדפרסהתוסף הראשון שלי - וורדפרס
התוסף הראשון שלי - וורדפרסYoav Farhi
 
WordPress theme translation
WordPress theme translationWordPress theme translation
WordPress theme translationYoav Farhi
 
WordPress Developers Israel Meetup #1
WordPress Developers Israel Meetup #1WordPress Developers Israel Meetup #1
WordPress Developers Israel Meetup #1Yoav Farhi
 

More from Yoav Farhi (12)

Gender-fair WordPress: Fixing translation inequality at the core
Gender-fair WordPress: Fixing translation inequality at the coreGender-fair WordPress: Fixing translation inequality at the core
Gender-fair WordPress: Fixing translation inequality at the core
 
Right To Left Languages Support – The Right Way
Right To Left Languages Support – The Right WayRight To Left Languages Support – The Right Way
Right To Left Languages Support – The Right Way
 
Localization: beyond translation
Localization: beyond translationLocalization: beyond translation
Localization: beyond translation
 
WordPress in NOT English - WordCamp Hamburg 2014
WordPress in NOT English - WordCamp Hamburg 2014WordPress in NOT English - WordCamp Hamburg 2014
WordPress in NOT English - WordCamp Hamburg 2014
 
Contributing to WordPress (Hebrew)
Contributing to WordPress (Hebrew)Contributing to WordPress (Hebrew)
Contributing to WordPress (Hebrew)
 
WordPress: From Antispambot to Zeroize
WordPress: From Antispambot to ZeroizeWordPress: From Antispambot to Zeroize
WordPress: From Antispambot to Zeroize
 
Distributed: Reinventing the Workplace
Distributed: Reinventing the WorkplaceDistributed: Reinventing the Workplace
Distributed: Reinventing the Workplace
 
וורדפרס.קום - אתרי וורדפרס בקלות
וורדפרס.קום - אתרי וורדפרס בקלותוורדפרס.קום - אתרי וורדפרס בקלות
וורדפרס.קום - אתרי וורדפרס בקלות
 
WordCamp Jerusalem - Doing it Wrong
WordCamp Jerusalem - Doing it WrongWordCamp Jerusalem - Doing it Wrong
WordCamp Jerusalem - Doing it Wrong
 
התוסף הראשון שלי - וורדפרס
התוסף הראשון שלי - וורדפרסהתוסף הראשון שלי - וורדפרס
התוסף הראשון שלי - וורדפרס
 
WordPress theme translation
WordPress theme translationWordPress theme translation
WordPress theme translation
 
WordPress Developers Israel Meetup #1
WordPress Developers Israel Meetup #1WordPress Developers Israel Meetup #1
WordPress Developers Israel Meetup #1
 

WordPress RTL

Editor's Notes

  1. My name is Yoav Farhi, I come from Israel, and I ’ m an Happiness Engineer at Automattic. In the next few minutes I ’ m going to talk about support for right to left languages in WordPress themes and plugins
  2. So - You probably know Arabic, Hebrew and Farsi - the language spoken in Iran - but there are quite a few other languages that are written from right to left: for example Urdu (in pakistan), and Uyghur (weegur) which is mostly used in a western province of China.
  3. Here ’ s an approximate map showing the areas around the world where a Right to left language is an official language.
  4. All and all, around half a billion people uses right to left languages
  5. WordPress probably has the best built in right to left language support, compared to any other content management system - largely thanks to the contribution by the persian-farsi localization team a couple of years ago. They did a great job and we ’ re all building on top of it now.
  6. That ’ s means that the whole admin interface and the default theme are RTL compatible - and that ’ s really good! However, we can do better in terms of rtl support in themes and plugins.
  7. So - lets look at an example with the new Twenty Ten theme from WordPress 3.0- here ’ s how it looks in English - pretty awesome, right?
  8. And here ’ s how it *should* look in Hebrew - notice how everything is mirrored - including the sidebar, which is now on the right . (let ’ s see that again) So this theme has proper RTL support - Now, without proper RTL support...
  9. ... That ’ s how the theme would look: You can see that the sidebar is back in the wrong place, the site title and tagline are both to the right side and post titles are aligned to the left.
  10. It ’ s all backwards! Unfortunately that ’ s how most of the themes in the theme repository look like when used in an RTL blog.
  11. In fact out of more than a thousand themes currently in the repository, only about 10 have proper RTL support.
  12. There ’ s still hope though - let ’ s see how we all can fix that Now I ’ ll show you how!
  13. In WordPress, the only thing you need to do to make your theme RTL compatible is create an RTL.css file In a right to left blog, that file will automatically be loaded after your style.css file, which means that if you use the same CSS selectors, the style rules in this file will take precedence.
  14. Here ’ s a list of what that file should take care of - we ’ ll now go briefly over theses with some examples
  15. The body should get two rules - direction should be set to rtl (that ’ s similar to the ‘ dir ’ attribute in the HTML) bidi in the unicode-bidi property stands for BiDirectional - and you ’ ll want that in your file as well.
  16. Note that inputs that are always written in from left to right should get a ‘ ltr ’ value on that proprety - That applies to the URL or the Email field in the comment form for example
  17. Text alignment is a no brainer (note that the default in RTL mode is ‘ right ’ , of course)
  18. Same here with floats and clears, no problem with that;
  19. Positioning: that ’ s where it gets just a little bit more tricky. You can ’ t set both the right and left property for an element - that ’ s why you need to use the ‘ Auto ’ value for left before you can set the value for ‘ right ’ .
  20. So margins - paddings - borders - The first proprety is margin-left - to mirror that we first need to set it to 0 and then set margin-right to the same value. For the padding - we basically do the same by switching the values for left and right. Same for the border, where we use the ‘ none ’ value on the left border
  21. Backgrounds: In most cases you ’ ll simply mirror the percentage value for the horizontal pos. so 100% becomes 00 and 10% becomes 90%. * You may also need to use a mirrored image, depending on the context.
  22. Note that you cannot mirror a pixel-positioned background, so avoid those as much as possible
  23. Fonts: Those are the basic guidelines - While an rtl language typography can be very elaborate and complex, both italic text and serif fonts are not natively used.
  24. here ’ s an example
  25. Last thing: don ’ t ever think of mirroring the default .alignleft and .alignright classes, or ‘ the sky will fall on your head ’
  26. Please don ’ t use inline css!
  27. Just use an ‘ if ’ to load the proper rtl css...
  28. That ’ s about it - if you want to test your theme or plugin with RTL mode without messing around to much, just download the RTL tester plugin from the repository.Also - there ’ s a nice tool called CSS Janus - google it up ->it *will* make your life much easier. One last thing - all the information presented here today is available in the codex!