Web for 'print'?

1

I was a little curious if anyone else had tried this— I have my current resume laid out in InDesign, but was kind of looking for a ‘more flexible’ format now that I have familiarity with HTML5/CSS.

But, even with the latest version of Chrome, either with Acrobat or Microsoft ‘Print to PDF’, the carefully selected design just seems to ‘blow apart’ when I try to print it.

For one, ‘what gives?’, and also, I wondered if anyone else had some better guidelines in ‘designing for print’ ?

2

Things like HTML and CSS are standards that are interpreted differently by different browsers For example, an <h1> does not mean the same thing on every browser. They will all be header type lines and stand out, and be bigger than an <h2>, but they won’t all have the same exact properties. Think of HTML and CSS as a fluid approximation.

And what happens when you print it? I don’t know. Some of the formatting is based on the size of your browser window. How does that translate to a page? I don’t know. Browsers just aren’t built for that.

Screens aren’t word processors, and vice versa. Some word processors will let you load html files, but you will still probably have to do a lot of monkeying, I would imagine. There are some utilities to convert from html to pdf, but I don’t know how good they are.

3

Could you post a link to your resume in HTML?

4

if anyone else had some better guidelines in ‘designing for print’ ?

If you just need to tweak your printer-friendly format, you can use CSS media queries.

@media print {
    // print styles go here , example:
    body {
        font-size: 1em;
    }
   // put your other classes, ids, styles here... 
    h1 {
        font-size: 2em;
        color: #666;
    }
}
1 Like
5

I feel i should expand my post above.

So an HTML page viewed on a browser serves a different purpose. Users can read what is on the screen/browser page, and they can also navigate around.

In addition, a typical webpage will have a header, menu and footer section. These areas are just a waste of space (and ink) when printed on paper. I mean, users can’t click on the menu links printed on the piece of paper anyway. Also, the header and footer section may occupy a lot of real estate on a printed page, wasting paper and ink.

This is where @media print CSS stylesheet comes in handy. Because you can create separate rules that will apply only on the printed page (without affecting your browser/screen page style).

So on a printed page, there is no need to show a header, menu, or footer. So you can do

header, menu, footer {
   display: none; 
}

or maybe you just want simple one-liner header and copyright footer for the printed page

printheader, printfooter {
    display: block;
}

or you want to restrict the size of images printed on paper, so they don’t blow up and occupy most of the page.

img {
   max-width: ???px;
}

Maybe, there are some sections on the webpage you totally don’t want in the printed version.

.advertisements{
   display: none;
}

If you’re using Bootstrap, it’s even easier because they have specific classes for print versions.

.visible-print-block
.visible-print-inline
.visible-print-inline-block 	
.hidden-print

In the olden days, we have to create a separate “printer-friendly” version of a webpage… for example, to print an article, or a story. This “printer-friendly” version is stripped off all the extras we don’t want printed. But nowadays, that isn’t needed anymore thanks to @media print CSS styling. We can easily turn off sections we don’t want printed, or adjust font/colors to better suit the printed page.

1 Like