◆ TextOptions.TextFormattingMode
◆ Display を選んで GDI 互換の表示方法にすれば細くなる

これの続き

自分でコンソール風なウィンドウを作ったら なんかフォントが太くてみにくいです
太い

作ったの
DebugConsole-sample


mintty のコンソール(理想)
mintty-sample


同じフォントとフォントサイズを指定しています

となると WPF の表示方法が問題に思えます
WPF のテキスト表示のオプションを探していると

  • TextOptions.TextFormattingMode
  • TextOptions.TextHintingMode
  • TextOptions.TextRenderingMode

というプロパティを発見
値を切り替えて表示を確認してみました

TextOptions

<Grid Background="#222">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <TextBlock Foreground="White" FontFamily="monaco" FontSize="10pt" Grid.Column="0">
        <TextBlock TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="Aliased">ABCDabcd</TextBlock><LineBreak/>
        <TextBlock TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="ClearType">ABCDabcd</TextBlock><LineBreak/>
        <TextBlock TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="Grayscale">ABCDabcd</TextBlock><LineBreak/>
        <LineBreak/>
        <TextBlock TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="Aliased">ABCDabcd</TextBlock><LineBreak/>
        <TextBlock TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="ClearType">ABCDabcd</TextBlock><LineBreak/>
        <TextBlock TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="Grayscale">ABCDabcd</TextBlock><LineBreak/>
    </TextBlock>
    <TextBlock Foreground="White" FontFamily="monaco" FontSize="10pt" Grid.Column="1">
        <TextBlock TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="Aliased">ABCDabcd</TextBlock><LineBreak/>
        <TextBlock TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="ClearType">ABCDabcd</TextBlock><LineBreak/>
        <TextBlock TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="Grayscale">ABCDabcd</TextBlock><LineBreak/>
        <LineBreak/>
        <TextBlock TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="Aliased">ABCDabcd</TextBlock><LineBreak/>
        <TextBlock TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="ClearType">ABCDabcd</TextBlock><LineBreak/>
        <TextBlock TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="Grayscale">ABCDabcd</TextBlock><LineBreak/>
    </TextBlock>
</Grid>

結果

wpffont100

左側が TextFormattingMode="Display"
右側が TextFormattingMode="Ideal"

上側が TextHintingMode="Animated"
下側が TextHintingMode="Fixed"

それぞれの 3 つが上から
TextRenderingMode="Aliased"
TextRenderingMode="ClearType"
TextRenderingMode="Grayscale"

です

右側の Ideal が全体的に太くて見づらくなっています
上下を比べると 左側 (Display) のほうは違いないように見えますが 右側(Ideal) のほうは 上側 (Animated) だと少しボヤけて見えます

3 つのレンダリングモードは 右側 (Ideal) だとわずかですが真ん中の ClearType が綺麗で他はちょっときたなく見えます
左側 (Display) だと上の Aliased だけギザギザしています


Aliased では bilevel anti-aliasing が適用されるようです
バイというと 2 つなので高度なことをしていなくて 比較的綺麗さが足りないものによくある名前です

Grayscale は黒と白の間の中間の灰色を使えるのでちょっと綺麗な Anti-aliasing
ClearType は Windows の設定で調整できるフォントの表示方法です

この結果からもわかりますが 綺麗にしたいなら ユーザが調整してる ClearType にしておくのが一番でしょう


Animated と Fixed はアニメーション中かそれ以外の通常の動いていない固定のテキスト それぞれに適した形にしているのだと思います
アニメーション中はちょっと太くなるくらいが見やすいのかな?
TextHintingMode には Auto があるので Auto にしておけばそのときに向いてる方にしてくれるはずです


最後に TextFormattingMode ですが
Display は GDI 互換の text metrics を
Ideal は WPF で使われてる ideal font metrics を使って描画されるようです

WPF ではすべて Direct3D で描画されるとか ベクタグラフィックスで正確なズームができるとか言われてますし Ideal はそのあたりに都合がいい方法というところでしょうか
GDI 互換は WindowsForms など昔からある GUI と互換のある表示方法なので 今回の理想の mintty みたいな普通に Win32API で作られてるソフトと同じ表示にするにはこっちを選べばいいということのようです

サイズ

サイズを変えてみます

まずはさっきと同じ 100%

wpffont100

80% 表示だとこうなります

wpffont80

Ideal は太すぎてさっきより見づらいです
Display も見やすいとはいえませんが 全体では左下ブロックの真ん中が一番かなと思います

右上の Ideal+Animated はもう光ってますよね

次に 300%

wpffont300

ズームにした場合は Ideal が綺麗です
ただやっぱりちょっと太いなぁとは思いますけど

Display のほうはズーム倍率によってはボヤけて見えます
倍率によっては Ideal よりちょっとノイズが見えるだけで綺麗です

また この倍率は FontSize とは別にズーム表示したものです
FontSize 自体を変えた場合は 大きくてもこの画像のようにボヤけて見えることは試した限りなかったです
FontSize に小数を入れてもくっきりでした

実害はなさそうなので デフォルトは WPF 用の Ideal ですが これまでのが好みなら Display にしても良さそうです



なんとなくですが Ideal のこの太さ Mac ユーザが好みそうな気がしました
Windows に MacType? を入れて太くしてる人をたまに見かけます
私的には ないわー と思ってますけど

しかし Windows は対抗したのか Windows 10 の游ゴシックで細すぎ かすれて読みづらい というヒドイフォントを出してくれました

極端じゃなくてもうちょっと間のいい感じにしてもらいたいですね


あと 透明度の方はさらに 続く です