css

There are three major ways I prefer to use when RTLing a webpage. Each one has its own pros and cons. They are actually the same..flipping CSS properties and rules is the same procedure in all ways. What's different is where and how are we flipping them.

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).

RTLing

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.

We are all familiar with the famous Blogging Community MyBloglog (a Yahoo! Service). Along with many features it has, it offers a widget you can place in your blog template to track your recent visitors (MyBloglog Users) and show them off as well.

This widget can be found at your Widgets page of your Community as the Recent Readers widget. The code you need to copy and paste is nice and short. It renders beautifully and exactly as the sample you see while customizing it. The problem is with the RTL pages.