Schriftgröße im Verhältnis zur <div> Breite

[Linuchs]

Moin,

mit Interesse lese ich, dass die Schriftgröße der Viewport-Breite angepasst werden kann.

Ich drucke "Postkarten", vier Nutzen auf einem A4 Blatt und suche einen Trick, die Schriftbreite dem A6-Format anzupassen. Bisher habe ich individuell manuell eingegriffen und vor dem Druck das letter-spacing gesetzt / entfernt. Im konkreten Fall geht es um Ortsnamen in der Überschrift, da besteht ein mächtiger Unterschied zwischen "Hanau" und "Bad Münster am Stein - Ebernburg". Es muss in einer Zeile bleiben, bei Umbruch rutscht mir der Inhalt unten aus der Postkarte raus:

http://remso.eu/?ORT=8689&KM=100&LO=postkarten

Linuchs

[MrMurphy1]

Hallo

Bei Papiergrößenangaben von Webseiten (auch "nur" für den Ausdruck) werde ich ganz skeptisch.

Weißt du überhaupt welche Browser deine Besucher für den Ausdruck benutzen? Wenn ja - welche?

Kannst du deinen Besuchern bestimmte Browser und Browsereinstellungen vorschreiben?

Gruss

MrMurphy

[Linuchs]

Weißt du überhaupt welche Browser deine Besucher für den Ausdruck benutzen? Wenn ja - welche?

Mir ist nicht bekannt, dass Besucher "meine" Postkarten drucken. Da hängen zu viele Unwägbarkeiten dran, es geht schon los mit dem unbedruckten Rand, den ein Browser "erfindet" und das vorgesehen Layout auf zwei Seiten verteilt. Und wer hat schon einen Duplex-Drucker und eine Papierschneidemaschine?

Kannst du deinen Besuchern bestimmte Browser und Browsereinstellungen vorschreiben?

Ich habe Seiten speziell für mich, da habe ich den Druck und die Papierbearbeitung (schneiden, heften, falzen) im Griff. Wer sich mit der Erstellung von Heften beschäftigt hat, kennt die Problematik der Aufteilung der Seiten auf die Blätter.

Dann gibt es druckfähige A4 / A5 Seiten für geschlossene Benutzergruppen, da ist der Firefox vorgeschrieben. Deren Kunden bekommen das als PDF per Mail.

Nicht alles ist für jedermann, die Parameter in diesem Beispiel werden ausschließlich von Hand kombiniert. Z.B. die km-Zahl, damit die Seiten voll werden.

Und mal ganz am Rande: Hier wird fast täglich diskutiert, wie man pixelgenau Layouts auf die unterschiedlichsten Bildschirme bekommt, aber ein Druck darf nicht formatiert werden?

Wie bekommen denn die Druck-Kritiker die Inhalte von Datenbanken auf Papier? Es gibt Anwendungen, die sind nicht nur Spielkram, zum Beispiel Rechnungen.

Hast du nun eine Idee zu meinem Problem?

Linuchs

[Matthias Apsel]

Hallo Linuchs,

Und mal ganz am Rande: Hier wird fast täglich diskutiert, wie man pixelgenau Layouts auf die unterschiedlichsten Bildschirme bekommt, aber ein Druck darf nicht formatiert werden?

Hier nicht. Im Gegenteil. Es wird häufig darauf hingewiesen, dass eine Seite nicht in jedem Browser gleich aussehen muss.

Wie bekommen denn die Druck-Kritiker die Inhalte von Datenbanken auf Papier? Es gibt Anwendungen, die sind nicht nur Spielkram, zum Beispiel Rechnungen.

PDF.

Hast du nun eine Idee zu meinem Problem?

Das wird ohne JavaScript nicht gehen. Und auch dann nicht unter allen Umständen.

Bis demnächst
Matthias

[Linuchs]

Hallo Matthias,

Wie bekommen denn die Druck-Kritiker die Inhalte von Datenbanken auf Papier? Es gibt Anwendungen, die sind nicht nur Spielkram, zum Beispiel Rechnungen.

PDF.

Okay, wenn man sie versenden will. Aber welchen Sinn macht es, das Programm zu wechseln, um eine Seite mit dem adobe reader zu drucken, die auch mit dem Browser gedruckt werden kann?

Und ganz speziell meine Drucke, die ich im Quellcode mit einem Texteditor definiere. Nicht nur im Browser nachgucken, wie es aussieht, sondern als Drittprogramm noch den Reader ...

Linuchs

[Der Martin]

Hi,

Wie bekommen denn die Druck-Kritiker die Inhalte von Datenbanken auf Papier? Es gibt Anwendungen, die sind nicht nur Spielkram, zum Beispiel Rechnungen.

PDF.

Okay, wenn man sie versenden will.

zum Beispiel, aber nicht nur das.

Aber welchen Sinn macht es, das Programm zu wechseln, um eine Seite mit dem adobe reader zu drucken, die auch mit dem Browser gedruckt werden kann?

