コードブロック内の和英フォントの文字幅比

[tsubolabo]

[tanaka-asami415]

@tsubolabo
ご意見ありがとうございます🙏
直近ではいただいたことがないご意見なので、過去に同様のご意見がないかも確認して検討させていただきます。
現状、対処方法はないため、お手数ですが画像を作成して対応いただけますと幸いです🙇

[akicho8]

そういえばそんなコメントをしたのを思い出しました
で、結局意図が伝わらずMarkdownの表を使えと見当違いのレスがあったのみでした

[Phroneris]

これ地味にずっと気になってました。同じ意見があって嬉しいです。
Windows 10、Google Chromeで閲覧しています。

Qiitaのコードブロックやインラインコードに適用されているフォント指定のCSSを拝見すると、

font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;

となっているわけですが、この中でWindowsに最初から入っているフォントはConsolas、Liberation Mono、Courier（Courier New）の3つで、いずれも日本語文字を収録していません。
Mac専用フォントと思しきSF MonoやMenloの日本語収録状況についてはよく存じませんが…、少なくとも大部分のWindows環境でQiitaを閲覧する限り、欧文や記号等にだけはConsolasが優先的に適用され、残りの日本語文字にはユーザーがブラウザーで設定している等幅フォントが適用されるような表示になると思われます。

例えば私はMigu 1Mが好きで自分の環境の各所で等幅フォントとして利用していますが、Migu 1Mには日本語も欧文も記号もモリモリ収録されているのだからQiita記事のコード部分では一貫してそれらを表示してくれれば良いものを、実際には上記の通りフォントが混ぜこぜに使われます。
そして、詳しくは調べてませんがConsolasの半角とMigu 1Mの半角（=全角÷2）の幅は明らかに違うため、手元のテキストエディターでは縦横きっちり揃っていたはずの等幅前提の日欧混植コードが、Qiita上では必然的にガタガタになってしまいます。

ユーザー側の閲覧時の自衛策としては、ブラウザーに拡張機能の類を入れてQiitaの表示をいじるか、Consolasの2倍に等しい全角幅を持つ日本語等幅フォント（あれば）をブラウザーで指定しておくとかになるのでしょう。
しかし、執筆ユーザーは個々の閲覧ユーザーがそういうマニアックなカスタムをしてくれることを期待するしか無いのだとしたら、それは不便というか最早非現実的です。
是非、Qiita側で統一的に解決していただきたいです。
ただまぁ、矢印・罫線・数学記号なんかの記号類については全半角のどちらの幅で表示すべきという「正解」があるわけでもなさそうなので¹²、仮に monospace 最優先のCSSにしたとしても執筆側と閲覧側とで真に統一的な文字幅表示になることは無いのでしょうけど…。
それでも必ずガタガタになる現状よりはマシかなと思います。

ということで、恐らく釈迦に説法な部分の方が多そうですが…、前提確認のためにも色々書いたら長くなってしまいました。
本件、改善を願います。

Footnotes

1. Miguフォント : M+とIPAの合成フォント > 数学記号や一部のギリシャ・ロシア文字が全角 https://mix-mplus-ipa.osdn.jp/migu/#mathsign
   （姉妹フォントMigMixとの間でも仕様が揺れている） ↩

2. Macのターミナルで全角記号を綺麗に表示したかった - Qiita https://qiita.com/seto-r/items/706d2c4d795dba7d42ed
   （丸や星すら半角扱いされ得る環境もある…？） ↩

[tanaka-asami415]

@Phroneris @tsubolabo @akicho8
色々とありがとうございます！
フォントファミリーについても見直してみます🙇

[akicho8]

余談ですがZennでも同様の問題を抱えているので期待を込めてIssueに上げたところ速攻却下されました(悲)
zenn-dev/zenn-community#448

[Phroneris]

