2

CSS (下@media print) と JavaScript を使用して、特定の幅に収まるようにしながら、特定のテキストをできるだけ大きくして 1 ページのドキュメントを印刷しようとしています。テキストの長さは事前にわからないため、単純に等幅フォントを使用することはできません。

別の言い方をすれば、適切なサイズ変更を探しています。たとえば、「I」は変数の「W」よりもはるかに細いため、「IIIIII」は「WWWW」よりもはるかに大きなフォント サイズで出力されます。 -幅のフォント。

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

これが単なる CSS3 の機能 ( font-size:max-for-width(7.5in)) であることが望ましいのですが、そうである場合、私はそれを見つけることができませんでした。

4

3 に答える 3

3

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

絶対的な長さの単位は、出力媒体に大きく依存するため、相対単位ほど有用ではありません。次の絶対単位が使用できます。

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

テキストの文字数がまだわからないため、動的に font-size プロパティを正しく設定するには、javascript と CSS を組み合わせて使用​​する必要がある場合があります。たとえば、文字列の長さを文字数で取り、8.5 (US レター サイズの用紙を想定していると仮定) を文字数で割ると、そのチャンクの font-size を設定するサイズ (インチ) が得られます。文章。Firefox、Safari、および IE6 でフォント サイズを絶対測定値でテストしたので、かなり移植性が高いはずです。それが役立つことを願っています。

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

于 2008-10-02T07:15:49.790 に答える
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
}
于 2008-10-02T18:46:39.690 に答える
0

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

  1. テキストをdivに入れる
  2. div のサイズを取得する
  3. 必要に応じてテキストを小さくします
  4. テキストが十分に小さくなるまでステップ 2 に戻る

div のサイズを検出するサンプル コードを次に示します。

于 2008-10-01T17:53:16.113 に答える