Confluence 4.0 : Advanced PDF Stylesheet Customisations
This page last changed on Sep 07, 2011 by pwatson.
Page CustomisationsModifications to page and margin properties are made in the Changing the Page Orientation to Landscape or PortraitTo change the page orientation of your PDF document, reverse the order of the values declared in the For example, to generate PDF space exports in A4-sized landscape orientation, your @page { /*A4-sized pages in landscape orientation are 297 mm wide by 210 mm high*/ size: 297mm 210mm; } Customising Page Margins SeparatelyTo set the margins of each side of a page independently of the other, you can declare each margin size in the
For example, to generate PDF space exports with top and bottom margins of 1 inch and left and right margins of half an inch, your @page { margin-top: 2.54cm; margin-bottom: 2.54cm; margin-left: 1.27cm; margin-right: 1.27cm; } Page Header and Footer CustomisationsAdding Headers and Footers to Single Page ExportsAs mentioned in Editing the PDF Stylesheet, custom headers and footers by default, only apply to space export' and not to exports of single pages. However, it is possible to add CSS rules to your PDF export stylesheet that allow custom headers and footers to appear in single page exports. For custom headers, define For custom footers, define Add the following rules to add a document title at the centre of the header and a page number at the centre of the footer: @page /* Any page-specific properties */ { @top-center { content: "Document Title Goes Here"; font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif; font-size: 8pt; } @bottom-center { content: "Page " counter(page); font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif; font-size: 8pt; } /* Any other page-specific rules */ } Notes:
Adding Images to Headers and FootersTo insert an image into a header or footer, edit the header and footer sections of the PDF layout and use an HTML For example, to add an image to the left of the header: <div style="margin-top:10mm"> <img src="/download/attachments/12346/header-image.png"/> </div> In the example above, the header includes an image called 'header-image.png'. The image is attached to a Confluence page and is referenced via its relative URL (that is, we use only the last part of the URL, excluding the Confluence site's base URL). Follow these instructions to include an image on your PDF title page:
To add an image to a footer, add similar HTML code consisting of an Notes:
Page Selector Rules for Left- and Right-Hand PagesIf your PDF exports are destined for double-sided printed media (for example, books), you can define different customisations for left- or right-hand pages. To do this, define two CSS pseudo-class page selectors as separate rules within the PDF stylesheet.
You can use these page selector CSS rules in your PDF stylesheet to define alternating left and right margins to allow room for binding a double-sided document. For example: @page :left { margin-left: 3cm; margin-right: 1.27cm; /* Any other left-hand page-specific properties and rules */ } @page :right { margin-left: 1.27cm; margin-right: 3cm; /* Any other right-hand page-specific properties and rules */ } Incorporating Other FontsOut of the box, Confluence provides Times New Roman, Helvetica or Courier fonts for use in PDF exports. You can incorporate your own fonts for use in PDF exports by declaring them within a The following CSS rule example shows how to embed the Consolas font into your PDF export: @font-face { src: url(file:///usr/share/fonts/Consolas.ttf); -fs-pdf-font-embed: embed; } .code pre, .preformatted pre, tt, kbd, code, samp { font-family: Consolas, monospace; font-size: 9pt; } The font path specified in the CSS must be the path to the font on the Confluence server. Hiding Text from the PDF OutputThis section describes a way to hide text from your PDF export. In other words, you can have text on the Confluence page that will not appear in the PDF export. There are two stages:
NotesIf styling is not working as expected, it is useful to look at the HTML source to which the CSS is applied. Whenever you create an HTML export that contains multiple pages, the intermediary HTML is stored in the <confluence-home>/temp/htmlexport-20110308-154047-1/export-intermediate-154047-2.html Related Topics |
![]() |
Document generated by Confluence on Sep 19, 2011 02:32 |