Creating a "redacted" / "black-out" style in CSS?

Question

I want to create a CSS style that will let my authors write markup like this:

On <span class="redacted">September, 10 2011</span> the special operations agent, 
<span class="redacted">John Smith</span>, on orders from his commanding 
officer, <span class="redacted">Captain Kirk</span>, terminated the well known 
terrorist <span class="redacted">Fred Flinstone</span>.

I currently have a style like this that does the job in a very simple low-tech way:

span.redacted {
    color: black;
    background-color: black;
}

One requirement is that I want viewers to be able to highlight the text and see the real content "behind". So just using an image will not work.

Instead of my current scheme of just changing the text & background colors, I want the "black-out" to look like it was really applied by a felt-tip pen. With ragged edges and stuff.

Any suggestions on how this can be done? I really want to keep my XHMTL as pure as possible and put as much of this into CSS as I can.

[EDIT: Examples of redacted text]

This Wikipedia article provides several examples of real redacted text. The first example is really rough (too rough I think). The second shows an excessive amount of redaction, but you can see that the 'marker' is not straight/clean.

http://en.wikipedia.org/wiki/Sanitization_(classified_information)

I found this example as well:

http://2.bp.blogspot.com/_mJPzxRaCL64/S4X6Zn0MPKI/AAAAAAAAJdw/vX4MYNdUyIk/s400/ishot-2064.jpg

Answer 1

If you are just doing it for fun in a forum or some text in your page you could just use the Unicode Character 'FULL BLOCK' (U+2588) █ ...and then just copy and paste it into a sentence ████████ to look like redacted material.

If that's helps you.

Answer 2

I'm not sure if this is the effect you're after, but I just sort of mixed up a bunch of subtle styles to make it looks like a marker had crossed out the words, slightly "imperfect" looking:

Demo (for Firefox): http://jsfiddle.net/vzC96/2/

You'll have to translate this into something cross-browser:

.redacted {
    color: black;
    background-color: black;
    white-space:nowrap;
    -moz-transform: rotate(.8deg) skewx(-12deg);
    -moz-box-shadow:3px 0 2px #444;
    border:1px dotted #555;
    background: -moz-linear-gradient(180deg, #000, #222);
}

/* Add a few more selectors with slightly varying styles */
.redacted:first-child {
    -moz-transform: rotate(-.8deg);
}
.redacted:first-child + .redacted {
    -moz-transform: rotate(3deg);
}

/* "Highlighter" effect */
.redacted::-moz-selection {
    background:#e6ff3f;
}

It does skew the text itself as well, but it's normally hidden so that might not matter to you.

The white-space:nowrap; is what will keep the spans from breaking (going to a new line).

If you want to go the image route, and use a single image, you can take advantage of CSS3's background-size and stretch it across the entire span.

Answer 3

Set a background image (tileable) on the element using background-image: url('location-of-the-image.png'); that looks like a felt-tip pen.