Die Einheit px

Noch was zum Web-Design. [Nachtrag]

Ich hatte geschrieben

Ich versuche, beim Stylesheets Ausdrücke, die von Pixeln abhängen (Einheit px) nicht zu verwenden, weil die Einstellungen von der Bildschirmauflösung unabhängig sein sollen.

Ein Leser schreibt dazu

Die Einheit “px” bezieht sich nicht auf die tatsächlichen pyhsikalischen Bildschirm-Pixel, sondern ist als 1/96 Zoll definiert. Auf einem Bildschirm mit 192dpi sollte also 1px zwei physikalischen Pixel entsprechen. Es ist (bis auf einen Faktor) also egal, ob man “pt” (1/72 Zoll), “px” oder andere feste Einheiten[2] verwendet.

Nein, stimmt nicht ganz.

Denn erstens war ja meine Argumentation, und ist auch eine Anforderung des Responsive Design, keine festen, absoluten Einheiten zu verwenden. Die Einheit pt (1/72 Zoll) ist eine Einheit aus dem Druck und sollte nur für die Formatierung des Ausdrucks (Papier, PDF) verwendet werden. Anders als beim Bildschirm weiß man bei einem A4-Blatt (oder für A4 gemachten PDF) aber, wie groß es ist, hat also eine feste Bezugsgröße und kann (und soll) damit die für den Druck üblichen festen Einheiten verwenden, aber nicht auf dem Bildschirm.

Und zweitens stimmt das nicht (immer), dass ein px 1/96 Zoll ist. Das maßgebliche W3C (World Wide Web Consortium) definiert px als

px * pixels (1px = 1/96th of 1in)

* Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels.

Das weiß man also vorher nicht so genau, was ein px auf dem Bildschirm dessen, der ihn ansieht, bedeutet. Aber selbst dann, wenn das verlässlich so wäre, nutzte es einem ja nichts: Was nützt es mir, wenn ich weiß, dass 1px = 1/96 Zoll ist, wenn ich nicht weiß, wie groß der Bildschirm in Zoll und Pixeln ist?

Das Design muss ma auf einem billigen Smartphone mit 720Pixel-Bildschirm funktionieren, auf einem normalen Monitor, auf einem Mac mit 5120 x 2880, und vor allem aber unabhängig davon, ob der Bildschirm wie auf dem Smartphone 4cm breit ist oder das auf einem Riesen-8K-Monitor im Schaufenster oder in der 8-Meter-Beamer-Projektion im Hörsaal läuft. Was nutzt mir das, wenn ich eine Linie als Umrandung 5px breit oder ein Bild 600 Pixel bei 1/96 Zoll anzeige, wenn ich (anders als beim Ausdruck auf A4-Papier, wo ich pt als feste Einheit verwenden kann) nicht weiß, was der Bezugsrahmen ist? Es gibt Leser, die lesen nur auf dem Smartphone, etwa auf dem Weg zur Arbeit. Es gibt aber andere Leser, die gerne von der Couch surfen oder auch einfach sehbehindert sind, die einen 70-Zoll-4K-Fernseher als Anzeige verwenden.

Außerdem: Woher soll denn der Browser (zuverlässig) wissen, wie groß das Bild ist, was also als 1/96 Zoll angezeigt wird? Nicht nur, dass der Benutzer beliebig zoomen kann, der Rechner müsste dazu ja wissen, wie groß der Bildschirm ist. Das ist zwar manchmal der Fall, eben bei Handys, oder vom Hersteller komplett mit Bildschirm konfigurierten Geräte wie komplett installierten Notebooks oder mit Bildschirm verkauften iMacs. Aber viele haben eben auch einen PC, an den sie einen Bildschirm per HDMI oder Display-Port anstöpseln. In den X11-Einstellungen kann man zwar angeben, wieviel dpi der Bildschirm hat, aber wer macht das schon? (Ich habe mir früher, vor 10 oder 15 Jahren mal Mühe gegeben, das zu tun, aber längst auch nicht mehr).

Ja, ich weiß. Monitore geben ihre Größe auch über HDMI und das EDID-Format (Extended Display Identification Data) bekannt. Der vor dem ich sitze, sagt gerade ( read-edid | parse-edid ) , dass er

DisplaySize 510 290

