CODEWITHSUNDEEP
javascripthtmlcssgoogle-chromeprinting
user1405812
user1405812

Reputation:

How to show something only when user prints?

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?

Upvotes: 5

Views: 188

Answers (2)

Ricardo Souza
Ricardo Souza

Reputation: 16446

You can use the pseudo elements :after or :before to append the text on the print stylesheet or simply add the element to your page with display: none; and change its display to block on the print stylesheet.

Upvotes: 0

Sampson
Sampson

Reputation: 268324

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.

Upvotes: 4

Related Questions