minetの日記： 1.5px幅のborderが描きたいと思って 3
1.5px幅のborderが描きたいわけですよ。
1pxじゃ線が細すぎて、2pxじゃ太すぎる。そんなとき1.5pxで描画できれば良いのにと考えるのは自然（だよね？）
今どきのスマホとか高解像度ディスプレイでは、論理1pxが物理2pxとか4pxとかだったりするので、余裕で「1.5px」の線を3pxとか6pxで描けるのですが、昔ながら（失礼）のピクセル等倍のディスプレイ環境では整数px単位の太さの線しか描画してくれないブラウザばかり。
borderをアンチエイリアシングして小数点以下ピクセルのレンダリングしてくれたらなー、って思うんですよね。
とはいえ、よくよく考えると、
・1.5pxの線をアンチエイリアシングレンダリングすると、1pxの実線の両脇に薄い線がくっついた3pxになって滲み感が酷くない？
・その前に、その考え方だと、1pxのborderは、2pxに跨った薄い色の太い線のようにレンダリングされない？
・いやCSSでのborderはSVGのstrokeのような「境界の上をなぞる線」じゃなくてボックスによる領域だから、少なくとも一端はピクセル端に揃うし、整数px幅ならピクセルパーフェクトになるんじゃない？
そっかー、よかった。でも、
・結局ボックス内のコンテンツが小数ピクセルになっちゃうのは？しょーがない？
・borderと足して整数になる幅のpaddingを入れて整数に揃えれば良いんじゃない？
うん、行けそう。でもめんどーだね。
あ、まだ考慮しないといけない事あった。
・インライン表示の場合どうするよ？（テキストの右にボタンを並べるとか。）今どきテキストなんてサブピクセルレンダリングだぜ？
・全部spanとかで囲って幅を明示すれば？tableレイアウトやFlexboxもあるよね？
うーん。
ていうか、
CSSで、要素を論理／物理ピクセルに丸めて配置するか否かを指定できるようになってればいいのに。
って思った。
んでちょっと調べてみたら、
かなり古くからある問題だったのですね…
あっ、そうか、指定する時と実際にレンダリングされた時との間で丸めが発生していると、実行時にスクリプトで要素の幅を取得して色々したい時に面倒事が増えるのか。
さらに今どきでは論理／物理ピクセルの違いもあると。
# WPFやSilverlightで、要素のWidth（指定した幅）とActualWidth（実際にレンダリングされた幅）が別に取得できるようになっているのは、こういう問題を踏まえての事だったんだな…。
そして、色々考察してみたところで、現実のブラウザでborderをアンチエイリアシングレンダリングできないという事実は変わらず。
ああ、border代わりにbackground-imageでsvgで枠を描いちゃえばいいのか？
