인쇄 그래프 범례

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

이제 I는 IE의 그래프이

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

이미지로 렌더링 인쇄 할.

사용자의 브라우저는 기본적으로 background-color를 인쇄하지 않도록 설정,하지만이 구체적인 상황을 난 아직도 '색상'DIV 이미지에 의해 여기를 subsitute가하고 싶지 않은

에서 inacceptable입니다.

대신 어떤 CSS 속성을 사용해야합니까?

Answer 1

당신은 색깔의 경계를 사용하여 시도 할 수 있습니다,이 같은 : 그러나

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

, 나는 잘 모르겠어요 IE는 인쇄 할 때 테두리를 배경 또는 전경으로 간주합니다.

[편집 : 또 다른 아이디어]

Unicode Block Elements를 사용하고 전경 (텍스트) 색상을 설정하는 또 다른 방법이 될 것입니다.

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

그러나 올바른 유니 코드 지원이 없거나 올바른 글꼴이없는 시스템에서는이 작업이 실패합니다.

또한 다른 글꼴의 너비가 다르기 때문에 범례의 너비는 거의 제어 할 수 없습니다. (아마도 CSS @font으로 해결할 수 있지만 확실하지는 않습니다.)

마지막으로 글꼴에 따라 각 문자 사이에 눈에 띄는 "솔기"가있을 수 있습니다. (이것은 음수로 설정하여 "고정"될 수 있습니다.

Answer 2

당신이 할 수있는 일은 아무것도 아닙니다. 배경 색상/이미지 인쇄 당신이 정말로 믿을해야 프린터 옵션이 아니라 뭔가 - http://css-tricks.com/dont-rely-on-background-colors-printing/