주어진 텍스트를 손상시키지 않는 가장 큰 글꼴 크기는 어떻게 찾습니까?

Question

나는 CSS (아래 @media print)와 JavaScript를 사용하여 주어진 폭의 텍스트를 가능한 한 크게 만들고 지정된 너비 안에 맞추어 한 페이지짜리 문서를 인쇄하려고합니다. 텍스트의 길이는 미리 알 수 없으므로 단순히 고정 너비 글꼴을 사용하는 것은 옵션이 아닙니다. 예를 들어, "IIIII"가 "WWWWW"보다 훨씬 더 큰 글꼴 크기에 나올 것이다, 그래서 "나는"W "보다 훨씬 날씬 때문에

, 나는 적절한 크기 조정을 찾고 그것을 다른 방법을 넣으려면 "가변 너비 글꼴로.

내가 접할 수있는 가장 가까운 것은 clientWidth이 충분히 작을 때까지 다양한 글꼴 크기를 시도하기 위해 JavaScript를 사용하는 것입니다. 이 방법은 화면 매체에 적합하지만 인쇄 매체으로 전환하면 90 DPI가 시스템에 나타날 수 있다는 보장이 있습니까 (예 : 양쪽에 0.5in로 여백 넣기, 텍스트는 여백 넣기) 크기가 조절되어 크기가 정해 지므로 clientWidth에 대해 약 675 점을 얻습니다. 브라우저는 픽셀 측정 값에서 변환 할 때 DPI를 어떻게 사용할지 결정합니다. JavaScript를 사용하여이 정보에 액세스 할 수있는 방법이 있습니까?

이것이 CSS3 기능 (font-size:max-for-width(7.5in))이라면 나는 그것을 좋아할 것이다. 그렇다면 찾을 수 없었다.

Answer 1

누군가가 유용하다고 생각할 때를 대비하여 사용을 종료 한 코드가 있습니다. 당신이해야 할 일은 바깥 쪽 DIV를 원하는 크기로 인치로 만드는 것입니다.

function make_big(id) // must be an inline element inside a block-level element 
{ 
    var e = document.getElementById(id); 
    e.style.whiteSpace = 'nowrap'; 
    e.style.textAlign = 'center'; 
    var max = e.parentNode.scrollWidth - 4; // a little padding 
    e.style.fontSize = (max/4) + 'px'; // make a guess, then we'll use the resulting ratio 
    e.style.fontSize = (max/(e.scrollWidth/parseFloat(e.style.fontSize))) + 'px'; 
    e.style.display = 'block'; // so centering takes effect 
} 

Answer 2

CSS에서이 작업을 수행하는 방법을 모르겠습니다. 필요한 경우

때까지 2 단계로 돌아갑니다 텍스트 작게 사업부

의 크기를 가져옵니다

1. 이 사업부
2. 에 텍스트를 넣어 : 나는 당신의 가장 좋은 방법은 자바 스크립트를 사용하는 것입니다 생각 텍스트가 충분히 작음

여기에 일부는 sample code to detect the size of the div입니다.

Answer 3

CSS의 폰트 사이즈 재산권 인치 cm의 절대 측정을 포함 length units 수용 :

절대 길이 단위는 출력 매체에 크게 의존하며, 그래서 상대적인보다 유용한다. 다음 절대 단위 사용할 수 있습니다에

• (인치, 1 인치 = 2.54)
• cm (cm; 1cm = 10mm)
• mm (mm)
• PT (점]에 1pt = /) 72in
• PC 1 (파이 카, 1 개 = 12pt와)

는 텍스트가 얼마나 많은 자입니다 당신이 알고하지 않기 때문에 그러나 font-size 속성을 올바르게 동적으로 설정하려면 javascript와 CSS의 조합을 사용해야 할 수도 있습니다. 예를 들어, 문자열의 길이를 문자로 취하고 8.5 (미국 레터 크기 용지가 있다고 가정 할 때)를 문자 수로 나누면 해당 청크의 글꼴 크기를 인치로 설정하는 크기가 인치로 표시됩니다. 본문. Firefox, Safari 및 IE6에서 절대 크기로 글꼴 크기를 테스트 했으므로 휴대 성이 좋습니다. 희망이 도움이됩니다.

편집 : 폰트 크기 설정은 정말의 폭이 아니기 때문에 당신은 또한, 같은 당신이 사용하는 글꼴 것과 편지 - 간격뿐만 아니라 재산 및 실험 등의 설정에 놀러해야 할 수도 있습니다 문자는 문자 간격에 따라 다르며 글꼴은 길이에 비례합니다. 아, 모노 스페이스 폰트를 사용하면 도움이됩니다.)