Style mapping

Learn how to map the styles in your (unstructured) FrameMaker documents to HTML elements and CSS classes when publishing to HTML5.

You can define style mappings only for the unstructured documents. The Style Mapping WYSIWYG editor, allows you to map the formats that are available in the current document template to alternative output styles. For example, from the available paragraph formats, you select Heading1. In the FrameMaker template the heading is associated with a specific style. You can then associate Heading1 with alternative output styles.

Note: When you associate a template format with an alternative output style, the source document style remains unaffected.

To customize style settings:

In the Style Mapping tab of the Publish Settings dialog, select the style you want to customize (paragraph, character, table, cross reference, image or general).
Configure the desired options for the selected style.

Note: The options available for each type of style that you can customize are explained in the following (Style Mapping) tables.
Click Save.

The following Style Mapping tables describe all options available in the Style Mapping tab.

Option	Description	Available in
Automap <Available in> Style	Select Automap <Available in> Styles to map the styles in the selected content to the styles defined in the CSS selected for style mapping.	Paragraph Character Table
Style Preview	The Style Preview allows you to compare the source style (defined in the Output Style list prior to any customization) with the custom style (defined in the Output Style list, and displayed with an appending asterisk, after customization using the CSS Rule definition dialog).	Paragraph Character Table Cross Reference
Output Style	To customize the output style for the selected format, choose an alternative style from the Output Style list.	Paragraph Character Table Cross Reference
Remove Overrides	Revert any style changes applied to the source format.	Paragraph Character
Edit Style	Click the Edit Style button to open the CSS Rule definition dialog and customize the output style. Note: Say, the selected Output Style is [Source] and you use the CSS Rule definition dialog to customize the style. In this case, the Output Style displayed is appended with an asterisk (*) to indicate customization to the selected style.	Paragraph Character
Exclude Form Output	Exclude the selected tag from the generated output.	Paragraph Character
Split Into Topics Based on This Style	Create a Help topic at each occurrence of the selected MS Word paragraph style. For example, if you select Heading 1 and Pagination (Split into topics based on this style), FrameMaker starts a new topic at every instance of Heading 1.	Paragraph
Map to HTML tag	Select or enter a user-defined HTML element for the selected style. For example: A paragraph with style `ParaStyleOne` is imported in FrameMaker as: `<p class="ParaStyleOne">Paragraph Text</p>` Specifying this string as `<pre>` for the style ParaStyleOne causes FrameMaker to import the paragraphs with the style ParaStyleOne as: `<pre>Paragraph Text</pre>`	Paragraph Character
Autonumber	Specify a way to handle auto-numbering text. Available options are: Ignore: Choose this option if the autonumber text is relevant only in print format. The converted paragraph does not contain autonumbering. For example, suppose you ignore autonumbering for the FrameMaker paragraph format "Section2 Level." In this case, "Section 1.1: System Requirements" in the source appears as "System Requirements" in the published output. Convert to HTML List: Convert the autonumber to HTML lists using HTML tags such as `<ol>`, `<ul>`, and `<li>`. Convert to Text: Retain the appearance of the FrameMaker numbered lists. The autonumber part loses its sequencing properties and appears as part of the paragraph text in FrameMaker topic.	Paragraph

Table styles

The following table describes additional options that are available in the Table Styles.

Option	Description
Table Properties
Caption Style	Select the Caption Style name to map to the selected table format caption. Or select [Source]. FrameMaker retains the appearance of the table caption in the online Help format. You can also select Automap for an individual table caption style.
Table Size	Specify a preferred table width and / or height (in px).
Cell Size
Preferred Column Width/Row Height	Specify a preferred column width and / or row height (in px).

Cross reference style

The following table describes an additional option that is available in the Cross Reference style.

Option	Description
Building Blocks	To build the cross reference format, place the cursor in the Output Style box and double-click on a format in the Building Blocks table. The available formats are called building blocks, because you create a custom format by using any combination of the available formats. To do this, double-click a building block to place the format in the Output Style list. You can then keep adding to the format by placing the insertion point before or after any selected building block.

Option

Description

Building Blocks

To build the cross reference format, place the cursor in the Output Style box and double-click on a format in the Building Blocks table.

The available formats are called building blocks, because you create a custom format by using any combination of the available formats. To do this, double-click a building block to place the format in the Output Style list. You can then keep adding to the format by placing the insertion point before or after any selected building block.

Image settings

The following table describes the options that are available in the Image Settings.

