【Unite Tokyo 2019】ゼロから始めるアラビア語レンダリング

ゼロから始める アラビア語レンダリング KLab株式会社 今福 文章 (Fumiaki Imafuku)

今福 文章 (Fumiaki Imafuku) KLab株式会社 技術統括部 UIライブラリ、スクリプトエンジン、 開発支援ツールなどを開発。 時々ゲーム開発。

アラビア語は……

読めません！ 書けません！ 話せません！

経緯 – キャプテン翼 アラビア語対応

文字が表示できるなんて 当たり前じゃないか

文字が表示できるなんて 当たり前じゃないか

レイアウトエンジンが 対応していない文字は 正しく表示できない

正 誤

お品書き — アラビア語について — アラビア語を表示する際の課題 — アラビア語を表示する方法

アラビア語について

2.3 27 3

2.3 27 3 使用人口(億人) 公用語としている国の数 使用されている 国や地域の多さ 引用：Wikipediaのアラビア語の頁より

• https://ja.wikipedia.org/wiki/アラビア語

アラビア語 — 西アジア、北アフリカの国や地域で 多く話されている — 国連の公用語にもなっている

アラビア文字 — 基本的に右から左への横書き — アラビア語で使うのは、28文字 — 筆記体のように文字を繋げる — 文字を繋げる際に形状が変化する — アラビア語以外でも使われる

アラビア語を表示する際の課題

課題 1

右から左

基本的に 右から左

例外あります

右から左と 左から右が混在

アラビア文字は、双方向テキスト — アラビア文字、英数字などが一つのテキスト内に混在した場合、 それぞれを適切な方向にレンダリングしなければならない

アラビア文字は、双方向テキスト — アラビア文字、英数字などが一つのテキスト内に混在した場合、 それぞれを適切な方向にレンダリングしなければならない 右から左 左から右 アラビア文字 アラビア文字以外の文字 記号 アラビア文字の数字 数字

アラビア文字は、双方向テキスト — アラビア文字、英数字などが一つのテキスト内に混在した場合、 それぞれを適切な方向にレンダリングしなければならない 右から左 左から右 アラビア文字 アラビア文字以外の文字 記号 アラビア文字の数字 数字

アラビア文字の数字 0 1 2 3 4 5 6 7 8 9 ٠ ١ ٢ ٣ ٤ ٥ ٦ ٧ ٨ ٩ 2019/9/26 ٢٠١٩/٩/٢٦

()

双方向テキストでの括弧 — 左括弧 ‘（’ 、右括弧 ‘)’ の文字コードは、向きに関わらず同じ — 右から左にレイアウトする場合、表示を切り替える

課題 2

文字の変形

変形ルール — 単語内での記述位置 — 特定文字の組み合わせ

単語内での記述位置 — 単独 — 先頭 — 中間 — 末尾 末尾 中間 先頭 単独 ‫ﻞ‬ ‫ﻠ‬ ‫ﻟ‬ ‫ﻝ‬

単語内での記述位置(特殊) — 単独 — 先頭 — 中間 — 末尾 末尾 中間 先頭 単独 ‫ﺎ‬ - - ‫ﺍ‬

単語内での記述位置(特殊) — 先頭に来た場合、単独を使用 — 単語の中間に来た場合、末尾を使用 — 次に続く文字は、繋げられなくなるため、先頭を使用 末尾 中間 先頭 単独 ‫ﺎ‬ - - ‫ﺍ‬

単語内での記述位置(超特殊) — ハムザ — 声門破裂音 — 文字として記述する場合、単独のみ 末尾 中間 先頭 単独 - - - ‫ﺀ‬

特定文字の組み合わせ — ‘‫’ﻝ‬と‘‫’ﺍ‬が連続した場合、 ‘‫’ﻻ‬という文字になる

課題 3

シャクル

発音記号

アラビア文字は 子音のみで表記

Tsubasa

Tsubasa TBS

読み方が わからない

