Layout & Positioning

Master page-based layout, positioning, and document structure to create professional multi-page PDF documents.

Page Sizes & Orientation - Standard/custom sizes, portrait/landscape
Margins & Padding - Page margins, element spacing, box model
Sections & Page Breaks - Page break control, pagination, keeping content together
Multi-Column Layouts - Native CSS columns, column widths, rules, and fill behavior
Positioning - Static/relative/absolute, overlays, watermarks
Table Layouts - Data tables, table sizing, borders, page breaks
Headers & Footers - Running headers/footers, page numbers
Layout Best Practices - Professional patterns, optimization, troubleshooting

Overview

Unlike web pages that scroll continuously, PDF documents are page-based. This series teaches you how to control page layout, manage content flow across pages, position elements precisely, and structure complex multi-page documents.

What Makes PDF Layout Unique?

PDF layout differs significantly from web layout:

Fixed Page Sizes - Content flows across defined pages (A4, Letter, etc.)
Page Breaks - Control where content splits across pages
Headers & Footers - Repeat content on every page
Sections - Different page settings within one document
Column Layout - Multi-column text flow
Absolute Positioning - Precise placement for overlays and watermarks

Quick Example

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <style>
        @page {
            size: A4 portrait;
            margin: 1in;
        }

        body {
            font-family: Arial, sans-serif;
            font-size: 11pt;
        }

        .chapter {
            page-break-before: always;
        }

        header {
            text-align: center;
            border-bottom: 2pt solid #333;
            padding-bottom: 10pt;
        }

        footer {
            text-align: center;
            padding-top: 10pt;
            border-top: 1pt solid #ccc;
        }

        .watermark {
            position: absolute;
            top: 50%;
            left: 50%;
            opacity: 0.1;
            font-size: 72pt;
        }
    </style>
</head>
<body>
    <header>
        <h1>Document Title</h1>
    </header>

    <div class="watermark">DRAFT</div>

    <div class="chapter">
        <h2>Chapter 1</h2>
        <p>Content here...</p>
    </div>

    <div class="chapter">
        <h2>Chapter 2</h2>
        <p>More content...</p>
    </div>

    <footer>
        <page>Page <page-number /> of <page-count /></page>
    </footer>
</body>
</html>

What You’ll Learn

This series covers everything you need for professional document layout:

1. Page Sizes & Orientation

Standard page sizes (Letter, A4, Legal)
Custom page sizes
Portrait vs landscape orientation
Setting size with @page rule
Mixing orientations in one document

2. Margins & Padding

Understanding the box model
Page margins with @page rule
Element margins and padding
Margin collapse behavior
Box-sizing property
Consistent spacing scales

3. Sections & Page Breaks

page-break-before and page-break-after properties
page-break-inside to avoid splitting
Controlling pagination
Orphans and widows
Keeping content together
Multi-section documents

4. Multi-Column Layouts

Native CSS columns with columns, column-count, and column-width
Equal and unequal column widths
Adding gutters (spacing)
Rule styling with column-rule and column-rule-*
Fill behavior with column-fill
Why flexbox/grid don’t work in PDF

5. Positioning

Position property (static, relative, absolute)
Positioning context and offset values
Centering with absolute positioning
Z-index for stacking order
Overlays and watermarks
Badge positioning

6. Table Layouts

Data tables vs layout tables
Table sizing (auto vs fixed)
Column width control
Border styles and alternating rows
Table page breaks
Repeating headers

7. Headers & Footers

Creating page headers and footers
Page numbering
Dynamic content in headers/footers
Scryber-specific implementation
Header/footer styling

8. Layout Best Practices

Core layout principles
Professional layout patterns
Performance optimization
Common pitfalls and solutions
Responsive layout strategies
Production checklist

Prerequisites

Before starting this series:

Complete Getting Started - Basic Scryber knowledge
Review Styling & Appearance - CSS fundamentals

Key Concepts

Page Flow

Content flows from page to page automatically:

┌─────────┐     ┌─────────┐     ┌─────────┐
│ Page 1  │ → → │ Page 2  │ → → │ Page 3  │
│         │     │         │     │         │
│ Content │     │ Content │     │ Content │
│ flows   │     │ continues     │ ends    │
│ here    │     │ here    │     │ here    │
└─────────┘     └─────────┘     └─────────┘

Page Anatomy

┌───────────────────────────────────┐
│  Top Margin                       │
│  ┌─────────────────────────────┐  │
│  │ Header Area                 │  │
│  ├─────────────────────────────┤  │
│L │                             │ R│
│e │                             │ i│
│f │  Content Area               │ g│
│t │  (Printable Area)           │ h│
│  │                             │ t│
│M │                             │  │
│a │                             │ M│
│r │                             │ a│
│g │                             │ r│
│i │                             │ g│
│n │                             │ i│
│  │                             │ n│
│  ├─────────────────────────────┤  │
│  │ Footer Area                 │  │
│  └─────────────────────────────┘  │
│  Bottom Margin                    │
└───────────────────────────────────┘

Positioning Modes

Static (Default)

Elements flow naturally in document order
No positioning offsets

Relative

Positioned relative to normal position
Offsets don’t affect other elements

Absolute

Positioned relative to containing block
Removed from normal flow
Perfect for overlays, watermarks

