Skip to main content

Visit Mozilla.org

Making Sure Your Theme Works with RTL Locales

出典: MDC

目次

[編集] 導入

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

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

[編集] あなたがなすべきこと

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

[編集] 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 拡張を有効にすると、あなたの LTR ロケールが RTL ロケールのように振る舞います。

"http://developer.mozilla.org/ja/docs/Making_Sure_Your_Theme_Works_with_RTL_Locales" より作成