Designing For Print With CSS #

웹사이트를 오프라인에서도 정돈되게 보기위한 프린트용 CSS를 정리한다.

print.css 초기화 #

/**
* Print stylesheet for yourwebsite.com
* @version         1.0
* @lastmodified    16.06.2016
*/

@media print {
  Your notes
}

여백과 폰트 사이즈 정의 #

프린트했을 때 보기좋게 하기 위해서, 측면 가장가지 모서리 간격을 정의한다.

/* Setting content width, unsetting floats and margins */
/* Attention: the classes and IDs vary from theme to theme. Thus, set own classes here */
#content,#page {
  width: 100%; 
  margin: 0; 
  float: none;
}
/** Setting margins */       
@page { margin: 2cm }

/* Or: */
@page :left {
  margin: 1cm;
}

@page :right {
  margin: 1cm;
}

/* The first page of a print can be manipulated as well */
@page :first {
  margin: 1cm 2cm;
}

간격을 정하는 단위는 cm로 지정하고 pixe, em, rem 으로 지정된 폰트는 point단위로 변환해서 지정한다.

* Pixels => Points
* 6px => 5pt
* 7px => 5pt
* 8px => 6pt
* 9px => 7pt
* 10px => 8pt
* 11px => 8pt
* 12px => 9pt
* 13px => 10pt
* 14px => 11pt
* 15px => 11pt
* 16px => 12pt
* 17px => 13pt
* 18px => 14pt
* 19px => 14pt
* 20px => 15pt
* 21px => 16pt
* 22px => 17pt
* 23px => 17pt
* 24px => 18pt

보통 본문은 12pt 가 가장 적당하고 인쇄물에서 가독성이 좋은 Georgia 서체 같은 [^1][^세리프(serif)]체로 지정하는 것이 좋다.

/* Set font to 16px/13pt, set background to white and font to black.*/
/* This saves ink */
body {
  font: 13pt Georgia, "Times New Roman", Times, serif;
  line-height: 1.3;
  background: #fff !important;
  color: #000;
}

h1 {
  font-size: 24pt;
}

h2, h3, h4 {
  font-size: 14pt;
  margin-top: 25px;
}

페이지 나누기 #

/* The following settings are possible: */
page-break-after  : auto | always | avoid | left | right
page-break-before : auto | always | avoid | left | right
page-break-inside : auto | avoid

page-break-before #

프린터로 출력할 때 다음 페이지로 페이지를 넘기는 것을 지정하는 속성으로, 이 엘리먼트가 나오기 전까지의 요소로 한 페이지를 구분한다. 블럭레벨 엘리먼트 사이를 경계로 페이지를 나누기 때문에 반드시 블럭레벨 엘리먼트에 지정해주어야 한다. 인라인 엘리먼트에 적용하면 다음 페이지로 넘어가지 않는다.

• auto : (기본값)자동계산함
• always : 항상 페이지 넘김
• avoid : 페이지 넘김을 하지 못하도록 강제함
• left: 분리된 페이지가 왼쪽 면에 위치하도록 지정 함.
• right: 분리된 페이지가 오른쪽 면에 위치하도록 지정 함.

page-break-after #

프린터로 출력할 때 다음 페이지로 페이지를 넘기는 것을 지정하는 속성으로, 이 엘리먼트가 나온 이후 엘리먼트들로 한 페이지를 구분한다.

page-break-inside #

프린터로 출력할 때 다음 페이지로 페이지를 넘기는 것을 지정하는 속성으로, 엘리먼트 내부에서 페이지 넘김을 지정한다.

/* Defining all page breaks */
a {
  page-break-inside:avoid
}
blockquote {
  page-break-inside: avoid;
}
h1, h2, h3, h4, h5, h6 { 
  page-break-after:avoid; 
  page-break-inside:avoid 
}
img {
  page-break-inside:avoid; 
  page-break-after:avoid; 
}
table, pre { page-break-inside:avoid }
ul, ol, dl { page-break-before:avoid }

링크 #

링크가 인쇄물에서도 눈에 띄도록 강조하기 위해 다음과 같이 설정한다.

/* Displaying link color and link behaviour */
a:link, a:visited, a {
  background: transparent;
  color: #520;
  font-weight: bold;
  text-decoration: underline;
  text-align: left;
}

a {
  page-break-inside:avoid
}

a[href^=http]:after {
  content:" < " attr(href) "> ";
}

$a:after > img {
 content: "";
}

article a[href^="#"]:after {
 content: "";
}

a:not(:local-link):after {
 content:" < " attr(href) "> ";
}

비디오 및 프레임 등 감추기 #

비디오, 프레임 등 외 기타 인쇄물에서 노출이 필요하지 않은 요소들은 display:none 으로 숨긴다.

/**
 * Making intergated videos disappear, and removing the iframes' whitespace to zero. 
 */
.entry iframe, ins {
  display: none;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  line-height: 0pt !important;
  white-space: nowrap;
}
.embed-youtube, .embed-responsive {
  position: absolute;
  height: 0;
  overflow: hidden;
}

/* Hiding unnecessary elements for the print */
#header-widgets, nav, aside.mashsb-container, 
.sidebar, .mashshare-top, .mashshare-bottom, 
.content-ads, .make-comment, .author-bio, 
.heading, .related-posts, #decomments-form-add-comment, 
#breadcrumbs, #footer, .post-byline, .meta-single, 
.site-title img, .post-tags, .readability {
  display: none;
}

인쇄 전 후 메시지 추가하기 #

인쇄물에 카피라이트 또는 감사의 메시지 등을 추가할 수 있다.

/* Adding custom messages before and after the content */
.entry:after {
  content: "\ All Rights Reserved. (c) 2014 - 2016 TechBrain - techbrain.de";
  color: #999 !important;
  font-size: 1em;
  padding-top: 30px;
}
#header:before {
  content: "\ Thank you for printing our article. We hope that some of our other articles can catch your eye as well.";
  color: #777 !important;
  font-size: 1em;
  padding-top: 30px;
  text-align: center !important;    
}

[^1]: 세리프(serif)는 타이포그래피에서 글자와 기호를 이루는 획의 일부 끝이 돌출된 형태를 가리킨다. 세리프가 있는 글꼴은 세리프체(serif typeface, serifed typeface)라 하며, 세리프가 없는 글꼴은 산세리프체(sans-serif, 여기서 sans는 "없음"을 뜻하는 프랑스어 낱말 sans에서 비롯)로 부른다. 세리프체는 서적과 신문과 같은 전통적인 인쇄물에 널리 쓰인다. 수많은 잡지들이 산세리프체를 이용하는데, 세리프가 없어서 가독성에 미치는 영향에 관계 없이, 일부 편집자들은 산세리프체들이 "더 깨끗하다"고 언급한다.1 [출처: 위키피디아]

출처 및 참고 #

1. http://www.noupe.com/design/css-perfect-print-stylesheet-98272.html