points to pixels doint match up when exporting slices

[El Drijver]

I couldn't find this exact issue, so decided to post after running into this (again).

This is more like a situation where I don't understand why it is this way, rather than me being stuck. I can work around this issue and have done so for years. But it has been a source of frustration and each time I thought it was either my fault or something I was in the wrong mindset for, but in the end I still can't wrap my head around it.

Here goes. I currently have assets for a UI in an affinity designer file on Mac (Big Sur, running latest Affinty, but it has occured over the years). Everything is in points. I always make sure that groups or layers I use for slices are aligned on whole points. From the top left oriented in the 'transform' panel I retype the location in whole points because years of Affinity use has taught me that it might be 'partial' points or whatever, even with all possible snapping and forcing to 'whole points'. The slice I create for it matches up. This particular layer is 36ptx24pt. Exporting it in 1x, fine, exporting it in 2x results in 72px x 49px. This is maddening. I made sure everything is whole values-point-zero everywhere. Yet somehow the rounding goes wrong somewhere.

After searching for a while I realized this particular file uses artboards, which my colleague sometimes prefers. Lo-and-behild, the artboard that contains the layers is aligned on value-point-seven. (2677.7pt in this case, but the value itself is not the point). Aligning the artboart to 2677.0 manually fixes the export of my tiny asset. Why?

Why is it always so hard to get the desired, nay, expected pixel values from my slice exports. If a layer is 24pt in 1 dimension, honestly nobody wants it to be 49px when exporting it at 2x. The world coordinates of whatever encapsulating group / layer / artboard should not matter, should it?

This situation has been here for years. I have used AD since the week it was released, 7 years now. It is amazing software and I do -everything- with it, but this issue keeps popping up. Why is it this way? Am I doing something wrong?

[Hangman]

1 hour ago, El Drijver said:

the artboard that contains the layers is aligned on value-point-seven. (2677.7pt in this case, but the value itself is not the point). Aligning the artboart to 2677.0 manually fixes the export of my tiny asset. Why?

A pixel is the smallest unit you can have, exporting using slices will use whole pixel values (i.e., the top left origin of the slice will align to a whole pixel value, as will the slice width and height) so the artboards need to be pixel perfect to achieve 36px x 24px, 72px x 48px and so on when exported since it is not possible to export a fraction of a pixel so anything that isn't perfectly pixel aligned will get rounded up to the next whole pixel value, otherwise part of your artboard/graphic would end up being cropped...

All three artboards are 24px x 36px but because the second and third artboards are not perfectly pixel aligned the slice width (in this case) expands to both start on a whole pixel value and incorporate the entirety of the graphic, hence Artboard 02 and 03 slices are 25px, or 50px @2x.

[walt.farrell]

Welcome to the Serif Affinity forums, @El Drijver.

Where alignment is important, one should be looking at px (pixel) not pt (point) values. I'm confused by your description of aligning things on integer point values, because that would not be relevant as far as I know.

Also confusing, a mention of having a 2x export of something that is 24 pt come out as 49 px. That could be approximately correct for a 24 px slice, but not a 24 pt slice.

It would help to have some clarification of your question.

[El Drijver]

I understand the dance I have to do to get the 'correct assets' out of it. And I'm not trying to make assets that are half a pixel wide, I hope that is obvious.

The point is, why should the artboard be aligned on 'whole points'? Let's not talk about pixels in the source file. Each artboard contains its own coordinate system internally. The top left corner within each artboard is (0, 0), great. Yet placing an object there of 24pts will result in a 49px  @2x asset if the artboard itself is not placed on 'whole points exactly'. There is no usecase where anyone would want that to happen.

 

edit:

I generally work in points because we work with iOS interfaces that ultimately are based on points. You want to work with the size that the user 'sees' on the screen and not be bothered by how many pixels that is for each device.

Edited November 1, 2021 by El Drijver
added clarification for walt.farrell

[Hangman]

1 minute ago, walt.farrell said:

Where alignment is important, one should be looking at px (pixel) not pt (point) values.

I've assumed the document is 72dpi in which case pt and px are interchangable in as much as 72pt = 72px.

5 minutes ago, walt.farrell said:

Also confusing, a mention of having a 2x export of something that is 24 pt come out as 49 px. That could be approximately correct for a 24 px slice, but not a 24 pt slice.

Again, assuming a 72dpi document then this makes sense, as in 24pt equates to 48px @2x, and if non pixel aligned 49px makes perfect sense. Anything other than 72dpi then it wouldn't make sense...

[Hangman]

8 minutes ago, El Drijver said:

Each artboard contains its own coordinate system internally. The top left corner within each artboard is (0, 0), great. Yet placing an object there of 24pts will result in a 49px  @2x asset if the artboard itself is not placed on 'whole points exactly'.

If you set your units to six decimal points in the Preferences Panel, are your artboards still set at (0, 0). If 'yes' can you perhaps upload a sample document where you are seeing a 24pt @2x export, exporting to 49px, as that doesn't make sense?

[El Drijver]

72pt dpi correct. 

