Affinity Designer 2: creating a website. The 'graphic' measurements don't match...I'm confused!

[GT70]

Hello everyone.
Surely I'm doing something wrong or don't understand, but I'd like to be sure that this is the case and not have a problem with some kind of bug instead.
So, I'm restyling a website. To help me with the size of the graphics I decided to take a screenshot of one of the pages in the program I'm using to create the pages (Sparkle) and import it into Affinity Designer to work on it.
Unfortunately when I paste the screenshot, it appears immensely larger than it should be.

Measurements in hand: on Sparkle I have a page set to 1920px. The settings are correctly set on the programme. As a further check, I also used a small programme that measures the actual screen size (the programme is called Free Rule).
See the image is number "1" (where the workspace is named 'page'). Here the measurements are correctly set to 1920px.

However, when I paste the screenshot into the Affinity work table I get different measurements.From image 2 (the one with the work table named "work") I get an image that now measures 3674px! Whereas the work table is correctly sized at 1920px.

What am I missing? What am I doing wrong? Does it have to do with the screen resolution distorting everything? Currently my screen settings are 3840x2160...Could the solution be to shrink the screenshot to fit within the 1920 set in Affinity?
I am very confused...
 

[thomaso]

Your two screenshots aren't really useful since we don't know …

… your zoom level in Affinity,
… your scaling setting in FreeRuler,
… your monitor resolution (-> PPI/DPI, pixel density, pixel size),
… the scaling value of the placed image.

They all influence each other, so I don't see an issue or any "distortion" in your screenshots.

[GT70]

Thank you in the meantime for your reply.
So:
- Affinity level is to 100%
- The measurements in Free Ruler are in pixels
However, I cannot find the density in Free Ruler because the version I have does not seem to have this option.
So if the problem is density, I wouldn't know, although as it's a monitor it should be around 72DPI (which is what I measured in Affinity).

 

[thomaso]

2 hours ago, GT70 said:

I cannot find the density in Free Ruler because the version I have does not seem to have this option.

I just noticed that even my FreeRuler conversion setting actually does nothing, neither on the macbook's retina screen nor on an external monitor. Means FreeRuler is not really helpful for a quick check of the number of pixels of an object.

3 hours ago, GT70 said:

I decided to take a screenshot of one of the pages in the program I'm using to create the pages (Sparkle)

Also the pixel dimensions of this screenshot depend on monitor resolution parameters. If the resulting screenshot of a 1920 px page in Sparkle has another size than 1920 px this indicates an effective monitor resolution different than 72 dpi. – What pixel size does your Explorer or Finder report for that screenshot?

However, if you want to create images in 1920 px width than you can place the screenshot in Affinity and just scale it accordingly to match your 1920 px artboard. If you export with the wanted pixel dimension setting you will get that size, independent of your monitor's or Affinity document's resolution. Just make sure to stay with pixels as unit.

(… by the way, avoid decimal pixels as shown in your screenshot, they may cause rounding on export and results that may vary by 1-2 pixels from your expected size.)

[debraspicher]

If you don't mind, could you take a screenshot of the Sparkle viewport @ 100% where it claims it is a 1920px * document and simply paste it straight into reply here... we can measure on our end as a sanity check...

As a general answer to your inquiry:

If you are using a high DPI monitor and have enabled any display scaling in OS, your in browser viewport will be blown up slightly depending on how high you are set... 125%, 150%, 200% scaling, etc... I don't know that Sparkle would sense this happening as it's a client-side setting (typically), but generally speaking all web content as it relates to the DOM behaves this way as a rule for usability purposes and it's actually harder to tell things to go back down to 1:1 again. (Creating custom media queries, changing under the hood browser settings, writing out scripts, etc...)

