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 FrameMaker 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 styles, 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	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. If we map a style to a default document style (for example, Heading1) from the Output Style list, and then edit the mapped default style through the Edit Style dialog, then the document style (DocumentName.css) is given precedence over the edited style (editstyle.css). In the published output, the selected content is displayed as per the Heading1 style of the document. 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 style from the generated output.	Paragraph Character
Split Into Topics Based on This Style	Create a Help topic at each occurrence of the selected 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 style “Section2 Level.” In this case, “Section 1.1: System Requirements” in the source appears as “System Requirements” in the published output. Convert to List (Using CSS Autonumbering): Convert the autonumber to HTML lists using CSS counters :: before and :: after. 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 [User Source Style]. 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
Import Reference Page Images	Select this option to import images embedded in the reference pages of FrameMaker documents.
Preserve Original Image Dimensions	Select this option to maintain the original dimensions of the image in the generated output.
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 drop-down list. Alternatively, you can specify the side on which you want the border to appear from the drop-down list. To set the border style, select the style from the Style drop-down list. To set the border color, select the color from the Color drop-down list. To set the border width, select it in, in points, from the Width menu.

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.
Cleanup Inline HTML Styles	Specifies whether inline styles from your source documents are included in the published output 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.
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 effect to be applied to the drop-down list in the Responsive HTML5 output.
Create Expanding Text	Define DHTML effect to be applied to the expanding text in the Responsive HTML5 output.