Die Frage nach dem Sinn musst du selbst für dich beantworten. Aber Tatsache ist wohl, dass Browser nicht primär zum Drucken von Dokumenten gedacht sind und dementsprechend ihre Fähigkeiten in diesem Bereich oft zu wünschen übrig lassen. PDF ist dagegen ein Format, das ganz konkret mit dem Ziel geschaffen wurde, ein druck-identisches Abbild eines Dokuments zu haben, das überall gleich aussieht.

Du musst dich also entscheiden, ob du für jede Aufgabe das dafür optimale Mittel und Werkzeug nutzen willst, oder der Bequemlichkeit halber lieber auf eines dieser Werkzeuge und dessen Vorzüge verzichten magst.
Anscheinend hast du dich für Letzteres entschieden und nimmst die Hürden in Kauf bzw. hast einen Weg gefunden, sie zu umgehen.

Und ganz speziell meine Drucke, die ich im Quellcode mit einem Texteditor definiere. Nicht nur im Browser nachgucken, wie es aussieht, sondern als Drittprogramm noch den Reader ...

Naja ... angenommen, das Dokument ist druckfertig, dann ist es mir eigentlich egal, ob ich auf ein HTML- oder ein PDF-Dokument doppelklicke, um es zu öffnen. Das passende Programm dazu startet mein Desktop von selbst.
Allerdings ist es meines Wissens wesentlich anspruchsvoller und aufwendiger, ein PDF-Dokument zu erzeugen als ein HTML-Dokument und ein Stylesheet dazu.

<h1 class="co cblau"><span id="ort_km">[ort_name] +[KM]km</span></h1>
<script>
alert ( "[" +document.getElementById( "ort_km" ).innerWidth +"]" );
document.getElementById( "ort_km" ).style.fontSize = "80%";
</script>

Sowohl .width als auch .innerWidth meldet "undefined".

Ja, richtig. Meines Wissens steht innerWidth nur beim window-Objekt zur Verfügung, und style.width nur dann, wenn diese Eigenschaft explizit gesetzt wurde. Mit offsetWidth kommst du vermutlich weiter.

Ciao,
 Martin

[Matthias Apsel]

Hallo Der Martin,

http://www.mediaevent.de/javascript/dimension.html z.B.

Bis demnächst
Matthias

[Linuchs]

Das wird ohne JavaScript nicht gehen. Und auch dann nicht unter allen Umständen.

Okay, habe Folgendes probiert:

<h1 class="co cblau"><span id="ort_km">[ort_name] +[KM]km</span></h1>
<script>
alert ( "[" +document.getElementById( "ort_km" ).innerWidth +"]" );
document.getElementById( "ort_km" ).style.fontSize = "80%";
</script>

Sowohl .width als auch .innerWidth meldet "undefined". Wie kann ich messen? Die anschließende Zuordnung funktioniert, die soll aber von der Messung abhängig sein.

Linuchs

[Matthias Apsel]

Hallo Linuchs,

innerWidth liefert die Fensterbreite, imo.

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Linuchs,

http://www.mediaevent.de/javascript/dimension.html, z.B.

Bis demnächst
Matthias

[Linuchs]

Hallo Matthias,

http://www.mediaevent.de/javascript/dimension.html, z.B.

dass offsetWidth mein Freund ist, habe ich inzwischen schon herausgefunden und experimentiert. Diese Lösung funktioniert prächtig:

<h1 class="co cblau"><span id="ort_km" style="white-space:nowrap">[ort_name] +[KM]km</span></h1>
<!--h1 class="co cblau"><span id="ort_km" style="white-space:nowrap">Hier, nur so zum Test ein sehr langer Ortname +500km</span></h1-->

// 370px = 100%
var breite = document.getElementById( "ort_km" ).offsetWidth;
if ( breite > 370 ) {
  document.getElementById( "ort_km" ).style.fontSize = (37000 / breite ) +"%";
}

Sogar die auskommentierte Überschrift passt korrekt in die vorgegebene Breite von A6 hoch.

Linuchs

[Linuchs]

Hallo Matthias,

Und mal ganz am Rande: Hier wird fast täglich diskutiert, wie man pixelgenau Layouts auf die unterschiedlichsten Bildschirme bekommt, aber ein Druck darf nicht formatiert werden?

Hier nicht. Im Gegenteil. Es wird häufig darauf hingewiesen, dass eine Seite nicht in jedem Browser gleich aussehen muss.

Und dennoch sollen in jedem Browser Listen-Punkte korrekt untereinander stehen und nicht unterschiedlich eingerückt sein. Bilder sollen oft auf der Basislinie der Schrift stehen, nicht drüber oder drunter. Ein border soll einen gewissen Abstand zum Inhalt haben und nicht drankleben. Da kämpft man mit den verschiedenen Boxen-Modellen der Browser. Ein paar Pixel mehr und schon erscheint ein vielleicht unerwünschter Scrollbalken, der Inhalt ist nicht mehr komplett zu sehen.

Es ist doch kein Geheimnis, dass auch ein variables Layout, das in Browser A gestestet wurde, vom Browser B total zerrupft oder ausserhalb der Toleranzgrenze verschoben wird. Warum auch immer, das Layout muss / sollte korrigiert werden.