シャクルの扱い — 基本的には、アラビア文字に慣れていない初心者向け – 子供向けの書籍 – 教科書 – 教典 — 原則、省略不可なものもある – ハムザ など

シャクルの付け方 — 文字の上下に付く — 複数個付くパターンもある — 文字ごとにつける位置が決まっている

アラビア語を表示する方法

GPOS/GSUB

取得できない

GPOS - Glyph Positioning — 文字の位置調整に使用されるデータ — シャクルの位置を決める際に必要

GSUB - Glyph Substitution — 文字の置換に使用されるデータ — 文字の変形に必要

普段使ってる文字は、 よしなに処理されて表示される

どうするのか？

Presentation Forms

Presentation Forms — 変形済みのアラビア文字が定義されている — シャクル付きの文字も定義されている – 全てのシャクルには対応していない

先に結論から

文字列をよしなに処理して、 鏡に写したようにレイアウトする

アラビア語を表示するまでの手順

手順 — テキストデータの処理 — 頂点データの処理

テキストデータの処理

テキストデータの処理手順 — 文字を種類ごとに分類する — 分類した文字の向きを判断する — 文字を並び替える — 文字コードを表示用に変換する

文字を種類ごとに分類

右から左 左から右 アラビア文字 アラビア文字以外の文字 記号 アラビア文字の数字 数字

右から左 左から右 アラビア文字 アラビア文字以外の文字 アラビア文字の数字 数字 どちらの向きもあり得る 括弧 記号 空白

文字の分け方 — アラビア文字 — アラビア文字の数字 — アラビア文字以外の文字 — 数字 — 空白 — 制御文字 — 左括弧 — 右括弧 — その他

