픽셀을 JavaScript에서 인쇄 인치로 어떻게 변환합니까?

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

  •  03-07-2019
  •  | 
  •  

문제

종이에 인쇄 될 때 스팬의 텍스트가 7.5 인치가 될 때까지 스팬 요소 스타일의 글꼴을 크기를 조정하고 싶지만 JavaScript는 SPAN의 ClientWidth 속성을 픽셀로보고합니다.

<span id="test">123456</span>

그리고:

#test {
  font-size:1.2in; /* adjust this for yourself until printout measures 7.5in wide */
}

그리고:

console.log(document.getElementById('test').clientWidth);

위의 코드는 적어도 Firefox 3에서 약 675 로그를이기 때문에 약 90 DPI를 변환 계수로 사용하는 한 기계에서 실험적으로 결정했습니다.

이 숫자는 반드시 다른 브라우저, 프린터, 화면 등에서 동일하지는 않습니다. 구성.

그렇다면 브라우저가 사용중인 DPI를 어떻게 찾습니까? 내 시스템에서 "90"을 되 찾으려면 무엇을 호출 할 수 있습니까?

도움이 되었습니까?

해결책

나는 이것이 당신이 원하는 일을한다고 생각합니다. 그러나 나는 다른 포스터에 동의합니다. HTML은 이런 종류의 일에 적합하지 않습니다. 어쨌든, 당신이 이것이 유용하다는 것을 알기를 바랍니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#container {width: 7in; border: solid 1px red;}
#span {display: table-cell; width: 1px; border: solid 1px blue; font-size: 12px;}
</style>
<script language="javascript" type="text/javascript">
function resizeText() {
  var container = document.getElementById("container");
    var span = document.getElementById("span");

    var containerWidth = container.clientWidth;
  var spanWidth = span.clientWidth; 
    var nAttempts = 900;
    var i=1;
    var font_size = 12;

    while ( spanWidth < containerWidth && i < nAttempts ) {
      span.style.fontSize = font_size+"px";

        spanWidth = span.clientWidth;

        font_size++;
      i++;
    }       
}
</script>
</head>

<body>
<div id="container">
<span id="span">test</span>
</div>
<a href="javascript:resizeText();">resize text</a>
</body>
</html>

다른 팁

요약:

이것은 HTML을 사용하여 해결할 수있는 문제가 아닙니다. 외에 CSS2 인쇄 속성, 브라우저가 물건을 인쇄 할 수있는 정의 또는 예상 방법은 없습니다.

먼저, 픽셀 (CSS)은 픽셀 (화면에서)과 같은 크기가 아닙니다., 특정 값이 당신에게 효과가 있다는 사실이 그것이 다른 설정으로 해석 될 것이라는 의미는 아닙니다.

둘째, 사용자는 Page Zoom 등과 같은 기능을 사용하여 텍스트 크기를 변경할 수 있습니다.

셋째, 인쇄 목적으로 웹 페이지를 배치하는 방법에 대한 정의 된 방법이 없기 때문에 각 브라우저는 다르게 수행합니다. Firefox와 IE에서 무언가를 인쇄하고 차이점을 확인하십시오.

넷째, 인쇄는 프린터의 DPI, 종이 크기와 같은 다른 변수를 모두 가져옵니다. 또한 대부분의 프린터 드라이버는 출력의 사용자 스케일링을 지원합니다. 인쇄 대화 상자에서 설정하십시오 브라우저가 보지 못하는 것.

마지막으로, 인쇄는 HTML의 목표가 아니기 때문에 웹 브라우저의 '인쇄 엔진'은 나머지 부분에서 분리 된 (어쨌든 내가 본 모든 브라우저에서)입니다. JavaScript가 인쇄 엔진에 '대화'할 수있는 방법이 없거나 그 반대도 마찬가지입니다. 따라서 "인쇄 미리보기에 브라우저가 사용하는 DPI 번호"는 어떤 식 으로든 노출되지 않습니다.

