Tips for building HTML documents that are intended to be converted to PDF.
The media attribute and media queries
First, it’s really important to tell the browser to use your styles for print media! If you’re wondering “why aren’t my styles being picked up at all?!” - make sure that you’re using the media attribute or a media query.
There are a few ways you can do this. When linking to an external stylesheet, you can set the media attribute to all. This instructs the browser to use these styles for all media types, including print:
<linkrel="stylesheet"href="main.css"media="all">
You can also set the media attribute on inline <style> tags:
<stylemedia=”all”>
h1{text-align: center;}
</style>
If you’d like to specify different styles for screen and print media, one option is to load two stylesheets:
Alternatively you can use media queries within your stylesheet:
@media print{
body{
color: #000
background: #fff
}
}
Controlling page breaks
You can use the page break properties to control where page breaks occur. For example, you might want to force each <article> element to start on a new page: