Hintergrund

Der Sammler und Zusammensteller

Martin Jucker
CH-8400 Winterthur
martin@mjucker.ch

Du kannst das Ganze sozusagen wie ein Buch durchblättern, indem Du auf die Händchen am unteren Rand klickst oder Du kannst die Texte aus dem Rahmen links mehr oder weniger direkt anwählen. Eine weitere Variante wäre das Selektieren über den Index oder über die Seite mit den Quellenangaben. Daneben funktioniert natürlich auch die normale Browser-Navigation mit den Vorwärts- und Zurück-Pfeilen und -Befehlen. Hier ist höchstens zu beachten, dass man manchmal zweimal den Zurück-Befehl erteilen muss (z.B. mit der rechten Maustaste) um genau an den früher besuchten Ort zurückzukommen: zuerst wird dann die alte Text-Seite angezeigt und beim zweiten Mal die alte Inhalts-Seite – bei Frames ist das halt so.
Mit dem «Schreibfeder-Symbol» in der Fusszeile kannst Du den Text darüber in einem eigenen Fenster anzeigen – das macht es möglich, auch auf solche Texte einen Link zu setzen oder sie auszudrucken, was in Frames, wie sie hier verwendet werden, sonst nicht so einfach ist.
Mit dem verschnörkelten Pfeil, der nach links zeigt, kannst Du die Anzeige der Text- und der Inhalt-Seite synchronisieren: Wenn man z.B. aus dem Index einen Link anklickt, zeigt das Inhalts-Fenster immer noch das ABC des Index’; wenn Du jetzt möchtest, dass die Inhalt-Seite erscheint, welche zum angezeigten Text gehört, dann klickst Du eben auf diesen Schnörkel.

Anforderungen an Deinen Browser

Getestet habe ich diese Seiten mit Internet Explorer 5 und grösser, Opera 5 und grösser, Netscacpe 4.x und 6.x – und Mozilla 0.9.6 und grösser; mit den IE und Opera funktioniert das Ganze (bei mir) wunschgemäss, mit den 4er-Versionen von Netscape (vor allem 4.07) sind die Ergebnisse so grauenerregend, dass ich auf weitere Untersuchungen verzichtet habe – dagegen ist Netscape 6.2 wieder sehr überzeugend, was natürlich auch für Mozilla gilt.
Dein Browser sollte Frames, Javascript und Stylesheets unterstützen – ein paar Gedichte zeigen ihre ganze «typographische Schönheit» nur mit dem InternetExplorer (s. unten). Bitte lass’ mich wissen, wenn die Ergebnisse bei Dir merkwürdig aussehen.
In der Version vom 24. Februar ist noch Flash zu den Anforderungen gestossen – vorübergehend kam noch Acrobat dazu; langsam wird die Liste ein bisschen lang …

Das Problem: Die Darstellung von Web-Seiten

Eines der Probleme beim «Web-Publishing» ist ja, dass man nie hundertprozentig sicher sein kann, wie die mühsam erstellte Seite beim jeweiligen Betrachter aussehen wird: unterschiedliche Betriebssysteme und vor allem unterschiedliche Browser und Browser-Versionen machen die meisten Anstrengungen in dieser Richtung zunichte. Die beste Strategie, um dem zu begegnen, ist zweifellos, auf alle Mätzchen bezüglich Design zu verzichten und nur ganz grundlegende Techniken einzusetzen, welche alle Browser gleichermassen verstehen, und nur Inhalte zu verbreiten, bei denen die Darstellung sekundär ist.
Aber das ist natürlich nicht so interessant – und vor allem widerspricht es den heiligen Typographen- und Designer-Traditionen: die Literatur über den richtigen Einsatz von bestimmten Fonts, Ligaturen, Zeilenabständen, Sonderzeichen u.s.w. füllt ganze Bibliotheken, und die Vorstellung, dass eine sorgfältigst komponierte Seite von jemandem mit einer ganz anderen Schrift und mit völlig anderen Zeilenumbrüchen und Weissräumen als vorgesehen gelesen wird, jagt diesen Künstlern kalte Schauer über den Rücken. Und die Industrie nimmt sich dieser Sorgen natürlich gerne an und produziert entsprechende Werkzeuge, von denen ich hier ein paar ausprobiert habe:

Und dann kann man auch reinen Text als Grafik speichern

