Help us understand the problem. What is going on with this article?

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

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

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

アラビア文字

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

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

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

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

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

アイコン

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

FedEx logos

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

ビデオ

YouTube mockups

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

数字と通貨記号

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

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

<canvas>

<canvas>に書きましょう。

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

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

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

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

Arabic and hello canvases displayed

頑張って!

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

リファレンス (英語)

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした