toshs memo

備忘録

MacOSのChromeからOverleaf v2を使っているとカーソルがずれるときの対処法

オンラインでLaTeXを書くことのできるOverleaf。 今までは旧バージョンのものを利用していたのだが、v2を利用しようとしたところ編集画面で問題が発生したので、その時のメモ。

環境

問題

文字を入力しているとカーソルがどんどんずれていく。 f:id:toshs:20180731031734p:plain

原因

フォントが固定幅ではないのに対し、カーソル位置を固定幅を元に計算しているのでズレが発生する。

なぜChromeだけで発生するのかというと、他のブラウザ(Safari, Firefoxのみ確認)では代替のフォントとして固定幅のフォントが用いられるのに対し、Chromeでは固定幅ではないフォントが用いられるからである。

もっと具体的な原因はこれである。

MacのGoogle Chromeの固定幅フォントのデフォルトが等幅ではないOsakaな件 - Qiita

対策

対策は主に2つある。

  1. フォントをDefaultや「Lucida」ではなく「Monaco」を使う。
  2. Osakaのレギュラーフォントを無効にする。

1. フォントの変更

手順はシンプルで、左上の「Menu」から

f:id:toshs:20180731032810p:plain:w300

となっているのを

f:id:toshs:20180731032807p:plain:w300

と変更する。 「Monaco」であればMacに標準搭載されているはずなので、正しく表示される。

ただし、Overleafへの対策なので、他のサービスで同様の現象が発生する可能性がある。 今の所Overleaf以外で遭遇したことはないが、根本的に解決したい場合は次をおすすめする。

2. レギュラーフォントの無効化

Chromeの固定幅フォントはなぜか固定幅ではないOsakaフォントが指定されるという問題が昔からあるらしい。 手順は以下の通り。

  • Font Book.appを開く

  • フォント名「Osaka」で検索すると、「レギュラー」と「レギュラー-等幅」がヒットする f:id:toshs:20190111145056p:plain

  • 「レギュラー」を右クリックし、「”Osaka”を使用停止」を選択 f:id:toshs:20190111145327p:plain

OSのアップデートのたびにこの設定が元に戻っている(ような気がする)ので、再度この現象が発生したら設定を再確認してみるのが良い。

所感

当初text-renderingプロパティによる合字が原因かな?とも思いましたが、蓋を開けてみたらMacOS×Chromeの問題でした。

追記

2019/1/11 MacOS固有の問題のため、タイトルを変更しました。また、説明を補強しました。