noscript:after{
content: “me@domain.com”;
}
<noscript></noscript>
In addition to, I need to be able to copy and paste this. Pretty much all browsers have a problem. They cant grab all the text. Regardless of how I position the “me”.
<style type=“text/css”>
#hide6 {
display:inline-block;
}
#hide6 b {
float:left;
font-weight:normal;
}
</style>
<span id=“hide6”>@domain.com<b>me</b></span>
The only way to prevent people copying content from your page is to not put it in the page in the first place.
Even if you found something that appears to work in some browsers there is nothing to prevent someone viewing the source of the page and either grabbing the content from there or if they want it without all the HTML tags then they simply need to identify the CSS or JavaScript you are using to try to prevent them copying the content and override that code with their own in the CSS or JavaScript attached to their browser (which takes priority over that attached to the page) in order to disable your code.
You have it backwards. I WANT them to be able to copy it. They can’t with that code. If your around can you take a gander at my thread in the js forum? I still need that code of yours you posted fixed.
Bump
To recap. I want to find a way to place the “me” in front of the “@domain.com” and be able to copy and paste it. All ways that I have tried have failed to copy. I know there is some way.
<style type="text/css">
#hide {
display:inline-block;
}
#hide b {
float:left;
font-weight:normal;
}
</style>
<span id="hide">@domain.com<b>me</b></span>
Hi Eric,
I don’t think you can do that as the browser copies the html order and not how you have placed it I believe.
This allows the text to be copied in Firefox but when you paste the “me” is at the right end still.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#hide6 { float:left; }
#hide6 b {
float:left;
font-weight:normal;
background:red
}
#hide6 span { float:right }
</style>
</head>
<body>
<div> <span id="hide6"><span>@domain.com</span><b>me</b></span> </div>
</body>
</html>
Oh is it? That sucks. It’s same with the full reversal of text with uni something. All browsers copy it but when pasting its backwards. Entering the email with content property Firefox and chrome can’t copy it. All others can. If I can find a fix for that one that would be good too. I’m just trying to find another css method for obfuscating the email address. Currently my css fallback is me<b>nospam</b>@domain.com with display none on the b. just looking for a cleaner way. But the pasting needs to be correct - that’s crucial.
I thought something like this might work but only Firefox gets it right (or wrong).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#hide6{display:inline-block;}
#hide6:first-letter{font-size:0;}
</style>
</head>
<body>
<div> <span id="hide6">Xme@domain.com</span> </div>
</body>
</html>
eww that was a good idea! Maybe first letter something else. Like margin or color or line height. I’ve never used first letter so I’d have to test. Will play with the idea when I’m back to my computer. Thanks Paul you gave me food for thought.
Visibility:hidden cures chrome but IE9 needs both the first letter and the text floated which is a nuisance.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#hide6{display:inline-block;float:left}
#hide6:first-letter{font-size:0;visibility:hidden;float:left;}
.test{visibility:hidden}
</style>
</head>
<body>
<div> <span id="hide6">Xme@domain.com</span> </div>
</body>
</html>
Well thought Paul! Looks like you just came up with the defacto standard for obfuscating email with CSS. At first glance this works better than all the other methods. The correct copy/paste functionality is upheld, and there is no extra markup. I tested it also, that seems to work well. Not quite sure if I fully trust it since every browser needs a different rule. Time will tell. But seems to be perfect.
As a side note… trying to think of any times no float on span would fail… looks like you can safely do away with the float left (presumable put there to contain the floated :first-letter)… which makes this more usable in the real world.
The float is only there for ie9- and can be removed if IE9 specific styles were being used and then would be more robust as just inline-block.
I don’t have ie9 to test. Oh I thought you just needed float left on :first-letter for ie9. You need it on the span as well?
IE sometimes seems to work without the float on #hide6 and just use the inline-block but is intermittent when copying the text. The float seems to cure it but does make it awkward as full proof solution because it upsets the flow unlike inline-block.
There may be a combination in there somewhere that will make it work but I also notice that in Firefox if the span is in the middle of the sentence and you copy the space then the first letter gets copied again.
Needs a lot of testing still but there may be a combination that works.
It’s quite around here lately. To me, this is one of those fun ones to play with. Like a treasure hunter, looking for that one special rule.
When I played with it yesterday ie8 was fine. Now it’s pasting the X. Still hiding it though.
It seems to depend on where you paste from. If you start right and stop on the first character you can usually miss it.