Geek asks and answers

How to show something only when printed by the user?

What i know

Now I know how to add a print stylesheet to a web page to design a print layout. Its something like:

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

But I do not want this.

In this blog , click on any article or publication and print preview page (using Google Chrome). Now, if you go down the page (in PDF save mode), you will see that additional text is added, which (this story was originally published in Digital Inspiration .... This print version is available for your personal and non-commercial use). You can see this message only if you type (-preview), and not on a web page in normal mode.

What i was trying to find out

When I look at the source of the page, then there are only two stylesheets attached from one, are the main ones, and one for the web font. For JavaScript, there is only one main JavaScript file, and the rest is for webfont, CSS3 MediaQueries, HTML5-Shiv and for ads that I don’t suspect that they contain any print-related materials. When I tried to find these basic CSS and JavaScript files (with the CTRL- function F), finding a printer friendly didn't match anything.

What i have not tried

I did not ask the site owner how he did it, and did not ask;)

Question

? JavaScript? CSS? [noscript] , javascript. - ? - [onlyonprint]?

+5
2

:after:

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

. ​​

+5

:after :before, display: none; display block .

0

More articles:


All Articles