How is high DPI handled in theme CSS

xtal256 · Unread post by **xtal256** » 2025-02-28, 05:14

I recently got new 4K monitors and set Windows to 150% scale, i.e. 144 DPI. Pale Moon handles this well, but some of the borders in the browser UI are 2px thick where I want them to be 1px (since it's not possible to have 1 1/2 physical pixels

).
As a workaround, I have changed the CSS of my theme to set the border width to 0.9px which seems to round down to 1 when at 150%. But I am wondering if there is any better way to control whether pixels sizes are rounded up or down when scaling to a factor that is not a whole multiple (e.g. 100%, 200%, 300%)?

Operating system: Windows 10, 22H2, 19045.5487
Browser version: 33.5.1
32-bit or 64-bit browser?: 64 bit
Browser theme (if not default): My own custom theme, based somewhat on the old Firefox 1.5 and Firefox 3 styles.
Installed add-ons:

Installed plugins: (about:plugins):

Unread post by **Moonchild** » 2025-02-28, 10:32

Mathematically, it is normal to round 1.5(e) up to 2. There is no better way than to fine-tune your theme to your liking when you want to depart from that by forcefully rounding down even if it's 1.5 or above. Mozilla does special-case some of this in Gecko but we don't (and have removed the IMO incorrect truncations that were present in Goanna that were inherited from Mozilla) since it's just not consistent to make these kinds of exceptions and introduce rounding errors deliberately and ambiguously. If not at 150%, then when should it become 2px? at 160? at 170? at 199.99? I hope you get my drift

BenFenner · Unread post by **BenFenner** » 2025-02-28, 14:01

xtal256 wrote: ↑
2025-02-28, 05:14
since it's not possible to have 1 1/2 physical pixels

Off-topic:
https://en.wikipedia.org/wiki/Subpixel_rendering

xtal256 · Unread post by **xtal256** » 2025-03-02, 23:45

Thanks Moonchild,

I certainly would not expect Gecko to fudge the numbers just to get some themes looking nice! If there is not a "proper" way to do this in CSS then I will settle for my current solution of adjusting the width to 0.9px.

As for subpixel rendering, I was thinking that might make borders (or any other thin lines) look blurry, but if there is a way to turn in on then I'll give it a try.

Pale Moon forum

How is high DPI handled in theme CSS

How is high DPI handled in theme CSS

Re: How is high DPI handled in theme CSS

Re: How is high DPI handled in theme CSS

Re: How is high DPI handled in theme CSS