PDF 파일을 추천합니다.

위의 코드는 적어도 Firefox 3에서 약 675 로그를이기 때문에 약 90 DPI를 변환 계수로 사용하는 한 기계에서 실험적으로 결정했습니다.

1) 이것은 모든 기계/브라우저에서 동일합니까?

절대 아니다. 모든 화면 해상도 / 프린터 / 인쇄 설정 콤보는 약간 다릅니다. 픽셀 대신 EM을 사용하지 않는 한 인쇄 크기가 무엇인지 알 수있는 방법이 있습니다.

  1. 아니
  2. 당신은 그렇지 않습니다

이것은 실제로 화면 해상도 설정에 의해 더욱 복잡합니다.

행운을 빕니다.

웹은 인쇄물에 좋은 매체가 아닙니다.

다른 답변에서 알 수 있듯이 웹에서 인쇄하는 것은 까다로운 사업입니다. 예측할 수없고 슬프게도 모든 브라우저와 구성이 동일하게 반응하는 것은 아닙니다.

그러나 나는 당신을이 방향으로 지적 할 것입니다 :

인쇄를 위해 특별히 대상으로 된 문서에 CSS를 첨부 할 수 있습니다.

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

이렇게하면 페이지의 인쇄 된 출력을 별도의 스타일 시트로 포맷하고 화면에 표시되도록 일반 스타일 시트를 유지할 수 있습니다. 인쇄 된 문서가 원하는 방식으로 나오도록하기 위해 약간의 조정이 필요했지만 괜찮은 결과 로이 작업을 수행했습니다.

웹에서 인쇄하는 주제에 관한 흥미로운 기사 :

목록이 나빠서 - 인쇄 할

CSS 인쇄 프로필에 대한 W3C의 일부 정보 :

W3C -CSS 인쇄 프로필

특정한 방식으로 보이기위한 컨텐츠를 생성하는 경우 PDF와 같이 인쇄 할 형식을 살펴볼 수 있습니다. HTML/CSS는 화면 크기, 해상도, 색상 심리 등의 다른 구성에 적응할 수 있어야합니다. 상자의 너비는 정확히 7.5 인치라고 말하기위한 것이 아닙니다.

당신은 시도 했습니까?

@media print { #test { width: 7in; }}

이것은 Orion Edwards (특히 webkit.org 링크)와 Bill의 게시물에서 배운 것에 대한 합병 된 답변입니다.

다음은 항상 96 DPI 인 것 같습니다.하지만 다음 (명백히 조잡한) 코드를 자유롭게 실행할 수 있지만 다른 답변을 받으면 듣고 싶습니다.

var bob = document.body.appendChild(document.createElement('div'));
bob.innerHTML = "<div id='jake' style='width:1in'>j</div>";
alert(document.getElementById('jake').clientWidth);

Webkit.org 기사에서 알 수 있듯이이 숫자는 상당히 표준이며 프린터 나 플랫폼의 영향을받지 않습니다. 왜냐하면 다른 DPI를 사용하기 때문입니다.

그렇지 않더라도 위의 코드를 사용하면 필요한 답변을 찾을 수 있습니다. 그런 다음 JavaScript에서 DPI를 사용하여 Bill과 같이 ClientWidth를 제한하거나 인치를 사용하는 CSS와 결합하여 사용자가 언급 한 Orion Edwards와 같이 펑키 한 스케일링을하지 않는 한 올바르게 인쇄하는 무언가를 갖도록하십시오. 적어도 그 시점 이후에는 프로그래머가 8.5x11에 맞도록 설계 한 것을 11x17 종이에 인쇄하는 것과 같이 프로그래머가 생각한 것 이상의 일을 원하는 것은 사용자에게 달려 있습니다. 그때까지도 사용자가 원하는 것에 대해 "올바른 일".

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