Seite 3: Schriften, HTML5 & Tempo

Inhaltsverzeichnis

Einbettung von Schriften

Für Designer, die aus der Drucksachengestaltung kommen und gewohnt sind, die typographischen Eigenheiten moderner Satzsysteme auszureizen, muss das Word Wide Web wirken wie ein Rückschritt ins Mittelalter. Von typographischer Vielfalt kann keine Rede sein, was aber kein Wunder ist, wenn man bedenkt, dass Browser seit Anbeginn des Webs auf Systemschriften angewiesen sind. Das heißt auf Fonts, die auf dem Rechner des Nutzers installiert sind. Von Times New Roman über Arial hin zu Verdana und Georgia, hin und wieder etwas Courier oder Courier New – lange Zeit waren es fast ausschließlich diese Schriften, die Webnutzer zu sehen bekamen.

Zwar kann man mit der At-Regel @font-face seit langem beliebige Schriftarten in Webseiten einbetten, und sowohl Netscape 4 als auch der Internet Explorer 4 verstanden damit umzugehen, jedoch gab es kaum Schriften im richtigen Format und in angemessener Qualität, sodass die Einbettung von Schriften zu keiner Zeit richtig funktionierte und zudem nicht eingesetzt wurde. Das W3C entfernte @font-face im Rahmen von CSS 2.1 folgerichtig aus dem Standard.

Im "CSS3 Fonts Module" erlebt @font-face seine Wiederauferstehung. Das hat mehrere Gründe: zum einen die gute Bildschirmdarstellung moderner Flachbildschirme und die verbesserte Kantenglättung aktueller Betriebssysteme, zum anderen, dass die meisten Browserhersteller die Unterstützung für @font-face wieder implementierten, allen voran Safari, kurz danach auch Firefox, Opera und Chrome.

Als Standardformat für eingebettete Schriften hat sich das Web Open Font Format (WOFF) durchgesetzt. Firefox unterstützt das Format seit Version 3.6, Chrome seit Version 6. Andere Browserhersteller werden in kommenden Versionen nachziehen, und auch der IE9 unterstützt das WOFF-Format, wovon man sich auf einer Testseite überzeugen kann. Folgende Regel weist den Browser an, die entsprechende Fontdatei herunterzuladen und unter dem Namen "FelbridgeOTSCondensed" zur Verfügung zu stellen.

@font-face {
  font-family: FelbridgeOTSCondensed;
  src: url('fonts/FelbridgeOTS-Condensed.woff');
}

Anschließend können Webentwickler den Font wie gewohnt verwenden:

p { font-family: FelbridgeOTSCondensed, sans-serif; }

Die Neuerungen sind lobenswert, allerdings schafft Microsoft es damit nicht, bei CSS3 vollends zur Browserkonkurrenz aufzuschließen. findmebyip deckt auf, wo die IE-Entwickler noch nachlegen müssen. Unter anderem auf die Unterstützung des lang erwarteten Spaltenmoduls oder CSS3 Transitions – einem Modul, das beschreibt, wie ein Element sich verhält, wenn seine CSS-Eigenschaften sich ändern – müssen Webentwickler wohl bis zur nächsten IE-Version warten.

HTML5: audio, video und canvas – es passiert was!

Kaum eine Website kommt heute ohne Audio- und Video-Inhalte aus. Fast alle setzen auf Flash, um Audio-Dateien und Filme auf Webseiten darzustellen, eine Technik, die nicht Teil des Browsers ist, sondern als Plug-in nachzuinstallieren ist, sofern das erlaubt ist – Apple beispielsweise weigert sich, Flash auf dem iPad oder iPhone anzubieten.

Die HTML5-Elemente audio und video sollen Flash irgendwann überflüssig machen und Multimedia-Inhalte ohne zusätzliche Plug-ins stabil und plattformübergreifend in Webseiten einbetten. Die IE9 Beta ist der erste Browser aus Redmond, der die neuen Elemente unterstützt. Dabei setzt der Browser für video auf das Format H.264 und für audio auf AAC und MP3.

Leider herrscht seitens der Browserhersteller bei den unterstützten Formaten wenig Konsens. H.264 favorisiert nicht nur Microsoft, sondern auch Apple (Safari), während Firefox und Opera auf Ogg Theora und WebM setzen; nur Google (Chrome) unterstützt alle drei Codecs. Auch bezüglich der Audioformate gibt es Uneinigkeit.

Weil die HTML5-Entwickler dem Prinzip folgen, nur das zum Standard zu erheben, was sich in der Breite durchgesetzt hat, gibt es derzeit keinen offiziellen Video- oder Audiocodec. Die "Lösung" des Problems besteht derzeit darin, dass Webseitenbetreiber ihre Medien in unterschiedlichen Formaten anbieten. Der Miro Video Converter hilft bei der Konvertierung von einem Format zum anderen. Aussehen könnte das wie folgt:

