For complex mathematics that cannot be expressed as linear text, you can use a graphics program to 'draw' the math. You could use bitmap paint application, or a vector graphics application. Then you could save it to one or more graphics file formats for inclusion in a DocBook mediaobject element.

The DocBook equation element lets you assign a formal title to the mediaobject it contains. Such formal titles are numbered, and can be included in a List of Equations at the front of a book. The equation element also lets you specify an alt element, so you can associate a text string with the graphic for sight-impaired readers. The informalequation element is similar but does not contain a title.

Both equation and informalequation format the graphic as a separate block. If you need an inline equation, you can use the inlineequation element instead. It will embed the graphic equation within a line of text.

The following is an example of a PNG equation file:

<equation>
  <title>A Bitmap Equation</title>
  <mediaobject>
    <imageobject>
      <imagedata fileref="math.png" format="PNG"/>
    </imageobject>
  </mediaobject>
</equation>

Bitmap files can be used in both HTML and FO output. But small text in bitmap graphics look rough in print. If you drew the math using a vector graphics program, you could save the graphic again to a vector format such as SVG. Since SVG is not supported in all HTML browsers, you may have to include two imageobject elements in the mediaobject element and use the appropriate one for each output. See Example 17.1, “Multiple graphics in a mediaobject”.

In HTML output, you can control the spacing and alignment of equations using CSS styles. Each equation is wrapped in a <div class="equation">, and similarly for informalequation, but not for inlineequation.

For FO output, the equation.properties attribute-set lets you set spacing and alignment on the block that contains an equation graphic. There is a similar informalequation.properties attribute-set for informalequation elements, but no attribute-set for inlineequation elements, since they don't need spacing or alignment.