Wie finden Sie die größte Schriftgröße, die einen bestimmten Text nicht durchbricht?

Question

Ich versuche CSS zu verwenden (unter @media print) und JavaScript zum Drucken eines einseitigen Dokuments mit einem bestimmten Textstück, der so groß wie möglich hergestellt wird, während sie sich noch in eine bestimmte Breite einfügen. Die Länge des Textes ist vorher nicht bekannt, daher ist es keine Option, einfach mit einer Schriftart mit fester Breite zu verwenden.

Anders ausgedrückt, ich suche nach einer ordnungsgemäßen Größe, so dass "iiiii" beispielsweise in einer viel größeren Schriftgröße als "wwwww" herauskommen würde, weil "ich" viel dünner ist als "w" in einer Variablen -Wutti -Schriftart.

Das nächste, was ich damit bekommen habe, ist JavaScript, um verschiedene Schriftgrößen zu probieren, bis die clientWidth ist klein genug. Dies funktioniert gut genug für Bildschirmmedien, aber wenn Sie zu Printmedien wechseln, Gibt es eine Garantie dafür, dass die 90 dpi, die ich anscheinend auf mein System bekomme clientWidth) wird nirgendwo anders sein? Wie entscheidet ein Browser, was DPI bei der Konvertierung von Pixelmessungen verwenden soll? Kann ich mit JavaScript auf diese Informationen zugreifen?

Ich würde es lieben, wenn dies nur eine CSS3 -Funktion wäre (font-size:max-for-width(7.5in)) Aber wenn es so ist, konnte ich es nicht finden.

Answer 1

Hier ist ein Code, den ich verwendet habe, falls jemand ihn nützlich findet. Alles, was Sie tun müssen, ist, die äußere DIV so zu machen, wie sie in Zoll gewünscht werden.

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

Die CSS-Schriftgröße akzeptiert Länge Einheiten Dazu gehören absolute Messungen in Zoll oder Zentimetern:

Einheiten der absoluten Länge sind stark vom Ausgangsmedium abhängig und sind daher weniger nützlich als relative Einheiten. Die folgenden absoluten Einheiten sind verfügbar:

• in (Zoll; 1in = 2,54 cm)
• cm (Zentimeter; 1 cm = 10 mm)
• mm (Millimeter)
• PT (Punkte; 1pt = 1/72in)
• PC (picas; 1pc = 12pt)

Da Sie noch nicht wissen, wie viele Zeichen Ihr Text ist, müssen Sie möglicherweise eine Kombination aus JavaScript und CSS verwenden, um die Eigenschaft der Schriftgröße dynamisch korrekt festzulegen. Nehmen Sie beispielsweise die Länge der Zeichenfolge in Zeichen und teilen Text. Testete die Schriftgröße mit absoluten Messungen in Firefox, Safari und IE6, daher sollte es ziemlich tragbar sein. Ich hoffe, das hilft.

BEARBEITEN: Beachten Sie, dass Sie möglicherweise auch mit Einstellungen wie der Briefzustandseigenschaft herumspielen müssen und mit der von Ihnen verwendeten Schriftart experimentieren müssen, da die Einstellung der Schriftgröße nicht wirklich die Breite der Buchstaben ist, die unterschiedlich basiert, die unterschiedlich sind auf Buchstaben und Schriftart proportional zur Länge. Oh, und die Verwendung einer Monospace -Schrift hilft;)

Answer 3

Ich weiß keinen Weg, dies in CSS zu tun. Ich denke, Ihre beste Wahl wäre, JavaScript zu verwenden:

1. Legen Sie den Text in eine DIV ein
2. Holen Sie sich die Dimensionen der Div
3. Machen Sie den Text bei Bedarf kleiner
4. Gehen Sie zurück zu Schritt 2, bis der Text klein genug ist

Hier sind einige Beispielcode zum Erkennen der Größe des Div.