groß sei. Das stimmt zwar in Millimetern, aber eigentlich verwendet EDID als Einheit Zentimeter. Und ich habe eben auch (zumindest vor vielen Jahren, als ich mich damit mal beschäftigt habe) ganz viele Monitore erlebt, die da gar nichts oder Mist ausgeben, weil da irgendeine China-Klitsche dieselbe Firmware oder sogar dieselbe Platine für alle Monitore verwendet. Oder der Hersteller der Elektronik noch gar nicht wusste, welches Panel ein anderer dranklatscht.

Dann gibt es Geräte, die noch irgendwelche HDMI-Verteiler dazwischen haben und keine EDID-Rückmeldung liefern, bei denen der Rechner also gar nichts weiß. Oder zwei – unterschiedlich große – Monitore. Welcher zählt dann?

Und was ist, wenn man die Ausgabe streamt? Beispielsweise an 10000 Zuschauer verteilt? Oder einfach auf einen HDMI- oder Screen-Recorder aufnimmt und später abspielt?

Das kann also gar nicht zuverlässig funktionieren. Zugegeben, es funktioniert meistens, aber sieht auch meistens anders aus.

Ich will nicht sagen, dass das generell unsinnig wäre, das hat viele nützliche Anwendungen.

• Wenn man vorher weiß, für welches Gerät man ausgibt.
• zumindest eine Eingrenzung derer wie „Business-Notebook“ hat.
• Wenn man bestimmte Anwendungen absolute Größen braucht, etwa QR- oder Barcodes für Lesegeräte anzeigt.
• Wenn man weiß, dass an einer Stelle eine Graphik mit 600 Pixel Höhe kommen soll und man dem Browser sagen kann „Lass mal 600px vertikalen Platz“, weil es dann nämlich völlig egal ist, wieviel ein Pixel ist, weil der Browser für Graphik und Angabe zum selben Ergebnis kommt, es also „passt“.

Aber ich mag es halt wegen dieser Unwägbarkeiten nicht so, man hat damit den Effekt, dass die Seiten auf unterschiedlichen Geräten unterschiedlich aussehen.

Und es ist eben nicht responsive und barrierefrei. (Und sowas berücksichtigt eben Google beim Ranking.) Ich merke das ja nun auch, dass ich älter werde und zum Lesen eine (alle paar Jahre stärkere) Lesebrille brauche, und manchmal in Webseiten reinzoome, um sie besser lesen zu können. Manche zoomen gut, und bei manchen gerät das Layout völlig durcheinander, überlappen sich dann die Teile der Webseite, weil die Elemente (wie im vorangegangenen Artikel beschrieben) absolut positioniert sind. Oder irgendwas zoomt nicht mit. Oder die Schrift wird größer, aber nicht der Platz für den Text. Und genau solche Effekte versucht man mit responsive design, relativen Einheiten und Layouts wie grid statt absoluter Positionierung zu vermeiden.

Und deshalb sind mir die relativen Größen einfach lieber, etwa die, die abhängig

• von der gewählten Schriftgröße sind, wie em (Größe des aktuellen Zeichensatzes), rem (Größe des initialen Zeichensatzes der Seite), ex (höhe des Fonts),
• von der Bildschirm-/Darstellungsauflösung sind wie vh (=1/100 der Viewport Width)
• von der größe des umgebenden Objekts sind, wie % (Prozent) oder fr (Verhältnisanteile)

sind. Alles nicht so einfach, wie es auf den ersten Blick aussieht.

Nachtrag: Noch ein Problem von px ist, dass es eben von dpi abhängt, aber nicht den Abstand des Betrachters vom Bildschirm berücksichtigt. Solange ich direkt vor dem Monitor sitze, mag das funktionieren. Aber was ist, wenn man in einem Hörsaal eine riesige Projektionsfläche mit dem Beamer bestrahlt, und jedes Pixel aus der Nähe betrachtet 2cm groß ist, also „low-dpi“, die Zuschauer aber 30 Meter weit weg sitzen? Mache ich dann die Graphik trotzdem 10px = 10/96 Zoll groß? Oder was stelle ich dann als dpi ein? Die tatsächliche Größe? Oder die wie bei einem Monitor, dessen Bild mir ähnlich groß erscheint, wenn ich davor sitze?

Denn statt dpi müsste man eigentlich korrekterweise eine Einheit für den Blickwinkel haben, unter dem einen ein Pixel oder dot und der ganze Bildschirm erscheint, für die Größe des Bildes auf der Netzhaut, die gibt es aber nicht. Näherungsweise über die relativen Größen zum Viewport oder umgebenden Objekt, wenn man annimmt, dass Bildschirme und Projektionen immer ungefähr auf einen gewissen Blickwinkel hinauslaufen.