minetの日記： 1.5px幅のborderが描きたいと思って 6
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で枠を描いちゃえばいいのか？
そして (スコア:1)
どうにか最小物理pxを利用できても今度は「1.npxのボーダーが描画したいわけですよ」と無茶がでるだけで、どこかで限界にぶつかるので文句自体が若干難があると思う。
正規化するなら、最小描画要素を論理px最小までで制御して、表示を縮小してる扱い(もちろん縮小によるあれこれはブラウザまかせ)くらいに要望は留めておいたほうが現実的かつ無難だとおもう。
see
もう逃げない。HTMLのviewportをちゃんと理解する - Qiita [qiita.com]
M-FalconSky (暑いか寒い)
Re:そして (スコア:1)
コメントありがとうございます。
＞ 正規化するなら、最小描画要素を論理px最小までで制御して、表示を縮小してる扱い
そうですね。私も落とし所はそこになるのかと思います。
どうしても非整数pxが厳密に欲しいときは、SVGとかHTMLとは別の仕組みを使って配置しろということになるのかなあ
論理ピクセルとか言い出すときに (スコア:0)
当座はしょうがないけど、将来的には画面の座標系をどう正規化して表現していくべきかっていう話にならないもんなんですかね？
デバイス・ピクセル比なんてものをアプリケーション層あたりなのに気にしないといけないなんて、「美しくない規格になる」って思わなかったんだろうか。
Re:論理ピクセルとか言い出すときに (スコア:1)
コメントありがとうございます。
これもブラウザ戦争のツケの一つなのかなぁと思ったり。
バッドノウハウ (スコア:0)
1px相当のボーダーの外側に、解像度に応じて半透明の1pxのボーダーでは駄目なのかな。（HTML側に手は入れられない？）
CSSだけなら、blurが思い付くけど、やっぱりボケるのかな。
Re:バッドノウハウ (スコア:1)
コメントありがとうございます。
既にあるHTMLに対して「全体的にちょっと太くしたり細くしたりできない？」くらいのものなので、HTMLに手を加えずborder並にお手軽に太さを変更できる方法を考えています。
別の線を重ねて足す手法はレイアウトに悪影響がなさそうなので悪くないと考えてまして、今こそoutlineの出番なんじゃね？と思ったり。
ただまあ、それをやっても嬉しいのは等倍ディスプレイだけで、高解像度ディスプレイで見ると二重borderになってカッコ悪いですけどね。。。
# 一昔前にはピクセルサイズの要素とborderを駆使して斜線や図形を描くデザインってあったけど、今のスマホで見るとガタガタのドット絵もどきに見えてダッセーなっていう悲しみ
# やっぱSVGで描くのが正義か