웹 페이지 인쇄를위한 안전한 픽셀 너비?

웹 페이지 인쇄를위한 안전한 픽셀 너비?

---

웹 페이지를 인쇄하기위한 안전한 픽셀 너비는 얼마입니까?

내 페이지에 큰 이미지가 포함되어 있으며 인쇄시 잘리지 않도록하고 싶습니다.

다른 브라우저 여백과 US Letter / DIN A4 용지 크기에 대해 알고 있습니다. 그래서 우리는 표준 문자 크기와 일부 기본 DPI 값을 얻었습니다. 그러나 이것을 픽셀 값으로 변환 하여 이미지의 width속성 에 지정할 수 있습니까?

---

진정한“보편적 답변”에 관해서는 하나를 제공 할 수 없습니다. 그러나 일부 세부 사항에 대해 간단하고 확실한 답변을 제공 할 수 있습니다.

670 픽셀

적어도 이것은 Microsoft 제품에 대한 안전한 대답 인 것 같습니다. 나는 675를 포함하여 많은 제안을 읽었지만 이것을 직접 테스트 한 후에 670이 내가 생각 해낸 것입니다.

모든 DPI, 여백 문제, 하드웨어 차이를 제외하고이 대답은 IE9에서 인쇄 미리보기 (표준 여백 포함)를 사용하고 인쇄 크기를 기본값 인 "크기에 맞게 축소"가 아닌 100 %로 설정한다는 사실을 기반으로합니다. , 모든 것이이 너비에서 잘리지 않고 페이지에 맞습니다.

HTML 이메일을 자신에게 보내고 Windows Live Mail 2011 (Outlook Express가 된 것)으로 수신하고 페이지를 670 너비로 인쇄하면 다시 모든 것이 맞습니다. 실제 하드 카피 나 MS XPS 파일 (가상 인쇄물)로 보내는 경우에도 마찬가지입니다.

실험하기 전에 700의 임의의 너비를 사용했습니다. 위에서 언급 한 모든 시나리오에서 페이지의 일부가 잘 렸습니다. 670으로 줄이면 모든 것이 완벽하게 맞습니다.

너비를 설정하는 방법은 기본 "래퍼"html 테이블을 사용하고 너비를 670으로 정의했습니다.

최종 사용자의 소프트웨어를 지시 할 수 있다면 그러한 문제는 간단 할 수 있습니다. (물론 일반적으로 그렇듯이) 할 수없는 경우 사용중인 브라우저 등과 같은 세부 사항을 테스트하고 중요한 솔루션에 대한 솔루션을 하드 코딩 할 수 있습니다. IE와 FF 사이에서 말 그대로 웹 사용자의 약 90 %를 다룰 것입니다. 일반적으로 작동하는 것처럼 보이는 "다른 사람"에 대한 다른 코드를 넣고 하루라고합니다.

---

외모만큼 간단하지 않습니다. 나는 비슷한 질문에 부딪 혔고 여기에 내가 얻은 것이 있습니다. 첫째, wikipedia 에 대한 약간의 배경 .

다음으로 CSS에서 종이의 경우 pt포인트 또는 1/72 인치가 있습니다. 따라서 모니터와 동일한 크기의 이미지를 사용하려면 먼저 모니터의 DPI / PPI (위키 백과 기사에 언급 된대로 일반적으로 96)를 알고 나서 인치로 변환 한 다음 다음으로 변환해야합니다. 포인트 (72로 나눔).

그러나 다시 말하지만, 브라우저에는 인쇄 가능한 콘텐츠와 관련된 모든 종류의 문제가 있습니다. 예를 들어 float css 태그를 사용하려고하면 Gecko 기반 브라우저는 페이지 분할을 사용하더라도 페이지 중간에 이미지를 자릅니다. ; (여기, Mozilla 버그 추적 시스템 참조 ).

A List Apart 에 대한 이 기사에는 브라우저에서 인쇄하는 방법에 대한 자세한 내용이 있습니다.

또한 인쇄 미리보기에서 "Shrink to Fit"너비와 다양한 용지 크기 및 방향을 처리해야합니다.

따라서 width: 511pt;픽셀 크기에 관계없이 좋은 이미지 크기를 인치 단위로 알아 내거나 포인트를 의미합니다 (7.1 "* 72 = 511.2이므로 Letter 크기의 용지에서 작동 함). 또는 너비 백분율 너비로 이동하여 이미지 너비를 기준으로합니다. 용지 크기에.

행운을 빕니다...

---

내가 찾은 문제에 대한 한 가지 해결책은 너비를 인치로 설정하는 것입니다. 지금까지 Chrome에서 작동하는지 테스트 / 확인했습니다. (8.5 x 11 시트를 인쇄하기 위해) 내가 사용했던 용도에 적합했습니다.

@media print {
    .printEl { 
        width: 8.5in;
        height: 11in;
    }
}

---

인쇄를 위해 너비를 설정하지 않고 인쇄 레이아웃을 동적 너비로 유지하는 장애물을 제거합니다. 즉, 브라우저 창을 더 작게 만들면 콘텐츠가 잘 리거나 숨겨지지 않지만 문서가 길어집니다. 이와 같이 나머지는 프린터 / pdf-creator에서 처리 할 수 ​​있습니다.

이미지 나 표와 같이 너비가 고정 된 요소는 어떻습니까?

이미지

내가 생각할 수있는 옵션 :

• 인쇄 CSS에서 이미지를 어떤 경우에도 맞을 것이라고 가정 할 수있는 너비로 축소하고 px가 아닌 pt를 사용합니다 (그러나 인쇄에는 어쨌든 더 많은 포인트 / 단위가 필요하므로 거의 문제가되지 않습니다)
• 인쇄에서 제외

테이블

• 고정 너비 제거
• 정말 많은 정보가 담긴 테이블이 있다면 가로 모드를 사용하세요.
• 레이아웃 목적으로 표를 사용하지 마십시오
• 인쇄에서 제외
• 콘텐츠 추출, 단락으로 인쇄

http://www.intensivstation.ch/en/css/print/

or any other google result for combinations of: CSS, print, media, layout

---

A solution to ensure that images don't get cut when printed in a Web page is to have the following CSS rule:

@media print { 
  img { 
    max-width:100% !important;
  } 
}

---

A printer doesn't understand pixels, it understand dots (pt in CSS). The best solution is to write an extra CSS for printing, with all of its measures in dots.

Then, in your HTML code, in head section, put:

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

---

I doubt there is one... It depends on browser, on printer (physical max dpi) and its driver, on paper size as you point out (and I might want to print on B5 paper too...), on settings (landscape or portrait?), plus you often can change the scale (percentage), etc.
Let the users tweak their settings...

참고URL : https://stackoverflow.com/questions/320357/safe-width-in-pixels-for-printing-web-pages