あらら…。
最終手段がWebフォントなのは実際そうだし日本語フォントでそれやると遅くなるのも間違い無くそうですけど、でもそれはほんとに最終手段でしょうにねぇ。
もしQiitaがこの解決で先んじることができたら「オラッQiitaはやったぞ！」って見せに行けますね。

GitHubとかでこのズレが起きるのは「Consolas大好き欧米人がよ…」って感じでまだ受け止められますが、日本で生まれて日本で展開されてるはずのサービスでもそうなっちゃうのはほんとに閉口というか、「人類がよ…」としか言えなくなって悲しみが募ります。

[kskwtnk]

@tsubolabo @akicho8 @Phroneris
お待たせいたしました 🙏

今回は、ユーザーのみなさんのローカルに日本語対応したプログラミング用フォントがあればそれを表示する、という手段をとっています
根本解決とまでは至っていないのですが、まずは実現可能な方法で実装をしてみました

Webフォントはパフォーマンス上の懸念から使用に至れず
Windowで閲覧できる、和文欧文の揃ったプログラミング用フォントはデフォルトでは存在せず……
（BIZ UDゴシックは等幅でこそありますがプログラミング向けのタイプフェイスをしておらず除外しました）

人気のあるフォントを指定しています
一度みなさんの環境をご確認ください 🙏

[akicho8]

対応頂いたのにほとんどの環境で依然ずれてしまうのはなぜだろうかとCSSを確認したところただ Ricty が優先して使われるようになっているから、そのフォントを自分で入れている環境だけずれなかったってことなんですね (よく見れば最初にそう書いてあった)

font-family: "Ricty Diminished","Ricty","Myrica M","Migu 1M","Source Han Code JP","SFMono-Regular","Consolas","Liberation Mono","Menlo","Courier",monospace;

[kskwtnk]

@tsubolabo
Discussion冒頭の画像を改めて見直したのですが、もしかして普段はMSゴシックを使われていますか？
それなら対応できるかもしれません（少し怪しいですが…… 🙏 ）

@akicho8
iOSとAndroidはある意味予想していた通りではあるのですが、macOSのChromeとSafariで表示が違うのがすぐに検討がついておりません 🙏
もう少し調査してみますが、すぐの解決は難しいかもしれません……

@Phroneris
おお！よかったです！

[akicho8]

@xrxoxcxox
macOS の Safari のデベロッパーツールで試行錯誤しましたが無理でした
で、ググったところユーザーがインストールしたフォントは使えないと言っている人がいました

サファリのデフォルトフォント変更ができない
https://discussionsjapan.apple.com/thread/252840358

[akicho8]

@tsubolabo
MSゴシックは等幅フォントなので秀丸でMSゴシックをお使いなら、それに合わせて @xrxoxcxox さんが Qiita の CSS の font-family にMSゴシックを加えるので、そうすると見た目が秀丸と一致するようになるかもしれない (※Safariは除く)
といういう意図だと思いますよ

[kskwtnk]

@akicho8
Safariについての情報ありがとうございます！どこまでできるかわかりませんが、調査します！

また、MSゴシックの補足ありがとうございます！まさに、その通りです！

@tsubolabo
akicho8さんからいただいた情報にあるように、ブラウザによって表示できるできないが発生してしまう可能性はありますが、もう一度指定を変えてみます！

[kskwtnk]

@tsubolabo @akicho8 @Phroneris
こちらのDiscussion、ご意見いただきありがとうございました！

アナウンスをした通り、日本語を含むフォントでコードを表示するよう変更をしたのですが、その後多くのフィードバックをいただいております。
改めて検討した結果以前のようなフォント設定に戻そうと思っております 🙏
ご承知おきください 🙏

[kskwtnk]

@tsubolabo @Phroneris
しっかりとした実現に至れず申し訳ありません 🙏
いただいていたフィードバックですが、主に以下のような内容です

