Tech Racho エンジニアの「?」を「!」に。
  • IT Tips

Windows版Slackでコードブロック内の丸囲み数字が小さすぎる問題の対策

多くのWindows環境で、Slackの ``` で囲ったコードブロック内に丸囲み数字があると、異常に小さく表示されますよね。

丸囲み文字なんて使いたくないのですが、お客さんから送られてきたメールを貼り付けたりするとよくあります。(これにコードブロックを使うのが間違いであって引用やスニペットを使うべきだと言う宗教論争は脇に置いておきます)

monospaceとしてよく使われるConsolasフォントの丸囲み文字が小さいのが直接的な原因です。tx のダンプを見ても明らかに小さい。

つまり、別のフォントが使いたいのです。

効果の検討

ブラウザのフォント設定:効果なし

Chromeのフォント設定でmonospaceのフォント設定を変更しても効果はありません。

これはSlackのCSSで

code, pre {
  font-family: Monaco,Menlo,Consolas,Courier New,monospace!important;
}

のような指定がされているからですが、正直余計なお世話です。設定させてくれ。

※Slackサポートにも一応要望は出していますが、すぐに対応される可能性は低そうです。

FontSubstitutesの設定:効果なし

HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\FontSubstitutes に文字列値を作って、Consolasを別のフォントに置き換えれば良さそうですが、FontSubstitutesはDirectWriteでは効果がないのでダメでした。

フォントを消す

Consolasをアンインストールすれば良さそうですが、流石になんというか怖いです。

SlackのCSSを書き換える

適当なChrome拡張でも作れば良さそうですが、それだけのために強い権限与えるのが趣味ではありません。

Consolasよりも強いフォントで丸囲み文字を表示させる

今回はこれにしました。MonacoかMenloに丸囲み文字があればそれで良いはずです。

ライセンス上もこれらのフォントを使うわけには行かないので、適当に手元にあったMigu 1Mフォントを名前だけ Monaco に書き換えてみました。

※MiguフォントのライセンスはWebサイトを参照ください。今回改変した偽MonacoフォントをIPAフォントに戻すには、削除した上でIPAフォントを新規ダウンロードしてください。

Copyright (C) 2002-2019 M+ FONTS PROJECT
Copyright(c) Information-technology Promotion Agency, Japan (IPA), 2003-2011.

まともなサイズになりました。

副作用としてMonaco指定されているWebサイトなども当然見た目が変わってしまいますので、好みのフォントでやることが大事です。
他のフォントでもいくつか試してみたところ、NotoSansMonoCJKjpもいい感じでした。

フォントの作り方

名前だけ書き換えたフォントの作り方です。

まずAFDKOをインストールします。

FROM ubuntu:20.04

RUN apt-get update && \
  DEBIAN_FRONTEND=noninteractive DEBCONF_NOWARNINGS=yes apt-get install -y tzdata

# install
RUN apt-get update && \
  apt-get install -y python3 python3-pip python-is-python3
RUN pip3 install afdko

あとはttxコマンドでnameテーブルを置き換えるだけです。

export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/usr/local/lib/python3.8/dist-packages/afdko.libs/

# nameテーブルをダンプします。
ttx -t name -o name.ttx migu-1m-regular.ttf

# 適当にmiguっぽい箇所を片っ端からMonacoに書き換えてみます。
vim name.ttx

# 置き換えます
ttx -m migu-1m-regular.ttf name.ttx

変ないじり方をして破壊したり、改変禁止のフォントのライセンスに違反したりしないようにしながらお楽しみください。

関連記事

Slackのシンタックスハイライト付き「スニペット機能」は使わないと損


CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。