SDF 2.000: Generating HTML Using SDF

Home | Catalog

# Generating HTML Using SDF

## Table of Contents

1. Introduction
2. Generating HTML

2.1. Generating a Single Document
2.2. Changing the Output Extension
2.3. Sending Output to Standard Output
2.4. Changing the Default Extension
2.5. Generating a Set of Topics
2.6. Controlling Topic Breaks

3. Customising the Generated HTML

3.1. Paragraph and Phrase Style Mappings
3.2. Output Driver Enhancements
3.3. General Customisations
3.4. Topics Mode Variables

4. Colours, Logos, Backgrounds and Separators

4.1. Colours
4.2. Logos
4.3. Background Images
4.4. Section Separators

5. Titles and Table of Contents

5.1. HTML Title String
5.2. Title Section
5.3. Table of Contents Section

6. Headers and Footers

6.1. The Default Header/Footer Macros
6.2. The Default Navigation Macros
6.3. Customising the Navigation Macros
6.4. Customising Navigation Text
6.5. Pre-header and Post-footer Tuning

7. Inline HTML
8. Feedback

# 1. Introduction

SDF is a useful tool for generating HTML documents for several reasons:

1. SDF provides a high-level language for documentation including macros, filters, variables, conditional text and event processing
2. SDF is more readable than HTML, making it much easier to maintain
3. Unlike HTML, SDF documents can contain user defined style names allowing authors to specify a document in a logical manner
4. SDF provides the features required to create any HTML document.

For a general overview of SDF, see The SDF Document Development System. For a general introduction to the core features in SDF, see the SDF User Guide.

This tutorial supplements these documents by providing:

- an overview of how SDF documents are converted to HTML documents
- details on how to customise the generated HTML.

# 2. Generating HTML

## 2.1. Generating a Single Document

To generate HTML for `myfile.sdf`, the command is:

       sdf -2html myfile

This will create a single html file called `myfile.html`.

## 2.2. Changing the Output Extension

By default, SDF creates HTML files with an output extension of html. To specify a different extension, use the -o option like this:

       sdf -2html -ohtm myfile

## 2.3. Sending Output to Standard Output

To send output to standard output, use the -o option like this:

       sdf -2html -o- myfile

## 2.4. Changing the Default Extension

If you are generating HTML for a system which only supports 8.3 filenames, you may wish to set the default extension to be htm like this:

       sdf -2html -DHTML_EXT=htm myfile

If you are working on a system which only supports 8.3 filenames, you may wish to permanently set the HTML_EXT variable within the `sdf.ini` configuration file, so that you don't need to specify it every time.

Unlike using the -o option, this approach changes the output extension on all HTML files generated, including sub-topics.

## 2.5. Generating a Set of Topics

For large documents, it is often much better to generate a set of topics rather than a large HTML file. To do this, the command is:

       sdf -2topics myfile

This will create:

- a HTML file called `myfile.html` which contains a table of contents
- a HTML file for each topic.

## 2.6. Controlling Topic Breaks

If you want to manually control how a document is split into topics, simply include other sdf files which contain headings. These manual topics, if any, can be supplemented with automatically generated topics. By default, level 1 headings are used as topic breaks, in addition to the manual ones. The -n (or --split_level) option can be used to change this:

- -n0 disables autosplitting
- -n2 uses level 1-2 headings to autosplit
- -n3 uses level 1-3 headings to autosplit
- etc.

# 3. Customising the Generated HTML

The following files are used to convert SDF to HTML:

File | Directory | Purpose
html.sdn | stdlib | tuning file for HTML generation
tohtml.pl | perllib/sdf | output driver for HTML generation

The tuning file contains:

- the mapping tables used to convert SDF paragraph and phrase styles to HTML entities
- the default definitions of macros, variables, etc.

## 3.1. Paragraph and Phrase Style Mappings

If you want to create new paragraph and phrase styles and/or override the default mapping, you can edit the tuning file. Alternatively, create a site-specific tuning file and use it at the top of each document.

## 3.2. Output Driver Enhancements

On some occasions, the conversion rules are too complicated for mapping tables and need to be coded into the output driver as Perl logic. If you need to edit the output driver, please forward the patches to me so that everyone can benefit from your enhancements.

## 3.3. General Customisations

On most occasions, the generated HTML can be easily customised by overriding the default values of variables and macros. In particular, you can customise:

Colours, Logos, Backgrounds and Separators
Titles and Table of Contents
Headers and Footers