WEFT Web-Embedding Font Tool

Das ist ein Tool von Microsoft, mit welchem Schriften «eingebettet»; werden können: Jeder soll dann die Web-Seite mit den Schriften sehen, mit denen sie erstellt worden ist – oder doch fast jeder (s. unten)
Unter anderen wurden folgende Seiten mit diesem Tool «bearbeitet»:

Die Ergebnisse lassen sich durchaus sehen (finde ich wenigstens …) – aber mit dem Einsatz dieses Tools sind auch einige Nachteile verbunden:

Ein grosser Vorteil dieser Technik ist natürlich, dass die Webpage weiterhin aus reinem Text besteht und daher z.B. problemlos indiziert werden kann; das im Gegensatz zu Grafik-Formaten..

Bei ein paar Schriften hatte WEFT eine eher unerwartete Folge: Meistens nach Sonderzeichen wie z.B. den Anführungs- und Schlusszeichen weigerte sich der Internet-Explorer hartnäckig, die gewählte Schrift anzuzeigen. Wurde die entsprechende Seite dann aber mit WEFT «behandelt», war das Ergebnis wieder einwandfrei. Aeusserst merkwürdig.

Flash

Das ist ein Programm von Macromedia, das in der Regel für die (meist höchst überflüssigen) Animationen im Web benützt wird. Hier wird es eingesetzt, weil es – praktisch browserunabhängig – erlaubt, jede gewünschte Schrift darzustellen, ohne dass sie der Benutzer auf seinem System installiert haben muss. Das entsprechende Browser-Plugin ist weit verbreitet und über den obigen Link lässt sich die rund 250KB grosse Datei auch gratis herunterladen.
Damit ist auch schon einer der Nachteile dieser Technik genannt: ein weiteres Programm ist nötig. Noch ein Nachteil, zumindest für den Produzenten, ist, dass Flash im Gegensatz zu WEFT einen stolzen Preis kostet.
Mit Flash erstellt wurden z.B.

Das Erstellen von solchen Flash-Dateien ist völlig problemlos – trotzdem wird man diese Technik kaum für irgendwelche Texte verwenden: das Flash-File für Igel und Agel ist (samt Grafik) immerhin rund 16 KB gross. (Das GIF-File für den Igel in der vorherigen Version hatte allein rund 48 KB!).

In Flash selbst lässt sich Text so behandeln wie in einem Textverarbeitungsprogramm; das File, das im Browser gezeigt wird, entspricht aber eher einer Grafik – es ist also z.B. nicht möglich, darin nach einem bestimmten Wort zu suchen. Allerdings gibt es beim Erstellen eine Option, welche es erlaubt, den Text selektierbar zu machen (und zu überschreiben) – damit wird das File aber mindestens doppelt so gross.

Adobe Acrobat

Acrobat ist mit seinem Portable Document Format schon seit einigen Jahren ein Standard für plattform-unabhängiges Publizieren: Man kann ein PDF-Dokument unter Windows, Mac, Unix erstellen und jedes dieser Dokumente ohne Probleme in jeder Plattform wieder öffnen: das Dokument wird genau so angezeigt, wie es erstellt worden ist. Dazu werden (in unserem Fall) beim Erstellen die verwendeten Schriften ins Dokument eingebettet, wenn man annehmen muss, dass sie bei der Mehrheit der Empfänger nicht installiert sind. Acrobat liefert auch für praktisch alle Internet-Browser ein sogenanntes Plugin, welches ermöglicht, PDF-Dokumente mit einem Web-Browser zu betrachten.

Das Programm zum Erstellen von PDF-Files ist nicht ganz billig; das Erstellen selbst aber höchst einfach: man schreibt das Dokument z.B. unter Word und «druckt» das Dokument dann statt auf dem normalen Drucker in ein PDF-File – praktisch alle wichtigen Programme kennen diese Drucker-Schnittstelle.
Uebrigens können PDFs nicht nur mit «Adobe Acrobat» erstellt werden: praktisch alle teureren Adobe-Programme wie «InDesign», «FrameMaker», «PageMaker» etc. und auch Shareware, die nicht von Adobe hergestellt wird, haben diese Funktion; gegenwärtig (März 2003) ist von «Sun» das Office-Programm «StarOffice 6.1» im Beta-Test – auch dieses Programm kann das.

