Bidirectional Blogging

When starting this blog, I was really concerned about writing a blog in two languages - English and Hebrew. As the title suggests, the problem is not using two different languages but actually writing in two different directions - left to right and right to left.

Unfortunately, searching the web for a little while yields no real solution for us bidirectional bloggers out there (I can only assume the Arabic blog scene propose no solution either).
I am sure some bloggers have sorted this out by themselves, while the others chose to align all of their posts to one direction or the other, regardless of the language they are written in. Another easy solution could be starting a different blog for each language. But that wasn't good enough for me.

The Blogger system, as I suppose other blogging platforms as well, provides the blogger with almost absolute control over the graphic design and layout of the page. It is done by means of a "Template" which is basically some html code with special tags inside, which is actually very similar to web scripting languages like ASP.

I was very pleased to find out Blogger allows javascript code to run from within the template, which among other things can solve this problem for all you bidirectional bloggers.

So, let's say you want to align every post with English text in it to the left, and any other post to the right. Here's how you do it:
First, start editing your template.
Then search for the special tag which looks like this:

<$BlogItemBody$>

Usually this tag is contained by a <p> tag, a <div> tag, or both. One of these containing tags probably has a class name used for graphic design purposes. In the template I worked on, that class name was "post-body". I assume this is the case in most templates.
The class name we found is the class we need to change from left to right or right to left.
For this you need to add the following piece of code to the end of the template:

<script language="javascript">

window.onload = applyRTL;

// This fucntion applies right-to-left style to posts
// that contains hebrew:
function applyRTL()
{
 var arrDivs = document.getElementsByTagName("DIV");
 var i;
 var divPostBody;

 for (i = 0; i < arrDivs.length; i++)
 {
  divPostBody = arrDivs[i];
  
  if (divPostBody.className.toLowerCase() == 'post-body')
  {
   if (divPostBody.innerHTML.search(/[a-z]/) > -1)
   {
    divPostBody.style.direction = "ltr";
    divPostBody.style.textAlign = "left";
   }
   else
   {
    divPostBody.style.direction = "rtl";
    divPostBody.style.textAlign = "right";
   }
  }
 }
}

</script>

This code will execute once the page and all of the posts in it were loaded, and will make every post that contains hebrew letters right-to-left and every other post left-to-right.
In case the class name from above is different in your template, change 'post-body' in the line:

  if (divPostBody.className.toLowerCase() == 'post-body')

to the name of the class in your template.

Since what that code does is basically search your posts for specific letters, you can change it to search for specific phrases and change the appearance of your posts according to their content.

Using client-side scripts inside your blog can do a lot of other cool stuff - any ideas anyone?