Your Blog With A Bi-Directional Template

Those of you who write in Arabic, Hebrew, or Persian may have recently rejoiced when Blogger announced support for your languages, so your blog can now be read in your native tongue. One of the challenges in making these 3 languages work properly was the ability to write from right to left.

You can see the effect of this process, in this blog, which is not yet setup for bi-directional text. Look at the language translator widget, in this blog, at the top of the sidebar. The Arabic flag is the first one (from the top left), as the flags are in "alphabetic" sequence (that's alphabetic by the English labels, since I speak only "English"). Anyway, if you hit the Arabic flag, you'll see this blog translated into Arabic.

Unfortunately, the Arabic that you see will be justified to the right, not to the left as we do in the rest of the world. With the columns floating, and text justifying, as they do, what you see may or may not be readable in Arabic (Hebrew, or Persian).

This blog has 2 columns.

• Main, floating to the Left.
• Sidebar, floating to the Right

That is because, in English, text starts at the left, and ends at the right. In Arabic, it's vice versa - text starts at the right, and ends at the left. To make a bi-directional template work, we replace "Left" with "Start", and "Right" with "End".

• Main, floating to the Startside.
• Sidebar, floating to the Endside.

So, in a template that supports bi-directional text, we change the float settings.

#main {
  width: 400px;
  float: left;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

#sidebar {
  width: 220px;
  float: right;
  color: $sidebarTextColor;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

Becomes

#main {
  width: 400px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

#sidebar {
  width: 220px;
  float: $endSide;
  color: $sidebarTextColor;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

This is the example of the column float settings, only. Text float settings, anywhere in the template, needs to be changed similarly. Float settings of "left" need to be changed to "$startSide", and "right" to "$endSide", to make this really work.

As you customise your template, you too might want to change your float settings, so your blog becomes more readable to readers of Arabic, Hebrew, and / or Persian (and more in the future). If you want your blog to be more easily enjoyed by those nationalities, anyway.

>> Top