アラビア文字の判定方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 bool IsArabicWithoutNumber(char character) { int code = (int) character; // アラビア文字のブロック内にいる if (code >= 0x0600 && code <= 0x06FF) { // アラビア文字の数字は別扱い return code < 0x0660 || code > 0x0669; } // プレゼンテーションフォームのブロック内にいる if (code >= 0xFB50 && code <= 0xFEFF) { return true; } } return false;

文字や数字の判定 — char.IsLetter — char.IsNumber — char.IsWhiteSpace — char.IsControl

括弧の判定 — 括弧として対応するものを定義して、判定する — 一方の括弧と対になる括弧の組合せも定義しておく — 不等号も扱う必要がある

文字の分類方法 — 文字列内の文字を１文字ずつ判定 — 同種の文字が続く範囲をトークン化

トークンの定義 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 class Token { // 文字列内での開始インデックス public readonly int startIndex; // 長さ public readonly int length; // 種類 public readonly TokenType type; } // 右から左にレイアウトするものかどうか public bool isRightToLeft;

例1 ( ‫ا‬ ‫ل‬ ‫ع‬ ‫ر‬ ) a b c

例1 ( 左括弧 ‫ا‬ ‫ل‬ ‫ع‬ アラビア文字 ‫ر‬ ) 右括弧 a 空白 b c アラビア文字以外の文字

分類した文字の向きを判断する

右から左 左から右 アラビア文字 アラビア文字以外の文字 アラビア文字の数字 数字 どちらの向きもあり得る 括弧 記号 空白

例1 ( 左括弧 ‫ا‬ ‫ل‬ ‫ع‬ アラビア文字 ‫ر‬ ) 右括弧 a 空白 b c アラビア文字以外の文字

例1 ( ‫ا‬ ‫ل‬ ‫ع‬ ‫ر‬ ) a b c 左括弧 アラビア文字 右括弧 空白 アラビア文字以外の文字 ← ← ← ← →

右から左 左から右 アラビア文字 アラビア文字以外の文字 アラビア文字の数字 数字 どちらの向きもあり得る アラビア語以外の文字が来ない限りは、 括弧 基本的に右から左 記号 空白

例2 ‫ا‬ ‫ل‬ ‫ع‬ ‫ر‬ ( a b c ) アラビア文字 左括弧 アラビア文字以外 空白 アラビア 文字以外 右括弧 ？ ？ ？ ？ ？ ？

例2 ‫ا‬ ‫ل‬ ‫ع‬ ‫ر‬ ( a b c ) アラビア文字 左括弧 アラビア文字以外 空白 アラビア 文字以外 右括弧 ？ ？ ？ ？ ？ ？

単純に判断できる部分を埋める ‫ا‬ ‫ل‬ ‫ع‬ ‫ر‬ ( a b c ) アラビア文字 左括弧 アラビア文字以外 空白 アラビア 文字以外 右括弧 ← ？ → ？ → ？

英字の間の空白は？ ‫ا‬ ‫ل‬ ‫ع‬ ‫ر‬ ( a b c ) アラビア文字 左括弧 アラビア文字以外 空白 アラビア 文字以外 右括弧 ← ？ → ？ → ？ “ab c”? “c ab”?

英字の間の空白は？ ‫ا‬ ‫ل‬ ‫ع‬ ‫ر‬ ( a b c ) アラビア文字 左括弧 アラビア文字以外 空白 アラビア 文字以外 右括弧 ← ？ → → → ？ “ab c”? “c ab”?

どちらの向きもあり得る文字の向き — 前後の文字や間に含まれる文字の向きで決まる — アラビア文字以外の文字の後で、アラビア文字以外の文字、 数字などの挟まれた範囲は、左から右 — 括弧で囲まれた範囲に、アラビア文字、アラビア文字の数字 が入っていない場合は、左から右

括弧の向きは？ ‫ا‬ ‫ل‬ ‫ع‬ ‫ر‬ ( a b c ) アラビア文字 左括弧 アラビア文字以外 空白 アラビア 文字以外 右括弧 ← ？ → → → ？

括弧の間にアラビア語はないので、左から右 ‫ا‬ ‫ل‬ ‫ع‬ ‫ر‬ ( a b c ) アラビア文字 左括弧 アラビア文字以外 空白 アラビア 文字以外 右括弧 ← → → → → →

レンダリングするとこうなる ‫ا‬ ‫ل‬ ‫ع‬ ‫ر‬ ( a b c ) アラビア文字 左括弧 アラビア文字以外 空白 アラビア 文字以外 右括弧 ← → → → → →

文字を並び替える 文字コードを表示用に変換する

という話の前に……

右から左にレイアウトする文字を どうやってレンダリングするか？

通常のテキストは、左から右

右から左のレンダリング結果を得る方法 — データを逆にする — レンダリングを逆にする

データを逆にする

入力データを逆順で格納し直す 0 1 2 3 4 あ い う え お 0 1 2 3 4 お え う い あ

あれ、もしかして、解決？

そうは問屋が卸さない

幅が足りずに改行が行われた場合 入力 あいうえお 逆順化 おえういあ 期待 えういあ お 「お」が改行されてほしい

幅が足りずに改行が行われた場合 入力 あいうえお 逆順化 おえういあ 期待 現実 えういあ お おえうい あ

レンダリングを逆にする

ポリゴンの左右を逆にする時、 どうしますか？

Y軸を180度回転させる

文字も逆で読めない

文字毎に再度180度回転

右から左は正しくなった

左から右の文字は どうするのか？

この状態で左から右を正しく処理するには？ — データを逆にする — レンダリングを180度反転させた位置にずらす

この状態で左から右を正しく処理するには？ — データを逆にする — レンダリングを180度反転させた位置にずらす

文字を並び替える 文字コードを表示用に変換する

文字を並び替えた場合の利点

レンダリング処理が簡単

改行が行われない文字列に対しては こちらの方が効率がいい

文字コードを表示用に変換する

変換が必要な文字 — アラビア文字 — 右から左の括弧

アラビア文字の変形 — 単語内での記述位置 — 特定文字の組み合わせ

アラビア文字の変形 — 単語内での記述位置 — 特定文字の組み合わせ ( 左括弧 ‫ا‬ ‫ل‬ ‫ع‬ アラビア文字 ‫ر‬ ) 右括弧 a 空白 b c アラビア文字以外の文字

アラビア文字の変形 — 単語内での記述位置 — 特定文字の組み合わせ ( 左括弧 ‫ا‬ ‫ل‬ ‫ع‬ アラビア文字 単語 ‫ر‬ ) 右括弧 a 空白 b c アラビア文字以外の文字

変形の手順 — 入力データをプレゼンテーションフォームに変換 — 文字の並びに合わせて、適切な形状に置換

入力データをプレゼンテーションフォームに変換 — 単独系のプレゼンテーションフォームと紐付けるだけ — ‘‫’ﻝ‬と‘‫’ﺍ‬の連続は、‘‫’ﻻ‬に変換

シャクルを外す

入力データをプレゼンテーションフォームに変換 — 単独系のプレゼンテーションフォームと紐付けるだけ — ‘‫’ﻝ‬と‘‫’ﺍ‬の連続は、‘‫’ﻻ‬に変換 — シャクルの除外 – GPOS がないので正しい位置に出せない – 一部の省略できないものは、プレゼンテーションフォーム側でシャ クル付きの文字が定義されているので、そちらを使う

各文字の変形情報を定義 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 class ArabicFormSet { /// <summary>単独</summary> public readonly int isolated; /// <summary>末尾</summary> public readonly int final; /// <summary>先頭</summary> public readonly int initial; /// <summary>中間</summary> public readonly int medial; /// <summary>先頭、中間を持つかどうか</summary> public readonly bool hasInitialAndMedial; } /// <summary>尾字を持つかどうか(基本的にHamza用の例外)</summary> public readonly bool hasFinal;

各形状は規則的に定義されている 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 class ArabicFormSet { // フィールド } ArabicFormSet(ArabicLetter.PresentationForms isolated, bool hasInitialAndMedial) { this.isolated = (int) isolated; // Unicode上で末尾は単独から1つ、先頭は2つ、中間は3つズレた位置に格納されている // 先頭、中間を持たない文字の場合は、中抜けになるわけではなく、次の文字が詰めて配置されている final = this.isolated + 1; initial = hasInitialAndMedial ? this.isolated + 2 : 0xFFFF; medial = hasInitialAndMedial ? this.isolated + 3 : 0xFFFF; this.hasInitialAndMedial = hasInitialAndMedial; hasFinal = true; }

文字の並びに合わせて、適切な形状に置換 — 末尾かどうか — 先頭かどうか — 中間かどうか

単語の先頭、末尾以外の位置でも、 先頭、末尾の形状になる文字もある

直前が末尾なので、先頭 先頭の形状がないので、単独 中間の形状がないので、末尾

末尾かどうか 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 bool IsFinal(ArabicFormSet prev, ArabicFormSet current, ArabicFormSet next) { // 変形できない if (!current.hasFinal) { return false; } // 頭字、中字からの続きではない if (prev == null || !prev.hasInitialAndMedial) { return false; } // 自身が中間の形状を持っていて、次の文字に末尾の形状がある if (current.hasInitialAndMedial && next != null && next.hasFinal) { return false; } } return true;

先頭かどうか 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 bool IsInitial(ArabicFormSet prev, ArabicFormSet current, ArabicFormSet next) { // そもそも変形できない if (!current.hasInitialAndMedial) { return false; } // 先頭、中間から続く if (prev != null && prev.hasInitialAndMedial) { return false; } // 中間、末尾に続かない if (next == null || (!next.hasInitialAndMedial && !next.hasFinal)) { return false; } } return true;

中間かどうか 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 bool IsMedial(ArabicFormSet prev, ArabicFormSet current, ArabicFormSet next) { // そもそも変形できない if (!current.hasInitialAndMedial) { return false; } // 先頭、中間から続かない if (prev == null || !prev.hasInitialAndMedial) { return false; } // 末尾に続かない if (next == null || !next.hasFinal) { return false; } } return true;

右から左の括弧の変換 — 括弧の開きと閉じは、アラビア語でも文字コードが同じ ( 左括弧 ‫ا‬ ‫ل‬ ‫ع‬ アラビア文字 ‫ر‬ ) 右括弧 a 空白 b c アラビア文字以外の文字

‫(‬ ‫ا‬ ‫ﻟ‬ ‫ﻌ‬ ‫ﺮ‬ ‫)‬ ‫)‬ ‫ر‬ ‫ع‬ ‫ل‬ ‫ا‬ ‫(‬

‫)‬ ‫ا‬ ‫ﻟ‬ ‫ﻌ‬ ‫ﺮ‬ ‫(‬ ‫)‬ ‫ر‬ ‫ع‬ ‫ل‬ ‫ا‬ ‫(‬

これでテキスト部分の処理は完了です

‫‪c‬‬ ‫‪b‬‬ ‫‪a‬‬ ‫)‬ ‫ر‬ ‫ع‬ ‫ل‬ ‫ا‬ ‫(‬

‫‪c‬‬ ‫‪b‬‬ ‫‪a‬‬ ‫(‬ ‫ﺮ‬ ‫ﻌ‬ ‫ﻟ‬ ‫ا‬ ‫)‬

いざ、表示

……あれ？

理想 現実

レンダリングは 左から右のまま

‫‪c‬‬ ‫‪b‬‬ ‫‪a‬‬ ‫(‬ ‫ﺮ‬ ‫ﻌ‬ ‫ﻟ‬ ‫ا‬ ‫)‬

頂点データの処理

理想 現実

頂点データの処理 — 右から左 : 左右の位置を文字単位で反転 — 左から右 : 左右の位置をグループごと移動して反転

頂点データの処理手順 — 頂点データの生成 — 文字ごとの頂点データの設定

Text コンポーネントを拡張したクラスを用意 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 class ArabicText : UnityEngine.UI.Text { protected override void OnPopulateMesh(VertexHelper vertexHelper) { // ここに頂点データの処理を記述する } }

頂点データの生成

TextGenerator で頂点データを生成
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

class ArabicText : UnityEngine.UI.Text
{
protected override void OnPopulateMesh(VertexHelper vertexHelper)
{
Vector2 extents = rectTransform.rect.size;
var settings = GetGenerationSettings(extents);
// workerText には、アラビア語用に処理されたテキストが入っている
cachedTextGenerator.PopulateWithErrors(workerText, settings, gameObject);

}

}

// 頂点、行の情報を取得
IList<UIVertex> verts = cachedTextGenerator.verts;
IList<UILineInfo> lines = cachedTextGenerator.lines;

TextGenerator — テキストの頂点情報や文字、行の情報を生成してキャッシュ することができる — 生成した際にフォントテクスチャに必要なフォントが書き込 まれる — GPOSのデータに対応したデータが作られる(全てではない) — スペース区切りでの改行位置調整

文字ごとの頂点データの設定

使用するデータ — 頂点情報 — 行情報 — 文字を分類した際のトークン – 処理する文字の向きで処理方法が変わるため

トークン毎に処理

右から左の文字の処理方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

UIVertex[] buffer = new UIVertex[4];
for (int i = 0; i < batchVertexCount; ++i)
{
int bufferIndex = i & 3;
// 頂点の順番は、左下から反時計回り
int indexOffset = (i & 1) == 0 ? 1 : -1;
buffer[bufferIndex] = verts[batchStartVertexIndex + i];
// 文字の見た目も反転してしまうので、見た目は本来の通りになるように、左右を反転させる
buffer[bufferIndex].position.x = verts[batchStartVertexIndex + i + indexOffset].position.x;
buffer[bufferIndex].position.x += (center - buffer[bufferIndex].position.x) * 2;
// unitsPerPixel, roundingOffset の処理は、Text コンポーネントと同じなので割愛

}

if (bufferIndex == 3)
{
vertexHelper.AddUIVertexQuad(buffer);
}

左から右の文字の処理方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

UIVertex[] buffer = new UIVertex[4];
float blockMin = verts[batchStartVertexIndex].position.x;
float blockMax = verts[batchStartVertexIndex + (batchCharacterCount - 1) * 4 + 1].position.x;
float blockCenter = blockMin + (blockMax - blockMin) / 2;
float xOffset = (center - blockCenter) * 2;
for (int i = 0; i < batchVertexCount; ++i)
{
int bufferIndex = i & 3;
buffer[bufferIndex] = verts[batchStartVertexIndex + i];
buffer[bufferIndex].position.x += xOffset;
// unitsPerPixel, roundingOffset の処理は、Text コンポーネントと同じなので割愛

}

if (bufferIndex == 3)
{
vertexHelper.AddUIVertexQuad(buffer);
}

これで頂点部分の処理は完了です

リトライ

お、それっぽい……

が

ココ

隙間が空いてる

なぜ？

処理が足りていない

フォントのレイアウトデータ

アセンダーライン キャップライン ミーンライン ベースライン ディセンダーライン a セット セット幅

サイドベアリング アセンダーライン キャップライン ミーンライン ベースライン ディセンダーライン a セット セット幅

サイドベアリングは 左右均一とは限らない

左右反転するとズレる

CharacterInfo — 文字のレンダリング情報が取得できる

サイドベアリングの取得方法 — 左側 – CharacterInfo.bearing — 右側 – 取得できません

取得できる値から逆算

CharacterInfo.bearing a CharacterInfo.glyphWidth ? CharacterInfo.advance ?

全ての文字、入力パターンに対して、 正しいわけではなさそう

空白など一部を除き、おおよそ それらしき値が取れる

サイドベアリングの取得方法 — 左側 – CharacterInfo.bearing — 右側 – advance - glyphWidth - bearing (仮定)

文字の処理に当てはめる

CharacterInfo の取得 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 CharacterInfo info; font.GetCharacterInfo(character, out info, fontSize, fontStyle);

右から左の文字の処理方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// すでに処理済みのテキストの長さ
int alreadyPutLength;
for (int i = 0; i < batchVertexCount; ++i)
{
// インデックスの計算
int bearingOffset = 0;
if (bufferIndex == 0)
{
int characterIndex = i / 4;
char character = workerText[alreadyPutLength + characterIndex];
CharacterInfo info;
font.GetCharacterInfo(character, out info, fontSize, fontStyle);
int leftBearing = info.bearing;
int rightBearing = info.advance - info.glyphWidth - info.bearing;
bearingOffset = leftBearing - rightBearing;
}
// 頂点の処理
buffer[bufferIndex].position.x += bearingOffset;
}

// unitsPerPixel, roundingOffset の処理、VertexHelper に頂点を追加

左から右の文字の処理方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// すでに処理済みのテキストの長さ
int alreadyPutLength;
float blockMin = verts[batchStartVertexIndex].position.x – info.bearing;
float blockMax = verts[batchStartVertexIndex + (batchCharacterCount - 1) * 4 + 1].position.x;
// 最初の文字の左側のサイドベアリング分を補正
char firstCharacter = workerText[alreadyPutLength];
CharacterInfo info;
font.GetCharacterInfo(firstCharacter, out info, fontSize, fontStyle);
blockMin -= info.bearing;
// 最後の文字の右側のサイドベアリング分を補正
char lastCharacter = workerText[alrealdyPutLength + batchCharacterCount - 1];
font.GetCharacterInfo(lastCharacter, out info, fontSize, fontStyle);
blockMax += (info.advance – info.glyphWidth – info.bearing);
float blockCenter = blockMin + (blockMax - blockMin) / 2;
float xOffset = (center - blockCenter) * 2;
for (int i = 0; i < batchVertexCount; ++i)
{
// 頂点の処理
}

もう一度、リトライ

隙間消滅

検証

文字を入れ替えて レンダリングはそのまま 表示したものと比較

ピッタリ

注意点

反転する際の基準点を RectTranform の 中心から求めるとアライメントが逆転する

ともあれ……

最低限正しく表示できる

感想

超絶しんどいです！！

ご清聴ありがとうございました！