Page Size
This is where you can find information on how the page sizes are defined.
Page Size - Built-in CSS rules
The [PLUGIN_DIR]/css/print/p-page-size.css file contains the default page rules. It uses the US-LETTER size (8.5 X 11 inches). The content of this file is:
@page {
padding-top:0.2em;
padding-bottom:0.2em;
size: us-letter;
margin: 1in;
}
How to Change the Page Size
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
Suppose you want to publish on a landscape page orientation. 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
Suppose your publication mainly uses a portrait page orientation, but there are some topics that have wide images. To avoid having the images bleed outside of the page, you could use a wider page setting (landscape).
- 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. - In your customization CSS, match the
output class and associate it with a named page. In the following example, the page has a
landscape orientation and small margins. This technique works for any element (e.g. a table
or list) not just for a
topic.
@page wide-page { size: letter landscape; margin: 0.5in; } *[outputclass = 'wide'] { page: wide-page !important; }
Note: The!important
rule is necessary to override the default page settings.