Skip to main content

Generate HTML5

Toni Gonzales
  • Updated

The Generate HTML5 workflow action converts a Content XML (CXML) file into a dynamic webpage.

Generate HTML5 is divided into five tabs: General, Text, Links, CSS, and Miscellaneous.

General

Use this tab to specify the input, output, resources, and required metadata.Generate HTML5 General tab

Field Description
Input The file path to the input Content XML file (.cxml). Click the Choose File icon folder-icon.png to choose a file, or enter the file path; for example, Input/my-input.cxml.
Output The path to the output (.zip). Enter a name or click Choose File folder-icon.png to choose an output from the pop-up menu.

The default output is output-1.zip.
Resources

The path to the core XZIP resource package (.xzip). Your Solutions Consultant will make resources available for you to download from the Typefi FTP. 

Click the Choose File icon folder-icon.png to choose a file, or enter the file path—for example, path/to/resources.xzip.
Required Metadata Metadata is data about data. That is, if an e-book is considered data, then the information describing the e-book, like the title and creator, would be metadata.

Use this section to enter the required metadata elements that an HTML5 file needs to be fully compliant and properly validated. While a browser may render this file without the metadata, an editing tool may flag its absence as an error or warning.
Language

The language of the content, written as an RFC 3066 language code. For example: 

  • For Sweden: sv or sc-SE
  • For the UK: en or en-GB
  • For the US: en or en-US
Title Enter the title element (<dc:title>). For more information about adding a title, see the Dublin Core Metadata Initiative.

Text

Use this tab to configure how text is formatted in the generated HTML5 file.

Generate HTML5 Text tab
Field Description
Soft returns Select Remove soft returns to choose whether to remove all soft returns in the generated webpage. Deselect to keep soft returns.

Remove soft returns is deselected by default.
Table of Contents (Requires CXML 3.3)

Specify the heading levels to include in the Table of Contents (TOC). For the TOC structure to be accurately generated, your Content XML (CXML) must contain corresponding CXML 3.3 HTML heading tags (<h1>, <h2>, <h3>).

For example, if the CXML uses <h1> through <h6>, but you only want a three-level TOC, select H1, H2, and H3.

H1 is selected by default. For more information on how to format headings in your CXML, see CXML 3.3.
Split document Use this section to specify if the e-book should be kept as one HTML5 file or split.
Split document Select Split document to split the CXML file into new HTML files. Deselect to keep the webpage as one HTML5 file.

Split document is deselected by default.
Enter parameters

If you selected Split document, enter one or more Typefi Section or paragraph style where the HTML5 file should be split. Note: Your entry must contain only sections or only paragraph styles.

Formatting guidelines: 

  1. For sections: Each entry must start with section:, followed by a comma-separated list of section names (case-sensitive).
    Examples:
    • Single section: section:Name of section
    • Multiple sections: section:Chapter,Back matter
  2. For Paragraph styles: Each entry must start with paragraph:, followed by a comma-separated list of style names (case-sensitive) 
    Examples:
    • Single paragraph style: paragraph:style 1
    • Multiple paragraph styles: paragraph:Section title,Annex title,Glossary title
Footnotes Use this section to specify where footnotes are placed.
Layout

Choose where footnotes are placed. Options include:

  • End of the section (endnotes): Footnotes are converted to endnotes.
  • After paragraph: Footnotes are placed after the paragraph.
  • In a pop-up: Footnotes are placed inside a pop-up.

The default value is End of the section (endnotes).
Style

Choose the numbering style for footnotes. Options include:

  • 1,2,3
  • a,b,c
  • A,B,C
  • i,ii,iii
  • I,II,III
Endnotes Use this section to specify how endnotes are formatted.
Endnote title Enter a display title for the endnotes.
Layout

Choose where endnotes are placed. Options include:

  • End of document: Endnotes are placed at the end of the document.
  • End of section: Endnotes are placed at the end of each split file.
  • Merge with footnotes: Endnotes are converted to footnotes.

The default value is End of Document.
Style

Choose the numbering style for endnotes. Options include:

  • 1,2,3
  • a,b,c
  • A,B,C
  • i,ii,iii
  • I,II,III

Use this tab to configure how images (JPEG, PNG, and GIF) are exported.

Generate HTML5 Links tab
Field Description
Optimize images Select Optimize images to optimize images for the generated webpage. 
Optimize images is selected by default.
Output format

Specify the output format. Choosing a format converts all images to the selected format. Options include:

  • JPEG
  • GIF
  • PNG: Disables the image compression settings; use this option for lossless images or for images that include transparency.
  • Automatic: Keep original file types and adjust resolution as needed.

The default value is Automatic.
Resolution (ppi)

Choose the resolution of the images in pixels per inch (ppi). While operating systems have standardised on either 72 ppc or 96 ppi, mobile devices have not. Options include:

  • 72
  • 96
  • 150
  • 300

The default resolution is 72, which is the standard for webpages.
JPEG quality Specify the image quality. Enter a value between 1-100. Higher values yield better quality. Default is 80.
PNG quality Specify the image quality. Enter a value between 1-100. Higher values yield better quality. Default is 80.
GIF palette Adaptive: Creates a palette using a representative sample of colours in the graphic without any dithering (mixing of small spots of colours to simulate additional colours).
Web: Creates a palette of web-safe colours that are a subset of Windows and macOS system colours.

The default palette is Adaptive.

CSS

Use this section to load Cascading Style Sheets (CSS) files that control the appearance and layout of your HTML content.

Generate HTML5 CSS tab
Field Description
Custom CSS The file path to one or more external Cascading Style Sheets (.css). Click the Choose File icon folder-icon.png to choose additional CSS file(s). Alternatively, enter the file path to the additional CSS files—for example, Styles/my-style.css.
Include built-in CSS Select Include built-in CSS to apply Typefi’s built-in cascading style sheet (.css), which provides basic styling rules (for example, allcaps and smallcaps) for your HTML5 output. The built-in CSS is dynamic and only includes rules for settings you've activated.

Note: Uncheck Include built-in CSS to take full control of the styling by providing your own Custom CSS file.

Include built-in CSS is selected by default.

Miscellaneous

Use this tab to generate a "Back to top" button on the webpage.

Generate HTML5 Miscellaneous tab
Field Description
Generate "Back to top" button Select Generate "Back to top" button to add a "Back to top" button to the webpage. This option is selected by default.

Related articles

Comments

0 comments

Article is closed for comments.