Font Size Units & Dimensions in HTML

<< Click to Display Table of Contents >>

Navigation:  More Advanced Procedures > HTML Output and HTML Templates >

Font Size Units & Dimensions in HTML

In HTML, the units used for font sizes and dimensions now more important than ever before. With the introduction of high-resolution 4K monitors and portable devices with super high resolution screens like the Microsoft Surface and Lenovo Yoga Pro series, content on the screen must scale correctly to be attractive and legible.

Help+Manual now handles this automatically. You basically just need to select the correct font size units for your output formats and Help+Manual will automatically adjust all the other dimensions on your pages accordingly so that they scale correctly on high-resolution devices and also look correct on older, "normal" devices.

These settings are made in the HTML Export Options section of your project (they are not available in skins, only in your project). There are separate sections for WebHelp and HTML Help/CHM. The WebHelp settings are also used for eBooks (EWriter, ePUB and Kindle/Mobi) and the CHM settings are shared with the Visual Studio Help output formats.

Setting the correct units for hi-res devices for WebHelp output

You now need to consider high-resolution 4K monitors and devices like the Microsoft Surface and Lenovo Yoga Pro when you are planning your WebHelp. If you don't do this the text and other elements will often be too small to read on these devices. If you set the configuration options described below Help+Manual will automatically adjust everything else so that it displays correctly on high-resolution displays.

1.Open your project in Help+Manual and in the Project Explorer navigate to Configuration > Publishing Options > WebHelp > HTML Export Options.

2.Set Font Size Encoding to: em (1em = 100%).

3.The Font size of style "Normal" setting is grayed out for ems/rems because it is only used when font encoding is set in percent.

Once the base font encoding is set to ems all elements in your topic files will then automatically be adapted for correct display on both normal and high-resolution devices and monitors.

Setting the correct units for hi-res devices for CHM output

The Microsoft CHM Viewer in Windows uses an old HTML rendering engine that has special requirements. Help+Manual can automatically configure your CHM file so that it displays correctly on high-resolution 4K monitors and devices like the Microsoft Surface and Lenovo Yoga Pro. If you don't do this the text and other elements will often be too small to read on these devices.

1.Open your project in Help+Manual and in the Project Explorer navigate to Configuration > Publishing Options > MS HTML Help > HTML Export Options.

2.Set Font Size Encoding to: pt Points.

3.Select the checkbox for Make pixel sizes relative to monitor resolution (4K display compatibility)

All elements of your CHM file will then automatically be adapted for correct display on both normal and high-resolution devices and monitors.