легенда печати графа

Question

div.task_finished { background-color:#6b86a6; }
div.task_pending_execute { background-color:#93b8e2; }
div.task_cancelled  { background-color:#ff9966; }
div.task { background-color:#ffffcc; }

Теперь я хочу напечатать это

<div class="legend-container">
            <div class="legend">
                <div class="task_pending_execute"></div>
                <div class="legend-text">Executing</div>
            </div>
            <div class="legend">
                <div class="task_cancelled"></div>
                <div class="legend-text">Finished</div>
            </div>
        ...
</div>

Для IE график отображается как изображение.

По умолчанию браузер пользователя не печатает background-color, но в данной конкретной ситуации это недопустимо

Я все еще не хочу заменять здесь «цветные» элементы изображениями.

Какое свойство css я должен использовать вместо этого?

Answer 1

Вы можете попробовать использовать цветную рамку, что-то вроде этого:

div.task_finished { border-left:#6b86a6 solid 100px; height: 1em; }

Однако я не уверен, что IE при печати считает границы фоном или передним планом.

[РЕДАКТИРОВАТЬ: другая идея]

Другое решение - использовать элементы блока Unicode , а затем установить цвет переднего плана (текста).

<div>&#x2588;&#x2588;&#x2588;&#x2588;&#x2588;</div>
<div>█████</div>

Однако это не удастсясистемы без надлежащей поддержки юникода или без правильных шрифтов.

Кроме того, это даст вам небольшой контроль над шириной легенды, поскольку разные шрифты имеют разную ширину.(возможно CSS @font может помочь вам решить эту проблему, но я не уверен)

Наконец, возможно, между каждым символом есть видимые «швы», в зависимости от шрифта.(это может быть «исправлено» путем установки отрицательного значения letter-spacing)

Answer 2

Не то, что вы действительно можете сделать что-нибудь.Фоновая цветовая / графическая печать - это опция принтера, и вам не стоит на это рассчитывать - http://css -tricks.com / dont-rely-on-background-colors-printing /