Re: [csswg-drafts] [css-borders] Add a 'hairline' border-width value (#3720)

The CSS Working Group just discussed `[css-borders] Add a 'hairline' border-width value`.

<details><summary>The full IRC log of that discussion</summary>
&lt;noamr> TabAtkins: people look for a hairline border-width, usually "as thinner as visible", something like device pixels<br>
&lt;noamr> TabAtkins: we saw that it's not something that we want to expose because it varies across devices. Authors don't anticipate this change<br>
&lt;noamr> TabAtkins: we'd like to avoid this<br>
&lt;noamr> TabAtkins: device pixels is not always well defined<br>
&lt;noamr> TabAtkins: also it's not clear what happens if it's zoomed<br>
&lt;noamr> TabAtkins: this can become very small<br>
&lt;noamr> TabAtkins: kbabbitt suggested to declare that hairline is exposed as 1px, but rendered in an implementation-defined way, probably something like device pixel aligned<br>
&lt;smfr> q+<br>
&lt;Rossen6> q+<br>
&lt;joshtumath> q+<br>
&lt;noamr> TabAtkins: we can define how hairline works for each CSS property, e.g. border/column etc<br>
&lt;noamr> TabAtkins: this would allow accessibility options for users who need to scale the hairline, and this won't mess up design<br>
&lt;flackr> q+<br>
&lt;noamr> TabAtkins: I suggest we take Kevin's proposal and add it to the border-spec and columns spec for multicol rule, perhaps to other specs that need this<br>
&lt;emilio> q+<br>
&lt;Rossen6> ack smfr<br>
&lt;noamr> smfr: I'm concerned that the painted width is different from the background. it means that the background is going to leak out of the hairline<br>
&lt;flackr> q- same q as smfr<br>
&lt;flackr> q-<br>
&lt;noamr> smfr: we can apply the same heuristic, but it seems weird that the geometry doesn't match<br>
&lt;Rossen6> q-<br>
&lt;noamr> TabAtkins: we should define that background area extends, but doesn't paint<br>
&lt;noamr> smfr: it doesn't work with box-shadow, adjacent boxes<br>
&lt;noamr> TabAtkins: I think it's a good thing, but probably usually fine<br>
&lt;kbabbitt> q+<br>
&lt;dholbert> RE the gap, you'd *only* get a gap on a HiDPI screen, which is weird<br>
&lt;noamr> smfr: my suggestion would be that the border-width would be some fractional implementation defined value rather than being different<br>
&lt;noamr> Rossen: I can see how this would work if it takes the outermost part of the pixel, e.g. there should never be background that extends out, same for shadows etc. Anywhere else, you're asking for all of the trouble smfr pointed out<br>
&lt;noamr> TabAtkins: I was describing it wrong. The details in the thread are to have it on the outside, exactly for these issues<br>
&lt;noamr> TabAtkins: let's go with that<br>
&lt;emilio> It reveals the underlying background unless it uses `padding-box` or so right?<br>
&lt;TabAtkins> yes<br>
&lt;noamr> Rossen: it's going to break things that align, like snapping/abs position etc<br>
&lt;noamr> joshthumath: similar note, the stripes function (not implemented yet). what would happen when we want multiple hairline-width stripes?<br>
&lt;noamr> TabAtkins: I think hairline wouldn't be a generic width value, it's a value for specific properties like border-width<br>
&lt;kizu> Fun fact: Chrome paints `2px double` border as 2 hairline lines with a gap<br>
&lt;noamr> TabAtkins: we'd probably won't paint stripes in a hairline-widdth border<br>
&lt;Rossen6> ack emilio<br>
&lt;Rossen6> ack joshtumath<br>
&lt;joshtumath> s/joshthumath/joshtumath/<br>
&lt;noamr> emilio: I was going to raise a lot of smfr's concerns. I don't object to hariline value, but I think we can change the border bounding algorithm we have to bound towards the nearest hairline<br>
&lt;noamr> emilio: the UA already aligns pixels e.g. 0.01 border-width to something that's hairline-like<br>
&lt;noamr> emilio: I would prefer to tweak the current border-width rounding to a hairline<br>
&lt;noamr> emilio: for shadows, it's not a huge issue. maybe it's just a matter of implementing stripes<br>
&lt;noamr> emilio: I much rather expose the current border-width rounding and allowing the UA to tweak it, or expose a round-ish function<br>
&lt;smfr> Blink and WebKit round a 0.0001px border up to a hairline; Gecko doesn't draw it<br>
&lt;noamr> Rossen6: also what does this mean for two hairline borders to collapse<br>
&lt;emilio> smfr: Probably pixel precision issue, `0.01px` does get rounded up<br>
&lt;noamr> kbabbitt: I heard that in border the hariline would be painted on the outermost hairline, and the background would fill under that<br>
&lt;noamr> TabAtkins: it's not that the background fills in, it's that the background is drawn under the border area<br>
&lt;noamr> kbabbitt: I want to avoid something where when a designer defines something on a high DPI device it breaks on a different device with lower DPI<br>
&lt;noamr> Rossen6: I'm not sure where this was going. There are still some questions<br>
&lt;noamr> Rossen6: this sounds like a great proposal and something that people are trying to do today<br>
&lt;noamr> Rossen6: is that something we want to pursue? Do we have a good starting point?<br>
&lt;noamr> TabAtkins: we don't have all the details yet<br>
&lt;noamr> TabAtkins: I propose we take this back to the issue<br>
&lt;emilio> TabAtkins: wdyt of `border-snap(&lt;length>)` which just snaps that length as a border or so?<br>
&lt;TabAtkins> emilio, that's part of why I don't *want* to rely on border rounding. "if you want a hairline, put in a value that is *probably* too small to actually paint, but not *too* small, and you have to guess what "too small" means"<br>
&lt;emilio> I think it's not incompatible with `hairline`, if we make hairline resolve to pixels and affect geometry...<br>
&lt;emilio> fair<br>
&lt;noamr> leaverou/leaverou_: join the call?<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3720#issuecomment-2654408011 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 12 February 2025 17:32:19 UTC