인쇄 CSS 설정에 대한 좋은 규칙은 무엇입니까?[닫은]

StackOverflow https://stackoverflow.com/questions/401623

  •  03-07-2019
  •  | 
  •  

문제

웹페이지가 인쇄될 때 적절한 인쇄 CSS를 만드는 데 대한 제안/규칙/가이드를 찾고 있습니다.제안할 것이 있나요?

도움이 되었습니까?

해결책

더 나은 인쇄물을 얻기 위해 사용할 일반적인 인쇄 스타일은 다음과 같습니다.

/* Print styles */
@media print 
{
    tr, td, th {page-break-inside:avoid}
    thead {display:table-header-group}
    .NoPrint {visibility:hidden; display:none}
    a {color:#000000}
}

맨 위는 테이블 행 내부의 페이지 분할을 방지합니다.

Thead 스타일은 테이블에 걸쳐있는 각 페이지에 대해 Thead 태그의 행을 반복합니다.

Noprint는 화면에 무언가를 보여주기 위해 사용하는 클래스이지만 인쇄되지 않은 클래스입니다.

그리고 저는 링크 색상을 끄는 것을 좋아합니다.

다른 팁

인쇄 스타일 시트에 넣는 한 가지는 다음과 같습니다.

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

이것은 링크 텍스트 옆에 실제 링크를 씁니다. 문서를 인쇄하는 사람들은 링크가 갈 것임을 알게 될 것입니다.

또한 신체 텍스트를 인쇄용으로 조금 더 읽을 수 있도록 설정했습니다.

body{
    font: 0.9em/1.5em Georgia, "Times New Roman", Times, serif;
}

먼저 목록 에서이 기사를 읽으십시오 (http://www.alistapart.com/articles/geingtoprint/). 그들은 당신이 찾고있는 많은 기본 사항 (확장 된 링크, 화이트 워싱 등)을 다룹니다.

인쇄 미리보기에 의존하지 말고 인쇄 레이아웃을 테스트 할 때 전체 프로세스를 살펴보십시오. 종이를 저장하려면 Snagit을 설치하거나 Microsoft XPS 문서 작성자를 사용하십시오. 이미지에 직접 인쇄하고 용지를 낭비하지 않을 수 있습니다.

또한 긴 기사의 경우 글꼴을 Serif로 변경하는 것을 고려하십시오. 웹의 기사는 Sans-Serif (Arial, Verdana)에서 읽기가 가장 쉽지만 Time Times New Roman 또는 Georgia를 시도하십시오.

당신은이 오래되었지만 여전히 관련이 있습니다 Eric Meyer의 기사 목록에.

요점은 미세하게 시작하여 경계를 명시 적으로 설정하고 Marging / Padding을 0으로, 흰색 배경으로, "표시 없음"은 인쇄를위한 필수 요소 (특정 메뉴와 같은)에 "None 없음"을 표시하는 것입니다.

<link rel="stylesheet"
   type="text/css"
   media="print" href="print.css" />

body {
    background: white;
    }

#menu {
    display: none;
    }

#wrapper, #content {
    width: auto; 
    margin: 0 5%;
    padding: 0; 
    border: 0;
    float: none !important;
    color: black; 
    background: transparent;
    }

그리고 거기에서 가십시오.

인쇄 스타일을 정의할 때는 종이와 물리적 단위로 생각해야 합니다.

  • 여백은 센티미터(인치) 단위로 설정하고 글꼴 크기는 포인트 단위로 설정합니다(OpenOffice와 마찬가지로).
  • 원치 않는 재료를 쉽게 제거 할 수 있도록 '화면'또는 'Noprint'와 같은 클래스를 만듭니다.
  • 화려한 색상의 텍스트는 잊어버리세요.흰색 배경에 검정색 텍스트입니다.
  • 불필요한 이미지를 제거해 보세요. 흑백에서는 보기에 좋지 않을 수도 있습니다.
  • 링크에서 밑줄을 제거하고 링크에 정상적인 텍스트가 포함되도록 만드세요."this"에 밑줄이 그어져 있는 "check this page"를 읽는 것은 어리석은 것처럼 보입니다.또는 밑줄 친 텍스트 뒤에 링크의 href를 넣으면 더 유용할 수 있지만 IMHO가 그다지 좋아 보이지는 않습니다.

배경 이미지와 색상을 조심하십시오. IE의 기본 동작은 배경 이미지 나 색상을 인쇄하는 것이 아니라고 생각합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top