In FF Developer Edition, the in-browser ruler (F12) shows containers according to how they are calculated in the DOM (regardless of DPI scaling). In reality it's scaled up physically on the screen based on any scaling in the OS... for example, this forum's container is 1310px width at max stretch in code on a 100% dpi screen... but move it to my other monitor which is scaled to 150%, and taking a screenshot and measuring in Affinity as a 1:1 measurement, it is 1965px wide (150% larger)...

You have a few options:

You could temporarily change your display scaling back to 100% and take your screenshots this way.
You could hook up an additional monitor and use that at 100% to avoid the issue entirely.
You could resize your screenshots within your grid, then save magnifications (125, 150%) respectively in Navigator to get a better idea of what it will look like at higher scales... I actually do this a lot when working on layouts (edit) and also I to set F2-F3 to under Shortcuts > View > Move to Next/Previous View point to toggle between them once they are saved... a hidden gem...

Or, you could install a browser on your machine for developer purposes where you have painstakingly made sure it is displaying all content at 100% irrespective of your system settings... personally, I prefer to check on additional monitors and machines anyway for multiple reasons...

Aside: I don't know what "Free Ruler" is, but I suspect the "custom PPI" settings as it relates to its own purpose likely has to do with when you are checking for physical units, such as inches. Other programs ask you to put up a physical ruler to the screen and then adjust a slider until the cm/inch lines on both the digital and physical ruler match up and then the PPI is calculated this way... Affinity somehow detects this out of the box and when working in inches, a "life size" preview can be seen with Ctrl + 8, which is very handy... whereas in Clip Studio, etc, we still use the hold a ruler to the screen method to find the device(monitor) PPI...

Example of the hold up a ruler to the screen method:

[GT70]

@thomaso

Thank you for your pointers, eventually I will do as you say by scaling everything proportionally so that it all matches. At least I hope so.

@debraspicher

Thank you for your very professional explanations. My English is not as good as it sounds and I think I only understood part of your explanation. 
In any case, I attach the screenshot of the total window of the Sparkle working environment. Obviously having a monitor set to a higher resolution, if you measure the whole image, you will not get the 1920px you are looking for. The part you are interested in is the part indicated in width by the yellow box that measures 1920px.
Above you can see that Sparkle is set to 100% and that the working area of the page is 1920px (which is the space where the yellow box is)
I hope this solves the mystery...
PS: sorry, but for privacy I had to blur parts...

 

[debraspicher]

On 12/18/2023 at 9:46 AM, GT70 said:

@thomaso

Thank you for your pointers, eventually I will do as you say by scaling everything proportionally so that it all matches. At least I hope so.

@debraspicher

Thank you for your very professional explanations. My English is not as good as it sounds and I think I only understood part of your explanation. 
In any case, I attach the screenshot of the total window of the Sparkle working environment. Obviously having a monitor set to a higher resolution, if you measure the whole image, you will not get the 1920px you are looking for. The part you are interested in is the part indicated in width by the yellow box that measures 1920px.
Above you can see that Sparkle is set to 100% and that the working area of the page is 1920px (which is the space where the yellow box is)
I hope this solves the mystery...
PS: sorry, but for privacy I had to blur parts...

 

In short, web browsers are designed to recalculate container width/height (that includes anything you are "building" in your web browser) according to your OS' DPI scaling. 1920px in a web browser is not actually 1920px. If your DPI is 200% in your display settings, then it is 1920px * 2 (scale factor)...

(1920px * 2 (200%)) =  **3840px** (See Transform > W: below)



Therefore, if you divide the width of your screenshot by a scale factor of 2 (200%) with aspect ratio maintained, it will give you your 100% DPI. And then you should be able to nudge it into place for your mockup...

Anyway, I made a video guide using your provided screenshot...

 

And if you would like, here is the template I use in this video to make it simpler: 1920px 16col layout.aftemplate
(If you need a wider Artboard area to work, just pad margins equally on both sides to compensate for the size change...)

Summary: You cannot trust your monitor's physical measurements in a web browser when DPI scaling is >100%, but you can trust the output if it is outputting CSS/code. Your layout will still be 1920px in code...