V3 Responsive WebHelp images scaled incorrectly

This forum is for discussions on the Help & Manual Premium Pack and the Premium Pack Toolbox configuration utility introduced with Premium Pack 3

Moderators: Alexander Halser, Tim Green

Post Reply
badjames
Posts: 3
Joined: Tue Jan 25, 2022 3:12 pm

V3 Responsive WebHelp images scaled incorrectly

Unread post by badjames »

Hi,

I am using H&M 7.3.6 and the PP 3.54.1. When publishing using the V3 responsive webhelp, I notice the images are scaled wrong, causing them to appear slightly blurred:

https://ibb.co/c6mnW9N

The image generated above was from the supplied "Get_Me_Started.hmxz" project using the "Minimalist_Blue_WebHelp.hmskin" skin with default options.

I have tried a demo of H&M 8 and the built in "PP_DEMO_MOdern_Standard_WebHelp.hmskin" is producing the exact same issue.

Is there a way of disabling this slight (unnecessary) scaling so the images are crisp?

Thanks,

James
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: V3 Responsive WebHelp images scaled incorrectly

Unread post by Tim Green »

Hi James,

These skins scale everything, including images, by using relative units (rems and ems), and you will very rarely get a 100% 1:1 representation of anything. This flexibility comes with a slight lack of "crispness", but that is also the state of modern digital display technology anyway. You may see a 1:1 display of an image while you are working, but that will be unique to you, and then only when you are incorrectly specifying the image size as 100% of physical size. That setting is now wrong and should never be used, because it results in non-responsive pages. Instead, you should always use the setting "% of page width, maximum is physical width". That will give you responsive images that will work on all device types.

Even if you do set 100% physical, the image will almost never be seen like that on other devices, because of the huge chain of unavoidable scaling that is now applied to anything shown on a digital display. To begin with, displays now almost never use physical pixels. What you are seeing are virtual pixels composed of groups of physical pixels with additional anti-aliasing algorithms on top of that. Then there is the native scaling of the operating system on top of that (for example, check your Windows display settings to see what percentage is being calculated for what you are actually seeing). On top of that there is then the zoom setting in the individual browser, and other things besides.

As your screenshots show, the difference is really marginal, and it is now pretty much unavoidable. 1:1 pixel-for-pixel representations are a thing of the past now only visible on older, low-resolution legacy monitors where every pixel is still a real pixel.

High resolution content makes that moot in most cases, but it is still a slight issue for screenshots made on low-resolution devices. They won't scale so well for high-resolution devices, but that is in the nature of the beast. The only solution there is to make your screenshots on a 4K monitor and scale them in the editor with one of the percentage settings. That will give you better quality at zoom settings.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
badjames
Posts: 3
Joined: Tue Jan 25, 2022 3:12 pm

Re: V3 Responsive WebHelp images scaled incorrectly

Unread post by badjames »

Hi Tim,

Thanks for the detailed response.

If the scaling is an unavoidable artifact of the "responsive" premium skins, then fair enough.

However, perhaps I should have made it clearer that it is only the "premium" skins that are exhibiting the issue. If I use the standard "responsive" skins, such as "Webhelp, Responsive Blue, Keywordslist.hmskin", the images are not scaled (or are correctly scaled to 100%) and look as crisp as in H&M.

Unfortunately, we need local webhelp without a server, so the premium skins are required.

Thanks,

James
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: V3 Responsive WebHelp images scaled incorrectly

Unread post by Tim Green »

Hi James,

The problem here is the use of relative units (rems and ems) for all dimensions, which allow the user to scale the view from within the WebHelp interface with the Larger/Smaller Text command in the hamburger menu. This scales everything to match, including the images, and that is only possible with the relative units. When Help+Manual generates the dimensions on publishing using ems and rems that will never be exactly pixel perfect, because there will always be slight rounding differences. However, even in your own demo the difference is so tiny that I would really not worry about it.

And if you need local HTML without a server, have you looked at the eWriter format in Help+Manual? That will give you WebHelp in a single file with a local standalone viewer that you can install along with your documentation. It's Windows only, so it won't work if you need to run on Mac, Unix or Linux, but for Windows it's pretty ideal.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
badjames
Posts: 3
Joined: Tue Jan 25, 2022 3:12 pm

Re: V3 Responsive WebHelp images scaled incorrectly

Unread post by badjames »

Hi Tim,

Thanks for the explanation. I hadn't noticed the scaling option in the hamburger menu - that is very nice!

Unfortunately we do need to distribute help on both Windows & Linux platforms, so the eWriter format isn't really an option for us.

But I don't think the scaling/blurriness is a show stopper for us. I just wanted to post the question in case there was a setting or workflow we could use to eliminate/reduce the issue.

Thanks again for your help,

James
Post Reply