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