HTML Output

HTML and Word HTML Output

In order to create CSS stylesheets for the HTML and Word HTML output of the Metanorma tool, it is necessary to understand the structure of the HTML it generates.

HTML

Top-Level Structure

The head of the HTML document contains a single stylesheet (the :htmlstylesheet parameter of HtmlConvert.new()), and some brief script calls that are embedded in the Ruby code (initialising jQuery, including webfonts).

The body of the HTML document is divided into the following parts:

• A title section (<div class="title-section">), comprising identifying information about the document, such as appears in a title page in print.

  • The section is populated with an HTML template (the :htmlcoverpage parameter of HtmlConvert.new()). The information in this section is sourced from document metadata, rather than document content proper; the gem uses Liquid Template to populate the HTML template. Different fields usually have distinct class names for CSS styling; these can vary by gem.

  • For example, ISO documents have coverpage_docnumber (for the document ID), coverpage_techcommittee (for the technical committee responsible for the document), doctitle-en (for the English-language title of the document), doctitle-fr (for the French title), title, subtitle, part (for the three components of the document title), and coverpage_docstage (for the stage of publication of the document).

• A prefatory section (<div class="prefatory-section">), comprising boilerplate information which also does not come from document content proper. This is typically restricted to a copyright statement (<div class="copyright">), contact details, and a table of contents <div id="toc">.

  • The section is also populated with a Liquid HTML template (the :htmlintropage parameter of HtmlConvert.new()).

  • The table of contents in the HTML template is a placeholder; it is populated by a table of contents script included among the scripts loaded into the HTML body.

• The main section of the document (<main class="main-section">), which is populated with the document content.

• Optionally, a colophon (<div class="colophon">), which is populated with boilerplate information and/or document metadata. (Currently colophons in Metanorma gems appear only in Word output.)

• Scripts. These are populated from a static file (the :scripts parameter of HtmlConvert.new()). These are expected to include MathJax, a Table of Contents generator, and a script for handling footnotes.

Body markup

Within the body of the document, different blocks and inline spans of the Metanorma document model (Standoc XML, BasicDoc XML) are represented by different CSS classes, as follows:

Terms and definitions:

Symbols and abbreviated terms

<div class="Symbols"> (contents are a definition list)

Blocks:

Note

<div class="Note">

Note label

<span class="note_label">

Figure

<div class="figure">

Figure title

<span class="FigureTitle">

Example

<table class="example"> or <div class="example">

Example label

<span class="example_label">

Sourcecode

<p class="Sourcecode">

Admonition

<div class="Admonition">

Formula

<div class="formula">

Blockquote

<div class="Quote">

Blockquote attribution

<p class="QuoteAttribution">

Table footnote

<a class="TableFootnote">

Ordered list

<ol>

Unordered list

<ul>

Definition list

<dl>

Inline:

Hyperlink

<a>

Cross-Reference

<a>

Stem expression

<span class="stem">

Word HTML