Monaco Editorで日本語の入力中に文字がずれる問題と解決方法

オンラインで利用可能な Markdown エディターを公開しています。 エディター部には VSCode でも利用されている Monaco Editor を採用しています。

今回は、Monaco Editor で日本語入力中に文字がずれる問題とその解決方法について記載します。

ずれが発生すると、以下のような状態となるため非常にストレスです。

入力を確定するとずれが解消されるため使えなくはありませんが、何とかしたいと思い調査しました。

いくつかの記事を確認すると、VSCode でも同じ現象が発生するようで、等幅フォントにすると解消するとのことです。 自分の場合は VSCode では発生せず Monaco Editor でのみ発生しましたが、試しに Font-family を変更するとずれが解消しました。

VSCode も Monaco Editor もデフォルトの Font-family は以下の通りです。

Consolas, "Courier New", monospace

等幅フォントにすると解消するとのことで、日本語ではおなじみの "MS ゴシック" を入れて以下のように変更しましたが解消しませんでした。

"MS ゴシック", Consolas, "Courier New", monospace

試しに "MS ゴシック" だけにするとずれが解消したので、ほかのフォントの指定が影響しているらしい、ということがわかりました。 一つずつ削除して検証してみると monospace を削除するとずれが解消することがわかりました。

というわけで、以下のような設定であればすべてずれは解消しました。

"MS ゴシック"
"MS ゴシック", Consolas, "Courier New"
Consolas, "Courier New"
"Courier New"

Font-family は先に指定したフォントが優先されるのに、一番最後に指定されている monospace の有無で動きが変わるのはなぜでしょうか。

とりあえずは解消しましたので、同じ問題に出くわしている方の参考になれば幸いです。