HTML-Renderer

Verbreitung verschiedener HTML-Renderer zwischen 1994 und 2009.

Ein HTML-Renderer, oft Browser-Engine genannt, ist ein Programm zur Visualisierung von Hypertext Markup Language und Scalable Vector Graphics. Mit „Visualisierung“ ist hier die Durchführung der Bildsynthese gemeint.

HTML war ursprünglich eine (strukturelle) Beschreibung von Text, eine Art von Rich Text mit Hyperlink-Funktionalität, von dem Erfinder des World Wide Web, Tim Berners-Lee, „IIRC Hypertext“ genannt. Zwar gibt es HTML-Attribute, die direkt das Aussehen des Elements beschreiben (etwa die Schriftgröße), diese werden jedoch in XHTML und neueren Standards als hinfällig eingestuft und nur noch aus Gründen der Kompatibilität unterstützt.[1]

Das spiegelt wider, dass HTML nicht festlegen soll, wie ein Dokument anzuzeigen ist. Dadurch ist HTML so flexibel, dass es z. B. in einer Beamer-Präsentation, auf einem Computermonitor, einem PDA oder einem Schwarz-Weiß-LCD angezeigt werden kann. All diese Anzeigegeräte haben unterschiedliche Möglichkeiten für die visuelle Gestaltung des Inhaltes. Da HTML keine solche Gestaltung festlegt, kann das Anzeigeprogramm das HTML anzeigegerätespezifisch interpretieren und das visuelle Layout mehr oder weniger frei gestalten.

Der HTML-Renderer ordnet dieser eher semantisch-strukturellen Definition eine visuelle Darstellung des Textes zu.

Dies geschieht in nahezu allen Browsern mittels Cascading Style Sheets (CSS). Die Stylesheets enthalten eine Liste von Selektoren (Bedingungen an die Teilstruktur des HTML-Dokuments, die zutreffen müssen, damit die Regeln angewendet werden) und Regeln (Attribute, die auf die der entsprechenden Teilstruktur zugeordnete visuelle Repräsentation angewendet werden). Per Voreinstellung liefert der Browser ein Standard-Stylesheet aus, das die meisten Elemente grundformatiert.[2] CSS ist sehr flexibel. Es ist möglich, diesen Satz von Regeln komplett pro Benutzer oder pro Dokument auszutauschen. Dadurch sind den Darstellungsvarianten fast keine Grenzen gesetzt.

Ein HTML-Renderer ist also Teil eines Webbrowsers, der einer eher semantisch orientierten Dokumentenstruktur eine visuelle Darstellung zuordnet. Eine Layout-Engine interpretiert das Layoutmodell, das durch CSS definiert wurde, und füllt in dieses Layout den durch HTML semantisch angereicherten Text.

Funktionsweise

Parsen

Das HTML-Dokument wird eingelesen und dessen Elemente strukturiert. Diesen Vorgang nennt man Parsen. Nahezu jeder Browser nutzt dafür seinen eigenen Renderer. Die Festlegung der Standards für HTML-Dokumente werden dabei unter anderem vom World Wide Web Consortium festgelegt und definiert. Dabei existieren unterschiedliche Standards, die Syntax der Elemente bleibt aber weitestgehend gleich. Der Entwickler sollte mit Hilfe des sogenannten Doctypes angeben, welcher Standard benutzt wird. Wird der festgelegte Standard nicht vollständig eingehalten, ist das HTML-Dokument nicht valide, der Browser kann die Elemente nicht richtig interpretieren und es kann zu Fehldarstellungen kommen.

Generierung des Document Object Models

Wurde das Dokument erfolgreich eingelesen, wird ein sogenanntes Document Object Model erstellt. Diese hierarchische Struktur beinhaltet Informationen über die Ordnung und Unterelemente (Kinder genannt). Das Document Object Model ist auch nach der Ausgabe noch relevant, da etwa clientseitige Scriptsprachen wie JavaScript auf dieses zugreifen können, um es zu manipulieren.

Reflow

Die Berechnung von SGML-Strukturen (wie etwa HTML) wird als Reflow bezeichnet. In diesem Prozess wird die grundlegende Geometrie der zu formatierenden Objekte berechnet – etwa die Höhe oder die Breite eines Elements. Die zu formatierenden Objekte werden als frames (dt. Rahmen) bezeichnet[3] und sind nicht zu verwechseln mit den Frames, die das Laden einer HTML-Seite in eine andere ermöglichen.

Liste von Renderern

Grafisch

Textbasiert

Rendern von Audio-Daten

Es gibt auch Rendern von Audio-Daten von HTML durch eine CSS-Teilspezifikation, mit der eine synthetische Stimme beim Vorlesen von Hypertext durch CSS-Attribute navigiert wird. Rendern von Audio-Daten ist jedoch nicht in den gängigen Webbrowsern implementiert. Rendern von Audio-Daten gibt es nur in Spezialanwendungsprogrammen (Screenreader) für Blinde oder stark sehbehinderte Menschen.

