This section only shows what you can do to improve the layout of an HTML document in general. You should read this if you want to change an HTML template manually.
If you are creating an HTML template, we highly recommend that you use the template editor.
If you are using a template to export to PDF, there are a few settings that you could add to the template to make the PDF document look nicer. These settings are actually CSS 3 page rules. This section covers the following settings:
-
page size
-
header and footer
-
page numbers
-
page breaks
Please note that not all CSS3 page properties are currently supported by Fanurio when converting a document from HTML to PDF.
Page size
The size of a page can be set using the @page rule.
@page {
size: A4 portrait; /* can also use 'landscape' for orientation */
}Header and footer
The @page rule can also be used to specify the header and footer. The following example shows a document that has a 3-inch header and an 1-inch footer.
<html>
<head>
<style type="text/css" media="all">
@page {
size: A4 portrait; /* can use also 'landscape' for orientation */
margin-top: 3.0in;
margin-bottom: 1.0in;
@bottom-center {
content: element(footer);
}
@top-center {
content: element(header);
}
}
#page-header {
display: block;
position: running(header);
}
#page-footer {
display: block;
position: running(footer);
}
</style>
</head>
<body>
<div id="page-header">
<p>Header text</p>
</div>
<div id="page-footer">
<p>Footer text</p>
</div>
<div id="page-content">
<p>Body text</p>
</div>
</body>
</html>Page numbers
Use span tags to insert the current page number and the number of total pages.
<p>Page <span class="page-number"/> of <span class="page-count"/></p>
The span tags must be styled to contain the actual values.
.page-number:before {
content: counter(page);
}
.page-count:before {
content: counter(pages);
}Page breaks
There are several page-break properties. To enter a page break, just use the page-break-after property as shown in the following example.
<p style="page-break-after:always;"/>
Sample document
The following document has two A4 pages with portrait orientation and a 0.25 inch margin. A black border is drawn around the pages to emphasize the content.
<html>
<head>
<style type="text/css" media="all">
@page {
size: A4 portrait; /* can use also 'landscape' for orientation */
margin: 1.0in;
border: thin solid black;
padding: 1em;
@bottom-center {
content: element(footer);
}
@top-center {
content: element(header);
}
}
#page-header {
display: block;
position: running(header);
}
#page-footer {
display: block;
position: running(footer);
}
.page-number:before {
content: counter(page);
}
.page-count:before {
content: counter(pages);
}
</style>
</head>
<body>
<div id="page-header">
<p>Header text</p>
</div>
<div id="page-footer">
<p>Footer text</p>
<p>Page <span class="page-number"/> of <span class="page-count"/></p>
</div>
<div id="page-content">
<p>Page 1.</p>
<p style="page-break-after:always;"/>
<p>Page 2.</p>
</div>
</body>
</html>The following settings control how an HTML document is exported to PDF.
Fanurio can add a background layer when exporting an HTML document to PDF. To instruct it to do this, you have to add a link tag in the head section as shown in the following example.
<meta name="fanurio-pdf-background" content="letterhead.pdf">
The background layer is useful if you have a letterhead and you want to print the contents of the document over it.
The first page from the background layer is used as background for the first page of the document, the second page from the background layer is used as background for the second page of the document and so on. If the background layer has fewer pages, the last one is repeated for the remaining pages. This means that if the background layer has just one page, that page is used as background for all the pages of the document.
Title and meta tags from the head section are converted to document properties when an HTML document is exported to PDF. You can add author, subject and keywords meta tags to include additional information in exported PDFs.
<title>PDF Test</title> <meta name="author" content="author"/> <meta name="subject" content="subject"/> <meta name="keywords" content="keyword 1, keyword 2"/>
In order to embed fonts in exported PDF documents, you need to do three things.
1. Configure the font for the HTML template
The following CSS code shows how to configure the Liberation Sans font for the body but you can use different fonts for different parts of the document.
body {
font-family: "Liberation Sans";
}2. Register the font files
Copy the font files (Liberation Sans) to the same folder where the template is located. Fanurio scans the template folder and embeds all fonts in the exported PDF document. If you export your documents to HTML, it's the job of the browser to render them correctly and you don't have to copy them anymore.
Fanurio can work only with TrueType (*.ttf) and OpenType (*.otf) fonts. If you have other types of fonts, you need to convert them to one of these types.
3. Configure the character encoding
If the font doesn't render correctly, you also have to specify the character encoding. By default, Fanurio assumes it is UTF-8 (Unicode) but this will not work every time. The following code configures the template to use the Cp1252 character encoding:
<head> ... <!-- Replace Cp1252 with your charset --> <meta name="fanurio-pdf-encoding" content="Cp1252"> ... </head>
Cp1252 refers to the West European Latin character encoding. Other encodings are:
-
Cp1250 - East European Latin
-
Cp1251 - Cyrillic
-
Cp1252 - West European Latin
-
Cp1253 - Greek
-
Cp1254 - Turkish
-
Cp1255 - Hebrew
-
Cp1256 - Arabic
-
Cp1257 - Baltic
-
Cp1258 - Vietnamese
PDF/A is an ISO-standardized version of the PDF format specialized for use in the archiving and long-term preservation of electronic documents.
PDF documents created by Fanurio can be made PDF/A compliant with a just few changes, mostly via custom meta tags. You can also use the template editor to do the same thing easier. Here's a list of all the PDF/A meta tags:
-
PDF/A format: The PDF/A format is mandatory. It can be specified using the fanurio-pdf-xmpmetadata meta tag with the following properties:
-
pdfaid.part: The part of the PDF/A format (e.g. 1, 2, 3).
-
pdfaid.conformance: The conformance level of the PDF/A format (e.g. A, B, U).
The following example configures the document for the PDF/A-1b format.
<meta name="fanurio-pdf-xmpmetadata" content="pdfaid.part:1, pdfaid.conformance:B">
-
-
Attached file: The PDF/A-3 format allows files to be attached to the PDF document. The attached document can be specified using the fanurio-pdf-attachedfile meta tag with the following properties:
-
name: The name of the attached file.
-
description: The description of the attached file.
-
mime: The type of the attached file.
-
relationship: The relationship between the attached file and the document. Can be one of "Data", "Source", "Alternative", "Supplement" or "Unspecified".
-
data: The contents for the attached file specified as a Base64 encoded text.
The following example configures the PDF/A-3b format and attaches a text file called hello.txt that contains the text "Hello, world!" and has the description "Hello, world!" (the backslash is used to escape the comma).
<meta name="fanurio-pdf-xmpmetadata" content="pdfaid.part:3, pdfaid.conformance:B"> <meta name="fanurio-pdf-attachedfile" content="name:hello.txt, description:Hello\, world!, mime:text/plain, relationship:Unspecified, data:SGVsbG8sIHdvcmxkIQ==">
-
-
Output intent: PDF/A documents must have an output intent that specifies the characteristics of the device on which a document is intended to be rendered. By default, Fanurio creates an output intent for the sRGB IEC61966-2.1 ICC profile. If you need to use a custom color profile, you can define the output intent using the fanurio-pdf-outputintent meta tag. This tag has the following properties:
-
info: The name of the output intent.
-
output-condition: A description of the intended printing condition of the job, including type of printing (for example, offset commercial), paper type, and screen frequency.
-
output-condition-identifier: The reference name specified by the ICC registry of registered standard printing conditions.
-
registry-name: The URL giving more information about the output intent profile name. For the standard printing conditions registered with the ICC, this entry must be http://www.color.org/.
-
icc-profile-path: The name of the ICC color profile file. Must be located in the same folder as the html file.
The following example creates a custom output intent that configures the Adobe RGB (1998) ICC profile (must be downloaded).
<meta name="fanurio-pdf-outputintent" content="info:Adobe RGB (1998), output-condition-identifier:Adobe RGB (1998), icc-profile-path:AdobeRGB1998.icc">
-
-
Tagged document: Documents with conformance level A (PDF/A-1a, PDF/A-2a, PDF/A-3a) must be tagged. This can be specified using the fanurio-pdf-tagged meta tag.
<meta name="fanurio-pdf-tagged" content="true">
-
Embedded fonts: All fonts must be embedded with a specific encoding. Please see the above section for more details on how to do that.
<head> <meta name="fanurio-pdf-encoding" content="Cp1252"> <style> body { font-family: "Liberation Sans"; } </style> </head>
A quick way to test these settings is to add pdfa-1b.html or pdfa-3b.html to your invoices templates folder and use them to export an invoice to PDF.
PDF/A documents created by Fanurio can be validated online (Big Faceless Organization, Qoppa Software, PDF Tools AG) and offline (veraPDF).
|
Copyright © 2006-2024 Fanurio Time Tracking SRL |