• 「標準のフォント」が良い
  • iOSで言えばヒラギノ角ゴシック、Androidで言えばNoto Sans JPなど、それぞれの環境ごとに標準となるフォントがあります
  • 細かな違いはあるのですが、要約すると「標準でないフォントが強制的に使用されるのが好ましく無い」という意見が多くを占めていました
• 指定されている中でも優先度の低いフォントを使用したい
  • 現在、Googleでの検索結果数をもとにざっくりとシェア率を推測してfont-familyの順番を設定しています
    • "Ricty Diminished","Ricty","Myrica M","Migu 1M","Source Han Code JP","SFMono-Regular","Consolas","Liberation Mono","Menlo","Courier",monospace
  • 例えばお使いの環境にRictyもMyricaもインストールされていて、Myricaの方が好きという場合でも、Rictyが使用されてしまいます
    • これはCSSの仕様上の問題で、Qiitaからはどうすることもできません
  • こういった場合に「Myricaを使う方法はありませんか？」といったお問合せもいただいています
• その他、フォント追加の依頼
  • 「自分は●●というフォントが好きなので、追加できないか」というご依頼も一部あります

上記をすべてあわせると、意図的にフォントを指定することでより多くのご要望が出てしまいそうな結果となりました

まだ詳細に設定できていないのですが、各ブラウザで等幅フォントを選ぶこともできます
Qiitaからはかなり少なめの設定を提供して「特にこのフォントが使いたい」という方にはブラウザ設定でオーバーライドいただく……というのも思案中です

ご理解いただけますと幸いです 🙇

[Phroneris]

ものすごく遅いお返事ですみません。
私達のような一般利用者にここまで詳しく情報共有をくださり、本当にありがとうございます。
思えば、昨年11月時点のご対応も「まずは実現可能な方法で」というお話でしたね。
問題ごと消滅してしまうのかと思ってつい残念がってしまいましたが、今後の改善を前提とした一時退却であるとすれば理解できます。

いや「標準フォントであるべき」派については正直理解できませんが…。
そのご立派な標準フォントが等幅フォントの用をなさないから問題なのに……。
等幅フォントがその名に反して等幅じゃなくなる（全半角混用で縦が狂う）ことよりも、全角文字が無くても生きていけるような英語圏が定めたデフォルトに厳格に倣うことの方が、そんなに重要なものなんでしょうか。
…まぁこれはここに書いてもその人達には届きませんね。ボヤキです、すみません。

「低優先度のフォントの方が好き」派については、個人的には今まで考えが至っていませんでした。
閲覧環境に何のフォントを入れているかはそれぞれの事情があり、その中で何が好きかがQiita指定の順番と一致するとは限らない、というのは確かに当然ですね。
ただ、本件の目的は利用者の好きな特定のフォントを選ばせることではなく、全半角の比率を統一することのはずです。
「全員の好みには応えきれないから、全員一律で全角文字の幅を不便にします！」と言われて、私はもちろん喜べませんけど、好みのフォントの要望を出した方々も喜ぶとはあまり思えません。

私の環境では今もまだMigu 1Mで表示されているので完全なロールバックはしていないようですが、するとしても上に書いたように今後の改善を前提としたものであることを願います。
また今後の根本的改善に際しては、全半角の比率の統一という理念にまず基づくこと、そしてできればそれが利用者側にもある程度周知される（少なくとも相反する要望への応答としては）ことを、切に願います。

でも「じゃあ絵文字の幅も絶対に統一しろよ」とか言い始めると死人が出そうな気はしますので、文字ってのは本当に厄介ですね…

[kskwtnk]

@Phroneris

でも「じゃあ絵文字の幅も絶対に統一しろよ」とか言い始めると死人が出そうな気はします

本件かなり難しく、既に我々は半分くらい死んでいることはお伝えしておきます 😵‍💫

この変更によって以下のような意見をいただいていまして、個別に考えるとどれも共感できます

