[css]Noto Serif JPで半角数を縦中横したらずれるという話

縦書きにすること自体レアだけどさ。

症状の説明
ズレについて
対策

症状の説明

こんな感じに作ったとして。

<article>
    <p>つれづれなるまゝに、日暮らし、硯にむかひて、<span class="text-combine">40</span>心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）</p>
</article>

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

article{
    writing-mode: vertical-rl;
    font-family: "Noto Serif JP", serif;
    p{
        margin: 0 2em;
        line-hegiht: 1.8;
    }
    span.text-combine{
        -webkit-text-combine: horizontal;
        -ms-text-combine-horizontal: all;
        text-combine-upright: all;
    }
}

通常、半角英数は縦書きにしたときに横向きで記述される。
「text-combine-upright」を設定した部分は縦中横扱いになるので、縦向きになる。

このとき、フォントをNoto Serif JPにしたら、左側に余白が生まれる。
というか、なんか右側にずれる。
デフォルトのフォントとかだとそういう事は起きない。

ズレについて

先に結論。
これでいい感じになる。

    span.text-combine{
        -webkit-text-combine: horizontal;
        -ms-text-combine-horizontal: all;
        text-combine-upright: all;
        position: relative;
        left: -.28em;
    }

左にずらす。
emだから、フォントのサイズに依存してくれるから、調整は不要。

肌感で絞っただけだから、厳密にはちょっと違うかもしれない。

で、原因はフォントに仕込まれた「プロポーショナルメトリクス」にあるらしい。
つまり字詰め。

CSSでは字詰めを設定する「font-feature-settings」というのがあるけど、これはフォントに依存する。
そして、Noto Sans JPにはfont-feature-settingsが効かない。

だから詰んでる。

対策

対策は３つ。

Noto Sans JPじゃないフォントを使う
頑張って調整する（当記事）
諦める、見ないふり

普段字詰めまで拘ることなんかないので、不慮の事故だと思う。
しょうがない。
勉強料だと思うしかない。

反映にタイムラグがあるWEBフォントを使っておきながら今回みたいな件があるなら、WEBフォントなんかやめちまえという考えも当然出てくる。
だけど、WEBフォントを使えば閲覧環境を問わず同じフォントで表示できるのが何よりも強い。

昔から稀に、閲覧環境で表示に違いが出ることを嫌う人種がいる。
WEBデザインは印刷デザインとかとは別物と思ってほしいんだけどなーって。
そこで争ってもだるいしなー。