Wie errechnen sich Pixelgrößen von Schrift auf dem Screen?

[Thomas junold]

Hallo zusammen,

heute mich ein Auftraggeber vor eine etwas knifflige Problematik gestellt, wo ich anfangs nicht wusste, ob es eine »DAU-Frage« oder wirklich betrachtenswert ist. Je mehr ich darüber nachdenke, umso weniger handfestes weiss ich eigentlich über das Thema musste ich dann feststellen.

Es geht um die Darstellung von Schrift am Bildschirm und die Frage, wie und wo wird definiert wird, wie groß eine Schrift bei sagen wir 24 px dargestellt wird. Im Druck ist es ja so, dass Schriften bei gleicher Punktgröße optisch unterschiedlich groß erscheinen können, je nachdem wie sie gezeichnet ist. Nun ist aber der Bildschirm ein diskret unterteiltes Ausgabemedium. Woher nimmt sowohl PS als auch die Renderengine der Browser die Info, wie groß die Schrift dargestellt werden muss. Ascender und Descender als Ober- und Untergrenze und dazwischen wird alles auf 24 gepresst?

Die gelbschwarzen Kollegen in Berlin wussten auch keinen Rat …

Ich meine in der Tat die echte Info, bzw. Anweisung im Font selber. Das muss doch irgendwo stehen oder angegeben sein …

Vielleicht kann hier einer den Knoten lösen?

merci :)

mr_juno

[Ralf Herrmann]

Das Grundprinzip ist genauso wie im Druck. Die Schriftgröße 24 Pixel ist die Kegelgröße. (Gibst du andere Größen wie Punkt an, wird vorher nach festem Wert in Pixel umgerechnet.) Das heißt, der Schriftkegel wird auf die 24 Pixel skaliert und die Kurven fallen also entsprechend auf diese 24 Pixel Höhe und werden dann je nach Raster-Engine umgesetzt. Welche Pixel genau an, aus oder mehr oder weniger an sind, hängt dann natürlich sehr stark von der Raster-Engine ab. Ein gehinteter Systemfont, kann in kleinen Größen extrem von der ursprünglichen Outline abweichen. In gleicher Weise kann der Rasterizer entscheiden, bestimmte Balken nach links/rechts oder oben/unten zu schubsen, um die Outline möglichst konsistent wiederzugeben. Aber dies sind dann natürlich alles Details. Grundsätzlich ist die Schriftgröße genau wie im Druck die Kegelgröße und entsprechend wird das Schriftbild auf die verfügbaren Pixel verteilt.

[Thomas junold]

danke Ralf.

also doch wie gedacht. Allerdings weiss ich jetzt immer noch nicht, welcher Parameter angewendet wird, bzw. was exakt wird ausgelesen um die Dimension der Schrift festzustellen anhand derer die Schrift letztendlich dargestellt wird. Ich glaube das geht dann eher an die Fontlableute oder?

merci.

mr_juno

[Sebastian Nagel]

Wenn ich's richtig verstehe (was gefragt ist):

Die Kegelhöhe ist im Font definiert durch die Spanne zwischen Ober- und Unterlängenwert (Ascender und Descender - welcher der verschiedenen Varianten dieser zum Einsatz kommt, hängt bei Browsern wohl meistens vom Betriebsystem ab). Dazwischen befindet sich (im Idealfall) die komplette Zeichenform, mit etwas "Sicherheitsabstand".

Sagen wir mal, der Kegel ist 1000em hoch, die nominelle Unterlänge liegt bei -300, die nominelle Oberlänge bei 700, und das Zeichen g ist reicht dann von -250 (die optische Unterlänge) bis 500 em (x-Höhe).

Der Browser nimmt nun die Schrift, und skaliert die Kegelhöhe (also die 1000em) auf 40px (ich nehm jetzt mal 40px, damit ist es einfacher zu erklären weil sich runde Werte ergeben – 25em entsprechen dann 1 Pixel).

Innerhalb dieser 40px spielt sich alles ab, was folgt – nämlich das Umsetzen der Vektor-Kurven des Zeichens in ein Pixelbild (wie genau das passiert, ist abhängig von den Hinting-Angaben im Font und vom verwendeten Rasterer). Generell ist es so, dass der unterste Pixel des "g" auf dem dritten Pixel gezählt von der Kegelunterkante zu liegen kommt (50em oder eben 2 Pixel Abstand von unten). Das g ist 750em hoch, das sind umgerechnet 30 Pixel, auf denen das g gezeichnet wird. Die Oberkante des g ist demnach dann von unten gerechnet bei 2+30=32 Pixel zu finden. Darüber folgen noch 200em oder 8 Pixel bis zur gedachten Oberkante des Kegels.

[Ralf Herrmann]

Du musst nur 2 Schritte unterscheiden – dann ist es eigentlich offensichtlich:

Im ersten Schritt wird der Kegel mit seiner Outline wie oben beschrieben auf die Schriftgröße in Pixeln skaliert. Genau so, als würdest du einen Bleisatz-Kegel auf einen TFT drücken. Da muss nix gemessen werden. Das Vektor-Bild wird 1:1 übertragen.

Wenn die Versalhöhe im Entwurf z.B. 60 Prozent des Geviert ausmacht (in z.B. FontLab 600 Einheiten von 1000 UPM), dann wird bei einer Schriftgröße von 10 Pixeln rechnerisch eine Versalhöhe von 6 Pixeln entstehen.

Im zweiten Schritt wird nun konkret entschieden, welche Pixel an- und ausgeschaltet werden. Das hängt vom Grundprinzip her davon ab, wieviel Prozent der Outline auf einen Pixel fallen:

Durch Hinting im Font oder die Algorithmen des Rasterizers kann dieses Prinzip aber nach belieben verbogen werden, um die Lesbarkeit zu verbessern.

Edit: Sebastian war schneller

Bilder von http://www.safer-print.com/de/faq/Ein-dickes-Ding_Darstellungsfehler-im-PDF-beim-kleinen-L

[Joshua K.]

Vielleicht kann dieses Bild helfen, es besser zu verstehen:

[Thomas junold]

großartig! danke für die antworten, die mein wissen diesbezüglich bestätigt haben. manchmal ist der wald voller bäume. ;)

merci

mr_juno

[Jens Kutilek]

Vielleicht kann dieses Bild helfen, es besser zu verstehen:

Nochmal zur Klarstellung, das was Joshua hier als »Kegel« bezeichnet, muß nicht unbedingt der Summe von Ober- und Unterlängenmaß entsprechen, sondern ist im Font als »UPM Size« festgelegt. Meistens ist diese UPM Size 1000, also 1000 Einheiten pro em. Diese Höhe von 1000 Font-Einheiten werden dann wie beschrieben auf die gewünschten Pixel-Einheiten skaliert.

Hintergrund: Wenn man die Maße für Ascender und Descender im Font ändert, ändert sich die dargestellte Schriftgröße nicht. Wenn man die UPM-Größe ändert, aber schon.