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

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

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

##アラビア文字

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

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

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

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

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

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

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

## HTML

### レイアウト

<img src="https://i.imgur.com/fgkp7gQ.png" width="300"/>

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

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

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

<p data-height="97" data-theme-id="0" data-slug-hash="deNKma" data-default-tab="result" data-user="mapmeld" data-embed-version="2" data-pen-title="deNKma" class="codepen">See the Pen <a href="https://codepen.io/mapmeld/pen/deNKma/">deNKma</a> by Nick Doiron (<a href="https://codepen.io/mapmeld">@mapmeld</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

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

<p data-height="134" data-theme-id="0" data-slug-hash="zjNamj" data-default-tab="html,result" data-user="mapmeld" data-embed-version="2" data-pen-title="RTLPen2" class="codepen">See the Pen <a href="https://codepen.io/mapmeld/pen/zjNamj/">RTLPen2</a> by Nick Doiron (<a href="https://codepen.io/mapmeld">@mapmeld</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### Input

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

<p data-height="196" data-theme-id="0" data-slug-hash="OZWoEa" data-default-tab="result" data-user="mapmeld" data-embed-version="2" data-pen-title="Practice3" class="codepen">See the Pen <a href="https://codepen.io/mapmeld/pen/OZWoEa/">Practice3</a> by Nick Doiron (<a href="https://codepen.io/mapmeld">@mapmeld</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

## CSS

### Position

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

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

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

```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```を使うことができないので、０から作ります。

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

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

## アイコン

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

![FedEx logos](https://i.imgur.com/lGGZtmv.png)

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

## ビデオ

![YouTube mockups](https://i.imgur.com/ZExr2VQ.png)

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

## 数字と通貨記号

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

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

## &lt;canvas&gt;

&lt;canvas&gt;に書きましょう。

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

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

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

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

![Arabic and hello canvases displayed](https://i.imgur.com/LylkXru.png)

## 頑張って！

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

### リファレンス (英語)

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

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