Figuur

A diagram or schematic picture written in the bundle as SVG markup: a map of
the ditches, two buckets, a cross-section of a dike, shapes to count. It is
drawn like the rest of the booklet, in the theme's tones and the body font,
and an assistant can change it like any other text. For a photo or a rich
illustration, use an image instead; to draw on one (routes on an old map), put
it behind the drawing with `backdrop`.

- `svg`: one `<svg viewBox="0 0 120 60">`. The viewBox's numbers are the
  drawing's own units; the figure is `width` mm wide (default 120, at most
  150) and as high as the viewBox's proportions make it.
- Elements: `rect` (rx), `circle`, `ellipse`, `line`, `polyline`, `polygon`,
  `path` (all of SVG's path data), `text` and `g`. `transform` takes
  `translate`, `rotate` (also around a point) and `scale`, on a `g` or a
  shape. `opacity` on anything fades fill and outline together;
  `fill-opacity` and `stroke-opacity` fade one of them (a see-through area
  with a sharp edge: `fill="brown" fill-opacity="0.3" stroke="brown"`).
- As in SVG, a shape is filled black unless it says `fill`, and has no outline
  unless it says `stroke`. `fill`, `stroke`, `stroke-width`,
  `stroke-dasharray`, `stroke-linecap`, `stroke-linejoin` and the text
  attributes are handed down from a `g`, and may also be written in `style`.
- Colours are the theme's tones: `ink`, `muted`, `faint`, `paper`, `accent`,
  `tip`, `challenge`, and `blue`, `green`, `orange`, `purple`, `red`, `brown`
  for things that have a colour, like water. `black`, `white` and `grey` are
  ink, paper and muted; `currentColor` is ink here, and in a symbol the colour
  of the text it stands in. Each tone comes in three strengths:
  `light-blue` (any tone) is a very light wash, nearly white, for a
  background behind other shapes (as the theme's table headers);
  `mid-blue` is the colour halfway to white, a clearly coloured area that
  still covers what is under it (also for a lighter line); `blue` is the
  full colour. A cube's three sides are `light-blue`, `mid-blue` and `blue`.
  In grey print each strength stays apart: the tone a dark grey, `mid-` a
  middle grey, and a `light-` wash is left out (a shape with only a wash
  gets a thin outline). No hex colours, gradients, patterns, images,
  `defs`/`use`, CSS or filters in the svg: a picture goes behind the drawing
  with `backdrop` (below).
- Text: `x` and `y` as in SVG (the baseline; `dominant-baseline="middle"`
  centres it), `text-anchor`, `font-weight="bold"`, `font-style="italic"`.
  `font-size` in the viewBox's units, or `tiny`, `small`, `normal`, `large`,
  `huge`. Text stays upright in a rotated group.
- **Text size.** A number in `font-size` is in the viewBox's units, so it
  prints `width` ÷ viewBox width times as big (in mm), kept between 6 and
  24 pt. Normal text (10.5 pt) is about 3.7 mm: write `font-size` ≈ 3.7 ×
  viewBox width ÷ `width`, e.g. 9 in a viewBox 300 wide at `width: 120`.
  Simpler: leave `font-size` out (normal) or name a size.
- **Mirrored text is drawn as shapes.** Text is placed by `transform` but
  never turned or mirrored: `scale(-1 1)` on a `<text>` (or its `g`) moves
  it, the letters still read left to right. For letters in a mirror, draw
  them as `path`s.
- **Colours that mean something: use a named colour.** `accent`, `tip`,
  `challenge` and the greys take the booklet theme's colours, and the
  answer key, in the plain look, has tempono's own (accent is blue there).
  When a colour tells things apart (team red and team orange, water), use
  `blue`, `green`, `orange`, `purple`, `red` or `brown`: the same in every
  document.
- `grid`: squares under the drawing, drawn by tempono, so don't draw grid
  lines in the svg. `size` is the side of a square in the viewBox's units;
  `origin: [x, y]` (default `[0, 0]`) is a point two lines cross at; `tone`
  is `faint` unless you say otherwise. The lines stop at the viewBox's
  edges and keep a thin weight however the figure is scaled. Draw the
  shapes on the grid's size from its origin, so they sit on its lines:

  ```yaml
  - type: figure
    grid: { size: 7, origin: [3, 4] }
    svg: |
      <svg viewBox="0 0 120 60">
        <rect x="10" y="11" width="21" height="14" fill="mid-green" stroke="green"/>
        <rect x="38" y="25" width="28" height="28" fill="light-orange" stroke="orange"/>
      </svg>
  ```

  Shapes of different sizes in one figure share one grid: pick a size that
  goes into all of them, or give each its own figure.
- `backdrop`: a picture of the bundle under the drawing, such as a map from
  the 1600s with the routes of a game drawn on it. `src` is the image's file
  name (png, jpg or svg, saved with `save_asset`; with the CLI in the
  bundle's `assets/`). It fills the viewBox exactly: draw on it in the
  viewBox's units. `crop: { x, y, width, height }` (percent of the picture,
  `x`, `y` its top-left corner) takes only part of it; whatever is left is
  then trimmed evenly around its middle to the viewBox's shape, so it is
  never stretched: give the viewBox the picture's (or the crop's) shape to
  keep all of it. `fade` (0-90, default 0) lays a paper-coloured wash of
  that percent over it, so lines and text on top read; 30 to 50 suits a busy
  old map. The grid and the drawing go over it, and in grey print it prints
  grey, as images do.

  ```yaml
  - type: figure
    width: 150
    backdrop: { src: kaart-1650.jpg, crop: { x: 10, y: 20, width: 60, height: 50 }, fade: 40 }
    svg: |
      <svg viewBox="0 0 150 100">
        <path d="M 20 80 L 60 50 L 110 30" fill="none" stroke="red" stroke-width="1.2" stroke-dasharray="3 2"/>
        <circle cx="110" cy="30" r="2.5" fill="red"/>
        <text x="114" y="28" font-weight="bold">Batavia</text>
      </svg>
  ```
- `caption`: small, under the figure.
- **Long drawings become files.** Written in the bundle, a drawing is read
  with it every time and kept with every version. Over 8000 characters,
  validation warns: fine while you draw it. When it is done, `move_to_files`
  saves it as an image of the bundle and sets `src` instead of `svg` (or do
  that yourself with `save_asset`); a draft can't be published before. With
  `src` it is drawn by the same rules, up to 100,000 characters; its
  mistakes don't show when validating but in red where the figure would be.
  To change it later, write it inline again and move it again.
  While you draw, look at it with `render_preview` `alone: true` and its
  id (`tempono render --ids b12 --alone`): the figure by itself, sharper
  and quicker than its page. Look at its page once it is done.
  With the CLI (no `move_to_files` there): write the `<svg>` to the
  bundle's folder as `assets/<name>.svg`, put `src: <name>.svg` where `svg`
  was, and check it with `tempono render`; `tempono sync` sends the file
  with the bundle.

Ask questions about the figure with ordinary tasks under it; a pupil draws
in a `drawing` answer field, not in a figure.

**Signs in text are symbols, not figures.** A sign used in several places
(a tally of five, an Egyptian numeral) is drawn once under the bundle's
`symbols:`, by these same rules, and written in any text as `{{name}}`: a
table cell, a prompt, a choice's options. A number written in signs, or a
table of them, is then text and a `table`, not a figure of its own
(spec, Symbols). Symbol names are lowercase letters, digits and dashes:
`t-l`, not `tL`.