Common Page Sizes

US Letter (8.5” × 11”)

@page {
    size: letter portrait;
}

A4 (210mm × 297mm)

@page {
    size: A4 portrait;
}

Custom Size

@page {
    size: 8in 10in;
}

Landscape

@page {
    size: letter landscape;
}

Page Break Control

Force Page Break

<div style="page-break-after: always;">
    <p>This content ends the page.</p>
</div>
<p>This starts a new page.</p>

Avoid Page Break

<div style="page-break-inside: avoid;">
    <h2>Title</h2>
    <p>Keep this together on one page.</p>
</div>

Conditional Breaks

{{#each chapters}}
<div style="page-break-before: {{if(@index == 0, 'auto', 'always')}};">
    <h2>{{this.title}}</h2>
    <p>{{this.content}}</p>
</div>
{{/each}}

Column Layouts

Two-Column Layout

.content {
    column-count: 2;
    column-gap: 20pt;
    column-rule: 1pt solid #ccc;
}

Magazine Style

.article {
    columns: 3 170pt;
    column-gap: 15pt;
    column-fill: balance;
}

.article h1 {
    column-span: all;  /* Span across all columns */
}

Headers & Footers

Running Header

<header>
    <div style="text-align: center; border-bottom: 1pt solid #ccc;">
        <p>Document Title - Confidential</p>
    </div>
</header>

Page Numbers

<footer>
    <p style="text-align: center;">
        Page <page-number /> of <page-count />
    </p>
</footer>

Continuation Headers

<continuation-header>
    <p>Continued from previous page...</p>
</continuation-header>

Real-World Layouts

Report Layout

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <style>
        @page {
            size: letter portrait;
            margin: 1in 0.75in;
        }

        header {
            text-align: center;
            border-bottom: 2pt solid #1e40af;
            padding-bottom: 10pt;
            margin-bottom: 20pt;
        }

        .chapter {
            page-break-before: always;
        }

        footer {
            text-align: right;
            font-size: 9pt;
            color: #666;
        }
    </style>
</head>
<body>
    <header>
        <h1>{{report.title}}</h1>
        <p>{{report.date}}</p>
    </header>

    {{#each report.chapters}}
    <div class="chapter">
        <h2>{{this.title}}</h2>
        <div>{{this.content}}</div>
    </div>
    {{/each}}

    <footer>
        <page>Page <page-number /></page>
    </footer>
</body>
</html>

Multi-Section Document

<section style="page: A4 portrait; margin: 1in;">
    <!-- Cover page -->
    <div style="text-align: center; margin-top: 3in;">
        <h1 style="font-size: 36pt;">{{title}}</h1>
    </div>
</section>

<section style="page: A4 portrait; margin: 1in 0.75in;">
    <!-- Content pages -->
    <header>
        <p>{{documentTitle}}</p>
    </header>

    <div>
        <p>Main content here...</p>
    </div>

    <footer>
        <page>Page <page-number /></page>
    </footer>
</section>

<section style="page: A4 landscape; margin: 0.75in 1in;">
    <!-- Landscape section for wide tables -->
    <table>
        <!-- Wide data table -->
    </table>
</section>

Watermark Overlay

<style>
    .watermark {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
        font-size: 72pt;
        color: rgba(255, 0, 0, 0.1);
        font-weight: bold;
        pointer-events: none;
    }
</style>

<div class="watermark">{{if(isDraft, 'DRAFT', '')}}</div>

Learning Path

Recommended progression:

Start with Pages - Understand sizes and orientation
Set Margins - Define printable area
Use Sections - Structure complex documents
Control Breaks - Manage pagination
Add Columns - Multi-column layouts
Position Elements - Overlays and watermarks
Add Headers/Footers - Running content
Apply Best Practices - Professional layouts

Tips for Success

Plan Page Structure First - Sketch your layout before coding
Test Page Breaks Early - See how content flows across pages
Use Sections for Different Layouts - Mix orientations and sizes
Keep Content Together - Use page-break-inside: avoid
Test with Varying Content - Ensure layout works with different data
Use Absolute Positioning Sparingly - Can break page flow
Consider Printing - Ensure adequate margins for binding

Common Patterns

Chapter Starts on New Page

{{#each chapters}}
<div class="chapter" style="page-break-before: always;">
    <h1>Chapter {{@index}}: {{this.title}}</h1>
    <div>{{this.content}}</div>
</div>
{{/each}}

Keep Heading with Content

<h2 style="page-break-after: avoid;">Section Title</h2>
<div style="page-break-inside: avoid;">
    <p>This content stays with the heading.</p>
</div>

Dynamic Page Numbers

<footer>
    <div style="display: flex; justify-content: space-between;">
        <span>{{documentTitle}}</span>
        <span>Page <page-number /> of <page-count /></span>
    </div>
</footer>

Next Steps

Ready to master PDF layout? Start with Page Sizes & Orientation to understand the foundation.

Jump to specific topics:

Sections & Page Breaks for pagination control
Positioning for overlays and watermarks
Headers & Footers for running content
Table Layouts for data presentation

Related Series:

Styling & Appearance - Visual design
Content Components - Tables, images, SVG
Practical Applications - Real-world examples

Begin learning layout → Page Sizes & Orientation