How to RTL your Tumblr Theme

Tumblr is a pretty interesting mini-blogging platform that's getting really popular recently. But with RTL, it's horrible! In the text editor, you cannot even right align your text and it strips off any inline styles if you try to add it yourself (I know!! totally unacceptable). In this tutorial I'll show you how to RTL your Tumblr theme completely or have it bidirectional.

RTLing any Tumblr theme

Despite the poor and sad RTL support the Tumblr editor has, we have full access to the theme HTML/CSS template. So in order to RTL any Tumblr theme, all we need to do, is finding that template HTML/CSS and flip its CSS. Here's how:

1. Go to your Tumblr Blog dashboard and click Customize Appearance in the toolbox on the right
2. In the customization toolbar at the left of the page, click Edit HTML. This toolbar will now turn into some HTML code, this is what we want. Take it and save it somewhere as a backup(in case you delete something in an accident)
3. You'll find the CSS of the theme inside the head tag. Just go through it by flipping the directional rules(Refer to this tutorial for detailed steps)
4. Once you're done, click the Update Preview button, recopy the code and save it locally on your computer(because if you disable the custom HTML you'll lose these changes) and then Save & Close (on the top right of the toolbar)

Unfortunately I couldn't find any ready RTL Tumblr themes online(please do send me any links if you find any) so I guess it's our only way to get RTL Tumblr themes.

Adding RTL support to a Tumblr theme

Now this might be a more popular type of Tumblr blogs in the area. I personally post in both Arabic and English in my Tumblr blog so I need it to be bidirectional to some extent where I can -at least- control the text direction of the Arabic/English text selectively. Follow the below steps to add RTL support:

1. As we did in the first 3 steps in the previous section above, "Customize Appearance" of your Tumblr theme and then enable the Edit HTML option.
2. Search in the HTML between {block:Posts} and {/block:Posts} for div(s) with the class "post":
   

   <div class="post">
   

   ..and add the class {TagsAsClasses} with the braces as below:

   <div class="post {TagsAsClasses}">
   

   
   
   What this does is adding CSS classes to the post blocks dynamically according to the tags you add to your post (see where we're going with this?)

3. Now choose a special class for your RTL content, I chose "arabic" to tag my arabic posts for example.
4. We'll need to add a custom class named .arabic and add our RTL rules to it. While we're still in the customization page, switch to the Advanced section in the toolbar(the last one at the bottom) and add the below in the "Add Custom CSS" block
   

   .arabic  /*or whatever class you wish to use*/
   {
   direction:rtl;
   text-align:right;
   font-size:1.1em;/*arabic fonts tend to render smaller*/
   }
   

5. Now you're all ready to use your little RTL system we created. Create a new post, and just tag it with "arabic" or whatever class you choose. And Voila!

So to wrap it up, we used the {TagsAsClasses} dynamic tag Tumblr offers to differentiate posts from one another even if they're of the same type. And by using also the custom CSS we can add, we created an instant RTLing process which gave us a somehow bidirectional Tumblr blog.
I also found an Arabic RTLed Tumblr post talking about this second solution; check it out.