Everyone today has access to the internet and it might seem needless to want to print web pages. Nonetheless, there are certain webpages you might want to have printed out on paper, for different purposes like;
o Travel tickets
o Saving a document for offline reading
o Online invoice for bookkeeping purposes
o Reproducing tables or travel routes on hard-copy
o Providing hard-copy for those without access to the internet.
o Outputting draft documents for written annotation and analysis.
The list can go on and on. However, there are certain difficulties you might have experienced when trying to print webpages. It could either be that:
- The texts either too small or too big.
- Tons of advertisements are printed out and ink is wasted on unnecessary colored background or images.
- Some parts of the pages are cropped.
- Links aren’t differentiated from the rest of the text.
- The pages might just come out blank when printed.
As a developer, it is important that the content on your site be attractive and readable after it gets sent to the printer. In order to achieve this, you must need to prepare your webpages for its appearance on paper.
The CSS print control has made it possible for developers to make webpages printer friendly by setting the responsiveness of the web page — the page size, format, layout or margins.
USING CSS TO MAKE WEBPAGES PRINTABLE
The first step is to either create a separate cascading style sheet for your print style or you can apply it in addition to your normal screen styling. The difference between the two is this:
• Creating a separate style sheet: The screen and print styles are entirely separate.
The print style sheet can be added to the HTML
• Applying in addition to screen styling: Your screen styles serves as a base while the printer styles override the defaults where necessary. This can be done by using @media print. All CSS settings go in between the opening and closing curly braces.
REMOVING UNWANTED ELEMENTS
You must have encountered several unwanted elements arising on your printed page so, it is quite important to get rid of them in order to avoid ink wastage. Common unwanted elements on paper could include navigation menus, images, headers, footers, sidebars, social media widgets, advertising blocks, page title, categories, comments and some buttons etc. You can collapse or remove such with display:none
LINEARIZE LAYOUT
Grid and Flex most times don’t respond correctly with the printer layouts in any browser. If you encounter issues, consider using display: block; or similar on layout boxes and adjust dimensions as necessary.
CREATING PRINTER FRIENDLY STYLING
Recommendations:
• Make sure you use dark colored text on a white background
• Consider using only fonts which you are certain to find on nearly all computers (Times New Roman, Arial, Verdana).
• Adjust the text size to 12pt or higher
• Modify paddings and margins where necessary.
PAGE SIZE
The size property specifies the size and orientation of a page box. The four values that can be used for page size are:
• Auto: The page box will be set to the size and orientation of the target sheet.
• Landscape :The page box is the same size as the target, but the wider sides are horizontal.
• Portrait: The page box is the same size as the target, but the shorter sides are horizontal.
• Length: Length values for the ‘size’ property create an absolute page box, and if only one is specified, then the page box will be a square, because both of them will take the same size.
PAGE BREAKS
The page breaks is another important step in printing a html page. It is used for setting exactly where the page will be interrupted. The three CSS attributes used for this are:
• page-break-before — adds a page break before a specified element.
• page-break-after — adds a page break after a specified element.
• page-break-inside — sets an instance when a page-break should be avoided inside a specified element.
The values that can be used for break-before and break-after
• auto:- represents the automatic page-break
• always:- places a break every time avoid blocks the break.
• left and right :- Values are used to continue pages that are formatted left or right
• initial sets this property to its default value
The commonly supported values for break-inside:
• auto: the default — a break is permitted but not forced
• avoid: avoid an inner break where possible
• avoid-page: avoid an inner page break where possible
Highlighting Links
When trying to print content that contains links, you will notice that the ordinarily, links are not distinguished from the rest of the text. Links should be highlighted to get noticed. This can be done using the following:
CREATING THE PRINT BUTTON
After getting the print settings done, you can go ahead to add a print button on the particular page you would like to print. You can add the button like so:
or
Finally, I’m happy to have been able to show you how to prepare and design your HTML pages for printing. I believe with these techniques you will be able to create printer-friendly webpages.
Top comments (4)
Just a heads up that the Markdown we use here supports syntax highlighting, and is generally more accessible than inserting an image of code. Images of text are an issue for people using screen readers, for example, and their content won't get picked up by the site's search facility.
You can add code blocks with 3 backticks:
More details in our editor guide!
Thank you.
I'll definitely do this in my next article
wow, not bad for a first timer.. good job
One of the things I think worth emphasizing is the fact that browsers simply flow the content continuously, which means text and sections can spill over without any page breaks. When forcing page splits via css tags we might end up with half pages(like end of chapters in books), which is totally fine in most cases, but when you want to have more control over a certain layout(when you want to have a nice resume template), you end up with some issues. My approach was to try to have the page splits in browser to have html look on screen as on a4 papers, using css and javascript, similarly to what google docs does.