Metanorma: Aequitate Verum

Author's documentation

Custom styling

Metanorma supports the customization of styling for document flavors in multiple ways.

Overriding default CSS styling

Styling in DOC and HTML is set by CSS stylesheets. The approach taken to styling DOC and HTML output is described in:

The classes that they presuppose are described in

Depending on the role of the user, there are different ways to override the default CSS styling.

  • A developer of a Metanorma flavor can directly edit the CSS stylesheet in the gem, which is located in /lib/isodoc/*/html/.

  • A user can override the default CSS stylesheet by specifying a custom CSS stylesheet. This is done by cloning the default CSS stylesheet (from the gem), editing it, and then specifying the path to the edited stylesheet in the document attributes.

    • For HTML output, specify the path to the custom CSS stylesheet in the document attributes :htmlstylesheet:.

    • For Word DOC output, specify the path to the custom CSS stylesheet in the document attributes :wordstylesheet:.

    • For PDF output, you can specify the path to the custom CSS stylesheet in the document attributes :standardstylesheet:.

Please refer to Document attributes: Visual appearance for details.

Additional CSS styling

A user can specify CSS for inclusion in Metanorma output by embedding that CSS in a source block within a user-css subclause of the Metanorma-Extension clause [added in https://github.com/metanorma/metanorma-standoc/releases/tag/v2.3.8].

The CSS styling specified will be applied to the following output formats:

  • PDF

  • Word DOC (only supports CSS 4)

  • HTML

The "Metanorma-Extension" clause should appear in the preface, before other clauses.

Note
 See CSS declarations.
Example 1. Applying CSS to inline text

This example demonstrates applying CSS rulesto the span:[] command applied to inline text.

[.preface]
== Metanorma-Extension

=== user-css

[source]
----
.green { background-color: green}
----

....

span:green[this text is highlighted as green]

CSS styling within the document can also override styling in default CSS stylesheets.

Example 2. Applying CSS to block elements

This example demonstrates how to override the default CSS styling for examples, notes, and admonitions in a document.

[.preface]
== Metanorma-Extension

=== user-css

[source]
----
.Note, .note { background-color: white}

.Admonition { background-color: white}

.example { background-color: white}
----