Supporting the Arabic Content online by supporting its direction(RTL) on the web..
The Twitter updates widget is maybe the most popular widget you can find on blogs. You can get yours from your settings page or by going to the goodies page and choosing widgets. Customizing it is super easy, you get to choose the colors, width and style of the widget itself. The direction though is always LTR. The good thing about the twitter is that it doesn't break in the RTL pages and it looks just fine. But to tweeples who tweet mostly in RTL languages (Like Arabic), it kind of doesn't fit in the RTL content of the whole page. Therefore, it's nice to see it flipped to go with the flow of their RTL page and tweets (what we are going to do now).
Can't express our happiness about the reaction we've been getting so far. Getting feedback and links to blogs that have been RTLed with the help of the tutorials posted here was just more than amazing *if you could just see the smile on my face right now*.
Using backgrounds in CSS gives you the ability to control its position. It is done by controlling its position relativly to the 0,0 point which is the top left corner of the block. If you're rule has a background-position value of left top for example, flipping it to be right top wouldn't be a problem since right is a valid value.
Now we'll start flipping the CSS. Copy the ltr folder and rename the new one rtl (It's ready in the Source you'll download, you can move it to another place if you want to practice it yourself).
In the index.html file change the path of the css file from ltr/styles.css to rtl/styles.css (what we did here is linking the new file we're going to flip)
Open the styles.css file in your new rtl folder to start flipping it.
Now that everything is ready (a browser and a simple editor), we can start RTLing the simple hello world page. I'll be using Firefox and Notepad++ in this tutorial.
The SRC of this tutorial is available at the end of this post. You'll find the HTML file with both LTR and RTL stylesheets and images.
Annoyed by the way Arabic conversations look like in Gtalk? Tech-World "عالم التقنية" published 4 themes you can use to enhance your chatting experience in Arabic. Check it there:
So if RTL is "Right to Left" what is RTLing?
Actually I made up this "verb" (I'm sure I'm not alone :)) to describe the process of converting an LTR (left to right) webpage to an RTL webpage. You'll see RTLing in action in all of the multilingual websites(English/Arabic for example) and in this blog as well. Click the العربية link in the top to see the page flipped.
In this tutorial we'll take a simple HTML/CSS template and we're going to flip its direction from LTR to RTL. Simply this Hello World Page is going to be RTLed.