CSS Print Stylesheet Tips & Tricks

CSS print stylesheets often get put on the back burner, if they ever get made at all. Most front-end developers and designers out there are more obsessed with pixels than printers. This can cause a gap in your site’s consistency when users attempt to print pages on your site. Often times, what get’s printed and what they see on the screen are two completely different things. From images wrapping in odd places to pages getting cut off on the sides, printing webpages can sometimes be a big headache for users.

CSS print stylesheets often get put on the back burner, if they ever get made at all. Most front-end developers and designers out there are more obsessed with pixels than printers. This can cause a gap in your site’s consistency when users attempt to print pages on your site. Often times, what get’s printed and what they see on the screen are two completely different things. From images wrapping in odd places to pages getting cut off on the sides, printing webpages can sometimes be a big headache for users.

Coding CSS print stylesheets doesn’t have to be a monumental task. Let’s go through some simple tips and tricks that can save you both time and headaches.

Place styles in a print media query.

Remember, you don’t need to recreate your entire CSS. Most all styles are inherited by the print query, only the differences should be defined.

Make color changes explicit.

Most browsers will automatically reverse colors to save toner ink. This can sometimes cause problems with the quality of the printed page. For best results, make color changes explicit.

Remove unneeded page elements.

Generally, the goal for printed pages isn’t to provide an exact screenshot of what’s seen on the screen. Instead, to provide a well-designed print version of it. Elements like navigation bars and search forms aren’t needed on printed versions, so remove those to save both room and ink.

Set page width & margins.

Make sure your content is getting printed edge to edge by setting the body width to 100% and defining the page margin. I’ve seen some sites that go a little further and provide users some extra space for handwritten notes on the page.

Avoid odd page breaks.

Make sure your content doesn’t get spilt up across multiple pages at odd points. This can sometimes be the biggest headache when creating print stylesheets.

Force background images & colors.

Some pages require background images and colors to appear correctly. You can force these colors to show when printed in color with WebKit browsers (Chrome or Safari) using a separate media query. Unfortunately, at the time of writing this article, there’s no equivalent for Firefox, Opera or Internet Explorer (no big surprise there).

Display link URLs.

Remember, this is a printed version of the page so users have no way to access links without knowing the URL of those links. Providing a reference to the linked URLs tell’s users where those links go to. Take a look at the HTML code below:

Here’s the printed result of the code above:

With the holidays coming around the corner, many people are looking for unique gift ideas < http://www.knowgifts.com > to surprise their loved ones.

One problem with the code above is that both anchor links and linked images will also get expanded. We can fix that with a countermand CSS rule:

Selecting links around images can be more difficult since CSS doesn’t currently allow for selections of elements based on its children. This get’s remedied with the CSS4 parent selector:

CSS4 also makes expanding external links easier:

Provide QR codes for easy URL references.

Using Google’s Chart API, you can provide users a QR code on printed pages. There’s a downside to this approach, because you have to define the URL in the style. If you’re running PHP or another dynamic scripting language, this can be fixed by providing the URL automatically:


Worth-while CSS Print Articles & Tutorials

Check out these other great articles and tutorials regarding CSS printing:

WordPress or Drupal: Compare to learn what’s best for your site!

I recently received a message from a local Austin computer technician, Sergio Garcia. His question is a common one among business owners looking for a quick and easy solution to setup and mange their new sites, which is better, WordPress or Drupal.

Hey I just have a quick question, I fix computers in the South Austin area for a living and it has been time for me to have a website. Nothing too complicated but a good-looking simple and effective page where guests can find my business phone number, map where they can find me, maybe with a slider in the first page with pictures of my work and the office, blog and all that.

I don’t know much but I hear Drupal and WordPress are good options but I do not know which one is better.

Thanks,
Sergio

Do a quick Google search for WordPress or Drupal and you’ll find article after article proclaiming one over another. It’s a never-ending debate that’s been taking place for decades. Years ago, there may have been a right and wrong answer to that question, but with time comes technology and technology is what builds advanced CMS. Since the release of WordPress 3.0 on June 17, 2010 and Drupal 7 on January 5, 2011, the line between which is better has become fuzzy. It’s no longer a question which is best, but which is best for each person site’s needs. I might take some flak for this statement, but I challenge my readers to prove me wrong; There’s nothing a WordPress site can do that a Drupal site can’t and nothing a Drupal site can do that a WordPress site can’t.

Continue reading “WordPress or Drupal: Compare to learn what’s best for your site!”

Introduction to Drupal Preprocess & Process Functions

[dropcap type=”v2″]I[/dropcap]n this post, I’m going to give you an introduction to Drupal’s powerful preprocess and process functions. If you’re not already familiar with these functions, I like to think of them as both a front-enders nightmare and best friend. A nightmare only because it’s Drupal and with everything Drupal, has a steep learning curve. A best friend because, it provides the front-ender more control over the output of rendered code allowing for more efficient, clean, and crisp markup. It does need some basic PHP knowledge, but hopefully after reading this post everything will make sense.

Continue reading “Introduction to Drupal Preprocess & Process Functions”

Local SEO Strategies — Drive local customers to your website.

[dropcap type=”v2″]T[/dropcap]argeting the right demographic is one of the most important aspects for many local business websites. Since the internet is global, its sometimes hard to know what to do when it comes to optimizing your site for a particular area. This is important for a business so it can improve its visibility for local customers. Luckily search engines are evolving to meet demands like these; enter the world of Local SEO.

Local Search Helping Small Businesses

Sites optimized for local search can vastly improve its search engine rankings. Say you’re a Googler trying to find a local coffee shop or transportation service around you. If a site has been properly optimized for local search, Google will display a map and other relevent information to the searcher for businesses they’re looking for. This helps click-through rates and makes it easier for customers to find what they’re looking for.

Continue reading “Local SEO Strategies — Drive local customers to your website.”

Open Letter to My Girlfriend (Now finance!)

[dropcap type=”v2″]I[/dropcap] originally wrote this on May 16, 2011 (1 year, 8 months, 29 days ago) and posted in on Facebook for all of our friends and family to read. An open letter to my girlfriend (now finance), I wanted the world to know how amazing she is and how lucky I feel to be with her. I meant every word then and even more so now. Angela Aruffo, soon to be Angela Marshall, Happy Valentine’s Day! I love you Poptart!

Continue reading “Open Letter to My Girlfriend (Now finance!)”