Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordPress RTL

11,838 views

Published on

My flash talk about Right To Left languages in WordPress from WordCamp San-Francisco 2010

Published in: Technology, Education

WordPress RTL

  1. 1. RIGHT TO LEFT WORDPRESS <ul><li>Yoav Farhi </li></ul><ul><li>@yoavf [email_address] </li></ul>
  2. 2. العربية עברית فارسی اردو ئۇيغۇرچە
  3. 4. 500,000,000 (~ 7 % of the world population)
  4. 5. #1
  5. 6. #1
  6. 10. CC BY-NC-SA http://flickr.com/photos/mait/
  7. 11. In the repository...
  8. 12. CC BY http://www.flickr.com/photos/bixentro
  9. 13. rtl.css
  10. 14. <ul><li>The Basics </li></ul><ul><li>Text Alignment </li></ul><ul><li>Floats </li></ul><ul><li>Positioning </li></ul><ul><li>Padding, Margin and Borders </li></ul><ul><li>Fonts </li></ul><ul><li>Backgrounds </li></ul>rtl.css
  11. 15. The basics body { direction : rtl ; unicode-bidi :embed; }
  12. 16. The basics input#url { direction : ltr ; }
  13. 17. Text Alignment #footer { text-align : right ; } #footer { text-align : left ; } rtl.css style.css
  14. 18. Floats #comment-form label { float : left ; clear : right ; } #comment-form label { float : right ; clear : left ; } rtl.css style.css
  15. 19. Positioning #logo { position : relative ; left : 10 px ; top : 20 px ; } #logo { } rtl.css style.css left : auto ; right : 10 px ;
  16. 20. 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 ;
  17. 21. 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);
  18. 22. Backgrounds #header { background : url (header.png) 22px 0 no-repeat ; } #header { background-position : ??? 0 ; } rtl.css style.css
  19. 23. Fonts use basic sans-serif fonts no italics
  20. 24. 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
  21. 25. Basic classes rtl.css style.css .alignleft { float : left ; } Don ’ t!
  22. 26. plugins
  23. 27. plugins function my_plugin_css () { if ( 'rtl' == get_bloginfo( 'text_direction' ) ) {   // RTL CSS } }
  24. 28. Almost done RTL Tester plugin CSS Janus (RTLize your css) The RTL guide in the codex
  25. 29. Thank You!

×