2008-10-01 1 views
2

私はCSS(の下に@media print)とJavaScriptを使用して、指定されたテキストが所定の幅内に収まるようにできるだけ大きくして1ページのドキュメントを印刷しようとしています。テキストの長さはあらかじめ分かっていないので、固定幅フォントを使用するだけではオプションではありません。特定のテキストを壊さない最大のフォントサイズはどのようにして見つけられますか?

言い換えれば、私は適切なサイズ変更を探しています。例えば、 "IIIII"は "WWWW"よりはるかに大きなフォントサイズで出てくるでしょう。なぜなら、 "私"は "W "を可変幅フォントで指定します。

これで最も近かったのは、clientWidthが十分に小さくなるまでJavaScriptを使用してさまざまなフォントサイズを試してみることでした。 これは画面のメディアには十分ですが、印刷媒体に切り替えると、90 DPIがシステムに表示されるという保証がありますか(つまり、両面に余白を0.5インチずつ入れます私はclientWidthのために約675を得る)は、他のどこでも同じになるでしょうか?ピクセル測定値から変換するときにDPIをどのように使用するかはブラウザがどのように決定しますか? JavaScriptを使用してこの情報にアクセスする方法はありますか?

これは単なるCSS3の機能(font-size:max-for-width(7.5in))であれば気に入っていますが、それが見つかっていないと私はそれを気に入っています。

答えて

0

ここにいくつかのコードがあります。あなたがする必要があるのは、外側の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 
} 
0

CSSでこれを行う方法がわかりません。必要に応じて

  • まで、ステップ2に戻るテキストを小さくしてくださいdivの
  • の寸法を取得

    1. はdiv要素
    2. にテキストを入れて:私はあなたの最善の策はJavascriptを使用することだと思いますテキストは十分に小さいです

    ここにいくつかはsample code to detect the size of the divです。

  • +0

    私が言ったように、これは画面上で正常に動作します。しかし、これを特定の印刷寸法に合わせたい場合は、DPIを見つける方法を教えていただけないと、ピクセル数が同じ数になるという保証がないので、DPIを見つけることはできません。 – Kev

    +0

    情報をありがとう。 :) – Kev

    3

    CSSフォントサイズのプロパティは、インチまたはセンチメートル単位での絶対測定含むlength units受け入れ:

    絶対長さの単位は、出力媒体に大きく依存しており、 ので、相対単位未満有用です。以下絶対単位 入手可能である:(インチ; 1インチ= 2.54センチメートル)で

    • センチ(センチメートル; 1センチメートル= 10ミリメートル)
    • ミリメートル(ミリメートル)
    • PT(ポイント; 1PT = 1/72in)
    • PC(パイカ;あなたのテキストがどのように多くの文字1個= 12ptの)

    を知らないので、フォントサイズプロパティを正しく設定するには、javascriptとCSSの組み合わせを使用する必要があります。たとえば、文字列の長さを文字数で取り、8.5文字(米国のレターサイズの用紙を想定していると仮定します)を文字数で割って、そのチャンクのフォントサイズをインチ単位で指定しますテキスト。 Firefox、Safari、IE6で絶対サイズでフォントサイズをテストしたので、移植性が高いはずです。希望が役立ちます。

    EDIT:フォントサイズの設定は、本当にの幅ではありませんので、あなたも、あなたが使うフォントものと同様な文字間隔プロパティとして設定し、実験で遊んでする必要があるかもしれないことに注意してください文字は文字間隔に基づいて異なり、フォントは長さに比例します。ああ、等幅フォントを使用すると便利です;)