Mobile app version of vmapp.org
Login or Join
Heady304

: Line dimensions in Sketch.app do not match display and output I have a rectangle in Sketch that is 100px height. I drew a line at 100px but it shows as 99.01px yet matches height of the

@Heady304

Posted in: #SketchApp

I have a rectangle in Sketch that is 100px height.
I drew a line at 100px but it shows as 99.01px yet matches height of the rectangle?

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Heady304

2 Comments

Sorted by latest first Latest Oldest Best

 

@Phylliss782

As Marc noted, there is that bizarre end cap behavior. Unfortunately, that doesn't explain the oddness you're seeing. I'm using the beta release now (version 3.3.1) and this problem persists.

Bottom line:

Sketch.app has a bug with line coordinates

There, I said it. But I don't totally blame them. A line (width or height, one dimension, kinda) is an awkward thing to snap to a pixel grid (width and height, two dimensions). So I understand how Bohemian ended up in this predicament. Look at the X2 value below — it's just dumb.



But Sketch is not alone

Illustrator had (has?) unpleasantness with snapping lines to a grid too. I haven't used it for UI in a while (Sketch took the torch), but Illustrator would always give me lines sitting between pixels. It made a worse mistake and aligned the points of the line to the grid. Unless the line weight was an even number, this would result in half pixel fogginess. No good.

The work around

Both Sketch and Illustrator know how to put a rectangle on a pixel grid (2D on 2D action). Draw a rectangle to the dims of your line (eg 1px high × 300px wide) and viola! Perfect, comprehensible coordinates.



I found this to be a necessity in Illustrator to avoid blurry lines. In Sketch, it's not required since the display and export are correct. This is purely for the obsessives among us that are always checking dims out of habit.

10% popularity Vote Up Vote Down


 

@Pierce403

Lines in Sketch have end caps, extending them 0.5px on each end.




I drew a line at 100px but it shows as 99.01px yet matches height of the rectangle?


99px + 0.5px cap on one end + 0.5px cap on the other end = 100px.
(I’m not sure where the 0.01px comes from.)

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme