Internationalization & RTL (right-to-left) Drupal theming

Drupal’s best practices are followed in Fusion to ensure that themes are multilingual-compatible. Text is passed through translation functions, elements that can be translated (such as taxonomy terms) are not modified in a way that diminishes this function, and styles are coded such that the amount of text that can be contained within them is flexible (important when one language is more verbose than another).

Fusion is RTL-capable, supporting bidirectional theming out of the box. In Fusion Core, you will see many files ending in -rtl.css. These are the RTL equivalents of all stylesheets, where needed, including in browser-conditional stylesheets.

It also has the following features:

• Content direction and layout (floats, margins, etc.) are automatically reversed in RTL.
• A ‘rtl’ body class is added whenever the current language is RTL. This can make it easier to add .rtl selectors to stylesheets for small changes instead of adding separate -rtl.css files.
• Fusion’s included special features (eg. dropdown menus) and block styles (eg. menus, login block) have accompanying RTL CSS.

NOTE: in RTL, some block styles (“Float block right”, “Align content right”) are reversed from the direction the text indicates if you are administering your site in a RTL language. These are noted with a small [LTR]. This can be confusing but is necessary to have the proper opposing layouts for a site that is available in both directions.

Doing your own right-to-left Drupal theming

RTL theming is a bit conceptually confusing if you’re new to it, but the basic principle is that you’re reversing values for floats, margins, padding, absolute or relative positions, text alignment, borders, background positioning, and image direction.

Let’s say you had the following declaration for styling a block title with padding and an icon on the left:

The RTL equivalent would become:

Add this to your Fusion subtheme’s -rtl.css file and it will be loaded after your main CSS file, adding the above properties when the site is viewed in RTL.

That’s it! Go through your CSS and look for any direction-specific properties, and then override these in the RTL stylesheet.

We have not tested this module but it may come in handy: CSS Flip.