Skip to main content

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

Comments

Popular posts from this blog

Adding A Link To Your Blog Post

Occasionally, you see a very odd, cryptic complaint I just added a link in my blog, but the link vanished! No, it wasn't your imagination.

Embedded Comments And Main Page View

The option to display comments, embedded below the post, was made a blog option relatively recently. This was a long requested feature - and many bloggers added it to their blogs, as soon as the option was presented to us. Some blog owners like this feature so much, that they request it to be visible when the blog is opened, in main page view. I would like all comments, and the comment form, to be shown underneath the relevant post, automatically, for everyone to read without clicking on the number of comments link. And this is not how embedded comments work.

What's The URL Of My Blog?

We see the plea for help, periodically I need the URL of my blog, so I can give it to my friends. Help! Who's buried in Grant's Tomb, after all? No Chuck, be polite. OK, OK. The title of this blog is "The Real Blogger Status", and the title of this post is "What's The URL Of My Blog?".