Slices themselves are indeed in pixels. So the 24pt asset comes out as 24px @1x. Indeed.

The artboard itself is indeed not aligned on whole points within the document where multiple artboards exist. So no, the artboard itself is not positioned at 0,0. (It was positioned at 2677.7pt for whatever reason as mentioned earlier). And I understand I have to fix that part to 'make it work'. But my question is, why? Why do I have to hunt this down? Within the artboard, the sizes of assets are defined as whole points on coordinates that are whole point values. 

If the artboard is on 0.0000, 0.0000 and my asset within the arboard is on (0.0, 0.0) with the size of 24pt, it will come out correctly as 24px, 48px and 72px for @1x, @2x and @3x. This is not broken, it works as intended. My question is, why does it matter if this artboard is not on whole points. Ultimately you have a 24pt object and I don't think there is a situation where anyone would want (or expect) that this object comes out as a 24px @1x and a 49px @2x assets (from a 24px slice), just because the arboard has a certain location in the document.

Don't get me wrong, I am not stuck here, I know what happens, but part of this 'align everything to whole points' struggle seems unncessary. I always just work around this issue, but I wanted to voice it this time.

I hope I clarified the points (heh) that were unclear before 😊

[Hangman]

10 minutes ago, El Drijver said:

My question is, why does it matter if this artboard is not on whole points. Ultimately you have a 24pt object and I don't think there is a situation where anyone would want (or expect) that this object comes out as a 24px @1x and a 49px @2x assets (from a 24px slice), just because the arboard has a certain location in the document.

I think this is a question that has perplexed many users and it simply comes down to the fact that Affinity apps (and as far as I'm aware, most other apps) work on whole pixel values when exporting slices, as in, you can't have a slice that uses fractional pixel values, so if you have an artboard positioned at 2677.7pt any slice origin is always going to be positioned at 2,677.00pt. Even though I totally understand where you're coming from, it just doesn't work that way, so you can't export something starting at 2,677.70pt and ending at 2,701.70pt despite the contained graphic being exactly 24pt and expect it to export at 24px.

If you keep in mind that a pixel is the smallest exportable unit, you effectively have an invisible grid on which both your artboards and graphics need to sit to achieve pixel perfect alignment and output, i.e., it's 'pixel perfect alignment' rather than 'sub pixel perfect alignment', you can't cut a pixel in half, so if your artboard is sub-pixel aligned then because any slice will only accommodate whole pixels it will include the bit before and after any sub-pixel values to avoid any cropping of your graphic.

I'm not entirely sure why the Affinity apps allow for sub-pixel alignment of artboards in the first place, I think if they restricted it to pixel alignment only this would make life so much easier for everyone and would also avoid this particular issue which has been discussed at length in numerous Affinity forum posts...

[Old Bruce]

3 minutes ago, Hangman said:

I'm not entirely sure why the Affinity apps allow for sub-pixel alignment of artboards in the first place,...

Difficulty with 300 PPI and whole centimetre x y dimensions.

Your explanation is probably the best I have read.

[Hangman]

12 minutes ago, Old Bruce said:

Difficulty with 300 PPI and whole centimetre x y dimensions.

Surely it shouldn't matter, if you're (technically) working in PPI then you're designing for screen, if you're working in DPI then you're designing for print. I can't think of any instances where a specification for screen would say something like 'your artwork must be 385.6px x 140.2px', it would always specify whole pixel values, as in the example cited on facebooks website...

For the best quality, your profile picture should be at least 320 pixels wide and 320 pixels tall.

Your Page's profile picture:

• Displays at 170x170 pixels on your Page on computers, 128x128 pixels on smartphones and 36x36 pixels on most feature phones.

Your Page's cover photo:

• Displays at 820 pixels wide by 312 pixels tall on your Page on computers and 640 pixels wide by 360 pixels tall on smartphones.
• Must be at least 400 pixels wide and 150 pixels tall.

So even if you were working at 300 PPI then you still have perfect pixel alignment as in 300 whole pixels per inch, which again raises the question of why Affinity Artboards allow sub-pixel alignment in the first place (well, to me at least).

Likewise if you're designing for print, you're no longer working with pixel values, you'd be using mm, cm, inches, feet or metres so fractional pixel values are no longer relevant. If you export an A4 file to a pdf for print, it exports at 210mm x 297mm (though were you to open it in any of the Affinity apps it shows as 210.000144 mm x 297.000083 mm with a Y offset of -0.000071 mm) but in real terms I would consider that irrelevant when considering print tolerances, as you'd use bleed to accommadate any minor discrepancies, should it be required.

[carl123]

10 hours ago, El Drijver said:

My question is, why does it matter if this artboard is not on whole points.

Explained here

 

[El Drijver]

4 hours ago, carl123 said:

Explained here

 

Thanks, this indeed covers the same question. At least they seem to be aware of the situation. 

Thanks @Hangman for expanding on the situation it does indeed occur between other conversions as well, but it is of course expected when a unit converts to fractions of a different unit. (while the point to pixel, in certain circumstances, should really just be 1:1). 

Thanks for all who chimed in.