Multiple Pages with Different Page Margins

Use page-specific CSS and `pagebody` tags to apply different margins or orientation within one PDF template.

Use page-specific CSS when one PDF template needs different margins across pages.

This approach also works when one section needs a different page orientation.

Problem

You need one generated PDF to use more than one page layout.

Common examples:

• a cover page with wide margins
• an embedded section with no margins
• a landscape page between portrait pages

Standard body styling is not enough for this case.

Solution

Define named @page rules in CSS.

Then wrap each section in a <pagebody> tag with a matching class name.

S-Docs converts each <pagebody> tag to a body tag at runtime.

multi-page-margins-example.html

<style type="text/css">
@page parentTemplate {
  margin: 1in;
}

body.parentTemplate {
  page: parentTemplate;
}

@page componentTemplate {
  margin: 0in;
  size: landscape;
}

body.componentTemplate {
  page: componentTemplate;
}
</style>

<pagebody class="parentTemplate">
Test Page 1
</pagebody>

<pagebody class="componentTemplate">
Test Page 2
</pagebody>

<pagebody class="parentTemplate">
Test Page 3
</pagebody>

How it works

• @page parentTemplate sets the first margin profile.
• @page componentTemplate sets the second profile.
• body.parentTemplate and body.componentTemplate map each section to a page profile.
• Each <pagebody> block starts a new page context with its assigned settings.

Example result

In the example above:

• Test Page 1 uses 1in margins
• Test Page 2 uses 0in margins and landscape orientation
• Test Page 3 returns to 1in margins

Tips

• Keep each <pagebody> section self-contained.
• Use clear CSS names when you define multiple page layouts.
• Test the final PDF output, not just template preview.

Related resources

• Review PDF Rendering Considerations for broader PDF limitations.
• Review MDN's CSS @page reference for supported page-rule syntax.