Why aren't dashes pixel-perfect?

Hey @Tom_Auger2! I agree this is a little confusing. I’m happy to explain what’s happening; as far as feature requests, Remove "Half" from Line "Dashes Start" to match SVG spec and allow "Offset" or start from gap is sort of part of this question, and I’m not sure if there’s an open request for the other part (exact pixel values) but I promise you it’s one that we are aware of + thinking about :slight_smile:

The rough approach here is:

  • Start and end dashes are half-dashes. (This makes dashed rectangles look nice, because the corners have dashes that total the desired dash length instead of 2*length.)
  • Given that the start and end dashes are half dashes, we know there will be the same number of dash lengths and gap lengths (for example: halfdash, fullgap, fulldash, fullgap, halfdash = 2 dash lengths + 2 gap lengths, or 2 “full dash pattern” lengths)
  • Take the total length of the line segment, and divide by the full dash pattern length. Say we’re using your example of 19px line with a [1,2] pattern, so we can fit 19/3=6.33 dash-gap patterns into it, except we don’t render .33 of a pattern, so round down to 6 dash-gap patterns.
  • To fit 6 dash-gap patterns into 19, each pattern should take 19/6=3.167 pixels. We scale the dashes + gaps relatively, so in a [1,2] dash pattern, the dash takes up 1/3 of the space the gap takes 2/3 of the space, meaning the dash will be 3.167*.33=1.0556px, and the gap will be 3.167*.67=2.111px.

In an alternate scenario where we followed the pixel values exactly, you might end up with dead space at the end of your line segment, e.g.


(which is not to say we can’t or wouldn’t do it, but it’s hard to understand in its own way. Like I said though, this is definitely a feature request we’re aware of and thinking about!)

2 Likes