CJK テキストエディタにおけるカーソル位置計算の問題と解決

角括弧 ） などの CJK 文字でカーソル位置がずれる現象が発生。

英数字: カーソル位置が正確

全角文字: カーソルが文字幅を超えてずれる

原因

CJK カーニング（文字間調整）により、測定値と実際の表示幅が一致しない。

measureTextWidth('）') → 17px（測定値）

実際の DOM での幅 → 10px 程度（ブラウザが圧縮）

理由:

フォントフォールバック（欧文フォント → 日本語フォント）

ブラウザによる自動幅調整

前後の文字との関係による動的な調整

Canvas での測定: 実際の DOM と測定値が一致しない

DOM 要素での測定: カーニングを反映できない

補正係数の追加: 文脈依存のため不可能

ブラウザのレンダリングエンジンが計算した実際の位置を取得する。

DOM ベースエディタでは測定値を信頼しない

Range API がブラウザ標準の解決方法

CJK テキストは特にカーニング・圧縮が発生しやすい