Могу ли я заставить текст печатать как белый?

Предположим, у меня есть текст, который отображается над изображением или некоторыми другими печатными цветами. Можно ли заставить этот текст белым при печати? Поведение по умолчанию заключается в том, что в большинстве браузеров требуется от белого до черного или серого. Это явно имеет смысл, когда вы печатаете текст в контейнерах с фоновыми цветами/изображениями, которые удаляются, но не имеет смысла форсировать текст в том случае, когда вы накладываете текст на изображения.

Я должен, вероятно, упомянуть, что я прекрасно знаю таблицу стилей печати, так бывает, что независимо от установки цвета шрифта в 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 будут печататься с точными цветами в основных браузерах.