Schnelltest: Erscheinungsbild von Diagrammen

Sie können hier testen, ob Ihr Browser Diagramme, die auf HTML-Basis hergestellt wurden, richtig darstellt.

(HTML = Hypertext Markup Language ist sozusagen die Programmiersprache, in der Webseiten erstellt werden - häufig erweitert durch CSS = Cascading Style Sheets.)

Das 1. Diagramm besteht aus einer echten Bilddatei:

Das 2. Diagramm (eine vom Browser erzeugte HTML-Tabelle) müsste ganz ähnlich aussehen:

Anhang

An dieser Stelle noch eine kleine Studie, die aber nicht weiter von Bedeutung ist und nur die browserbedingten möglichen Darstellungsgrenzen der nach meiner Methode erzeugten Diagramme etwas ausloten soll.

Bei solchen Diagrammen, deren Vorteil vor allem in einer schnellen Ladezeit und leichter Aktualisierbarkeit liegt, können - browserabhängig - auch in neueren Browsern marginale Verzerrungen auftreten, d. h. geringfügige Abweichungen von der beabsichtigten Darstellung, so dass sich eine hundertprozentige Maßstabstreue nicht garantieren lässt, jedenfalls bei sehr kleinen grafischen Elementen in der Größenordnung von wenigen Pixeln. Wie sich zeigen wird, ist das ist im hiesigen Zweckzusammenhang jedoch kaum der Rede wert.

In den weiteren Ausführungen taucht immer wieder der Begriff Pixel (picture element) auf. Der ganze Bildschirmbereich besteht je nach Einstellung in der Systemsteuerung beispielsweise aus 800 mal 600 = 480.000 Pixeln (für diese Website empfohlen) oder 1.024 mal 768 = 786.432 Pixeln. (Der Bereich innerhalb des Browserfensters ist natürlich etwas kleiner.)

Zunächst als Vergleichsmaßstab drei einfache HTML-Elemente:
horizontale Linien von 100 Pixel Länge und einer Höhe von 1 bzw. 5 und 10 Pixeln:

Es folgen einige Testbilder, die im Grunde aus verschachtelten HTML-Tabellen bestehen, deren Linien zum Teil unsichtbar sind. Ihre Darstellung ist in unterschiedlichen Browsern allerdings nicht einheitlich und demzufolge wohl auch nicht immer ganz richtig. (Aber ein Browser ist ja auch kein Grafikprogramm.)

Zumindest gängige, neuere Browser dürften aber allenfalls minimale Abweichungen vom angestrebten Ergebnis zeigen. Zur Illustration ein Versuch, immer kleiner werdende Rechtecke darzustellen, angefangen bei einer Höhe und Breite von 10 Pixeln bis zu null Pixeln, anfangs ohne Rand und dann mit einem allseitigen Rand von 1 Pixel Dicke. Dazu gibt es drei unterschiedliche Versuchsreihen.

Bei korrekter Wiedergabe müssten zwei horizontale Reihen und dazwischen eine vertikale Reihe zu sehen sein, die jeweils aus 12 Rechtecken bestehen. In jeder Reihe müsste das erste Rechteck (ohne Rand) eine Höhe und Breite von 10 Pixeln haben, während das zweite Rechteck (mit einem dünnen roten Rand von 1 Pixel) insgesamt eine Höhe und Breite von 10 + 2 = 12 Pixeln haben müsste. Die weiteren Rechtecke jeder Reihe müssten auf unterschiedliche Weise immer kleiner werden: niedriger, schmaler oder beides zugleich:

Jede Reihe müsste wie gesagt aus zwölf Rechtecken bestehen. Das jeweils letzte Rechteck dürfte m. E. eigentlich nur noch aus dem roten Rand ohne Innenfläche bestehen und insgesamt nur noch eine Höhe oder/und Breite von 0 + 2 = 2 Pixeln haben.

Doch wie gesagt verhalten sich die verschiedenen Browser nicht einheitlich, was zu geringfügigen Größenunterschieden bei der Darstellung der Objekte führt. Möglicherweise werden Sie in dem von Ihnen benutzten Browser feststellen, dass bei den letzten Elementen einer Reihe keine Verringerung der Höhe und/oder Breite mehr stattfindet oder dass auch im letzten Element zwischen den roten Rändern noch eine kleine graue Innenfläche zu sehen ist.

