old.kete.net.nz :Documentation

Topic: Experimental non-Left to Right Language Layout Switching Support

Topic type:
Topic

How the experimental feature that allows for switching between left-to-right locales (a locale usually corresponding to a language) page layouts and other orientations (so far right-to-left only).

A solution to being able to re-orient a Kete layout specific to a user's chosen locale. In other words if a user starts by viewing an English version of a Kete site (default Left-to-Right layout) and then chooses an Arabic version, the page layout's will "flip" to better suit a Right-to-Left locale.

The technical basis for how Kete implements this switching is based on this article:

http://fortysevenmedia.com/blog/archives/styling_right-to-left_text_with_css_on_a_multi-lingual_site/

Basically when the user changes to viewing a Kete page with a locale different from Left-to-Right layout, we load a different corresponding set of CSS rules in addition to the normal rules.

First we add a new "dir" (for direction) key and value to the translations for a given locale. Here's the default in config/locales/en.yml:

  dir: ltr

If a locale doesn't specify a value for the "dir" key, it will fall back to the default "ltr" value. Here's Arabic's locale:

  dir: rtl

Important Note: when adding adding the "dir: rtl" line, it is important that is formatted and placed correctly, see the config/locales/en.yml placement and formatting of the line and for "dir: ltr" and match that in your locales file.

We can now look up a locale's direction. We use this is small number of places in Kete's layout templates to orient the page.

In essence, we added a "dir" attribute (for direction) to the Kete layout template's html element if the direction is NOT "ltr". Here's the code from app/views/layouts/application.rhtml that adds a "dir" attribute to the html element:

<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang=">%= I18n.locale -%<">%= " dir=\"" + t('dir') + "\"" if t('dir') != 'ltr' -%>>

The "t('dir')" is a command to retrieve the locale's translation value for the "dir" key.

Next we add pulling in CSS style rules specific to that dir value (if not the default):

  <% theme_name = "#{@theme}_theme" -%<
  <% theme_name = theme_name + '_' + t('dir') if t('dir') != 'ltr' -%>  
...
  <% bundle :name => theme_name do -%>
    <%= stylesheet_link_tag 'base', :media => 'screen' %>
    <% if t('dir') != 'ltr' -%>
      <%= stylesheet_link_tag('base-' + t('dir'), :media => 'screen') -%>
    <% end -%>
...

So if the direction is not "ltr", after we load the normal public/stylesheets/base.css file we grab a CSS file that has the name "base-" and then the dir value. So far the only direction that is included is found in public/stylesheets/base-rtl.css.

The base-rtl.css file then uses the CSS Attribute Selector to define rules when the dir attribute value on the html element is "rtl". Here's how base-rtl.css sets text-align and direction CSS rules for the entire HTML page by defining rules (only once) on the body element:

/* we override the default text alignment and direction */
html[dir="rtl"] body {
    text-align: right;
    direction: rtl;
}

After that the base-rtl.css file mainly reverses the direction of specific float rules and sometimes margins.

There are some rules in base.css that are still problematic with this approach because they need to completely "reset". We will probably split these rules out into a separate file and not load them if we are not in a locale with left-to-right orientation. However, we're still exploring this.

The work so far is experimental and thus only exists in a temporary feature branch called enhancement_285_add_non_left_to_right_layout_support. After this feature is finalized, this branch will be merged with the master branch and then be deleted. More technical information can be found in ticket 285.

To help us with this work, please become a Kete contributor by following the steps outlined in http://old.kete.net.nz/site/topics/show/176-using-git-and-github and http://old.kete.net.nz/documentation/topics/show/326-working-with-git-branches-on-github.