Page Size
Edit online

This is where you can find information on how the page sizes are defined.

Page Size - Built-in CSS rules
Edit online

The [PLUGIN_DIR]/css/print/p-page-size.css file contains the default page rules. It uses the US-LETTER size (8.5in by 11in). The content of this file is:

@page {
    padding-top:0.2em;
    padding-bottom:0.2em;
    size: us-letter;    
    margin: 1in;
}
Note: This is listed solely for illustration purposes, as the plugin might use something different.

How to Change the Page Size
Edit online

Suppose you want to publish using the standard A4 page size, with a margin of 2cm.

In your customization CSS, use:

@page {
    size: A4;
    margin: 2cm;
}

If you need different margins depending on the page side:

@page {
    size: A4;
    margin: 2cm;
}
@page :left{
    margin-right:4cm;
}
@page :right{
    margin-left:4cm;
}

This would only increase the gutter margins or the inside margins needed for binding of the final book. The other margins would remain 2cm.

How to Change the Page Orientation
Edit online

Suppose you want to publish on a landscape page. The default is portrait, so you need to change it by using the size property. This will contain both the physical measurements and the orientation. In your customization CSS, use:

@page {
    size: us-letter landscape;
}

How to Change the Page Settings for a Specific Element
Edit online

Suppose your publication is mainly using a portrait page orientation, but there are some topics that have wide images. To avoid having the images bleeding outside of the page, you could use a wider page setting (landscape).

  1. Mark the topic with an @outputclass attribute and give it a distinct value (for example, wide). You can set the attribute on the root element of the topic, or on the <topicref> element from the map.
    Note: The outputclass values from the topicref automatically propagate to the root of the topic from the merged map.
  2. In your customization CSS, match the output class and associate it with a named page. This page has landscape orientation and small margins. This technique works for any element (consider a table or a list) not necessarily a topic.
    *[outputclass = 'wide'] {
    page: wide-page;
}

@page wide-page {
    size: letter landscape;
    margin: 0.5in;
}