HTMLとCSSでローカライズと多言語コンテンツを実現する

Shopifyがさまざまな国に広がっていくにつれ、デザインや開発の場面で文化的な違いが発生することがあります。UI（ユーザーインターフェイス）の国際化によって、ターゲットオーディエンスに向けたローカライズは楽になっていますが、HTMLとCSSもまたローカライズと国際化を同時に達成するための強力なツールです。

デザイナーにとってのチャレンジは、横書き・縦書きといったテキストが読まれる方向や地域的な文字の使用など、ローカライズを念頭においてコンテンツをデザインすることであり、開発者にとってのチャレンジは、こうした側面の要素を最小限のコードで実装することです。

今回の記事では、上記2つの要求に応え、ローカライズされたプロダクトを構築するのに役立つ6つの検討事項を見ていきたいと思います。

 

1. Writing mode

中国人観光エリアでは看板が縦書きになっています

writing-mode: vertical-lr;

writing-modeプロパティは、横書きや縦書きなどコンテンツの文字の方向を設定します。

コンテンツをwriting-mode: vertical-lrによって縦方向に配置すると、東洋の文字はラテン言語（アラビア文字と記号を含む）と異なり回転しません。日本のShopifyパートナーのページでは、transform: rotate(90deg)の代わりにwriting-mode: vertical-lrを設定することで、日本語ユーザーにとって適切な表示となり、同時に英語圏のロケール設定も維持できます。

日本語の文字をtransform: rotate(90deg)で回転させた場合

writing-mode: vertical-lrを設定した場合の日本語の縦書き表示

純粋に装飾目的の場合であっても、writing-modeはsideways-lrとsideways-rlを提供するので、transform: rotate(90deg)とtransform: rotate(-90deg)に等しい結果が得られます。sideways writing modeをサポートしているのは現在のところFirefoxのみとなっています。

伝統的な日本語と中国語のコンテンツは右から左へと配置されるべきです。Huijing Chenは中国語のタイポグラフィを従来の縦書きとモダンな横書きとでスイッチして表示し、レイアウトの違いを強調しています。Writing modeは、文化の違いを理解したコンテンツを表示するための仕様として、ローカライズにとって重要です。

2. chユニット

max-width: 20ch;

CSSのchが示しているのは、「0」と同じ長さの半角ユニットです。東洋系の言語の特徴として、固定幅の文字が使用されますが、これは全角文字として知られています。テキスト幅にchが適用されると、全角文字の場合は1文字で2chとなり、ラテン言語の文字の場合は半角なので2文字分に該当します。

右から左へ縦書きで書かれ、1行が10文字になっている伝統的な漢詩

See the Pen Chinese poem writing vertically by Willow Cheng (@willowcheng) on CodePen.

通常の英語タイポグラフィでは、1行に60字が適量とされています。東洋言語に置き換えると、全角で30字ということになります。ピクセル値と比べ、chユニットはすべてのフォントサイズに適用することができ、ブレイクポイントに応じてフォントサイズを変えるレスポンシブレイアウトの場合に便利です。

3. クオーテーションと多言語コンテンツ

<q lang="ja">こんにちは<q>世界</q></q>

<q>はHTMLのクオーテーション要素で、短いインライン形式で使用します。クオーテーション記号（引用符）は、言語によって異なります。英語では""を使い🇬🇧🇨🇦🇺🇸🇦🇺、フランス語では«»🇫🇷🇨🇩🇨🇦、日本語の場合は「」です🇯🇵🇵🇼。

通常のセマンティックな用途以外にも<q>を使用するメリットは明らかです。クオーテーションマークの翻訳をする時間が省けるだけでなく、適切なレベルのクオーテーションを表示させることができます。たとえば日本語ではセカンドレベルの『 』が適切に表示されます。言語的なレスポンシブネスにとって有益です。

<q>タグのクオーテーション記号は、ブラウザでサポートされていない場合や好みの見た目にしたい場合に:beforeと:afterでスタイリングできます。

See the Pen Quotations marks showing different levels by Willow Cheng (@willowcheng) on CodePen.

4. ミックス言語の場合にFont familyをフォールバックする

日本語や中国語の中に英字が使われるのは、もはや当たり前の世の中になりました。英語フォントには英字しかありませんが、中国語フォントには英字も漢字も含まれます。

ローカライズされたコンテンツをデザインするときに重要なのは、2つ以上の言語がページに表示されている場合にどの文字を使用したらいいかよく理解することです。中国語フォントだけを使ったほうが見た目も統一されて適切な場合もあります。しかし、中国語フォントの英字ではうまくいかないという不満が聞こえるときもあるでしょう。その場合には、代わりに英語フォントを使う必然が生じます。

下記の例では、言語がミックスされて複数のフォントが表示されています。1つめの例は、ラテン数字とアルファベット表記にラテン文字のフォントを使用しています。2つめの例は、ラテン数字とアルファベットに日本語のフォントが使われています。

font-family: ShopifySans, 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;

font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;

上記はShpoifyジャパンのホームページです（※現在は違うデザインです）。ここでは日本語のネイティブフォントを宣言し、英字は日本語フォントのものを使っています。

font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;

英語フォントの英字を活用したい場合もあるでしょう。日本語フォントをフォールバックしながら英語フォントを宣言するには、以下のように記述します。

font-family: ShopifySans, 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;

日本語、英語、図形が混在するネオンライト

5. 言語固有のデフォルトフォント

<p lang="zh-TW">雪</p>

HTMLのlang属性は、要素内の言語コンテクストを決定します。

See the Pen Language specific default fonts by Willow Cheng (@willowcheng) on CodePen.

中国語の文字は、台湾（伝統的な中国語）、日本（漢字）、韓国（漢字語）などで異なるバリエーションのものが使用されます。これらの表意文字は、部分的にCJK文字セットに含まれます🇨🇳🇭🇰🇹🇼🇯🇵🇰🇷。

言語固有のデフォルトフォントは、たとえば中国語の簡体字と繁体字のように、同じ言葉でも異なる文字が使われる場合などに、便利です。簡体字は繁体字の後継であり、どちらも意味は同じです。

特定言語のバリエーションに対して使用する文字を拘束できるため、言語属性は役立ちます。

こちらも参考にしてください：翻訳キーを使用してグローバル対応のテーマを作成する方法

6. :lang()擬似クラス

<ol lang="zh">

    <li>子鼠</li>

    <li>丑牛</li>

    <li>寅虎</li>

    <li>卯兔</li>

</ol>

ol:lang(zh) { list-style-type: cjk-earthly-branch; }

:lang()擬似クラスを使用すると、セレクタと指定した言語が一致します。HTML属性のlangを:lang()擬似クラスと使用することで言語に固有の調整が可能です。下記の例では伝統的な配列が中国語に適用されています。他言語を含むレイアウトの場合にも:lang()は優れたツールであり、追加のCSSクラスを必要とせずにスタイルを簡単に適用できます。また:lang()擬似クラスは、ミックス言語において特定の言語に適用されたコンテクストをレンダリングすることもできます。

See the Pen Custom list type style by Willow Cheng (@willowcheng) on CodePen.

Building for international users

インターナショナルなユーザーのために

現代社会では、さまざまな地域や国を結ぶオープンなチャネルでコミュニケーションがおこなわれています。このような現実を反映するために、Webのスタンダードはつねに改良が続けられ、国際化がしやすくなっています。文化の違いをリスペクトして、HTMLで適切な言語を選択できるようにマークアップをおこない、正しいスタイルのCSSを適用することで、コンテンツのローカライズと多言語化を大きく推進できるはずです。