3

VSCode(Visual Studio Code)においてsettings.jsonでシンタックスハイライトの設定をしています。
なんの構文でもいいのですが"fontStyle"を"bold"に指定した場合にエディタ上で表示がずれて困っています。

例えばエディタ上で下記のようなテキストがある場合に"case"が太字だと"e"と"3"の位置が1~2ドット程度ずれます。

case  // 太字 (bold)。表示が下の行より少し右にずれる
0123  // 普通の太さ

settings.json設定例
"keywords": {
    "foreground": "#FFFFFF",
    "fontStyle": "bold",
},

この現象はフォントによって差異があり、ずれないものもあるのですが、肝心の半角全角比率2:1であるフォントMyrica MやMS ゴシックなどいくつかを確認したところだめでした。
これでは複数行で見た目を揃えたいときわかりづらくなります。
自分が知っている他のエディタでは見られない現象です。

対策について何かないでしょうか。

追記1
OSはWindows8.1
VSCodeのバージョンは1.33.1
です。

追記2
こちらをいじってみましたが変化は無くずれたままです。

window.zoomLevel
editor.fontSize
editor.lineHeight
editor.letterSpacing

boldを指定することで単純に文字が太くなってその分幅が増えているようです。
不思議なのは2対1等幅フォントを使う人にとって大きな問題だと思うのですが、検索しても同様の問題が日本語でも英語でもでてこないことです。(英語での検索については仕方が悪いだけかもしれませんが)
全角を使っているわけでもありませんし。
単にみなさんboldを使ってないだけなのでしょうか。(メリハリが効いて見やすくなるので使いたいです)

4
  • スタック・オーバーフローへようこそ! 問題を再現しやすくするため、使っているOSの名前と、使っているVS Codeのバージョンを追記して頂いてもよろしいでしょうか? 質問文下の「編集」から直接追記頂ければと思います。よろしくお願いいたします <(_ _)>
    – nekketsuuu
    Commented 2019年5月11日 8:46
  • ここ Enforce letter spacing in editor view #65105 に Issue が出ていて、feature-request, editor-renderingとラベリングされています。コメント等は無いので、今どうなっているかは分かりません。
    – kunif
    Commented 2019年5月11日 11:16
  • #65105を見てみました。 editor.letterSpacingは既にいじったのですが変化ありませんでした。
    – anlovean
    Commented 2019年5月11日 12:39
  • まあ、Issue そのものが letterSpacing を使ったけれど希望する機能じゃない、というものなので。@user34267さんも、その Issue に要望を追記すれば、希望者が多いということで、着手されるかもしれません。
    – kunif
    Commented 2019年5月11日 14:17

1 件の回答 1

6

まず初めに知っておいて欲しいのは、Visual Studio Codeは等幅フォント専用になるように作られているわけでは無く、プロフォーショナルフォントも使えるように、そのフォントがレンダリングされるがままに幅を取るようになっています。サクラエディタ等のような等幅フォント前提のエディタとはそもそもの作りや設計が異なるということです。

では、等幅フォントの場合はどうなるかですが、フォントが等幅にレンダリングされる限りは期待通りの動作をするでしょう。しかし、それが太字の場合、表示しようとするフォントに太字に関する情報が含まれていない(太字のグリフが無い)と単純にフォントの各線を縦横に太くするレンダリングを行ってしまうために幅が増加します。「Myrica M」や「MS ゴシック」などにはそういった太字の情報が無いため、横幅が少しずつ大きくなり、ズレてしまったと言うことです。

逆に言えば、太字の情報も含まれていて、横幅が変わらないようになっているフォントもあると言うことです。私の手元(Windows 10 1809、Visual Studio Code 1.33.1)では下記フォントについて、ずれるという現象は発生せず、太字の場合も横幅が変わらないままになっていることを確認しました。一度お試しください。(名前はVisual Studio Codeで設定するときの名前です。リンク先はダウンロード元です。独断と偏見によるお勧め順です。)

  • Sarasa Mono J
    Fira Codeのようなligature(合字)に対応したCJKプログラミング用フォントです。"editor.fontLigatures"trueにすると!=のように表示されるようになります。

  • Migu 1M
    古くから有るプログラミング用フォントで、日本語特有の文字も区別しやすいように工夫がされています。姉妹フォントのMigu 2Mでも可能です。

  • Noto Sans Mono CJK JP
    豆腐(文字が□になる現象)をなくすために作られたNotoフォントのうち日本語用Sans Serifフォントです。等幅のMonoはダウンロードできるNoto Sans CJK JPの中に含まれます。フォント一覧ではRegularとBoldの二つのフォントにわかれていますが、それらを付けずに指定することで、自動的に通常はRegular、太字はBoldを使うようになります。ただし、プログラミング用フォントではないため、0とOが識別しにくい等の欠点があります。

  • Source Han Code JP
    少し変わり種で、1:2ではなく2:3となるプログラミング用フォントです。好みによりますが、英字が大きいため、愛用している人もいるそうです。

私のPCに入っていたものは上のものだけですが、その他にもあるかと思いますので、探してみてください。

1
  • こちらに挙がっているフォントなどいくつかでずれないことが確認できました。 また、フォントについて理解が深まりました。 アドバイスを下さった他のみなさんを含めてありがとうございます。
    – anlovean
    Commented 2019年5月12日 12:02

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。