CSS Print Framework

If you want to improve your layouts for printing, this mini CSS Framework will definitely assist you.

What is a CSS Framework?

“A CSS framework is a library that is meant to allow for easier, more standards-compliant styling of a webpage using the Cascading Style Sheets language. Just like programming and scripting language libraries, CSS frameworks package a number of ready-made options for designing and outlaying a webpage.” – Wikipedia

One of the cool things in this CSS you can find on line 27/28. This part will grab all links of the document and append the URL to the link-names.

[ad name=”Adsense – text only”]

The Source:

body {
width:100% !important;
margin:0 !important;
padding:0 !important;
line-height: 1.4;
letter-spacing:0.2pt; font-family: Garamond,"Times New Roman", serif; color: #000; background: none; font-size: 12pt;

/*Headings */
h1,h2,h3,h4,h5,h6 { font-family: Helvetica, Arial, sans-serif; }

code { font: 10pt Courier, monospace; }
blockquote { margin: 1.3em; padding: 1em;  font-size: 10pt; }
hr { background-color: #ccc; }

/* Images */
img { float: left; margin: 1em 1.5em 1.5em 0; }
a img { border: none; }

/* Links */
a:link, a:visited { background: transparent; font-weight: 700; text-decoration: underline;color:#333; }
a:link[href^="http://"]:after, a[href^="http://"]:visited:after { content: " (" attr(href) ") "; font-size: 90%; }
a[href^="http://"] {color:#000; }

/* Table */
table { margin: 1px; text-align:left; }
th { border-bottom: 1px solid #333;  font-weight: bold; }
td { border-bottom: 1px solid #333; }
th,td { padding: 4px 10px 4px 0; }
tfoot { font-style: italic; }
caption { background: #fff; margin-bottom:2em; text-align:left; }
thead {display: table-header-group;}
tr {page-break-inside: avoid;}

/*hide various parts from the site

#header, #footer, #navigation, #rightSideBar, #leftSideBar


To use this Framework, just attach it to your header and choose “print” as media-type.

<link rel="stylesheet" href="print.css" type="text/css" media="print"/>

via hartija at Google Project Hosting.


Get cross-browser document height in JS

This function will return any document’s height.

[ad name=”Adsense – text only”]

It’s been tested in IE, FF, Safari, Chrome and Opera. If the actual document’s body height is less than the viewport height then it will return the viewport height instead.

The Source:

function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)