TYPO3@lisardo

TYPO3-lisardo ist jetzt sowohl in Twitter wie auch in Facebook vertreten – endlich. Eigentlich habe ich beide Accounts schon lange, wußte aber nicht so recht, was damit anstellen. Ich bin nicht so der Typ, der rein private Meldungen an alle Welt postet und für alles andere habe ich ja meine Blogs. Aber nachdem ich jetzt rausgefunden habe, wie einfach es ist, einen RSS-Feed auf einer Face-Book-Seite und enem Twitter-Account zu veröffentlichen, teste ich das jetzt einfach mal gründlich aus. 

Das diesjährige TYPO3-Camp in München ist vor kurzem zu Ende gegangen. Leider konnte ich diesmal nur am Samstag teilnehmen und habe deshalb viele interessante Sessions verpasst, aber allein durch die paar, die ich besuchen konnte, hat sich die Teilnahme für mich auch dieses Jahr wieder gelohnt. 

Mir ist aufgefallen, dass die Standardschriften, die unter Windows in den IEs für die Darstellung von monospaced-Schriften verwendet werden, nicht besonders gut aussehen und schlecht lesbar sind. Zudem gibt es eine Standardeinstellung in den IE, die verhindert, dass eine bestimmte Minimalgröße unterschritten wird. Und da ich heute vormittag ein bisschen was über Webfonts gelesen habe, wollte ich es gleich ausprobieren. 

Erster Schritt: eine vernünftige Schrift finden, die ich auch verwenden darf, also Open Source. Da gibts nicht gerade viel Auswahl, aber gerade im Bereich monospaced gibt es doch ein paar. Die »Inconsolata« von Ralph Levien hat mir gut gefallen: frei verwendbar, gut lesbar auch in kleinen Schnitten und sauberes Schriftbild in den wichtigsten Browsern. 

Zweiter Schritt: die Schrift liegt nur als Opentype vor, also konvertieren in die passenden Webformate, und zwar mit FontSquirrel, einem Online-Service zum Konvertieren von Schriften. Der Dienst arbeitet perfekt und bequem: ich erhalte ein zip-Archiv mit vier Schriftdateien: eot für die Internet-Explorer, svg fürs iPhone, ttf für Safari und woff für Firefox. (Es ist wirklich genau so bescheuert, wie es sich anhört ...). Ausserdem eine Demo-Datei mit den passenden CSS-Einträgen.

Und so werden die Fonts eingebunden: 

Danach können die entsprechenden Absätze mit dieser Schrift formatiert werden: 

Eine schöne Anleitung ist im Artikel »Cross Browser Font Embedding« (Englisch) zu finden. Der Autor erläutert genau die Bedeutung der einzelnen Abschnitte im CSS-Code. Insbesondere die url-Angaben sind wichtig, damit die ganze Sache funktioniert. 

Zu sehen ist die eingebettete Schrift hier recht unspektakulär in den Abschnitten mit dem Soruce-Code, z. B. die Zeilen oben. Damit umgehen können alle modernen Browser und auch die weniger modernen Internet Explorer ... 

Achtung: Schriften so einbetten ist natürlich ein Lizenzproblem. Die meisten Schriften dürfen nicht so ohne weiteres eingebunden werden, da die Besucher die Schrift ja herunterladen und bei sich im System installieren könnten. Es müssen deshalb Open Source Schriften sein, von denen es nicht gerade viele gibt (Google bietet zum Beispiel einige).

Allerdings entstehen gerade einige Web-Services (unter anderem sogar mit Linotype-Schriften), die eine Einbettung von DRM-geschützten Schriften ermöglichen. Dazu muss man sich bei diesen Anbietern anmelden und in seinem Account dort die Schriften zusammenstellen und das CSS generieren lassen. Um die Dateien möglichst klein zu halten, können bei manchen Anbietern sogar die Zeichen zusammengestellt werden, die die Schrift zur Verfügung stellen soll. Die Schriften werden auf diese Art nicht vom eigenen Server geladen sondern von den Servern dieser Dienste. Ein paar Links zu solchen Webfont-Services habe ich hier zusammengestellt. Die meisten bieten einen Demo-Account, mit dem man ein- oder zwei Schriften testen kann, ansonsten berechnen sie ab ca 20,– USD im Jahr für beliebig viele Schriften pro einer Domain. Die Kosten sind überschaubar: TypeKit verlangt z. B. 99 USD / Jahr für beliebig viele Schriften, eine beliebige Anzahl Domains und bis zu 100.000 Aufrufe im Monat. Wie sich die Performance entwickelt, kann man jetzt allerdings noch nicht sagen. 

Insgesamt verliert der Internet Explorer weiter etwas Marktanteile (von gesamt 62% auf 60%), der Trend hat sich aber deutlich verlangsamt. Hinzugewonnen hat diese Marktanteile in erster Linie Google Chrome, das seinen Anteil jetzt auf über 7% steigern konnte und somit Safari von Platz 3 verdrängt. 

Offensichtlich ist aber, dass uns der schlechteste aller Browser – Internet Explorer Version 6 – noch lange erhalten bleiben wird. Und damit der zusätzliche Aufwand, den er in der Webentwicklung verursacht. 

(via »Webstandards“)

Viele de Code-Zeilen im Blog hier sind zu lang für die relativ schmale Mittelspalte, das gibt insbesondere ein Problem, wenn die Wörter zudem sehr lang sind, oder wenn sie nur mit Punkten getrennt werden, wie üblich in Programmiersprachen. Die meisten Browser brechen nur um, wenn nach dem Punkt ein Leerzeichen folgt. Insbesondere im IE 6 gibt es zusätzlich das Problem, dass zu breite Zeilen die mittlere Spalte nach unten verdrängen, also unter die rechte Spalte. 

Allerdings gibt es mit CSS3 hier Abhilfe. Und da es sich um ein Feature handelt, das eigentlich von Microsoft stammt, funktioniert es als praktisch einziges CSS3-Feature auch im Internet Explorer 6: 

Bekannt und nervend ist das Problem auch bei E-Mailadressen – die überraschenderweise sehr lang werden können und gerne die schmalen Seitenspalten sprengen.