Für Leute, welche die so erstellten Dokumente nur lesen können sollen müssen dürfen, gibt es gratis den Acrobat-Reader (samt Plugin), den man sich halt auch irgendwie beschaffen muss – eine Möglichkeit ist das Herunterladen; eine andere wäre das Durchstöbern von Installations-CD-ROMs: viele Programm-Lieferanten erstellen ihre Programmdokumentation u.a. mit Acrobat und liefern dazu den Reader gleich mit. Und da man dieses Format wirklich häufig antrifft, lohnt es sich – meiner Ansicht nach – schon, das Ding zu installieren.
Der Nachteil dieser Technik ist natürlich, dass verhältnismässig grosse Files erstellt werden: Ein vierseitiges (A4-Seiten) reines Textfile, bei dem 2 Fonts teilweise eingebettet waren wurde 52 KiloBytes gross! Zum Vergleich: Das File hintergrund.html, das Du gerade jetzt liest, ist rund 27 Kilobytes gross.

Ich habe versucht, Acrobat mit Lichtenberg einzusetzen; der Erfolg war eher mässig: erstens dauerte es viel zu lange, bis endlich etwas angezeigt wurde, und zweitens ist das Ergebnis im Internet-Explorer recht unterschiedlich von dem was z.B. unter Opera möglich ist. Der IE zeigt ein eingebettetes PDF-Fenster, das aussieht und funktioniert wie ein Acrobat-Fenster, mit allen Toolbar-Buttons usw. Wenn ein mehrseitiges PDF-Dokument eingebettet wird, wird in diesem PDF-Fenster geblättert, und nicht etwa im HTML-Dokument. Beim IE wird zum Einbetten der Befehl <object> eingesetzt, Opera und Netscape kennen diesen Befehl nicht, dort kommt <embed> zum Zuge. Das PDF-File wird dabei mehr oder weniger wie eine Grafik angezeigt, ohne Acrobat-Toolbars usw. Ein mehrseitiges Dokument wird auf eine Seite zusammengedrückt – sinnvollerweise wird daher in ein HTML-Dokument immer nur eine PDF-Seite «embedded». Erschwerend kommt bei diesem Befehl hinzu, dass Breite und Höhe des Dokuments angegeben werden müssen (wenigstens habe ich keine andere Möglichkeit gefunden), zudem lässt sich das eingebettete Element praktisch nicht willentlich positionieren. Das Ganze ist immer ein elendes Pröbeln, bis endlich ein befriedigendes, unverzerrtes und lesbares Ergebnis vorliegt.
Also: Einbetten von PDF-Dokumenten vorzugsweise nur mit IE und auch dann nur wenn es unbedingt nötig ist – bei «meinen» Texten ist das nicht der Fall, drum verzichte ich nach ein paar Anläufen ganz darauf.

Speichern in einem Grafik-Format

Das ist natürlich das Allereinfachste: vor allem kürzere Texte lassen sich ohne weiteres als GIF- oder JPEG-Datei speichern; die werden problemlos in allen Browsern (ausser natürlich reinen Text-Browsern) und auf allen Plattformen richtig dargestellt. Die Betonung liegt hier auf «kürzer» – schon ein Text wie Schwanengesang wird als JPEG-File rund 38000 Bytes gross – die qualitativ ungleich bessere Version mit Flash (wie ich sie gewählt habe) nur 7700 Bytes (wobei man gerechterweise sagen muss, dass zu diesen natürlich noch die nicht unbeträchtliche Zahl der Bytes für den Flash-Player kommt).
Der Einsatz von Grafiken wird sich also vor allem auf das richtige Anzeigen z.B. von Titel-Zeilen beschränken – oder in meinem Fall auf die grafischen Gedichte wie Ein Hund lief in die Küche …, solange dafür nicht Flash zum Zuge kommt.

Probleme mit Cascading Stylesheets

Dass auch die neuesten Versionen der Browser gewisse CSS-Attribute sehr unterschiedlich behandeln, zeigt sich am Beispiel von letter-spacing: Ich habe in einem ersten Anlauf versucht, dieses Attribut für Initiale einzusetzen. Initiale (englisch Drop-Caps)sind die übergrossen Anfangsbuchstaben, die gewöhnlich am Anfang eines Textes verwendet werden (wenn man sie denn überhaupt einsetzt, heisst das)
Drop-Caps erstellt man mit dem Attribut drop:first-letter Wenn man nur dieses eine Attribut verwendet, entsteht dieses sehr unbefriedigende Gebilde:

