Могу ли я заставить текст печатать как белый?
Предположим, у меня есть текст, который отображается над изображением или некоторыми другими печатными цветами. Можно ли заставить этот текст белым при печати? Поведение по умолчанию заключается в том, что в большинстве браузеров требуется от белого до черного или серого. Это явно имеет смысл, когда вы печатаете текст в контейнерах с фоновыми цветами/изображениями, которые удаляются, но не имеет смысла форсировать текст в том случае, когда вы накладываете текст на изображения.
Я должен, вероятно, упомянуть, что я прекрасно знаю таблицу стилей печати, так бывает, что независимо от установки цвета шрифта в IE/chrome/firefox шрифт не выглядит белым, несмотря на то, что. В зависимости от браузера он заканчивается черным или серым. Пожалуйста, покажите пример белого текста над изображением, если вы считаете, что это действительно возможно.
Чтобы проиллюстрировать это:
http://jsfiddle.net/NSwYE/
Я лично не думаю, что это возможно из-за способа печати. Это довольно раздражает ничто.
Ответы
Ответ 1
Это не полностью контролирует автора веб-страницы.
Например, эта скрипка будет печатать (по крайней мере, для меня на лазерном принтере Dell 1720) белый текст на любом из три черных фона в
IE9
, если пользователь установил флажок рядом с:
Инструменты → Печать → Настройка страницы → "Печать цветов и изображений фона"
Если этот флажок не отмечен, он не будет печатать черный вообще в первых двух, но будет последним (поскольку это тег img
), но он печатает текст как серый, даже более тег img
. Таким образом, кажется, что настройка "Print Background Colors and Images" влияет на то, как браузер интерпретирует текст, и позволяет проверять истинный белый эффект (нокаут-эффект), но не отменяется.
Firefox
Флажок, найденный здесь (который, кажется, работает):
Файл → Настройка страницы → "Печать фона (цвета и изображения)"
Для Chrome? Автор веб-страницы контролируется?
Я еще не проверял, будет ли это делать из этого сообщения или нет (для меня это не работает на моя следующая скрипка, но это может быть потому, что она находится в iframe). Для элементов, которые должны печататься в Chrome, попробуйте установить:
-webkit-print-color-adjust: exact;
Ответ 2
Отмеченный ответ неверен. Вы можете управлять цветом текста в каждом браузере! Вам просто нужно вывести текст в svg. Браузеры не меняют цвет в svg. Вот пример:
<svg height="40" width="200">
<text font-size="28px" y="25" x="30" fill="#ffffff" >
Some text
</text>
</svg>
Ответ 3
print.css
поможет вам, у Эрика Майера есть post об этом.
Например html5boilerplate, используя этот стиль его css:
@media print {
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
Update:
С вашим примером html:
<img src="http://www.clipart.dk.co.uk/DKImages/Halloween/image_halloween002.jpg" alt="black cat">
<div id="sometext">Cat</div>
и мой css:
#sometext {
position: absolute;
top: 125px;
left: 220px;
color: #FFF;
}
@media only print {
#sometext {
color: #FFF !important;
/* actually trick with white text-shadow not work ( */
text-shadow: 0 0 3px #FFF !important;
}
}
Я получаю эту демонстрацию. Является ли это приемлемым решением?
Ответ 4
Пример http://jsfiddle.net/NSwYE/ печатает белый текст поверх кота для меня. Но я использую Firefox 3.6 и лазерный принтер Brother.
Поведение принтеров полностью зависит от драйвера принтера и приложения. Мой принтер правильно напечатает пример с помощью Firefox. Он правильно напечатает текст из серого текста из Microsoft Publisher. Он не будет печатать серый текст в Microsoft Word: текст всегда черный.
Ответ 5
Решение:
@media print {
h1 {
color: rgba(0, 0, 0, 0);
text-shadow: 0 0 0 #fff;
}
@media print and (-webkit-min-device-pixel-ratio:0) {
h1 {
color: #fff;
-webkit-print-color-adjust: exact;
}
}
}
Ответ 6
Возможно, если вы используете специальную таблицу стилей печати, которая стирает ее как таковую.
например.
<link href="print.css" rel="stylesheet" media="print" />
Ответ 7
Это может быть немного перебор, но если это то, что вам нужно многократно, вы можете подумать о создании контента, используя либо холст, либо SVG (Raphael.js обеспечит поддержку IE). Элементы canvas и SVG/VML будут печататься с точными цветами в основных браузерах.