The appearance and functionality of WebHelp output is controlled by the options in two sections in your Project Configuration:
•Configuration > HTML Page Templates
•Configuration > Publishing Options > WebHelp
Nowadays you will almost always choose an HTML skin to publish your project to WebHelp or HTML Help/CHM. A skin is a special kind of Help+Manual project without topics that only stores your HTML templates and all the settings relevant for HTML output to these two formats. When you choose a skin, the templates and settings in the skin completely replace those in your project.
Normally, a skin is pre-designed and you don't need to change anything. However, if you do want to change something, you must do all your editing in the .hmskin skin file. Editing in your Help+Manual project won't have any effect because those templates and settings are not used.
To edit a skin, make a copy of the .hmskin skin file in your project folder and then open it in Help+Manual by selecting .hmskin as the file type to open in the Open dialog. All the templates and settings are in the same places as in a normal Help+Manual project.
Exception: HTML Export Options
The HTML Export Options section is not stored in skins and needs to be edited in your project.
It is unavoidable that your WebHelp output will look slightly different depending on the browser used to view it. HTML Help and Visual Studio Help are proprietary Microsoft formats that use Microsoft help viewers to display them, and your output in these formats will always closely resemble your source in the Help+Manual editor.
This is not possible in WebHelp. The HTML code generated is the best possible compromise between the many quirks of all the browsers now in use and compliance with the current standards for XHTML, HTML and CSS.
Unfortunately, no browser is really compliant with all the standards. In addition to this, individual browsers often interpret the same rules and formatting tags differently.
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.Set Font size of style "Normal" to about 82% for 10pt base font type and about 88% for 11pt base font type. Adjust as necessary depending on the appearance of your output.
You need to set the percentage for Normal because ems are a relative value. The default font size on all browsers is 16 pixels, which is generally too large for normal body text in documentation. Compare the Help+Manual editor with the output on your browser to adjust the percentage to the correct value for your documentation.
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.
Edit in the skin if you are using a skin
All these sections must be edited in the .hmskin skin file if you are publishing with a skin. When you use a skin, the HTML templates and settings in the skin replace those in your project. Usually, when you are using a skin, you don't need to edit anything because it has all already been set up by the designer.
The most important sections are Layout, Navigation and HTML Export Options. Always at least check the settings in these sections before publishing a new project.
Edit in the skin if you are using a skin
HTML page templates must be edited in the .hmskin skin file if you are publishing with a skin. When you use a skin, the HTML templates and settings in the skin replace those in your project. Usually, when you are using a skin, you don't need to edit anything because it has all already been set up by the designer.
About HTML page templates
This section provides access to the HTML templates used in all HTML-based output formats except ePUB and Kindle eBooks (which use special templates accessible in the eBooks configuration sections). These templates define the layout of the HTML pages into which the text from your topics is inserted.
Editing HTML templates directly requires experience with editing HTML code. If you are just getting started with Help+Manual it is recommended that you only use the Simple Template Layout tab. This allows you to use the default template while you are getting used to using the program.
For full details on all the settings in this section see Topic Pages in the HTML Help section of the Project Configuration chapter.