Scaling in responsive skins

[Ola Timpson]

Hi

I'm using the new Boxed_Plain_Grey skin, and have noticed that when I view published help on my desktop the font defaults to 92% size and the images default to 107%. This means I have stretched images and harder-to-read text. If we use the 'Larger Text' to make that nicer to read it stretches the images further. Is there any way to change the default scales that these load at?

Kind regards,
Ola

[Tim Green]

Hi Ola,

The font base size is set to 92% because we found that this generally produces a good approximation of the size of the font in your project. You can change it in the HTML Options section with PP Toolbox, with the Font Base Size setting. (DON'T change the Font Size Encoding! That must be set to 3, which is ems.) You can then adjust this for tablets and phones with the additional FONTFACTOR_ variables in the Main Layout Fonts section.

The issue with the images is something we are looking into. It isn't possible to combine both scaling of the entire interface and images that are at exactly 100% -- that doesn't work because it's a contradiction in terms. Images need to scale in responsive designs, and scaled images are never at 100%, or only 1/100 of the time (and less than that if you allow them to be larger than their native size). That is a fact of the new multi-platform world -- in the same way that pixel-perfect layouts are no longer possible as soon as you introduce fluid designs and multiple platforms.

For higher quality images the best theoretical solution is to create larger images and scale them and make them responsive. But for that to work we also need a way to create an arbitrary maximum point beyond which the image is not allowed to expand. At the moment this point is only its native width, and all expansion beyond that will naturally be fuzzy. However, if you have an image that is natively 1000 pixels wide displayed at 300 pixels wide, you can expand it quite nicely and still get good quality in modern browsers.

This issue is a work in progress. One possible optimization we are considering is to set the maximum width of the image (equal to its native width) in pixels instead of rems. This would avoid the problem that the maximum width is not really equivalent to the native width at zoom levels other than 100% and font scaling other than 100% (and the page is scaled on the basis of the font scaling, which defines the base unit for the relative rems dimensions used for all dimensions on the page), but then the maximum width would also no longer adjust automatically in relation to the current zoom, which some users might also see as a problem.

As you can see, responsive design is a nest of vipers...

[Ola Timpson]

Hi Tim

Thanks for the useful response, as always. Our images are very small (mostly software icons) so I'll need to be a bit creative to get bigger versions

On a different note, I noticed that a couple of the Navigation settings are being ignored. I've got Automatically collapse unfocused entries un-ticked, but the top level still collapses, and On load, expand... ticked and set to Top level entries, but nothing expands on load. Is this a known feature of the responsive skins?

Kind regards,
Ola

[Tim Green]

Hi Ola,

On a different note, I noticed that a couple of the Navigation settings are being ignored. I've got Automatically collapse unfocused entries un-ticked, but the top level still collapses, and On load, expand... ticked and set to Top level entries, but nothing expands on load. Is this a known feature of the responsive skins?

Absolutely. This is a feature, not a bug. Those settings are ignored in the responsive skins and that is going to stay that way, at least for the time being. One of the objectives was to make it possible to handle larger TOCs even on small mobile device browsers. To make this possible, we needed to reduce the amount of data that the browser needs to handle. The full TOC only exists as highly-compressed JSON data without any formatting. The HTML for displaying the TOC entries is generated from the JSON data on the fly, and ONLY for the visible part of the TOC. As soon as you close a TOC branch the HTML is deleted again. The keyword index works in the same way.

[Tim Green]

Update:
In the next Help & Manual update the maximum width of the images will be set absolutely in pixels when you use the option to not expand the image to more than its native width. This will then ensure that you get exactly the native width when the browser is set to 100% zoom. Note that this will NOT be the case on high-resolution devices like many modern laptops with high-resolution screens (Microsoft Surface Pro, Lenovo Yoga Pro, Dell XPS) and desktop systems with 4K monitors and above, because on those systems the browser zoom will always be higher than 100% -- otherwise everything would be too small to see. However, on old screens with "normal" resolution you will get the "normal" resolution at 100%, or a smaller image if there is not room for that (which will still look good because it is being scaled down, not up).