Category Archives: Web

Creating Print Stylesheets for Other Sites

Creating a print stylesheet for your website is a nice optimization that your visitors will appreciate, especially if your site features articles that are longer or are technical in nature. Print stylesheets don’t take too much effort to create and maintain over time along with your site CSS.

But what if you’d like to have print stylesheets on someone else’s website?

Here’s an approach I’ve used to hack together simple print stylesheets that I’ve sent to other site owners as a contribution. This works very well for personal blogs and open source projects, both of whom are usually open to contributions.

Make a Local Copy

The first step is to make a local copy of a representative page from the site. For example, if the site is a blog, pick a good sample post (not the home page or an index page).

These steps require wget which already exists on most Mac/Linux systems, or can be installed for Windows.

  1. Download the sample page with wget: wget -p --convert-links URL
  2. If the downloaded file doesn’t have extension .html, rename it (e.g. if the download was index.php, rename it to index.html)
  3. Open the .html file in a local browser and make sure everything looks okay; some dynamic content such as ads may not appear correctly, but that’s okay
  4. Edit the .html file and after all the other CSS includes, add reference to a new local file: <link rel="stylesheet" href="print.css" media="all" />
  5. Create the print.css file and start with something that will be obvious like: p {color:red;}
  6. Refresh the .html file in the browser and make sure the local print.css is being picked up

Create Print Stylesheet

Now we’ll go through and build up print.css to hide and adjust content sections as needed to create a good looking printout. For this step I usually use Chrome or Firefox with their built-in Inspect Element features. You can make iterative changes to the print.css and refresh in the browser.

Hide Sections

Find all sections/divs that are not the content. This will typically be the header, footer, sidebar, ads, comments, and so on. You’ll need to adjust your CSS selectors depending on the content, starting with the most general and working down as needed.

For each section identified, set it to display:none. For example:

header, footer, div#leftnav {
    display: none;
}

Adjust Widths

Most site designs will have a hierarchy of <div> elements which result in the main content being narrower than the full page. We want to adjust that out to 100% to be more appropriate for a printout. A good starting point is the following:

div#content, #main {
    width: auto;
    max-width: 100%;
    float: none !important;
}

Adjust Fonts

You might need to adjust the font settings, particularly the size. There is also the question of serif vs sans-serif and which works better for print. (You choose.) You may also need to reduce font size and margins for heading elements <h1>, <h2>, etc. if they are being printed too big.

For example:

div#content, #main {
    font: 11pt Georgia, "Times New Roman", Times, serif;
    line-height: 1.3;
}

Optional

Depending on the site content, here are some other things to consider:

  • Hide any embedded video objects like YouTube
  • Hide comments/discussion
  • Set color to black on white background
  • Add URLs after <a> links

Contribute Back to Site Owner

Once you have your print.css file ready to go, I suggest adding comments to clarify the different changes you made. That way, the recipient can better understand what you’ve done, and make selective changes if they want.

Send the file to the site owner as a .txt file, or via a service like pastebin. They can use your contribution either as a standalone print stylesheet (<link rel="stylesheet" href="print.css" media="print" />) or directly inside an existing stylesheet at the end (@media print { ... }).

Good luck. If you use this technique and are successful in creating a print stylesheet for someone else’s site, let me know!

Clean Up Your Twitter App Permissions

Twitter users should periodically review their application permission settings to clean out any old applications they have authorized. Over time these can pile up and it’s good to clean them out.

The steps are simple:

  1. Login to Twitter and navigate to the Application Settings page
  2. Review the list of applications and click Revoke Access for any you no longer need or don’t remember authorizing
Twitter App Permissions
Twitter App Permissions

Screencast: Mover.io Blog Backup to Box.com

I recently started using Mover.io to back up my blog. Mover is a relatively new service which can migrate or back up between several different cloud services. I’m starting to use it as part of my backup strategy, making sure even files I have “in the cloud” are located in more that one service.

The pricing model is also quite simple: they charge $1 per GB transferred. You deposit money in your account and it draws down. In the case of this blog, the initial data transfer was about 1 GB, and the daily incremental backups are usually under 1 MB. At that rate my initial $10 will last quite a while.

To demonstrate the steps, here’s a short screencast in which I add a regular backup task from part of my blog to the Box cloud service:

Mover.io Demo – Back up blog to Box cloud service

Tech Advent Calendars – 2013

It’s that time of the year again – Advent calendars for many tech communities. As in past years (2011, 2012), I’ve gathered a few here that should be interesting:

Web Advent is taking the year off.

I have a combined RSS feed (created with Yahoo! Pipes) that picks up all of these advent calendars: http://feeds.feedburner.com/TechAdventCalendars. (Yahoo Pipe source).