Obwohl ich mich mit dem chronisch unwilligen IE schon längst nicht mehr abgebe, sollte das Bild wenigstens auf den elektronischen Zigarettenschachteln ordentlich aussehen.

Linuchs

[Matthias Apsel]

Hallo Linuchs,

Und dennoch sollen in jedem Browser Listen-Punkte korrekt untereinander stehen und nicht unterschiedlich eingerückt sein.

Das tun sie.

Bilder sollen oft auf der Basislinie der Schrift stehen, nicht drüber oder drunter.

Das tun sie.

Ein border soll einen gewissen Abstand zum Inhalt haben und nicht drankleben.

Dafür gibt es padding.

Da kämpft man mit den verschiedenen Boxen-Modellen der Browser.

Nicht mehr. box-sizing: content-box, quasi das alte (und etwas unintuitive) Verhalten ist der Standardwert für alle relevanten Browser, die auch alle border-box verstehen.

Ein paar Pixel mehr und schon erscheint ein vielleicht unerwünschter Scrollbalken, der Inhalt ist nicht mehr komplett zu sehen.

Pixel?? Für den Bildschirm? Vergiss, dass Größenangaben in Pixeln überhaupt erlaubt sind ;-)

Du hast viel größere Probleme, weil deine Besucher deine CSS-Vorgaben höchstens als Empfehlung betrachten können. Das beginnt schon damit, dass verschiedene Mindestschriftgrößen eingestellt werden können. Farben können ebenso verboten werden wie Bilder. Und dazu muss man noch nicht einmal gehört haben, dass es Debugging-Tools gibt, geschweige denn, was Debugging ist.

Es ist doch kein Geheimnis, dass auch ein variables Layout, das in Browser A gestestet wurde, vom Browser B total zerrupft oder ausserhalb der Toleranzgrenze verschoben wird.

Eigentlich ist das nur noch sehr selten der Fall und wenn, dann sind oft veraltete Browserversionen am Start.

Obwohl ich mich mit dem chronisch unwilligen IE schon längst nicht mehr abgebe, sollte das Bild wenigstens auf den elektronischen Zigarettenschachteln ordentlich aussehen.

Dafür gibt es die Mediaqueries. Und es spricht auch nichts dagegen, sondern im Gegenteil sehr viel dafür, den Handybrowsern ein komplett anderes Design zu geben.

Bis demnächst
Matthias

[Der Martin]

Hallo,

mit Interesse lese ich, dass die Schriftgröße der Viewport-Breite angepasst werden kann.

das trifft es nicht so ganz; es gibt halt die Einheiten vw und vh, die grundsätzlich als Prozent der Viewportbreite bzw. -höhe festgelegt sind. Und zwar unabhängig von den Größen der umgebenden Elemente.

Ich drucke "Postkarten", vier Nutzen auf einem A4 Blatt und suche einen Trick, die Schriftbreite dem A6-Format anzupassen. Bisher habe ich individuell manuell eingegriffen und vor dem Druck das letter-spacing gesetzt / entfernt. Im konkreten Fall geht es um Ortsnamen in der Überschrift, da besteht ein mächtiger Unterschied zwischen "Hanau" und "Bad Münster am Stein - Ebernburg". Es muss in einer Zeile bleiben, bei Umbruch rutscht mir der Inhalt unten aus der Postkarte raus:

Dann hilft dir vw/vh wohl nicht. Was du brauchst, ist eine Schriftgröße (oder zumindest Laufweite), die sich an der Länge des Textes orientiert. Das gibt CSS aber meines Wissens nicht her.

Du wirst also auch weiter entweder von Hand justieren oder eventuell mit Javascript nachhelfen müssen. Also zunächst eine Standard-Schriftgröße einstellen, dann die Breite des Elements ermitteln und zur Breite des Containerelements ins Verhältnis setzen. Abhängig von diesem Verhältnis dann Schriftgröße (font-size) und/oder Laufweite (letter-spacing) anpassen.

Bedenke, dass das Ergebnis in beiden Extremfällen unansehnlich wird: Die 5 Buchstaben von Hanau sehen über die Breite verteilt ebenso dämlich aus wie ein ultralanger Ortsname, dessen Buchstaben bis zur Unkenntlichkeit zusammengequetscht sind.

So long,
 Martin

[Linuchs]

Das gibt CSS aber meines Wissens nicht her.

Schade, hätte ja sein können. Moment ... da die div-Breite ja mit der Papierbreite im Verhältnis steht ... mal experimentieren.

Du wirst also ... mit Javascript nachhelfen müssen.

Ja, wenn das Drucken häufiger vorkommt. Im Moment so einmal im Monat. Da werden die Postkarten bei Open-Air verteilt, um den Kalender bekannt zu machen.

Bedenke, dass das Ergebnis in beiden Extremfällen unansehnlich wird: ...

Kein Druckerzeugnis wird blind produziert ;-)

Linuchs

[Linuchs]

... da die div-Breite ja mit der Papierbreite im Verhältnis steht ... mal experimentieren.

Unfug, die Papierbreite bleibt gleich, auch wenn die Zeile mehr Zeichen enthält.