CSS Experimente: Marginalien

Im Web gibt es keine Fußnoten

(1) Fußnote, weil sie sich unten am Fuß des Papiers befindet.

Zu Zeiten des Verfassens von Texten nur für das Lesen von Papier war es einfach und auch üblich, Anmerkungen als Fußnoten(1) anzugeben. Die kleine Zahl im Text stört den Lesefluß nicht. Man kann weiterlesen oder, wenn einen der Inhaltder Anmerkung interessiert, kurz nach unten auf die Seite gucken und die Fußnote lesen.

Zurück zu der Stelle im Text kommt man relativ leicht, denn eine Buch- oder Papierseite hat einen überschaubaren, immer gleich bleibenden Bereich, in dem man sich leicht orientieren kann. Oberes Drittel, zweiter oder dritter Absatz, das findet man schnell wieder. Notfalls legt man den Daumen neben den eben gelesenen Satz. Dann sind es nur zwei Augenbewegungen: einmal runter zur Fußnote und wieder hoch und weiterlesen.

(2) Über das Lesen im Web hat der Kommunikations- Psychologe Thomas Wirth auf KommDesign viel Interesantes verständlich geschrieben.

Das ist mit Computer-Texten und speziell auf Internet- Seiten(2) nicht mehr so einfach. Auf einen Bildschirm passt viel weniger als auf eine Buchseite. Will man eine Anmerkung am Seitenende auch nur mal kurz betrachten, verliert man auf jeden Fall die gerade gelesene Stelle aus dem Blickfeld. Der Lesefluß ist unterbrochen.

(3) Hypertext: Die Möglichkeit mit Hilfe von Links jede andere Seite im Internet mit einem Klick aufzurufen.

Auch das Merkmal und große Vorteil des WWW gegenüber gedruckten Texten, der Hypertext(3), hilft bei kurzen Anmerkungen nicht weiter. Zwar könnte man Fußnoten als Sprungmarken definieren, doch zurück kommt man über sie nicht wieder zu genau der Bildschirmposition, wie man sie verlassen hat. Das kann man zwar meist über den Zurück-Button des Browsers erreichen, aber das sind wieder gezielte Mausaktionen, die Aufmerksamkeit verlangen. Der Lesefluß bleibt gestört.

Sind Popups eine Alternative?

(4) Popup: kleines Fenster mit Infotext, das über einen Link geöffnet wird.

Auf jeden Fall sind Popups(4) sinnvoller als Fußnoten, denn sie lassen den Bildschirm mit dem Text in dem Zustand, wie man ihn beim Lesen verlassen hat.

Allerdings setzen sie JavaScript voraus und man kann nie voraussagen, ob ein Besucher das aktiviert oder abgeschaltet hat. In vielen Firmennetzen ist das sogar zwangsweise deaktiviert. Ohne JavaScript kein Popup und keine Anmerkungen - also zu unsicher, um sich darauf zu verlassen.

Benutze doch Marginalien!

(5) Marginalie: Das was du jetzt gerade liest.

Eine echte Alternative wären Marginalien(5), wie ich sie hier auf dieser Seite vorstelle: Die kleinen Anmerkungen am Seitenrand. Doch warum findet man die so selten (oder fast nie) im Internet?

(6) Test: Positionierung weiter unten in einem Absatz...

Zum einen: Marginalien funktionieren nicht so einfach in Tabellen, und fast alle Seiten benutzen die zur Positionierung der Elemente auf dem Bildschirm. Die Anmerkungen machen aber nur dann Sinn, wenn sie genau (oder jedenfalls fast genau) neben dem Textteil stehen, auf den sie sich beziehen(6). Und das ist mit Fließtext in Tabellen nicht oder nur sehr aufwendig hinzukriegen.

Aber das Gestalten einer Webseite mit Hilfe von StyleSheets, wie ich es hier praktiziere, ermöglicht auch die Positionierung von Marginalien. Doch auch das hat seine Tücken.

Marginalien positionieren mit CSS

Ich habe viele Versuche hinter mir, Marginalien an genau der Stelle in den Fließtext zu schreiben, an der sie benötigt werden und dann aus dem Textfluß heraus zu nehmen und am Rand zu positionieren. Für die Experten: Inline-Elemente zu verschieben bringt nur kuriose Ergebnisse. Sie zu Block-Elementen umdefinieren und dann relativ, absolut oder floatend am Rand zu positionieren verlief auch deprimierend: Es klappte nicht in jedem Browser oder die Seite wurde insgesamt instabil. Alles keine sauberen und zukunftsträchtigen Lösungen.

Es bleibt nur eines: Die Anmerkungen müssen gleich als Block-Bereiche definiert werden und das geht nur zwischen zwei Absätzen. Dann wird positioniert.

Meine Umsetzung hier auf dieser Seite:

(7) Linktipp dazu: Webseiten sind kein bedrucktes Papier.

Der Fließtext hat durch seinen Eltern-Bereich eine feste Breite von 550px abzüglich einer rechten Randspalte mit paddding von 150px, die die Anmerkungen aufnehmen soll.
Die Marginalien haben kein padding, aber eine Breite von 130px und floaten rechts. Damit liegen sie in der Randspalte und beeinflussen den Text nicht.
Sie werden als <div>-Bereiche vor dem Textabsatz festgelegt, auf den sie sich beziehen. Dann werden sie nach unten positioniert.
Dafür haben sie unterschiedliche Klassen, je nach der Zeile neben der sie stehen sollen, also einen unterschiedlichen margin-top. Die genaue Zeile ist nur duch Probieren herauszubekommen und variiert je nach Schriftart, Vergrößerungsfaktor und unterschiedlichem Rendering und Trenn-Verhalten der Browser um höchstens eine Zeile. Das ist zwar zu bedauern, liegt aber in der Natur von Webseiten, bei denen pixelgenaues Design nicht möglich ist(7).
Der genaue margin ergibt sich durch line-height (20px) und Differenz der Schriftgröße von Text und Anmerkung (4px). Ich habe hier mit Pixeln gearbeitet, es geht aber auch relativ per em. Die einzelnen Klassen der Marginalien haben also einen margin-top von 4px, 24px, 44px etc.

Die Style-Angaben dieser Seite stehen im Quelltext, sie sind nicht in eine CSS-Datei ausgelagert.

Ich habe mir die Styles-Definition übrigens leicht gemacht: innerhalb des Bereichs mit der id="text" sind alle <div>s Marginalien und alle <span>s die etwas hochgestellten kleinen Zahlen. Damit muß ich nicht ständig Klassen zuweisen bzw. die Marginalien mehrfach vollständig definieren. Wer diese Elemente noch andererweitig im Fließtext braucht, kommt darum aber nicht herum. Oder man legt innerhalb des Contentbereichs weitere Bereiche z.B. mit der class="fliesstext" an, die wiederum nur die Texte und Marginalien enthalten.