문서를 HTML로 작성하고 PDF로 출력하는 작업을 하고 있었다. 그런데 회색(#868e96)으로 설정해 놓은 텍스트가 PDF로 출력시 그냥 검은색으로 나오는 현상이 발생했다.
해결책은 print-color-adjust: exact; 로 CSS를 설정하는 것이다. 그런데 처음 보는 CSS 속성이라 어떤 역할을 하는 건지 간단하게 알아봤다.
배경 설명 #
브라우저는 출력 장치의 종류, 성능을 고려해 필요하다고 판단되면 요소의 모양(appearance)을 조정할 수 있다.
그런 브라우저 조정을 허용하는 게 바로 기본값인 print-color-adjust: economy; 상태이다.
economy가 적용된 상태에선 다음과 같은 것들이 일어날 수 있다.
- 컨텐츠에서 사용하는 텍스트 색상과 배경색이 충분히 대비되지 않아 가독성이 떨어질 걸로 보이는 경우 색상 대비 조정
- 출력 장치가 프린터일 경우 잉크 절약을 위해 어둡거나 너무 밀도 높은 배경이미지 제거
- 인쇄 시 어두운 배경 위의 밝은 텍스트를 흰 배경 위의 어두운 텍스트로 조정할 수도 있음
CSS로 지정한 색상이 내 화면에선 잘 보여도 다른 사용자 에이전트 환경 혹은 출력시 브라우저에 의해 다른 색으로 보일 수 있다는 것이다.
색상 조정 막기 #
요소에 print-color-adjust: exact로 설정함으로써 콘텐츠의 모양을 변경하지 않아야 한다는 걸 지시할 수 있다. 즉 "이미 요소의 색상 등 스타일링이 의도 하에 잘 구성되어 있다. 브라우저가 변경하면 오히려 더 나빠질 수 있다"는 걸 전달하는 것이다. 이게 설정된 경우 유저 요청이 없다면 컨텐츠의 모양을 변경하지 않아야 한다.
이러한 예시로는 행 배경색을 번갈아 사용하는 테이블을 들 수 있다. 홀수 번 행은 회색, 짝수 번 행은 흰색 배경으로 해서 가독성을 높인 zebra-striped table.
근데 이걸 그냥 인쇄하면 브라우저가 잉크 절약 등을 이유로 배경색을 없애버릴 수도 있다. 실제로 내가 AI로 간단한 zebra table을 HTML로 만들어서 출력해 봤더니 배경색이 모두 흰색으로 탈색되어 버렸다.
이럴 때 print-color-adjust: exact를 설정해 주면 되는 것이다.
이 속성은 상속되는 속성이므로 문서 전체에 지정하고 싶다면 <html>태그에 지정하는 게 좋겠다. 혹은 특정 표처럼 색상 유지가 필요한 부분이 확실하다면 해당 요소에만 설정하는 게 좋다.
그러나 print-color-adjust:exact를 설정했다고 해서 반드시 지정 색상이 그대로 출력된다든지 어떻게 동작한다는 보장은 없다. 이 속성은 브라우저에 전달되는 힌트에 가깝다.
사용자 에이전트가 사용자에게 제공하는 색상, 이미지 등의 조절 옵션이 설정되었을 경우(대표적으로 출력시의 "배경 인쇄" 옵션이 선택되었을 때. 혹은 흑백 인쇄 설정)에는 사용자 설정 옵션이 print-color-adjust보다 우선한다.
심지어 사용자 에이전트도 print-color-adjust 를 어떻게 처리할지 자체적으로 결정할 수 있으므로, 동작에 대한 보장은 없다.
그래도 인쇄할 때 뭔가 의도와 다르게 나온다면 body 태그와 같은 곳에 다음을 설정해보자.
print-color-adjust: exact;
구형 크로미움이나 Safari(WebKit 기반)도 지원해야 한다면 이렇게 접두사 속성도 붙일 수 있다.
html {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}물론 이렇게 설정하면 프린터의 경우 잉크 사용량이 늘어날 수도 있고 혹은 색상 대비가 떨어질 수 있다. 하지만 내 경우 회색 텍스트가 의도였고 PDF 출력이라 잉크 사용량도 관계 없었기에 exact로 설정해 원래 회색 색상을 유지했다.
또한 나는 배경색은 쓰지 않았지만, 만약 배경색을 쓰는 문서이고 이 또한 인쇄가 필요할 경우 인쇄 대화상자에서 "배경 그래픽"을 체크해야 배경색이 적용될 수도 있다.
참고 #
MDN, print-color-adjust CSS property
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/print-color-adjust