Печать светлого текста как темного текста в Chrome

Я занимаюсь разработкой веб-страницы со светлым текстом на темном фоне. Когда я пытаюсь распечатать страницу в черно-белом режиме, браузер, кажется, автоматически инвертирует цвета, поэтому для печати не требуется полный картридж. Это именно то, на что я надеялся.

Когда я пытаюсь печатать в Firefox, текст преобразуется в полностью сплошной черный. Однако в Chrome текст кажется слабым, что затрудняет его чтение. Chrome по-прежнему печатает номера страниц, отметки времени и т. Д. В полном черном цвете. Как я могу заставить Chrome печатать текст на моей странице в таком же полном черном цвете?

Вот пример, показывающий точные цвета, которые я использую, и он воспроизводит поведение, которое я вижу на моей настоящей странице.

<body>
    <form id="form1">
    <div>
        <table style="background-color:#2D3541; width:900px; height:900px">
            <tr>
                <td style="font-size:medium; text-align:center; color:#B7DBFF">Sample Text</td>
            </tr>
        </table>
    </div>
    </form>
</body>
Источник

1 ответ

Решение

Что вы можете сделать, это создать так называемую таблицу стилей печати. Это обычная таблица стилей CSS, загружаемая только тогда, когда пользователь пытается напечатать соответствующую веб-страницу. Обычно браузеры стремятся игнорировать определенные атрибуты CSS, которые могут привести к потере большого количества чернил (скажем, у страницы есть цвет фона) и преобразовывать текст в более темные цвета, предполагая, что фон белый.

Это можно переопределить, создав новую таблицу стилей печати <link rel="print" href="/css/print.css" или с помощью медиа-запроса @media print {...}

Я считаю, что использование отдельной таблицы стилей печати предпочтительнее, так как браузеры не будут загружать ее, пока пользователь не собирается печатать страницу.

указав цвет текста, вызывающего проблему, в вашей таблице стилей печати или в медиа-запросе, вы сможете решить проблемы, когда браузеры не выбирают ваши правила стиля текста. Если вы переопределяете набор значений в другой таблице стилей, поэкспериментируйте с использованием !important если использование одной только таблицы стилей печати не помогает.

В идеале вы должны дать своему классу тд, чтобы дать вам более детальный контроль. Значения в атрибуте style имеют более высокий приоритет, чем таблицы стилей, и Chrome может по-прежнему учитывать атрибут встроенного стиля при печати страницы.

@media print {
    .light {
        color: #000 !important;
    }
}

У Smashing Magazine есть несколько отличных ресурсов по стилям печати:

https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/

Источник
Другие вопросы по тегам