Einzelnachweise

  1. ↑ Missbilligte HTML 4-Elemente (Memento des Originals vom 2. Juni 2017 im Internet Archive)  Info: Der Archivlink wurde automatisch eingesetzt und noch nicht geprüft. Bitte prüfe Original- und Archivlink gemäß Anleitung und entferne dann diesen Hinweis.@1@2Vorlage:Webachiv/IABot/webdesign.about.com
  2. ↑ Standard-Stylesheet einer älteren Firefox-Version
  3. ↑ Chris Waterson: Notes on HTML Reflow. (Nicht mehr online verfügbar.) Mozilla Foundation, archiviert vom Original am 3. Juli 2010; abgerufen am 15. Juli 2008 (englisch).  Info: Der Archivlink wurde automatisch eingesetzt und noch nicht geprüft. Bitte prüfe Original- und Archivlink gemäß Anleitung und entferne dann diesen Hinweis.@1@2Vorlage:Webachiv/IABot/www.mozilla.org
  4. ↑ Luca Caracciolo: Opera setzt auf Webkit: Was bedeutet das für die Weiterentwicklung von HTML? In: t3n Magazin. 14. Februar 2013, archiviert vom Original am 16. Februar 2013; abgerufen am 28. Juni 2013.  Info: Der Archivlink wurde automatisch eingesetzt und noch nicht geprüft. Bitte prüfe Original- und Archivlink gemäß Anleitung und entferne dann diesen Hinweis.@1@2Vorlage:Webachiv/IABot/t3n.de
  5. ↑ Upgrading to the new Microsoft Edge. 15. Januar 2020, abgerufen am 22. Januar 2020 (amerikanisches Englisch).

Auf dieser Seite verwendete Medien

Layout engine usage share-2009-01-07.svg

Vector version of Image:Layout_engine_usage.png on English Wikipedia. Original description:

Comparison of layout engine/web browser usage share (market share) over time. Data is based on usage share of web browsers. Note that the values may contain errors. Existing problems in the current data:

  1. Data for the early part of the (first) browser wars could use some refinement.
  2. Extremely scant data prior to 1996.
  3. No statistical data prior to 1994 (possible to infer certain things though...)
  4. Very few statistics about Safari and no data about Konqueror

Please help improving the data if you can. :-)

Suggestions for future improvements:

  1. Include partial-year data points (see following suggestions :) rather than the rough way of doing it like now.
  2. Start of the graph: WorldWideWeb, "the world's first web browser [...] was completed on Christmas Day, 1990 [and was] released to the public (by way of Internet newsgroups) in August 1991."
  3. Mosaic "was released on April 22, 1993"; as per usage share of web browsers, by January 1994 it was at 97% (!!!) so a very rapid replacement...
  4. "Beta versions of Netscape Navigator were freely downloadable in mid- to late-1994, and version 1.0 of the browser was released by the end of the year." If we had some 1995 data, that would help fill in the blanks, but by October 1994 (as per the usage share of web browsers page again), the usage share for NN was already 18%! (the internet pioneers were certainly early adopters, ne? ;) and by 1996 was well in the majority.
  5. "Microsoft licensed Spyglass Enhanced Mosaic as the basis of Internet Explorer 1.0 which it released as part of the Microsoft Windows 95 Plus Pack in August 1995. Internet Explorer 2.0 was released three months later, and by then the race was on." "Internet Explorer was not widely used until version 4, which was released in October 1997."
  6. Present data in such a way that the year marker indicates data for January 1 of that year (e.g. reading up from "2005" should indicate approximate market share for Jan. 1, 2005).
  7. If you have a better chart drawing tool, please create a better one.

(Original) Graph created with OpenOffice.org Calc. (Recreated in vector form in Inkscape.)

The revised CSV data: 

 "Date","Mosaic","Netscape Classic","Trident (Internet Explorer for Windows)","Gecko (Mozilla, Firefox, Netscape 6+, etc)","WebKit (Safari)","Presto (Opera 7+)","Others"
 1994,95,0,0,0,0,0,5
 1995,37.5,55,0,0,0,0,7.5
 1996,7.5,80,3.75,0,0,0,8.75
 1997,2.5,72.5,17.5,0,0,0,7.5
 1998,0,60,35,0,0,0,5
 1999,0,35,62.5,0,0,0,2.5
 2000,0,15,83.75,0,0,0,1.25
 2001,0,9,90,0,0,0,1
 2002,0,2.5,95.25,1,0,0,1.25
 2003,0,0.75,94.75,2,0,0,2.5
 2004,0,0,92.625,4,1,0.625,1.75
 2005,0,0,86.903861,9.544639,1.571667,0.7429,1.23693299999999
 2006,0,0,60.65,9.5925,30.995,0.4825,0.4825

Some further notes on the data:

  1. Because these (especially the very early data) are rough estimates, we should see nice round numbers (or at least numbers that make the graph pretty ;)
  2. "WorldWideWeb" currently has only "0" values for data points; I am thus excluding it from the CSV info and graph barring new information.
  3. The data for each year should add up to 100 (percent)
  4. According to the Mosaic page, "Mosaic's popularity as a separate browser began to dry up upon the release of Netscape Navigator, and by 1998 its userbase had almost completely evaporated." which means it should have non-zero values up until then.
  5. "In January 2003, Opera 7 was released and introduced a new layout engine "Presto"." Thus for our graph, the 2003 value (Jan. 1) for Opera (Presto) should be zero; changed accordingly.
  6. Since Netscape Browser uses IE/Moz dual engine, unless it is used more widely (which is quite less likely to happen), we should exclude it to avoid the confusion (the contribution from Netscape 8 right now (<1%) would be less than the difference (~3%) between the various sources reporting Firefox's share 8-)
Please overwrite this image instead of creating a new one when you update the information.