文字の高さ位置のゆらぎ
ブログスキンをアレンジしてグローバルメニューに独自アイコンを置いていますが、このアイコン枠とアイコン絵（実際はフォント）との配置が、微妙にズレる事があります。 ブラウザの表示拡大率を変えると、枠の中でアイコン絵が微妙に上下にズレるのが判ります。 ここでは、これを「ゆらぎ」と言っています。
スキンアレンジを手掛けると、同様の事は各所で遭遇します。 文字が複雑な計算を元に描画される事が原因と思いますが、高さの位置が思い通りに定まらず苦労します。 要するに綺麗にアイコン絵を枠の真ん中に配置したいわけです。
賢いやり方は、高さのゆらぎが目立たない様に、上下の配置間隔を広くする事です。 しかし、ボタンデザインの場合は枠サイズだけ大きくすると不格好です。 その対策として、私が最近試みている、CSSで小数点以下の端数を使う手法を紹介します。 それを持ってしても、このゆらぎから完全に逃げることは出来ませんが。
（ブラウザによるレンダリング結果の違いは、ゆらぎより大きなズレを生じる場合が多いですが、これは後で検討するつもりです）
初期のPCでは、フォント描画方法が原始的で、この様な問題は無かった様に思います。 美しいフォントを手に入れた代償としてこのゆらぎ問題があるとしても、ブラウザやPCシステムの今後の発展で、いつかはこの問題も解決される様になるでしょう。 それまではあがいてみるのも、何かの役にたつ事がある様な気がします。
ゆらぎの実情を調べる
私のグローバルメニュー上のアイコンをサンプルにして、このゆらぎの状態を調べて見ます。 アイコン絵の実体は、アメーバがデフォルトの「ameba-symbols」というシステムフォントです。
CSSでアイコン配置に関係する部分に、「position:relative;」「top: ～ px;」のコードを追加して、その「top値」を調節してアイコン絵の表示位置を調べました。
「top値」を変化させるとアイコン絵の高さ位置が変化します。 この時、表示位置は段階的に変化します。 これは、ブラウザが表示位置を整数のピクセル値としてPCに送り出すからです。 従って、どんなに高解像のモニターでも、表示位置の変化は段階的になるはずです。
ブラウザ内部では、高さ位置計算は小数以下の精密な計算をしています。 ここでは「top値」を小数点以下1桁で変化させていますが、実際には小数点以下2桁の値で表示位置が変化します。 例えば「top: 0.46px」を「top: 0.47px」に変えた時に高さ位置が変わる事があるわけです。 もっと下の桁で変化するかも知れませんが、ここは便宜上で小数点以下1桁で調べました。
以下は、Chrome 100%の拡大率での表示を、説明のため拡大したものです。
●「top: -0.5px」～「top: 0.4px」のアイコンの状態です。
この範囲の指定では、私の本来の設計通りで（つまり「position: relative」指定が無いのと同じ）アイコン絵は上手く枠のほぼ真ん中に収まっています。
●top値を減らす側に「top: -0.6px」とした所から、アイコン絵は上に1px高い位置に表示されます。 その位置は「top: -1.5px」まで続き、「top: -1.6px」から更に1px高い位置に移動します。
●top値を増す側では、「top: 0.5px」から1px低い位置に表示され、それは「top: 1.4px」まで続きます。「top: 1.5px」から更に1px低い位置に表示されます。
以上の様子から、次のことが考えられます。
◎表示位置の変化は、小数以下の特定のtop値で切り替わる
（切り良く整数のtop値で配置が変化する場合はむしろまれです）
◎100%の場合は、おそらく境界のtop値は1pxずつの等差らしい
●さて、ブラウザの拡大率を変化させると、アイコン絵の高さ位置にゆらぎが生じます。 Chromeのそれぞれの拡大率で、アイコン絵が丁度枠の中央に来る「top値」を調べて行くと、ゆらぎの実情が見えて来ます。
下は、実際に良く使われるであろう拡大率100%～150%の範囲で、理想的な高さとなる「top値」を調べて表にしたものです。
上表から、Chromeでは「top: -0.2px」～「top: 0.1px」（緑の帯の範囲）としておけば、アイコンは丁度真ん中に表示されるという事が判ります。
ゆらぎの影響を受けにくい配置設定
今回のサンプルの場合は、「top: 0;」とするだけで、ゆらぎを回避する事が出来ます。 しかし、上の表はこのサンプルの場合だけの結果です。
例えば、調べれば下の様にシフトした結果となる場合は普通にあります。
こんな場合、アイコンを真ん中に表示できる指定は、「top: -0.2px;」等という小数値の指定になります。
手間が必要ですが、同様の方法でゆらぎの状態を細かく調べれば、少なくとも1つのブラウザについては、ゆらぎを排した配置を実現できそうです。 帯が描けない位に「ゆらぎ」が大きい場合は、フォントの配置に至るまでの周囲の指定を見直すと改善する事があります。 いくらDevToolsを睨んでも判らない時がありますが、全ての表示位置は計算で導かれていて、原因がある事を忘れてはならないでしょう。