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

Question

Ich versuche CSS (unter @media print) und JavaScript zu verwenden, um ein einseitiges Dokument mit einem gegebenen Text zu drucken, der so groß wie möglich gemacht wird, während er immer noch in eine gegebene Breite passt. Die Länge des Textes ist vorher nicht bekannt, daher ist die Verwendung einer Schriftart mit fester Breite keine Option.

Um es anders auszudrücken, ich suche nach der richtigen Größenanpassung, so dass zum Beispiel "IIIII" in einer viel größeren Schriftgröße als "WWWWW" herauskommen würde, weil "I" viel dünner als "W" ist "in einer Schriftart mit variabler Breite.

Das nächste, was ich damit erreichen konnte, ist die Verwendung von JavaScript, um verschiedene Schriftgrößen auszuprobieren, bis die clientWidth klein genug ist. Dies funktioniert gut genug für Bildschirmmedien, aber wenn Sie zu Printmedien wechseln, gibt es irgendeine Garantie, dass die 90 DPI ich auf meinem System erscheinen (dh ich die Ränder auf beiden Seiten und für einen Text Größe geändert, so dass es nur in das passt, bekomme ich etwa 675 für clientWidth) wird das gleiche irgendwo anders? Wie entscheidet ein Browser, welche DPI beim Konvertieren von Pixelmessungen verwendet werden soll? Kann ich irgendwie auf diese Informationen mit JavaScript zugreifen?

Ich würde es lieben, wenn dies nur eine CSS3-Funktion wäre(), aber wenn es ist, konnte ich es nicht finden.

Answer 1

Hier ist ein Code, den ich verwendet habe, falls jemand es nützlich finden könnte. Alles, was Sie tun müssen, ist, den äußeren DIV so zu gestalten, wie Sie wollen.

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

Ich kenne keine Möglichkeit, dies in CSS zu tun. Ich denke, die beste Wahl Javascript zu verwenden wäre:

1. den Text in einem
2. Nehmen Sie die Abmessungen des div
3. div Setzen Erhalten Sie den Text kleiner, wenn nötig
4. Gehen Sie zurück zu Schritt 2 bis der Text ist klein genug

Hier sind einige sample code to detect the size of the div.

Answer 3

Die CSS font-size Eigenschaft akzeptiert length units, die in Zoll oder Zentimeter absolute Messungen umfassen:

Absolute Längeneinheiten sind stark abhängig von dem Ausgabemedium und so sind weniger nützlich als relative Einheiten. Die folgenden absoluten Einheiten stehen zur Verfügung:

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

Da Sie nicht wissen, wie viele Zeichen Ihr Text Dennoch müssen Sie möglicherweise eine Kombination aus JavaScript und CSS verwenden, um die Schriftgrößeneigenschaft dynamisch richtig festzulegen. Nehmen Sie beispielsweise die Länge der Zeichenfolge in Zeichen, und teilen Sie 8,5 (vorausgesetzt, Sie erwarten US-Briefpapier) durch die Anzahl der Zeichen und geben Sie die Größe in Zoll an, um die Schriftgröße für diesen Teil festzulegen Text. Getestet die Schriftgröße mit absoluten Messungen in Firefox, Safari und IE6, so sollte es ziemlich portabel sein. Ich hoffe, das hilft.

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