• 和文欧文関わらず、幅を揃えたい
• system-uiのようなフォントであって欲しい
  • ある特定のフォントが好きでないから
  • 見慣れているから
• デスクトップでもモバイルでも、ブラウザやOSが違っても、フォントが統一されて欲しい
• Webフォント化してスピードを落とすのは辞めてほしい

一方で、これらすべてを叶えるのはかなり難しいです 🙇
どこかの要件を落とさないといけないとするのであれば、サイト上のfont-family設定を緩くしておいて、それぞれの環境でオーバーライドしてもらうのが一番マシなのではないか？というのが以前出した↓の案の背景です

まだ詳細に設定できていないのですが、各ブラウザで等幅フォントを選ぶこともできます
Qiitaからはかなり少なめの設定を提供して「特にこのフォントが使いたい」という方にはブラウザ設定でオーバーライドいただく……というのも思案中です

[Phroneris]

@xrxoxcxox

確かiOSとかは等幅日本語フォント自体入ってないんですよね。信じらんね～って感じですが…。
その時点でもう完璧主義的な全環境での完全対応などは望むべくもないので、逆に超ユルユルにして各自の設定の責任にするというのは現実的な線のひとつだろうと思います。
私が最初のコメントで

仮に monospace 最優先のCSSにしたとしても

と書いたのもその辺を想定してのことでした。

ともあれ、こうして真摯かつ具体的にご検討・ご対応いただき感謝申し上げます。

[yoshi389111]

今回のディスカッションも、関連で挙げられている Zenn の issue も、実際にはすべてのコードブロックをそろえてほしいというわけではなく、テキストでアスキーアート風に説明を書く際にだけ、和英の幅を2:1にしてほしい、ってことじゃないかと思います。

それだったらば、Qiita として特別なコードブロックを用意して、それに特定のフォントのスタイルを当てれば実現できないですかね？

例えば

```monospace
（略）
```

のように、和英を2:1にしたいときにはユーザーには monospace （でも、asciiart でも、もっと説明的な名前でも、なんでいいですが）という特別なコードブロックを指定してもらうようにする。

この時の、スタイルシートには、各環境のデフォルトの等幅フォントを指定する（例えば Windows なら "ＭＳ ゴシック" ）。
このコードブロックを使う時には、フォントの見栄えにはこだわりはあまりないと思うので。それよりもズレないことが最優先。

font-family: "Osaka-等幅", "ＭＳ ゴシック", monospace;

これなら少なくとも、各個人の好みのプログラミング用フォントがどうこう、という話は別の話として除外できると思います。

• 「標準のフォント」が良い ←標準の物しか使わない
• 指定されている中でも優先度の低いフォントを使用したい ←対象外とする
• その他、フォント追加の依頼 ←対象外とする

まあ、もちろん、OSにデフォルトの等幅フォントがないとか、ブラウザによってはうまくフォントが指定できないとか、別の問題があるみたいですし、そんなに簡単にコードブロックの種類を増やせるのかもわかりませんが。

（私としては「是非とも対応をしてほしい」というわけではなく、ディスカッションなのでちょっと思いついた「こんな方法もあるんじゃない？」という案を書いてみました。議論をまぜっかえしたみたいですみません）

---

ちなみに、Safari で文字幅がそろわないのは、プロポーショナルな "Osaka" が適用されるのか、サイズが微妙にずれるのか、フォントの指定が効かないのか、何が原因なんですかね（単に "Osaka-等幅" がデフォルトでインストールされていないだけ？）

Qiita の過去の記事にこんなものがありますが（font-sizeをうまく指定しないとズレる、という内容）

https://qiita.com/suzukima/items/be1ab67e0a9c9b11a8ef

大昔の Microsoft の製品（Word とか Excel）だと、等幅フォントのポイント数を 1.5 の倍数にしないとズレるみたいな話がありましたが（今の製品ではどうかの確認はしていないです）、この safari の話もすでに昔話なんですかね（約10年前の記事なので）。