Making Sure Your Theme Works with RTL Locales

いくつかの言語は右から左に書かれています。Firefox と Thunderbird でリリースされている言語にはアラビア語とヘブライ語があり、さらにペルシャ語のベータ版が利用可能です。これらの言語は 1 億人の潜在的な利用者がいます。これらのロケールについて理解するために重要なことは、すべてのインタフェースが右から左へ反対向きになっていることです。つまり左マージンを持つテキストは、代わりに右マージン (または -moz-start マージン) を持ち、右を指し示す矢印は左を指し示します。またその逆も反対向きになります。

ヘブライ語の Firefox 2 のスクリーンショット

あなたがなすべきこと

この段階であなたは自身に次のように問いかけるでしょう、「わたしのテーマがどの言語にインストールされるのか、どうやって知ることができる？これらのロケールのために特別なバージョンを作るべき？」落ち込まないでください。RTL 互換のテーマはとても簡単に作成できます。

Gecko 1.9.2 以降

Gecko 1.9.2 では :-moz-locale-dir CSS 擬似クラスが導入されました。このクラスは、左から右または右から左のユーザインタフェースの描画される向きにマッチします:

:-moz-locale-dir(ltr) は、ユーザインタフェースが左から右向きに描画される場合にマッチします。
:-moz-locale-dir(rtl) は、ユーザインタフェースが右から左向きに描画される場合にマッチします。

例

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

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

この例では、デフォルトで左から右向きのボタンを指定します。ユーザインタフェースが右から左向きに描画されるモードの場合は、下の CSS の指定 (:-moz-locale-dir(rtl)) で上書きされます。

Gecko 1.9.1 (Firefox 3.5) とそれ以前

`chromedir` 属性

Firefox や Thunderbird, SeaMonkey はいくつかの要素に chromedir 属性を持っています。あなたがすべきことは、この属性の値をテストするテーマに CSS 規則を追加し、RTL 特有の規則を適用する部分に使用するだけです。以下はデフォルトテーマでの例です。この例のように使用してください。

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);
}

この方法では、chromedir が "rtl" の場合、2 番目の規則が最初の規則を上書きし、テーマが RTL で動作します。

すべての要素が chromedir 属性を持っているわけではないので注意してください。そのため、これを行う子孫要素が規則を継承する必要があります。例えば:

/* ここでは #c に RTL 規則を適用しようとしています。
 * しかし、#c も親要素の #b も chromedir 属性を持っていませんが、
 * その親要素の #a にはこの属性があります。
 */

#a > #b > #c {
  /* 通常の規則 */
}

#a[chromedir="rtl"] > #b > #c {
  /* RTL 規則 */
}

ヒント: 時々、戻るや進む矢印のように、画像の新しいバージョンを必要としないものがあります。代わりに、RTL のコンテキストでは反対向きの矢印を使用してください。

left/right 規則の代わりに start/end 規則を使用する

RTL モードでは方向が逆になるため、左のものが右に、右のものが左になります。結果的に、left/right 規則を padding，border, margin などに使用することがなくなります。代わりに、RTL 互換性を確保するため、以下の start/end 規則を使用してください:

#urlbar-search-splitter {
  min-width: 8px;
  -moz-margin-start: -4px;
  border: none;
  background: transparent;
}

あなたのテーマをテストする

あなたのテーマの RTL での互換性については簡単にテストできます。RTL ロケールをダウンロードして面倒なことする必要はありません。Force RTL 拡張を有効にすると、Firefox のインタフェースを LTR から RTL に切り替わります。メニュー項目から動的に切り替えることもできます。