is it possible to stop copying text from print preview?

Question

I'm trying to stop the user to select and copy text when he is on the print screen.

I used this CSS to disable select.

.disable-select {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by any browser but < IE9 */
}

<body class="disable-select">
    ...
</body

And this jquery to prevent copy, paste and right click option in my webpage

$(document).bind('contextmenu cut copy', function (e) {
    e.preventDefault();
});

It works on the webpage but when we press ctrl+p to print the web page and went on the print options screen, none of the above code work on this screen

stop text selection and copy on this print screen

Note that it's not helpful to prevent users from copying text from the print preview; they could just print them via a virtual printer (now a Windows built-in) and copy text from the generated PDF or PostScript document. — Arnie97, May 15 '19 at 09:24
I've reopened this due to the OP's clarification. I'm pretty sure there will be another dupe target, though — Rory McCrossan, May 15 '19 at 09:29
User can print the page. My only concern is to stop the user to select and copy text from the print preview screen. If it is possible to do by anyhow, then please suggest me. — Vishnu Kumar, May 15 '19 at 09:33

Vlad Racoare · Accepted Answer · 2019-05-31T15:03:47.703

3

It is not possible to affect the print preview. You can take a look here

But you can prevent people from having that piece of text in the print page entirely. Something like this:

.disable-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;    
    -moz-user-select: none;      
    -ms-user-select: none;      
    user-select: none;
}
@media print{
   .disable-select{
       display:none
   }
}

Edit

There is a way to do that, more a like trick rather than a proper CSS feature, but it works only in modern browsers.

Apparently, using CSS filters will prevent the user from being able to select the text in the Print Preview

@media print{
   .disable-text{
      filter:grayscale(100%)
   }
}

CSS Filter compatibility table

EDIT 2

Also setting the position of fixed elements to relative in the print scenario.


@media print{
   .disable-text{
      filter:grayscale(100%)
   }
   .fixed-elements{
      position: relative;
   }
}

EDIT 3

Or another solution that prevents the fixed elements from being altered is to add the disable-text class to the HTML Tag or to the specific divs where you want to prevent the text from being copied.

edited May 31 '19 at 15:03

answered May 15 '19 at 09:48

Vlad Racoare

153
11

Thanks for the suggestion but if we are providing the printing option to the user then it is important to let him preview, what he is going to print. All I mean to say that I don't want to hide the content from the user on the print preview screen. – Vishnu Kumar May 15 '19 at 09:57
Right! I got it. There is a small trick that can help you here which unfortunately doesn't work in IE. I've updated my answer, so take a look. – Vlad Racoare May 15 '19 at 10:07
If we use {filter: saturate(0.9)} then still it won't allow copying text and it will appear in color too. Great work @VladRacoare. – Vishnu Kumar May 15 '19 at 10:49
Yes! Anytype of filter will do. I guess it is due to the way browsers are rendering these filters. – Vlad Racoare May 15 '19 at 12:06
It's a good solution But this creates conflict with the position and not useful for me. Is there any other way to do the same thing but with a different method. – Vishnu Kumar May 17 '19 at 07:26
Can you provide a snapshot of how this is affecting the position please? It will help me to find a proper answer. – Vlad Racoare May 28 '19 at 12:22
If you'll have a webpage with a fixed header, fixed scroll up button or anything fixed element and then applying the filter on the body then fixed position element will be misplaced. – Vishnu Kumar May 28 '19 at 12:39
This is why you should use **@media print{ }** the filter property will be added only on the print version of the page and not on the web/live page. – Vlad Racoare May 28 '19 at 12:54
Yeah! I did the same but when we print page we get misplaced fixed elements in a saved pdf file or printed document. – Vishnu Kumar May 28 '19 at 13:03
Than I recommend setting the position of those fixed elements to relative on the print scenario ` @media print{ .disable-text{ filter:grayscale(100%); } .fixed-elements{ position: relative; } } ` You can also look at the updated answer above. – Vlad Racoare May 29 '19 at 14:05
Hi @VishnuKumar . After looking into this issue a little more, the best thing to do here is either add the **disable-text** to the specific divs that you want to block from copying or add it to the **HTML** tag and this way you will prevent the positioning from being altered. – Vlad Racoare May 31 '19 at 15:02
This is what I thought about before. – Vishnu Kumar Jun 06 '19 at 06:37

score 0 · Answer 2 · answered May 15 '19 at 09:20

"You can't disable screen grabbing from the Web browser, it would only be possible by installing additional software on the user's PC.

There are some IRM (Information Rights Management) tools available that do that e.g. by protecting Windows/DirectX API calls and also monitoring video memory such as Oracle IRM or such as Microsoft's IRM technology.

Especially the latter might be of interest as there is also a Rights Management Add-on for Internet Explorer.

But as other already said, any IRM/DRM technology is controversy and you should understand that it most often will limit or annoy your users."

But you can try to copy something else in the clipboard, check out the link below.

Source: Stop User from using "Print Scrn" / "Printscreen" key of the Keyboard for any Web Page

Just FYI the OP has changed the title of the question so this is no longer relevant to what they are asking — Rory McCrossan, May 15 '19 at 09:30

score 0 · Answer 3 · answered May 15 '19 at 09:36

Have you tried the following?

@media print {
  .body{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by any browser but < IE9 */
  }
}

is it possible to stop copying text from print preview?

3 Answers3