Adding More Content

Now that we've covered the basics, let's expand our AI history document with richer content. Press supports all the standard elements we need for professional documents: lists, tables, images, and flexible layout frames.

Lists

Press supports both ordered and unordered lists, just like we'd expect:

Unordered lists:

<ul>
  <li>Machine Learning</li>
  <li>Natural Language Processing</li>
  <li>Computer Vision</li>
  <li>Robotics</li>
</ul>

Ordered lists:

 <ol>
  <li>Alan Turing proposes the Turing Test (1950)</li>
  <li>First AI program runs at Carnegie Mellon (1956)</li>
  <li>Expert systems emerge (1980s)</li>
  <li>The AlexNet Deep learning breakthrough (2012)</li>
</ol>

Tables

Tables help organize complex information clearly:

<table>
  <tr>
    <th>Era</th>
    <th>Key Development</th>
    <th>Impact</th>
  </tr>
  <tr>
    <td>1950s</td>
    <td>Turing Test</td>
    <td>Defined intelligence criteria</td>
  </tr>
  <tr>
    <td>1980s</td>
    <td>Expert Systems</td>
    <td>First commercial AI applications</td>
  </tr>
  <tr>
    <td>2010s</td>
    <td>Deep Learning</td>
    <td>Human-level performance in many tasks</td>
  </tr>
</table>

Images

Adding images is straightforward:

<img src="https://examples.papermill.io/images/ai-timeline.png" />

By default, images stretch to fill available width. If using all available width would make the image too tall for the space available, we use up all available height instead.

Headings

Press supports the full range of heading levels for document structure (h1-h6):

<h1>Main Title</h1>
<h2>Major Section</h2>
<h3>Subsection</h3>
<h4>Minor Heading</h4>

Layout with Frames

Frames give us precise control over layout – they're containers that organize our content.

Column Flow

By default, frames will flow their content downwards, one item after another:

<frame>
  <h2>Timeline</h2>
  <p>Events arranged vertically</p>
  <p>One after another</p>
</frame>

Pages are just frames, so by default content will flow down a page rather than across it.

Row Flowing:

If you want to place the content one after another in a row, you can specify a frame's direction:

<frame direction="row">
  <frame>
    <h3>Early AI</h3>
    <p>1950s foundations</p>
  </frame>
  <frame>
    <h3>Modern AI</h3>
    <p>2020s breakthroughs</p>
  </frame>
</frame>

Putting it all together

Here's a complete example that combines these elements into a rich, well-structured document:

<press>
  <document>
    <page width="21cm" height="29.7cm" page-margin="2cm">
      <h1>The Evolution of Artificial Intelligence</h1>
      <frame direction="row" height="30%">
        <frame width="50%">
          <h2>Key Milestones</h2>
          <ol>
            <li>Turing Test proposed (1950)</li>
            <li>Dartmouth Conference (1956)</li>
            <li>Expert systems boom (1980s)</li>
            <li>Deep learning revolution (2012)</li>
          </ol>
          <h2>AI Domains</h2>
          <ul>
            <li>Machine Learning</li>
            <li>Natural Language Processing</li>
            <li>Computer Vision</li>
            <li>Robotics</li>
          </ul>
        </frame>
        <frame width="50%">
          <img src="https://examples.papermill.io/images/ai-timeline.png" /> 
        </frame>
      </frame>
      <h2>Impact Timeline</h2>
      <table>
        <tr>
          <th>Decade</th>
          <th>Breakthrough</th>
        </tr>
        <tr>
          <td>1950s</td>
          <td>Theoretical foundations</td>
        </tr>
        <tr>
          <td>1980s</td>
          <td>Commercial applications</td>
        </tr>
        <tr>
          <td>2010s</td>
          <td>Human-level performance</td>
        </tr>
        <tr>
          <td>2020s</td>
          <td>Generative AI explosion</td>
        </tr>
      </table>
      <h2>Looking Forward</h2>
      <p>As we stand at the threshold of artificial general intelligence, the
        next decade promises even more dramatic changes. The foundations laid by
        pioneers like Turing continue to shape our digital future.</p>
    </page>
  </document>
</press>

This example demonstrates how Press enables us to create sophisticated layouts while keeping the content clearly organised. The horizontal stack creates each child as a column, each with its own arrangement of content.

So far, we've been combining the content and design directly: the <document> tag contains a page, which contains the body content.

We can extract the content out of this design and into a separate Flow. A Flow is Press' name for content, such as the body of a document or the contents of sidebar, article, or glossary. Flows enable us to re-use a template and easily change document content.