Making sure your theme works with RTL locales

  • Revision slug: Making_Sure_Your_Theme_Works_with_RTL_Locales
  • Revision title: Making sure your theme works with RTL locales
  • Revision id: 131282
  • Created:
  • Creator: Marsf
  • Is current revision? No
  • Comment ja

Revision Content

Some languages are written from right to left. Of the languages Firefox and Thunderbird are shipped in, that includes Arabic and Hebrew, with Persian avaialbe as beta, for a total population in excess of 100 million potential users. The important thing to understand about these locales, is that the entire interface is mirrored right-to-left. that means that text that had a left margin will have a right margin instead (or -moz-start margin), arrows that pointed right will have to point left and vice versa, and so on.

A screenshot of Firefox 2 in Hebrew

At this stage you might ask yourself, "how would I know what language is my theme installed on? Should i make a special theme for these locales?" The answer is simple. Firefox, Thunderbird and SeaMonkey expose a special class named chromedir. All you have to do is add conditional CSS rules to your theme that test for the value of this class, and put the RTL version of the rule if the value is "rtl". That's how the default theme works, so you can open it up and take an example.

toolbar[iconsize="large"][mode="icons"] #back-button {
  -moz-image-region: rect(0px 398px 34px 360px);
}

toolbar[iconsize="large"][mode="icons"] #back-button[chromedir="rtl"] {
  -moz-image-region: rect(0px 516px 34px 478px);
}

This way, if chromedir is RTL, the second rule will override the first, and the theme will work in RTL.

Tip: sometimes, like in the back and forward arrows, you don't really need new versions of the images. Instead, just use the opposite arrow when in RTL context.

Tip: instead of using margin-right and margin-left, use the -moz-margin-start selector. That will work on both orientations.

#urlbar-search-splitter {
  min-width: 8px;
  -moz-margin-start: -4px;
  border: none;
  background: transparent;
}
{{ wiki.languages( { "ja": "ja/Making_Sure_Your_Theme_Works_with_RTL_Locales" } ) }}

Revision Source

<p>Some languages are written from right to left. Of the languages Firefox and Thunderbird are shipped in, that includes Arabic and Hebrew, with Persian <a class="external" href="http://www.mozilla.com/en-US/firefox/all.html#beta_versions">avaialbe as beta</a>, for a total population in excess of 100 million potential users. The important thing to understand about these locales, is that the entire interface is mirrored right-to-left. that means that text that had a left margin will have a right margin instead (or -moz-start margin), arrows that pointed right will have to point left and vice versa, and so on.
</p><p><img align="none" alt="A screenshot of Firefox 2 in Hebrew" src="File:en/Media_Gallery/Firefox_2_RTL-header.png">
</p><p>At this stage you might ask yourself, "how would I know what language is my theme installed on? Should i make a special theme for these locales?" The answer is simple. Firefox, Thunderbird and SeaMonkey expose a special class named <code>chromedir</code>. All you have to do is add conditional CSS rules to your theme that test for the value of this class, and put the RTL version of the rule if the value is "rtl". That's how the default theme works, so you can open it up and take an example.
</p>
<pre>toolbar[iconsize="large"][mode="icons"] #back-button {
  -moz-image-region: rect(0px 398px 34px 360px);
}

toolbar[iconsize="large"][mode="icons"] #back-button[chromedir="rtl"] {
  -moz-image-region: rect(0px 516px 34px 478px);
}
</pre>
<p>This way, if <code>chromedir</code> is RTL, the second rule will override the first, and the theme will work in RTL.
</p><p><b>Tip:</b> sometimes, like in the <i>back</i> and <i>forward</i> arrows, you don't really need new versions of the images. Instead, just use the opposite arrow when in RTL context.
</p><p><b>Tip:</b> instead of using <code>margin-right</code> and <code>margin-left</code>, use the <code>-moz-margin-start</code> selector. That will work on both orientations.
</p>
<pre>#urlbar-search-splitter {
  min-width: 8px;
  -moz-margin-start: -4px;
  border: none;
  background: transparent;
}</pre>
<div class="noinclude">
</div>
{{ wiki.languages( { "ja": "ja/Making_Sure_Your_Theme_Works_with_RTL_Locales" } ) }}
Revert to this revision