WordPress RTL

Editor's Notes

• #2: 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
• #3: 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.
• #4: Here ’ s an approximate map showing the areas around the world where a Right to left language is an official language.
• #5: All and all, around half a billion people uses right to left languages
• #6: 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.
• #7: 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.
• #8: 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?
• #9: 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...
• #10: ... 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.
• #11: It ’ s all backwards! Unfortunately that ’ s how most of the themes in the theme repository look like when used in an RTL blog.
• #12: In fact out of more than a thousand themes currently in the repository, only about 10 have proper RTL support.
• #13: There ’ s still hope though - let ’ s see how we all can fix that Now I ’ ll show you how!
• #14: 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.
• #15: Here ’ s a list of what that file should take care of - we ’ ll now go briefly over theses with some examples
• #16: 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.
• #17: 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
• #18: Text alignment is a no brainer (note that the default in RTL mode is ‘ right ’ , of course)
• #19: Same here with floats and clears, no problem with that;
• #20: 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 ’ .
• #21: 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
• #22: 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.
• #23: Note that you cannot mirror a pixel-positioned background, so avoid those as much as possible
• #24: 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.
• #25: here ’ s an example
• #26: Last thing: don ’ t ever think of mirroring the default .alignleft and .alignright classes, or ‘ the sky will fall on your head ’
• #27: Please don ’ t use inline css!
• #28: Just use an ‘ if ’ to load the proper rtl css...
• #29: 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!