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:

  1. 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).

  2. 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.
  3. 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.

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.