千夜一夜かからずに、アラビア語Unicodeをマスターする！

10502 ワード
I18n HTML JavaScript CSS unicode HTML テキストリンク

!مرحبا 　アラビア語にようこそ！

今では、世界中の様々な国からユーザーが自分のサイトへ訪れます。 アラビア語を話す人は、420,000,000人です。アラビア語は（ヘブライ語とペルシャ語とモルディブ語も）右から左に記述する言語です。なので国際化 (internationalization/i18n) が難しいです。私は、アラビア語のクラスを受講する前は、普通のウェブのプログラマーでした。クラスの受講後、私は、色々なFOSSのプログラムにアラビア語の国際化の為プルリクを送りました。これは私が初めての日本語で書いたプログラミングの記事です。

アラビア文字

日本語と同じなテクスト/ストリングと、CSSの　writing-modeと縦書きか横書きか書くできます。

アラビア語で右から書くのに、ストリングの一番目のchar型が単語の１番目の文字です。
مرحبا「マルハバ（こんにちは）」の中を見てみましょう：

s = "م";
s += "ر"
> "مر"

文字を書きながら、違って繋がります。
でも、ほかの文字 (رなど) は次の（左の）文字に繋がりません。：

s += "ح"
> "مرح"

アラビア語で右からのストリングについて考えるのが難しければ、縦書きで書いてみましょう：

word = "مرحبا"; // ようこそ
word.split("").join("\n");
> "م
ر
ح
ب
ا"

HTML

レイアウト

QiitaのMarkdownでアラビア語の文書を書いてみましょう：

اليوم هو أفضل يوم

アラビア語は、ページの右側から書きます。 HTMLとGitHub Markdownで、<div dir="rtl">...</div> を使います。QiitaのMarkdownでは、この div には対応していないので、CodePenを使用します。

See the Pen deNKma by Nick Doiron (@mapmeld) on CodePen.

HTMLの dir に「ltr, rtl, auto」の意味は、「Left To Right (左から右に), Right to Left (右から左に), Auto (デフォルト)」です。

dir="rtl"と、リストも右側から書くことができます。

See the Pen RTLPen2 by Nick Doiron (@mapmeld) on CodePen.

Input

<input/>も、dirがあります。例えば、地図の検索でユーザーは英語か日本語かアラビア語で書くことができます。dir="auto"と、何語でも大丈夫です。

See the Pen Practice3 by Nick Doiron (@mapmeld) on CodePen.

テーブル

HTMLのテーブルは、優しく右から左に記述するになります。 CSSとdivのテーブルを使えば、次のを読んでください。

CSS

Position

dir="rtl"を使いましたが、まだ国際化は終わりではありません。

例えば、float:leftと float:rightとではアラビア語のコンテントは違います。「left: 10px」をキャンセルして「left:auto」、そしてほかに作ります「right: 10px」。

CSSかSCSSの ファイルで、右から左に記述する言語のコードをこのスタイルで書いてください。

.floater { float: left; }
.fixed { position: fixed; left: 10px; }

[dir='rtl'] .floater { float: right; }

/* SCSSのほうが優しいです。 */
[dir='rtl'] {
  .fixed {
    left: auto;
    right: 10px;
  }
}

Marginと Paddingと

margin、paddingも共通する問題があります。autoを使うことができないので、０から作ります。

.icon {
  width: 10px;
  margin-right: 10px;
}

[dir='rtl'] .icon {
  margin-left: 10px;
  margin-right: 0;
}

アイコン

右から左に記述する言語では、イメージも右から左に読みます。大手流通会社のFedExは新しいロゴを作りました：

日本語で英語でと、どうして「元に戻す」が左に「やり直す」が右にイメージを書きますか？　アラビア語で、右が始まる所だから、違います。

ビデオ

私は、驚きました。アラビア語圏のビデオ・プレーヤーの再生ボタンやシークバーは、文字と同じように左に動くものと思っていました。ですがアラビア語圏のビデオ・プレーヤーもYouTubeも、私達が普段使っている左から右のデザインを使っています。

数字と通貨記号

アラビア語の数字は、いつも左から右に書きます。「١٠٠」は１００です。 ١٢٣٤٥٦٧٨٩

いくつかの中東諸国で使われている通貨記号は「リアル」と言います。Unicodeで、﷼になり１つのchar型です。数字の左に書いてください。

<canvas>

<canvas>に書きましょう。

ctx.fillText("hello", 0, 20);

Xが０なので、の左から書きました。でも、アラビア語を書けば、何ですか？

let welcome = "مرحبا";
ctx.fillText(welcome, 0, 20);

まだXが０だので、アラビア語のストリーングの左がの左にいます。時々アラビア語の文字が長いので、　X　>　0　のほうがいいです。

頑張って！

多くの人は新しいプログラミング言語について習いますが、人が使う言語もおもしろいです。この記事を読んでアラビア語に、少しでも興味が湧いていただけましたでしょうか？ もし質問があれば、私に聞いてみてください。

リファレンス (英語)

私のインタラクティブなページ http://mapmeld.com/rtl-guide/
Google Material Design https://material.io/guidelines/usability/bidirectionality.html
RTL WTF: http://rtl.wtf/

日本語を書きに手伝う友達にありがとうございます！