特定のテキストを壊さない最大のフォントサイズを見つけるにはどうすればよいですか？

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

  •  03-07-2019
  •  | 
  •  

質問

CSS（ @media print ）およびJavaScriptを使用して、特定のテキストをできるだけ大きくした1ページのドキュメントを印刷しようとしています。所定の幅内に収まるようにします。テキストの長さは事前にわからないため、単純に固定幅フォントを使用することはオプションではありません。

別の言い方をすれば、適切なサイズ変更を探しています。たとえば、「IIIII」 「WWWWW」よりもはるかに大きなフォントサイズで表示されます。 「私」だから「W」よりもはるかに細い可変幅フォント。

これで最も近いのは、 clientWidth が十分小さくなるまでJavaScriptを使用してさまざまなフォントサイズを試すことです。 これはスクリーンメディアでは十分に機能しますが、印刷メディアに切り替えると、システムに表示される90 DPIの保証があります（つまり、どちらかの側でマージンを0.5に設定します） 、それがちょうどその中に収まるようにサイズ変更されたテキストの場合、 clientWidth について約675を取得します）は他のどこでも同じになりますか？ブラウザは、ピクセル測定値から変換するときに使用するDPIをどのように決定しますか？ JavaScriptを使用してこの情報にアクセスする方法はありますか？

これが単なるCSS3の機能（ font-size：max-for-width（7.5in））であればそれが大好きですが、もしそうなら、私はそれを見つけることができませんでした。

役に立ちましたか？

解決 3

誰かが便利だと思うかもしれないので、ここに私が最終的に使用したコードをいくつか示します。必要なことは、外側の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
}

他のヒント

CSS font-sizeプロパティは、絶対測定値を含む長さの単位を受け入れますインチまたはセンチメートル：

  

絶対長さの単位は、出力媒体に大きく依存します。   そのため、相対単位よりも有用性が低くなります。次の絶対単位   利用可能：

     
      
  • in（インチ; 1in = 2.54cm）
    •   
  • cm（センチメートル; 1cm = 10mm）
    •   
  • mm（ミリメートル）
    •   
  • pt（ポイント; 1pt = 1 / 72in）
    •   
  • pc（パイカ; 1pc = 12pt）
    •   

テキストの文字数がまだわからないため、font-sizeプロパティを動的に正しく設定するには、javascriptとCSSの組み合わせを使用する必要がある場合があります。たとえば、文字列の長さを文字数で取得し、8.5（米国のレターサイズの用紙を想定している場合）を文字数で除算すると、そのサイズのフォントサイズをインチ単位で設定するインチ単位のサイズが得られますテキスト。 Firefox、Safari、およびIE6で絶対サイズを使用してフォントサイズをテストしたため、かなり移植性が高いはずです。お役に立てば幸いです。

編集：フォントサイズの設定は実際にはないため、文字間隔プロパティなどの設定を試して、使用するフォントを試す必要がある場合があることに注意してください文字の幅。文字の間隔とフォントに基づいて異なり、長さに比例します。ああ、そして等幅フォントを使用すると役立ちます;）

CSSでこれを行う方法がわかりません。あなたの最善の策はJavascriptを使用することだと思います：

  1. テキストをdivに入れる
  2. divの寸法を取得
  3. 必要に応じてテキストを小さくする
  4. テキストが十分に小さくなるまで手順2に戻ります

divのサイズを検出するサンプルコード。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top