HTML in Cache-Listings
/ 4
Angeregt durch den Cachepodcast #73 möchte ich hier ein paar Tipps hinsichtlich Cachelistings in HTML geben. Auslöser war das Problem, daß verwendete Schriften auf Tablets o. ä. manchmal nicht sauber dargestellt werden. Ein damit verwandtes Problem sind Schriftgrößen. Auf die zwei Problematiken will ich eingehen.
HTML ist ja eine schöne Sache, um Cachelistings ansprechender zu gestalten. Man kann Bilder einfügen, Schriftgrößen variieren, auch mal kursiv, fett oder farbig schreiben. Die Krux liegt aber dabei im "M" von HTML. HTML steht nämlich für "Hypertext Markup Language". Es ist also eine Auszeichnungssprache. Das bedeutet, ich gebe im Quelltext nur an, was etwas sein soll und der Browser setzt es um. Eine Überschrift 1. Ordnung wird also bspw. so dargestellt:
<h1>Überschrift</h1>
Wie die Überschrift dann später aussehen soll, legt man durch weitere Parameter fest, die dann Schriftgröße, Schriftschnitt, Farbe usw. festlegen. Aber auch das ist noch nicht eindeutig, weil das Ausgabe-Medium, meistens der Bildschirm, ja auch noch einen Einfluß darauf hat.
Beginnen wir mal mit der Schriftart. Ich kann für den Listing-Text einfach gar keine Schriftart angeben. Das hat zur Folge, daß einfach die Schriftart genommen wird, die Groundspeak für die komplette Seite vorgegeben hat. Ich markiere eine Überschrift nur als Überschrift und schon paßt es.
Jetzt will aber mancher auch mal eine andere Schrift verwenden und benutzt zur Erstellung einen der zahlreichen Online-HTML-Editoren oder vielleicht eine auf seinem Rechner installierte Software (ich persönlich bearbeite alle meine Listings mit dem KompoZer). Hier kann man dann einfach eine andere Schriftart aussuchen. Verwende ich bspw. die Schriftart "Calibri" steht dann im HTML-Quelltext
<span style="font-family: Calibri;">Lorem Ipsum …</span>
Aber da steht eben nur der Name der Schriftart, die verwendet werden soll. Bei mir auf dem Rechner sieht das auch gut aus. Das liegt aber daran, daß bei mir diese Schrift auf dem Rechner installiert ist. Schau ich mir das Listing aber auf einem anderen Rechner an (Smartphone, Tablet, Max, was weiß ich), auf dem diese Schriftart fehlt, hat der Browser ein Problem: Er kann es nicht so darstellen, wie ich es mir vorstelle. Im Idealfall ignoriert er dann diese Angabe (weil er sie nicht umsetzen kann) und verwendet die Standardschrift. Nun kann es aber sein, daß sich auf dem Zielrechner eine Schrift mit diesem Namen befindet, dort aber anders ausschaut (da spielt auch dann die Größe mit rein, dazu unten mehr). Dann ist das eher suboptimal.
Fehlt auf dem Zielrechner die gewünschte Schriftart, kann ich den Browser aber etwas in die richtige Richtung schuppsen, indem ich Alternativen angebe. Also in der Art: "Wenn Du keine Times New Roman hast, nimm die Times. Wenn Du die nicht hast, nimm zumindest irgendeine Serifenschrift". Das würde im HTML-Quelltext dann so aussehen:
<span style="font-family:'Times New Roman',Times,serif">Lorem Ipsum …</span>
Damit bleib ich zumindest halbwegs beim Aussehen. Der Browser geht hier einfach die Reihenfolge der Angaben durch, bis er was gefunden hat, was er darstellen kann. Die letzte hier gemachte Angabe ist übrigens die einer generischen Schriftfamilie. Die sind fest vordefiniert. Das ist also die letzte Chance, irgendwas in der gewünschten Art zu erhalten. Vordefiniert sind dabei folgende Familien:
- serif = eine Schriftart mit Serifen,
- sans-serif = eine Schriftart ohne Serifen,
- cursive = eine Schriftart für Schreibschrift,
- fantasy = eine Schriftart für ungewöhnliche Schrift,
- monospace = eine Schriftart mit dicktengleichen Zeichen.
Also: Je ungewöhnlicher die gewählte Schrift ist, desto größer die Chance, daß sie auf anderen Systemen nicht korrekt dargestellt wird.
Ein weiterer Einflußfaktor ist die Schriftgröße. Jetzt meint man ja, das wäre doch ziemlich einfach: Man gibt an, wie groß die Schrift sein soll und gut ists. Nunja, ähm. Nein.
Im HTML-Quelltext wird zur Angabe der Schriftgröße der Befehl font-size: verwendet, gefolgt von einer numerischen Angabe. Und die kann jetzt eine absolute oder eine relative Angabe sein. Eine absolute Angabe wäre zum Beispiel die Angabe der Größe in Millimetern. Aber das ist jetzt schon so ein Problem. Eine Schriftgröße von bspw. 5mm schaut auf dem Laptop vielleicht aus, wie gewünscht, auf dem Display des Smartphones wirkt die aber riesig.
Die Angabe in Pixel ist auch so eine Sache. Die Angabe in Pixel ist nämlich einerseits absolut (5 Pixel sind 5 Pixel, basta) andererseits auch relativ, weil die Mistviecher nämlich wie Menschen sind: Mal sind mehr da, mal weniger, mal sind sie größer, mal kleiner. Oder technisch gesagt: Euer Monitor, an dem Ihr diesen Text grad lest, wird seine Größe nicht ändern. Aber Ihr könnt die Auflösung ändern. Ihr könnt jetzt bspw. eine Auflösung von 1200 x 800 Pixel haben. Dann hat jedes Pixel eine bestimmte Größe. Ändert Ihr aber die Auflösung auf 1280x720 Pixel, werden die einzelnen Pixel größer. Und jetzt stellt Euch mal alle Monitore / Displays von Tablets, Smartphones usw. mit all den verschiedenen Auflösungen vor. Da ist ein Pixel immer unterschiedlich groß. Also ist diese Einheit auch eher nicht so toll für unsere Zwecke.
Ich persönlich bevorzuge für die Listings eine relative Größenangabe. Das heißt, will ich etwas eine Stufe kleiner haben, setze ich diesen Text "small". Im Quelltext sieht das dann so aus:
<small>Lorem Ipsum …</small>
Zwei Stufen kleiner erhielte ich dann, wenn ich dann eben
<small><small>Lorem Ipsum …</small></small>
schreibe. Das heißt, ich lasse die Basisgröße, wie sie Groundspeak für die Listing-Seiten festgelegt hat und variiere diese nur. Wer diese Variationen feiner haben will, kann auch Prozentangaben machen.
<span style="font-size:200%">Lorem Ipsum …</span>
bringt den Text auf doppelte Größe.
Letztendlich aber muß zum Schluß der Browser diese Angaben in Pixel umrechnen, denn nur die kann er ja auf einem Bildschirm darstellen. Und was unter einem Betriebssystem gut aussieht, kann auf einem anderen enttäuschend sein. Schuld daran sind die Basiseinstellungen der Betriebssysteme. Windowssysteme verwenden eine Berechnungsgrundlage von 96dpi für die Schriftdarstellung (bei "große Schriftarten 120 dpi), Linux und Apple m. W. 72 dpi. Hier ist also auch schon ein Unterschied vorprogrammiert.
Die besten Ergebnisse erzielt Ihr meiner Erfahrung nach mit folgendem Vorgehen:
- Verzichtet auf spezielle Schriftarten. Der Informationsgehalt wird dadurch nicht höher.
- Wenn Ihr eine abweichende Schriftart verwenden wollt, gebt Alternativen an, damit es zumindest in die gewünschte Richtung geht. Dazu öffnet Ihr ggf. den HTML-Quelltext in einem Editor und legt selber Hand an.
- Zeichnet Überschriften nur als Überschriften aus und überlaßt die Formatierung den Vorlagen von Groundspeak
- Wenn Ihr die Größe verändern wollt, verwendet relative Angaben. Ggf. müßt Ihr auch hier wieder selber Hand anlegen.
Links / Quellen: