Optimizing Your Website Content For Print Using CSS

By  on  

Now that you've optimized your website structure for print and you've isolated the content worth part of your page, you can move forward with optimizing your page content for print. Remember that we included our "main" style sheet with the media "all," meaning that those properties will carry over into print. Essentially, we are readjusting our settings for print. Readability is our central goal.

Adjust Your Heading Tag Properties

If you've optimized your website for search engine optimization you're probably using your "h" tags to the fullest. Realize that you wont have color options when your site is in printed mode -- few people print in color. I recommend limiting your heading to <h1> through <h3>. After three headings, the printed result will lose some organization. Padding, margin, border, and font-size will be important. Make sure your <h1> tag is large enough to make it known that it is the subject of the printed piece. For the <h2> tag, I recommend using a bottom-border property to establish the tag as the second heading. The <h3> will be the same size or slightly larger than the paragraph text. All tags will be in bold. To make things easier, I recommend using margin and setting the padding to 0; the two properties control the same function for printing and it will be easier to just use one. I recommend very little margin below the heading with exception to the <h1> tag. I use the following:

h1,h2,h3	{ font-weight:bold; }
h1		{ font-size:24px; }
h2		{ font-size:16px; border-bottom:1px solid #ccc; padding:0 0 2px 0; margin:0 0 5px 0; }
h3		{ font-size:13px; margin:0 0 2px 0; }

Adjust Your Paragraph Tag Properties

Most people don't do anything too drastic with their paragraph tags but there are some properties you can optimize. The line-height, padding, and margin will be the most important properties to address. I also recommend setting the bottom margin of the paragraph to a value more than the line-height. Lastly, adjust the font-size to a reasonable ratio to your headers and use a standard font-family if you aren't already. I use the following:

p		{ font-size:11px; font-family:times new roman, serif; margin:0 0 18px 0; }

Format Your Links

Print doesn't allow for fancy formatting of links like we've come to enjoy on the screen, so we can keep these simple by simply adding the necessary text-decoration declaration:

a		{ text-decoration:underline; }

Advanced Link Formatting

I call this advanced for a couple of reasons. First, you're relying on CSS not currently supported by all browsers -- Internet Explorer 6 is your adversary here. The following will be completely ignored by IE6 and lower. Second, some programmers don't like the idea of CSS-generated content. Purists, please skip this section.

Showing the user a link may not be good enough. What if you'd like them to know the URL of the link? Simply add the following to your print stylesheet:

a:link:after, a:visited:after { content: " (" attr(href) ") "; font-size: 90%; }

Adjust Any Custom Classes

Look through your custom CSS classes to make sure none of your other settings will cause your page to look unorganized.

Your web site is now ready to go to print! Be sure to abuse the "Print Preview" option of each browser to ensure maximum readability.

Recent Features

  • By
    From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!

    My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...

  • By
    I&#8217;m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

Incredible Demos

  • By
    Create a Download Package Using MooTools Moousture

    Zohaib Sibt-e-Hassan recently released a great mouse gestures library for MooTools called Moousture. Moousture allows you to trigger functionality by moving your mouse in specified custom patterns. Too illustrate Moousture's value, I've created an image download builder using Mooustures and PHP. The XHTML We provide...

  • By
    Create a Clearable TextBox with the Dojo Toolkit

    Usability is a key feature when creating user interfaces;  it's all in the details.  I was recently using my iPhone and it dawned on my how awesome the "x" icon is in its input elements.  No holding the delete key down.  No pressing it a...

Discussion

  1. May anyone send me javascript codes that prevent a web page from being saved,printed or copied.Please I need help

  2. Great article. Thanks for posting :)

  3. JT

    I have 10 custom DIV panels that are placed beneath each other. In IE the panels are cropped if there isn’t enough space. Each div has a class “detailPanels”. Using CSS I am setting page-break-after: auto; for this class. This doesn’t seem to work and I have already spent so much time on this. Is there anyway I could put a page break and push things to a new page for IE. I need help. Thanks in advance.

  4. Railin

    Font-weight attribute for H1 H2 H3 is set by default, so you can omit it.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!