Furthermore, if you really need it, Inline HTML can be used to generate any HTML you like.

Note: If you override a macro, it is probably a good idea to start with the default definition in the HTML tuning file, `stdlib/html.sdn`.

## 3.4. Topics Mode Variables

When customising the generated HTML, it is occasionally necessary to know whether a single document or set of topics is being generated. The following variables can be tested to determine this.

Variable | Description
HTML_TOPICS_MODE | the table of contents for a set of topics is being generated
HTML_SUBTOPICS_MODE | the actual sub-topics are being generated

These variables represent the two passes of the topic generation process.

# 4. Colours, Logos, Backgrounds and Separators

## 4.1. Colours

The following variables can be used to customise the colours used:

Variable | Description
HTML_BG_COLOR | the background colour
HTML_TEXT_COLOR | the colour of normal text
HTML_LINK_COLOR | the colour of links
HTML_VLINK_COLOR | the colour of visited links

For example:

      !define HTML_BG_COLOR   COLOR_WHITE
      !define HTML_LINK_COLOR '00ff00'

The value of each variable is the hexidecimal number representing the required RGB (Red Green Blue) combination. For convenience, the following set of color variables are provided:

Variable | Value
COLOR_WHITE | 'ffffff'
COLOR_BLACK | '000000'
COLOR_RED | 'ff0000'
COLOR_GREEN | '00ff00'
COLOR_BLUE | '0000ff'
COLOR_YELLOW | 'ffff00'
COLOR_MAGENTA | 'ff00ff'
COLOR_CYAN | '00ffff'
COLOR_GREY | 'c0c0c0'

## 4.2. Logos

The following variables can be used to add a logo:

Variable | Description
DOC_LOGO | the default logo to use
DOC_HTML_LOGO | the logo to use at the top of each document
DOC_TOPIC_LOGO | the logo to use at the top of each topic

To add a logo to the main document and all its topics, simply set the DOC_LOGO variable. Alternatively, different logos can be specified by using the DOC_HTML_LOGO and/or the DOC_TOPIC_LOGO variables.

## 4.3. Background Images

The following variables can be used to customise the background image, if any:

Variable | Description
HTML_BG_IMAGE | the URL of the file to use as the background image
HTML_BG_FIXED | if set, scrolling of the background image is disabled

Note: These HTML features may not be supported by all browsers.

## 4.4. Section Separators

By default, SDF places a line above each section within a document. If you want to use an alternative separator, override the HTML_PRE_SECTION macro like this:

        !macro HTML_PRE_SECTION
             !import "fancy_line.gif"
        !endmacro

Section boundaries are determined using the heading level specified by the HTML_SECTION_LEVEL variable. To put a section separator above level 2 (and 1) headings, you can define this variable in your document or specify it on the command line like this:

       sdf -2html -DHTML_SECTION_LEVEL=2 myfile

When a single document is being generated, the default level is 1. When sub-topics are being generated, the default level is 2.

Note: A value of 0 turns off section boundaries.

# 5. Titles and Table of Contents

## 5.1. HTML Title String

To customise the title string generated by the build_title macro, set the HTML_TITLE variable after calling build_title.

Alternatively, you can override the definition of the HTML_BUILD_TITLE macro before build_title is called. The default definition is:

    !macro HTML_BUILD_TITLE
      !if HTML_SUBTOPICS_MODE
        !if DOC_PROJECT
          !define HTML_TITLE \
            "$var{'DOC_PROJECT'}: $var{'HTML_MAIN_TITLE'}: $var{'DOC_TITLE'}"
        !else
          !define HTML_TITLE "$var{'HTML_MAIN_TITLE'}: $var{'DOC_TITLE'}"
        !endif
      !elsif DOC_PROJECT
        !define HTML_TITLE "$var{'DOC_PROJECT'}: $var{'DOC_TITLE'}"
      !else
        !define HTML_TITLE DOC_TITLE
      !endif
    !endmacro

## 5.2. Title Section

To customise the title section generated by the build_title macro, override the definition of the build_html_cover macro. For example:

        !macro build_html_cover
            [align=Center]DOC_TITLE
        !endmacro

## 5.3. Table of Contents Section

To customise the title of the table of contents, override the DOC_TOC_TITLE variable like this:

      !define DOC_TOC_TITLE 'Contents'

