4.6. Creating templates like a professional (HTML and CSS)

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.

4.6.1. Page formatting

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

  • background layer

  • document properties

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;"/>

Background layer

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.

<link rel="stylesheet" type="application/pdf" href="letterhead.pdf" />

The background layer is useful if you have a letterhead and you want to print the contents of the document over it.

Document properties

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"/>

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>

4.6.2. Fonts

If you want to use specific fonts for your templates, make sure you copy the font files to the same folder where the template is located and then change the template to use them.

Fanurio can only work with TrueType (*.ttf) and OpenType (*.otf) fonts. If you have other types of fonts, you need to convert them to one of these types. You should copy the font files only if you use the template to export the document to PDF. 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.

The following CSS code configures the template to use a specific font:

body {
    font-family: "AG Buch Condensed BQ"; /* replace this with your font */
}

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 a certain character encoding:

<head>
	...
	<!-- Replace Cp1252 with your charset -->
	<meta http-equiv="Content-Type" content="application/pdf; charset=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