Möglicherweise erscheinen die umrandeten Rechtecke auch etwas zu groß. Die Innenfläche des zweiten Rechtecks müsste genauso groß sein wie das erste Reckteck ohne Rand.

Nun folgt noch eine Reihe von Rechtecken ohne Rand in einer Größe von 10 mal 10 Pixeln bis 1 mal 1 Pixel und darüber hinaus mit einem weiteren Rechteck von 0 mal 0 Pixeln. Weil diesmal der Rand fehlt, dürfte allerdings dieses elfte Rechteck mit der vorgegebenen Höhe und Breite von null Pixeln und ohne Rand (eigentlich völliger Unsinn und hier auch nur wegen der Analogie zu den obigen umrandeten Test-Rechtecken vorgesehen) gar nicht auftauchen. Im Idealfall müssten zehn schwarze Rechtecke erkennbar sein, als zehntes ein einzelnes Pixel.

Es kann aber sein, dass nicht zehn, auch nicht elf, sondern nur neun Rechtecke zu sehen sind, weil auch das zehnte Rechteck - praktisch nur noch ein Pünktchen - vom Browser einfach nicht dargestellt wird:

Das Gleiche noch einmal bei konstanter Höhe der Rechtecke und abnehmender Breite und darunter bei konstanter Breite und abnehmender Höhe:

Statt jeweils zehn Objekten von abnehmender Breite oder Höhe, was korrekt wäre, sehen Sie jetzt möglicherweise wiederum zu wenige oder auch zu viele (wenn die vorgegebene Größe der letzten Objekte vom Browser nicht ganz richtig umgesetzt wurde). Ein fälschlicherweise auftauchendes elftes Objekt, das es bei einer vorgegebenen Höhe oder Breite von null eigentlich gar nicht gegeben dürfte, sollte hier gegebenenfalls (aufgrund der Vorgaben im HTML-Code) rot erscheinen.

Das hört sich wahrscheinlich alles äußerst merkwürdig an und ist wie gesagt auch nicht weiter wichtig. Anschaulicher wird das Ganze, wenn Sie die vorliegende Webseite mit unterschiedlichen Browsern betrachten und die Ergebnisse vergleichen. Möglicherweise ließe sich auch noch das eine oder andere verbessern.

Nur um zu zeigen, dass die erzeugten Diagramme bei Verwendung neuerer Browser ungeachtet möglicher kleiner browserbedingter Ungereimtheiten im Allgemeinen gut zur Visualisierung von Größenproportionen geeignet sind, abschließend noch zwei Diagramme mit 20 Säulen oder Balken mit einer gleichmäßigen Höhenabstufung von jeweils 5 Pixeln - von 100 bis 5 Pixel Höhe, und zwar einschließlich eines Randes von 1 Pixel.

Die Höhe der ersten Säule sollte hier also 98 + 2 = 100 Pixel betragen, die der zweiten 93 + 2 = 95 Pixel, die der zweiten 88 + 2 = 90 Pixel usw. und die der letzten 3 + 2 = 5 Pixel. (Das entspricht Größenproportionen von 20 zu 19 zu 18 usw. bis zu 1.)

Auf die Breite der einzelnen Säulen, die 8 + 2 = 10 Pixel betragen müsste, kommt es in diesem Fall nicht an, auch nicht auf die Abstände von 1 Pixel zwischen den Säulen. Hier soll vielmehr nur die gleichmäßige Abnahme der Höhe demonstriert werden, an der die Abbildungsqualität gut deutlich wird.

Beide Diagramme haben exakt die gleichen Maße. Auch im zweiten Diagramm haben die Säulen einen Rand, der dort allerdings von der gleichen Farbe ist wie die Innenflächen.

Sollten Sie in den vorangegangenen Test-Diagrammen größere Störungen oder unvollständige Ränder o. Ä. feststellen, liegt das vermutlich an einem veralteten Browser.