In this digital world there are days when some of your applications/forms/content are to be printed. This is where you have to develop HTML that is rendered to create PDF.
Offlate our team had worked on lot of forms/tickets/receipts that were digitized for records and printed for reference where there were different set of challenges we faced and following are few tips to get it right in shortest time, although a lot depend on type of content being rendered.
Basics of HTML for printing a file that will work in almost all the prints :-
- go native, use as much as you can the old school HTML tags like <table> <p> <ul> <li> etc
- use properties of HTML tags like width, cellpadding, cellspacing, align, etc
- use formatting tags like <u> <b> etc
- avoid inline css
- avoid advance / css 3 properties
Few essential css to consider :-
THE @PAGE RULE
The @page rule is to specify aspects of a page box.
@page {
size: 5.5in 8.5in;
}
or
@page {
size: A4;
}
or
@page {
size: A4 landscape;
}
Selectors to define different margin sizes for our pages.
@page :left {
margin-left: 3cm;
}
@page :right {
margin-left: 4cm;
}
@page :first {
}
The :blank pseudo-class selector targets any page that is “intentionally left blank.” To add this text, we can use generated content that targets the top-center margin box.
@page :blank {
@top-center { content: “This page is intentionally left blank.” }
}
PAGE BREAKS
h1
{
page-break-before: always;
}
To avoid breaks directly after a heading, use page-break-after.
h1, h2, h3, h4, h5
{
page-break-after: avoid;
}
To avoid breaking figures and tables, use the page-break-inside property.
table, figure
{
page-break-inside: avoid;
}
COUNTERS
CSS counters let you adjust the appearance of content based on its location in a document. To use a CSS counter, it must first be initialized to a value with the counter-reset property (0 by default). The value of a counter can be displayed using either the counter() or counters() function in a content property as shown below :
@page { counter-increment: page }
This rule instructs the layout engine to create a counter called “page” it can be anything). This counter is incremented for each page. As with any counter, you can then use the current value of the counter anywhere in the document
For example:
CSS -> #pageNumber { content: counter(page) }
HTML -> <span id=”pageNumber”></span>
For example with this CSS rule:
#pageNumber { content: counter(page) }
and this piece of HTML:
<span id=”pageNumber”></span>
You can use the current page number counter as content in the HTML document. You can even go further. Say you want to start your page number at 10. You can then use the @page:first rule to reset the counter for the first page to value 9.
@page { counter-increment: page } @page:first { counter-reset: page 9 }
The combination of both rules will reset the counter for the first page to 9. Then for each page (including the first) it will increment the counter. This results in a counter value of 10 for the first page, 11 for the second and so on.
INCLUDING WEB FONTS
@import url(‘https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,500,700i');
.heading {
font-family: Montserrat, Serif;
font-weight:500;
}
Use @import rule to web font into the pdf.
