Создание стиля "redacted"/"black-out" в CSS?

Я хочу создать стиль CSS, который позволит моим авторам писать разметку следующим образом:

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>.

В настоящее время у меня такой стиль, который делает работу очень простым низкотехнологичным способом:

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

Одним из требований является то, что я хочу, чтобы зрители могли выделить текст и увидеть реальный контент "позади". Так что просто использование изображения не будет работать.

Вместо моей нынешней схемы просто меняя цвета текста и фона, я хочу, чтобы "черное" выглядело так, будто оно действительно было применено фетровым наконечником. С рваными краями и т.д.

Любые предложения о том, как это можно сделать? Я действительно хочу, чтобы мой XHMTL был настолько чистым, насколько это возможно, и поставил как можно больше из этого в CSS.

[EDIT: примеры редактируемого текста]

В этой статье в Википедии приводятся несколько примеров реального отредактированного текста. Первый пример очень грубый (слишком грубый, я думаю). Второй показывает чрезмерное количество комментариев, но вы можете видеть, что "маркер" не является прямым/чистым.

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

Я тоже нашел этот пример:

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

Ответы

Ответ 1

Я не уверен, что это тот эффект, который вам нужен, но я просто перепутал кучу тонких стилей, чтобы он выглядел так, будто маркер перечеркнул слова, слегка "несовершенные":

Демо (для Firefox): http://jsfiddle.net/vzC96/2/

Вам придется перевести это в нечто кросс-браузер:

.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;
}

Он также искажает сам текст, но он обычно скрыт, чтобы это не имело для вас значения.

white-space:nowrap; это то, что будет препятствовать прорыву (взломать новую линию).

Если вы хотите пойти по маршруту изображения и использовать одно изображение, вы можете воспользоваться размером background-size CSS3 и растянуть его по всему диапазону.

Ответ 2

Если вы просто делаете это для удовольствия на форуме или в каком-то тексте на своей странице, вы можете просто использовать символ Юникода "FULL BLOCK" (U + 2588) █... и затем просто скопировать и вставить его в предложение ███ █████ выглядеть как отредактированный материал.

Если это вам поможет.

Ответ 3

Установите фоновое изображение (элемент) на элемент, используя background-image: url('location-of-the-image.png'); который выглядит как ручка фломастера.