Darstellung IE6 ohne Aenderung

Mit line-height sorgte ich dann für einen normalen Abstand zwischen der ersten und der zweiten Zeile, und mit letter-spacing besorgte ich das Gleiche für den ersten und zweiten Buchstaben. Unter dem Internet-Explorer 6 sieht das auch verhältnismässig gut aus:

IE 6 mit line-height und letter-spacing

Aber weder Opera noch Mozilla verstehen das so ganz, oder ich verstehe nicht, was ich ihnen sagen muss, damit z.B. Mozilla nicht solchen Murks produziert:

line-height und letterspacing mit Mozilla 1.0

Aufgrund dieser unbefriedigenden Resultate und des recht umständlichen Codes für den Internet-Explorer machte ich dann halt Drop-Caps, die freistehend am linken Rand «schweben», und damit niemand auf die Idee kommt, das sei zufällig, habe ich die Dinger auch noch rot gefärbt (für dieses Positionieren braucht es weiterhin line-height, zudem negative right- und negative left-margins, und vor allem float:left).

Internet-Explorer und Opera liefern jetzt praktisch identische Resultate:
Internet Explorer mit float

Die Ergebnisse von Mozilla (und damit wahrscheinlich auch von Netscape 6) sind nicht soo überzeugend, aber doch noch einigermassen akzeptabel; auf jeden Fall schraube ich deswegen nicht mehr am Code herum:
Mozilla mit float

Merkwürdig bleibt auch eine Eigenheit von IE: wenn man die Seite hinunter-scrollt, bis das Initial verschwindet, und dann wieder zurück-scrollt: ist das Inital verschwunden! Man muss die Seite wieder laden, um es erneut anzuzeigen. Was es nicht alles gibt …

Ein weiteres Beispiel ist die Darstellung der horizontalen Linie unter den Seitentiteln und über der Fusszeile, welche mit <hr> und u.a. folgenden Properties width:120%; margin-left:-10%; dargestellt wird: hier liefert jeder Browser etwas anderes – die überzeugendste Variante (aufgrund der entsprechenden CSS-Attribute) kommt halt wiederum vom Internet-Explorer.

Und wie wenn das noch nicht genügend Probleme wären, tragen auch noch gewisse Provider ihr Scherflein dazu bei, dass es einem nie langweilig wird:
So etwa ab der Version 1.1 des Browsers «Mozilla» schluckten sämtliche Browser, die auf «Gecko» beruhen (d.h. ausser Mozilla z.B. auch Netscape und Phoenix) meine Stylesheets nicht mehr – sie ignorierten sie einfach; aber nur, wenn ich meine Seiten im Netz betrachtete, lokal sah alles aus wie es musste.
Nach langem Herumsuchen in Newsgroups, FAQs zum Thema usw. konnte ich schliesslich feststellen, dass ich mit dieser Erfahrung nicht allein war: schuld war hauptsächlich der Provider, der für CSS den falschen MIME-Type zurückgab, aber auch Mozilla & Co., welche diesen Type so unglaublich pingelig suchen – z.B. den Internet-Explorer oder Opera kümmert das überhaupt nicht. Es kostete mich rund eine Woche und etwa 5 Mails, bis ich den Provider scheinbar davon überzeugt hatte, dass der Fehler nicht in meinem Code sondern bei seinen Servern lag – «scheinbar» deshalb, weil etwa 1 Tag lang endlich wieder alles richtig aussah – und am nächsten Tag wieder «alles» falsch. Diese Seiten werden also bis auf Weiteres bei einem Provider gespeichert, der diese Probleme nicht kennt.
Nachtrag: Unterdessen hat der Provider tatsächlich alles korrigiert und mich sogar informiert, dass ich jetzt seinen Server wieder ohne diese Probleme benützen könne – und so ist es auch!

Die verwendeten Werkzeuge

Die Steuerung

Javascript macht es möglich, dass die Texte sequentiell «durchgeblättert» werden können, ohne dass die einzelnen Seiten fix miteinander verlinkt sind, und dass zu jedem Text links im Steuerungs-Frame immer das richtige «Inhaltsverzeichnis» angezeigt wird:

Mail an Martin Jucker
Zuletzt aktualisiert am 16. Nov 2003