Question

What I Know

Now I know how to add a print stylesheet in the webpage to design the print layout. Its something like:

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

But I don’t want that.

In this blog go to any article or post and print preview the page (with Google Chrome). Now if you go down the page (in save PDF mode) you will see that extra text is appended which is (This story was originally published at Digital Inspiration.. ..This printer ­friendly version is made available for your personal and
non­commercial use only). You can see that message only if you print(-preview), not on the webpage normally.

What I Tried to find out

When I view the page source of the page then there is only two stylesheets attached out of one is main and one is for webfont. For JavaScript, there is only one main JavaScript file attached and the rest are for webfont, CSS3 MediaQueries, HTML5-Shiv and for ads which I don’t suspect to be contain any print related stuffs. When I tried find those both main CSS and JavaScript files (with CTRL–F feature), the search for printer friendly didn’t matched anything.

What I didn’t tried

I haven’t asked site owner how he did it, nor going to ask 😉

Question

How did he did that? Is here JavaScript involved? or CSS? In [noscript] tag the text inside that tag are only shown if user has javascript disabled. Is there something same for printing? Something like [onlyonprint] tag?

Answer 1

He’s using the :after pseudo-element:

#content:after {
    content: "This story was originally published at Digital Inspiration...";
    font-size: 90%;
    font-style: italic;
    line-height: 1.5em;
    margin: 3em 0;
}

This exists in his print stylesheet.