Option	Description
Use Distiller To Generate Image	Select this option to generate web-friendly image formats from graphics linked and inserted in FrameMaker documents. You should use this option especially if you have vector graphics formats, such as EPS or AI, or graphics with text content in them.
Import Reference Page Images	Select this option to import images embedded in the reference pages of FrameMaker documents.
Preserve 3D Images	Select this option to convert the 3D graphics as a PDF file, with the 3D rendering intact within the PDF file. To ensure that the 3D image retains its rendering, enable embedding in FrameMaker.
Preferred Dimensions	Specify the dimensions for the images. Select one of the following: Scale: Scale images as a percentage of the existing size. The aspect ratio of the images is maintained. Width and Height: Specify the absolute image size as Height and Width, in points. Select Maintain Aspect Ratio to ensure that the images are not skewed. Note: To convert the images in FrameMaker documents to the actual dimensions of the images, specify the height and width as 0pt. The `<img>` tag for such images in the generated HTML does not have the height and width values. This conversion is irrespective of the dimensions of the anchored frames that contained the images.
Maximum Dimensions	Set the maximum dimensions for images in online format. Images that exceed the maximum dimensions you specify are automatically scaled down to fit the maximum size you specify. If you scale the images and specify an aspect ratio, then the publishing process scales the images within the maximum dimensions specified and maintains the aspect ratio. Use this option to avoid large images causing the browser window to scroll horizontally or vertically. For example, if you specify the window size to be 800 × 600 pixels, you can specify the maximum dimensions to be 640 × 480, so that the images do not exceed the window size.
Margins	Set the margins for the images as: Set equal margins on all sides by setting the margin in All Sides. To set margins on individual sides, set the margins on each side.
Borders	Set a border for the images as: To set a uniform border on all sides, select All from the Border pop-up menu. Alternatively, you can specify the side on which you want the border to appear from the pop-up menu. To set the border style, select the style from the Style pop-up menu. To set the border color, select the color from the Color pop-up menu. To set the border width, select it in, in points, from the Width menu.
Advanced
Default Format	Define the image format, color depth, and quality settings for the web-supported images that are converted from the images in the FrameMaker document: As Is: Select this option for retaining the images in the current web-supported format. JPG: Select this option for multicolor images such as screenshots or photographs. JPG format with a high color depth provides the best online quality, but increases the file size. Select this option for photographs. PNG: Select this option for screenshots. BMP: Select this option only for small images such as icons and logos. BMP format images are large in size and uncompressed but rich in color and quality. Also, these images do not scale or compress well. Hence, this format is not suitable for web. GIF: Select this option if the FrameMaker document contains only line art, such as schematic diagram.
JPEG Quality	Set the quality percentage for JPG images.
Color Bit Depth	Set the color bit depth for bit map images. JPG and PNG formats can have either 8- or 24-bit color depth. BMP images can have color bit depths of 1, 4, 8, 16, 24, or 32. GIF images can have only 8-bit color depth.
Grayscale	Select this option if you want monochrome images.

General settings

The following table describes the options that are available in the General Settings.

Option	Description
Topic Settings
Split Into Topics Using Marker	Specify a marker that is used in the FrameMaker document for pagination.
Add All Topics to Table of Contents	Specifies whether all generated topics (after pagination) should be included in TOC or not
Topic Name Pattern	Specify the topic name pattern for topics generated from the added FrameMaker document.
Use Only ASCII Characters in Generated Filenames	Specify whether to allow non-ASCII characters in the generated topic filenames or automatically convert to ASCII characters.
Keep All Topics in One Folder	Specifies whether all topic HTMLs are saved under a single folder named `topics`. If you do not select this option, a separate folder for each topic in your document is created and all HTML files are saved in their respective topic folder.
Merge Topic Styles into Single CSS	Specifies whether a single CSS file is created for all topics or not. If you choose not to create a single CSS then the inline styles of tables and images is stored in a separate CSS file named HTMLStyling.css. Also, for each topic a corresponding CSS file is created which contains the styling information about rest of the document formats.
Cleanup Inline HTML Styles	Specifies whether inline styles from your source documents are included in the published output or not.
Glossary
Style	Specify how glossary terms display: Hyperlink: Display as a hyperlink and navigates the user to the definition in the glossary. Pop-up: Displays a pop-up on the page. Expanding Text: Displays in-line expanding text on the page. Tooltip: Displays as a tooltip if the user hovers the mouse over the term. Note: For details on creating a FrameMaker glossary, see Glossaries.
Marker Type	Keeping the marker text as same, apply glossary marker to the glossary definition paragraph in the document and Glossary Term marker to glossary term instance in text.
DHTML Effects
Create Drop Down	Define DHTML effects to be applied to the drop-down lists and expanding text.
Create Expanding Text