18.10.2016 Views

Drupal 7 Module Development

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Chapter 4<br />

.block-single-blog .content ul li {<br />

margin-bottom: 10px;<br />

list-style-type: none;<br />

}<br />

RTL languages<br />

One thing you'll need to be aware of when writing stylesheets is <strong>Drupal</strong>'s support for<br />

RTL languages, those languages that are read Right To Left, for example Arabic or<br />

Hebrew. Users of RTL websites expect everything about that website to flow rightto-left<br />

instead of English's normal left-to-right. The convention used by websites that<br />

support both RTL and LTR languages is to flip the layout of the design horizontally<br />

depending on the directionality of the language.<br />

A great live example of how right-to-left website layouts are flipped is Amnesty<br />

International's website; compare the Arabic language version at http://www.<br />

amnesty.org/ar with the English language version at http://www.amnesty.org/en.<br />

Notice how the sidebar changes sides depending on the language:<br />

From a CSS standpoint, this means HTML elements whose left-side styling differs<br />

from their right-side styling need to have their styling altered when the current<br />

language is RTL. If a RTL language is being displayed, <strong>Drupal</strong> will, for each<br />

stylesheet, look for a supplemental RTL stylesheet to load. So, if Hebrew is the active<br />

language, <strong>Drupal</strong> will look for single-blog-rtl.css to load in addition to (and<br />

just after) the requested single-blog.css file. Since our -rtl stylesheet is loaded<br />

in addition to the standard stylesheet, we simply need to include the rules and<br />

properties needed to override the LTR version of our styles. To make it easier to keep<br />

track of those properties, <strong>Drupal</strong> modules should place a /* LTR */ comment next to<br />

each property that needs to be overridden.<br />

[ 103 ]

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!