<video width="400" height="300" poster="img/platzhalter.png" controls>
  <source src="video.mp4" type="video/mp4" />
  <source src="video.ogg" type="video/ogg" />
  <p><a href="video.mp4">Video ansehen</a></p>
 </video>

IE9, Safari und Chrome spielen das erste Video ab, Firefox und Opera, die den Codec nicht verstehen, nehmen stattdessen das zweite. Ältere Browser, die mit dem video- beziehungsweise source-Element nichts anzufangen wissen, zeigen einen Link zum Video an.

Nach Erscheinen der ersten Platform Preview sah es so aus, als würde Microsoft auf die Unterstützung des canvas-Elements zugunsten der eigenen Entwicklung Silverlight verzichten. Die dritte Platform Preview belehrte Skeptiker eines Besseren.

Das HTML5-Element canvas stellt eine Fläche zur Verfügung, auf die Webentwickler mit JavaScript dynamische Bitmap-Grafiken zeichnen und animieren können. Zur Darstellung nutzt der Browser "Kontexte", beispielsweise den Canvas-2D-Kontext aus der "W3C Canvas 2D API"-Spezifikation. canvas erfährt mittlerweile eine breite Unterstützung, unter anderem im Firefox ab Version 3.0, Safari ab Version 3.1 und Opera ab Version 9. Selbst im Internet Explorer ab Version 6 können Webentwickler mit dem Script ExplorerCanvas das canvas-Element mit Einschränkungen einsetzen. Die IE9 Beta verspricht nun umfassende, native Unterstützung.

Zahlreiche Beispiele bietet das Canvas Pad. Beeindruckend sind auch der Canvas Zoom und die Beispiele, die die Website "Canvas Demos" zusammenträgt.

Standardkonformität und Geschwindigkeit

Bereits die erste Platform Preview bestand den "CSS3 Selectors Test" auf CSS3.Info mit Bravour, und auch die Beta durchläuft alle 574 Tests fehlerfrei. Beim Acid3-Test hingegen fiel die erste Platform Preview mit nur 55 von 100 Punkten noch glatt durch. Der Acid3-Test analysiert Browser in Bezug auf ihre Fähigkeiten zur Darstellung interaktiver Anwendungen und testet dementsprechend primär die DOM2- und ECMAScript-Fähigkeiten des Browsers.

Hier haben die IE-Entwickler stark aufgerüstet: Neben der zusätzlichen Unterstützung der W3C-DOM-Level 2 und -Level 3 weist die Beta ein erweitertes DOM sowie eine verbesserte Verarbeitung von Leerzeichen auf. Zusätzlich zu den 100 Einzeltests muss der Browser in der Lage sein, das Referenz-Rendering des Acid3-Tests darzustellen. Dazu hat er herunterladbare Schriften zu unterstützen, er muss Base64-codierte Bilder in Form von Data-URLs anzeigen können und Farbdarstellungen im HSLA-Farbraum verstehen. Die Beta erreicht beim Acid3-Test 95 von 100 Punkten; die Darstellung entspricht der Referenzdarstellung. Fünf Tests besteht der IE nicht, was auf die noch fehlerhefte SVG-Unterstützung zurückzuführen ist.

Die SVG-Schwächen decken auch die Tests von Jeff Schiller auf. Zwar hat der IE im Vergleich zur ersten Platform Preview (28,36 %) deutlich aufgeholt und erreicht mittlerweile 58 Prozent, das ist im Vergleich zur Konkurrenz allerdings noch deutlich zu wenig: Opera und Chrome stehen bereits bei über 90 Prozent.

Beeindrucken kann die Beta hingegen in Sachen Geschwindigkeit. Microsoft gibt an, dass der neue Browser elfmal schneller sei als sein Vorgänger, und tatsächlich laufen die Demos auf der Test-Drive-Website zum Teil schneller und flüssiger als in den Browsern der Konkurrenz. Zurückzuführen ist das vor allem darauf, dass die gesamte Grafik- und Textdarstellung mit Direct2D und DirectWrite von der CPU auf die Grafikkarte übertragen wird. Ein weiterer Grund für die verbesserte Performance ist eine neue JavaScript-Engine, die jetzt in der Lage ist, mit Multi-Core-Maschinen zusammenzuarbeiten. Der SunSpider-JavaScript-Benchmark kann den Eindruck untermauern: Die IE9 Beta ist schneller als ihre Vorgänger und behauptet sich hinter aktuellen Versionen von Opera und Chrome auf Platz 3, deutlich vor Safari und Firefox. Wer mag, kann sich mit der hübsch gestalteten Demo "FishIE Tank" von der Geschwindigkeit der Beta überzeugen und mit der seines Lieblingsbrowsers vergleichen.

Michael Jendryschik
leitet den Bereich Webentwicklung bei der itemis AG . Er ist Buchautor (Einführung in XHTML, CSS und Webdesign), schreibt Fachartikel und spricht auf Konferenzen. Nicht nur als Webkraut setzt er sich für Webstandards ein und verfolgt mit Interesse die Entwicklung des Webs. (ane)