Scaffolding

The static HTML inside a Layout or Flow that doesn't change as content flows through it.

Scaffolding is the HTML that repeats as content moves across pages: headers, footers, table headings, and wrappers around a Stream.

How scaffolding repeats

Layouts and Flows can both contain scaffolding.

Layout scaffolding appears on every page the Layout creates. This includes Frames, which define the space available to their Flows. A Frame remains on each page even after its Flows have finished.

Flow scaffolding is the HTML around a Flow's Stream. It appears only on pages containing that Flow's content. For example, a table header inside a Flow repeats while the table's rows continue, then stops appearing when the rows end.

Nested Flows follow the same rule: their scaffolding repeats on every page containing their content.

The Stream marks where content appears. It doesn't add an HTML wrapper.

A worked example

<template data-type="flow">
  <table>
    <thead>
      <tr><th>Item</th><th>Qty</th><th>Price</th></tr>
    </thead>
    <tbody>
      <template data-type="stream">
        <tr><td>Design work</td><td>1</td><td>$400</td></tr>
      </template>
    </tbody>
    <tfoot>
      <tr><td colspan="3">Subtotal</td></tr>
    </tfoot>
  </table>
</template>

The <table>, <thead>, <tbody>, and <tfoot> repeat on each page containing rows from this Flow. Only the <tr> rows inside the Stream move from one page to the next.

Without a Stream, all of a Flow's children are content. Add a Stream when you need repeating markup around that content.

Nested-flow panels

Use a nested Flow for a section whose heading should repeat when its content continues on another page:

<template data-type="flow">
  <h1>Report</h1>
  <template data-type="flow">
    <section class="panel">
      <h2>Findings</h2>
      <template data-type="stream">
        <p>Finding one.</p>
      </template>
    </section>
  </template>
</template>

The panel and its heading repeat on every page containing findings from this Flow.

Varying across pages

Use CSS in the Layout to vary scaffolding by page. For example, hide a footer on the last page, change a header on the first, or adjust margins by page number.

Use separate Layouts when the page structure needs to change, such as a cover page with a different design.

Style a Flow's continuation

When a Flow spans pages, Format adds split attributes to the HTML elements wrapping its Stream. In the panel above, the attributes appear on <section class="panel">. A Flow that fits on one page has no split attributes on its wrappers.

Use [data-split-continued] to add “(continued)” to the heading after the first page:

.panel[data-split-continued] > h2::after {
  content: " (continued)";
}

To add a notice on every page except the Flow's last page, use [data-split]:not([data-split-end]):

.panel[data-split]:not([data-split-end])::after {
  content: "Continued on the next page";
  display: block;
}

Format includes the space for the notice when laying out each page. The notice is omitted on the Flow's last page.

Useful

Nested Flows

When a Flow contains another Flow, a continuation notice that takes up space can cause extra page breaks before the nested Flow. Format may start a new page even when the remaining content would fit without the notice. This is a current limitation.

If the Stream sits directly inside the Flow, add a wrapper such as <section> around it and any repeating content. Format needs an HTML element to apply the attributes to.

Where to place scaffolding

Where a block of repeating markup belongs depends on how often it should appear:

To appear...	Put it in…
On every page the Layout produces, in the Layout's general space	Layout scaffolding (outside any Frame or Flow)
On every page the Layout produces, constrained to a measured sub-region	Inside a Frame, around the Flow
On every page the Flow produces, above the items	Flow scaffolding, before the Stream (e.g. a `<thead>`)
On every page the Flow produces, below the items	Flow scaffolding, after the Stream (e.g. a `<tfoot>`)
Around a repeating block inside another stream	A nested Flow's scaffolding (around its Stream)

Was this page helpful?