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":

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



    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.

Tags:

Average: 3.1 (12 votes)

Comments

Hi,
Would you mind adding an example to explain "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!" ?
Thanks.

In your tubmlr dashboard, create a new post and in the "tags" box on the right, add the tag "arabic" and save your post.

Is there a way to put RTL text in the title, right justified ?
Thanks,
Ron.

Hi,
Thank you for the great tutorial. I linked to this post in my Tumblr.
Do you know how to take care of the date? for some reason, the theme won't show the date when I do this RTL trick...
Thanks,
Natalie

Thanks for your feedback =)
The date thing is strange! Which theme are you using?

Great post. Very informative and useful as well. I just want to ask if is there a way to put RTL text in the title, right justified ?I am looking forward to visit here again..

Thank you.

Hi,

Was going through the steps but for some reason I cannot find <div class="post">. Would there be a reason for that.

If you're familiar with HTML, try looking for the <div> that wraps the post structure. What's the theme you're using? I can help you find it.

Hey, NightS I'm starting a blog on tumblr and i'm so frustrated because i can't post text from right to left, and i'm very unfamiliar with HTML so i tried to follow your steps, but i'm totally lost. I'm trying to post in arabic too. I'd like it bidirectional so i can also post in English. I'm using the "Esquire" theme. this is so confusing. Is it possible that someone can do it for me?

Hi,
When I choose my theme, instead of "customize Html" as you said, I have "edit html". Even when I click on that and see the code, I do not find "css" in the script. Are you using a specific theme?
I would be grateful if you reply since I also want to have some posts in Persian and some in English.

Thanks,
A

Hello,
Tumblr people have changed the interface. It's now "Edit HTML", thanks for pointing this out, I'll update the post.
Now, the tutorial I wrote should apply to all tumblr themes not just a specific one. Which theme are you using? The style is usually in the tag(in the beginning of the script). Is there a link of the theme you're using so I can check it for you?

Hi again,
I have a few questions.
1- Do I have to follow procedures under both titles: "RTLing any Tumblr theme" & "Adding RTL support to a Tumblr theme" or just the second one if I want to have a bidirectional blog based on my posts which I tag?
2-In your "3 Different Ways to RTL your CSS", on the third option, you're talking about 2 files. Where are they located? As I understand there is only one file for themes to be customized.
3- I flipped all "left"s to "right"s but I still see the ! and . marks on the other end of the sentence.
4-You mentioned to go in "advanced tab" to "Add Custom CSS" block. There is no such tab. Where in the html file should I add the code for defining the tag class?
5-Can I see the bidirectional blog you're writing?

Thanks,
Aphrodite

Hello again =)
1- No if you have a bidirectional blog use the second one.
2- You don't need flip any of the styles(since you're only adding support). But if you want to totally RTL a tumblr theme, use the first method not the third. Since the styles are all in one place inside the