Alternatively, you can completely control the presentation of the table of contents by overriding the toc_html filter. For example:

    !block script
    sub toc_html_Filter {
        local(*text, %param) = @_;
    #   local();

        # Make top level section titles bigger
        @text = grep(s/^L1/P2/ || $_, @text);

        # Prepend a section separator and a title
        unshift(@text, "!HTML_PRE_SECTION", "P1[notoc;align=Center]Contents");
    }
    !endblock

See the SDF Guru Guide for further information on writing your own filters.

# 6. Headers and Footers

You can override the default headers and footers by defining the following macros:

- HTML_HEADER - header on a HTML document (or main topic)
- HTML_FOOTER - footer on a HTML document (or main topic)
- HTML_TOPIC_HEADER - header on a HTML topic
- HTML_TOPIC_FOOTER - footer on a HTML topic.

For example:

        !macro HTML_FOOTER
            Line:
            [align='Right']
            {{This page was last updated on [[DATE:DOC_MODIFIED]]}}
        !endmacro

## 6.1. The Default Header/Footer Macros

The default HTML_HEADER and HTML_FOOTER definitions are shown below.

        !macro HTML_HEADER
            !HTML_NAVIGATE
        !endmacro
        !macro HTML_FOOTER
            !HTML_PRE_SECTION
            !HTML_NAVIGATE
        !endmacro

Likewise, the default header and footer on sub-topics share a macro called HTML_TOPIC_NAVIGATE. Therefore, it is usually sufficient to override HTML_NAVIGATE and/or HTML_TOPIC_NAVIGATE instead of overriding the HTML_HEADER/HTML_FOOTER and HTML_TOPIC_HEADER/HTML_TOPIC_FOOTER macros respectively.

## 6.2. The Default Navigation Macros

The default implementation of the HTML_NAVIGATE macro provides the following jumps when topics are being generated:

Previous Topic
Next Topic

The default implementation of the HTML_TOPIC_NAVIGATE macro provides the following jumps:

Contents
Parent Topic
Previous Topic
Next Topic

In addition, the navigation macros can optionally provide the following jumps:

Home
Catalog
Search

## 6.3. Customising the Navigation Macros

Instead of simply overriding the HTML_NAVIGATE and HTML_TOPIC_NAVIGATE macros, it is also possible to customise their output by defining the variables below:

Variable | Description
HTML_URL_HOME | URL of the home page
HTML_URL_CATALOG | URL of the catalog page
HTML_URL_SEARCH | URL of the search page

For example:

      !define HTML_URL_HOME   "../index.html"
      !define HTML_URL_SEARCH "../search.html"

If one or more of these variables are set, the default navigate macros will output a second line containing jumps to the respective pages.

## 6.4. Customising Navigation Text

If you are generally happy with the default headers and footers but want to change the text to another language, say, you can set the following variables:

Variable | Default Value
HTML_TEXT_CONTENTS | Contents
HTML_TEXT_PARENT | Parent
HTML_TEXT_PREVIOUS | Previous Topic
HTML_TEXT_NEXT | Next Topic
HTML_TEXT_HOME | Home
HTML_TEXT_CATALOG | Catalog
HTML_TEXT_SEARCH | Search

The HOME, CATALOG and SEARCH variables only apply if the corresponding URL variables are set.

## 6.5. Pre-header and Post-footer Tuning

The generated HTML can be tuned by using the HTML_PRE_HEADER and HTML_POST_FOOTER variables. These variables contain HTML to be added immediately after the <BODY> and immediately before the </BODY> tags respectively. For example, a page-like border can be added to the generated HTML like this:

      !define HTML_PRE_HEADER  '<blockquote>'
      !define HTML_POST_HEADER '</blockquote>'

# 7. Inline HTML

As HTML is constantly evolving and contains features which SDF doesn't explicitly support (e.g. frames), it is occasionally necessary to directly embed native HTML. To do this, use the inline filter. For example:

        !block inline
        <P>
        My name is <B>Bill</B>.
        !endblock

If you want to use embedded expressions (enclosed in [[ and ]]) and macros within the inline text, add the expand parameter like this:

        !block inline; expand
            !if DATE
                <P>
                The date is [[DATE:DOC_START]].
            !else
                <P>
                The time is [[TIME:DOC_START]].
            !endif
        !endblock

Likewise, you can use the INLINE phrase style within a paragraph to embed HTML within a paragraph. For example:

      My name is {{INLINE:<B>Bill</B>}}.

# 8. Feedback

If you have any feedback on SDF or this tutorial, please let me know.

Home | Catalog