クメール文字が書けない
https://twitter.com/shiology/status/844712311885586433 https://gyazo.com/2d3a265a45cde946b3238a76789ce4ac
https://gyazo.com/6ccc8e84fbf61070fe72fb5183412547
書いたrakusai.icon
ほぼ同じ問題だが、クメール文字のほうが難しいrakusai.icon
これをコピペすると
https://gyazo.com/38891ad62dac1842baf99940330e4e0d http://wikitravel.org/ja/%E3%82%AB%E3%83%B3%E3%83%9C%E3%82%B8%E3%82%A2%E8%AA%9E%E4%BC%9A%E8%A9%B1%E9%9B%86
こうなる
ខ្ញុំមិនអាចនីយាយភាសាខ្មែរបានទេ។
この化けたLigatureをコピーしてTextEdit.appにペーストすると、元の文字列になるshokai.icon むずい...rakusai.icon
https://gyazo.com/e09256d29706352ee9cb689325d4f504
ภาษาไทย
https://gyazo.com/ef41ca29b07efa270c758f4bd5ab157e
วันนี้ฉันได้อ่านหนังสือมาดีแล้ว
これも問題があるっぽいrakusai.icon
https://gyazo.com/5e0a10c2c3c393e4c9e974aeb4a3dad4
文字データは全く変わらず、表示がこうなるだけ
つまりLigatureはいくらでも作れる
ある文字の連続をLigatureとして表示するかどうかは、表示する環境が決める
表示してみなければわからない
上の例では<span>=</span><span>=</span>と<span>==</span>を表示してみた時の幅が違ったら、Ligatureになっていると言えるかも
1つのspanに入れてみる
文字番号indexを付ける為にArray.from(str)で分割して、それぞれspanタグに入れるとこうなるが https://gyazo.com/fc6ba817ee55574c92009fd675fb3a07
Array.from(str)で分割した配列を1つのspanに入れると、fontが勝手にligatureにしてくれる
https://gyazo.com/f28e8d4fdfb898201891162ac1f1485b
https://gyazo.com/74cba151f71d2efc1de1cb46f9d803a5
国旗も表示される
問題のまとめ
たとえばすごーいを/icons/すごーい.iconと表示するLigatureもありうる
今後どんどん増えるだろう
Ligatureになる文字の組み合わせリストを作っても無意味
↓の「削除・選択キーの対応」に書いたが、選択・削除時に「一文字」としてい認識される範囲をエディタが把握することは使い勝手の上で重要
たとえば、Mac OSではクメール文字の一文字をちゃんと一文字として選択・削除できる
よってリストは必要
だからArray.fromで切ると
ブラウザに一度表示させてみるまでわからない
ブラウザにおいてLigatureとしての表示判定が行われるのは
<span>ab</span>のように同じDOM内で隣り合った場合だけ
<span>a</span><span>b</span>のように別のDOMに分割されるとLigature判定が起こらない
2〜5文字の組み合わせまでのLigatureがある？もっとあるかも…
2文字
🇯🇵 → https://gyazo.com/f1e08e2e7f5850d4139532cc4c03bd7d
3文字
ខ្ញ → https://gyazo.com/b1aef4ee0706370b473b639c0259ff66
4文字
ខ្ញុ → https://gyazo.com/1b6a15cdd82f4bdf35da8eb93303c119
5文字
ខ្ញុំ → https://gyazo.com/d862e5bc213b79fbae4cab8de64de712
7文字
👨👩👦👦 → https://gyazo.com/a40956ba0be72ae15128c2b77b584812
上の3,4,5文字のクメール文字は全て1文字のLigatureになる
ひと昔前のScrapboxでの描画の様子
https://gyazo.com/d3a19b3d93fad168ff7753fea523b57d
複数の文字をまとめて1DOMに入れてchar-indexを付けるのは、リンク記法など色々な所でやってきた
<span class='c-0 c-1 c-2'>abc</span>
なるほどakix.icon
Ligatureを探す
<span>ខ្ញុំ</span>と<span>ខ</span><span>្ញុំ</span>の表示結果を比較する
widthが大きくなったら、切ってはいけない場所を切ったという事
まず<span className='c-0 c-1 c-2 c-3 c-4'>ខ្ញុំ</span>を表示して、ちょっとずつ切っていくReact Componentが作れそう
文字サイズの変化によって分かるのは、スタイルが変わったことだけで、一文字という認識が分かるわけではなさそうrakusai.icon
例えば、アルファベットの "fi"は、fの右端とiの点が連結し、幅がすこし短くなることがある
https://gyazo.com/cb41ef65fb46e60c0236ba6f62ad1288
が、これは誤検出になる。表示の変化だけであくまで2文字である
削除・選択への対応
バックスペースキーを押したときや、文字選択した時に、どう処理するか
カーソルを移動したときに、カーソルが動く範囲の話
クメール文字の場合は、バックスペースを押したときに合成分はまとめて削除または選択されるのが話者にとって自然である。
ちがった。選択時や削除時は一文字扱いになるが、バックスペースだけは、部分的に削除されていく
なんて難しいんだ
なので一文字として認識しているものの区切りを付ける必要がある
エディタとしては、この問題があるのですべてのパターンを列挙する必要がある
rakusai.icon
作ってみた
Atomでは表示できた。実装を見てみようshokai.icon atomは、中途半端だった。rakusai.icon
クメール文字の្に対応していない
Atom懐かしいakix.icon