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

Stats Components Are Significant, In Their Own Context

One popular Stats related accessory, which displays pageview information to the public, is the "Popular Posts" gadget.

Popular Posts identifies from 1 to 10 of the most popular posts in the blog, by comparing Stats pageview counts. Optional parts of the display of each post are a snippet of text, and an ever popular thumbnail photo.

Like many Stats features, blog owners have found imaginative uses for "Popular Posts" - and overlook the limitations of the gadget. Both the dynamic nature of Stats, and the timing of the various pageview count recalculations, create confusion, when Popular Posts is examined.

What's The URL Of My Blog?

We see the plea for help, periodicallyI 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?".