Marginalie — Definitionen

Klassisch (Druck)

Eine Marginalie (von lateinisch margo Rand, marginalis zum Rand gehörig) ist ein auf den Rand einer Buchseite oder Manuskript geschriebene Bemerkung, die einen Kommentar, Hinweis oder Korrektur zu einer Stelle des Textes bietet.

Umgangssprachlich

In übertragener Bedeutung bezeichnet „Marginalie“ eine Nebensächlichkeit.

Webdesign

Hier bezeichnen Marginalien eine Randbemerkungen die parallel zum Fließtext auf gleicher Höhe ge-setzt werden. Sie werden als Alternative zu den klassischen Fußnoten verwendet, die ein Scrollen notwendig machen und der Usability von Webseiten nicht zuträglich sind.

Im Web gibt es keine Fußnoten

Zu Zeiten als das Verfassen von Texten das Ziel hatte, diese auf Papier zu drucken und zu lesen, war es einfach und auch üblich, Anmerkungen als Fußnoten (1) anzugeben. Die kleine Zahl im Text stört den Lesefluss nicht. Der geneigte Leser kann sie ignorieren und weiterlesen oder, falls er in der Anmerkung interessante Informationen vermutet, den Blick kurz nach unten wenden 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. Das obere Drittel, den zweiten oder dritten 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.

Das ist mit Texten, die auf Computer-Bildschirmen präsentiert werden, und speziell auf Internet-Seiten (2) nicht mehr so einfach. Zum einem ist das Format immer an die Hardware gebunden (Breitbildschirm, Smartphone). Bei dem Versuch, eine Anmerkung am Seitenende auch nur mal kurz zu betrachten, verliert man auf jeden Fall die gerade gelesene Stelle aus dem Blickfeld (meistens muss auch gescrollt werden). Der Lesefluss wird unterbrochen.

Auch das Merkmal und große Vorteil des WWW gegenüber gedruckten Texten, der Hypertext / Hyperlink (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, die zuvor angezeigt wurde. Zwar lässt sich der „Zurück-Button“ des Browsers verwenden, aber das sind wieder gezielte Mausaktionen, die Aufmerksamkeit verlangen. Der Lesefluss bleibt gestört.

Sind Popups eine Alternative?

In den Anfangsjahren des Internets waren Popups (4) vielleicht sinnvoller als Fußnoten, denn sie lassen den Bildschirm mit dem Text in dem Zustand, wie man ihn beim Lesen verlassen hat.

Heute gilt das Motto „mobile first“, d.h. Internetseiten müssen auch problemlos auf mobilen Endgeräten funktionieren. Und die mögen keine PopUps (was nebenbei auch zum Aussterben derselben führt).
Allerdings setzen sie JavaScript voraus und kein Webdesigner kann voraussagen, ob ein Besucher das aktiviert oder abgeschaltet hat (auch wenn es sich heute per Abfrage ermitteln lässt, wenn ein Besucher die Seite lädt). Ohne JavaScript kein Popup und keine Anmerkungen - also zu unsicher (bzw. es bedarf einer Alternative), um sich darauf zu verlassen.

Nutze Marginalien als Randbemerkung

Eine echte Alternative sind Marginalien (5) (die kleinen Anmerkungen am Seitenrand), wie sie hier auf dieser Seite vorstellt werden. Doch warum findet man die so selten (oder fast nie) im Internet?

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 (6) (oder jedenfalls fast genau) neben dem Textteil stehen, auf den sie sich beziehen. Und das ist mit Fließtext in Tabellen nicht oder nur mit viel Aufwand hinzukriegen.
Doch das Gestalten einer Webseite mit Hilfe von Style Sheets, ermöglicht auch die Positionierung von Marginalien. Doch auch das hat seine Tücken.

Marginalien mit CSS positionieren

Es sind viele Versuche nötig, um Marginalien an genau der Stelle in den Fließtext zu schreiben, an der sie benötigt werden.
Für die Experten: Inline-Elemente zu verschieben bringt nur kuriose Ergebnisse. Sie als Block-Elemente umzudefinieren 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 als Block-Elemente definiert werden (hier div) und das geht nur zwischen anderen Block-Elementen (z.B. zwei Absätzen). Dann wird positioniert.

Die Details der Umsetzung mit CSS

  • Der Fließtext hat durch seinen Eltern-Bereich eine feste Breite. Links davon ist mit aside eine Spalte definiert, in die die Anmerkungen positioniert werden.
  • 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 durch Probieren herauszubekommen und variiert je nach Schriftart, Zoom-Faktor und unterschiedlichem Rendering und Trenn-Verhalten der Browser um maximal eine Zeile. Das ist zwar zu bedauern, liegt aber in der Natur von Webseiten, bei denen pixelgenaues Design generell nicht möglich ist(7).
  • Sie werden als <div>-Bereiche vor dem Textabsatz festgelegt, auf den sie sich beziehen. Dann werden sie nach unten positioniert.
  • Natürlich wird hier immer mit der relativen Größenangabe em gearbeitet. Die einzelnen Klassen der Marginalien haben also einen margin-top von 10, 8, 13 etc. – alles in em. Die einzelen margin-top Anstände wirken hier additiv.
  • Auf schmalen Bildschirmen wird mit einer Mediaquerry dafür gesorgt, die die div-Boxen dann ein margin-top von 0.4 em erhalten. Das bewirkt, entgegen der Absicht, dass sie dann doch als Fußnote dargestellt werden. Aber was soll man machen? Die Gesetzte der Physik (hier die physikalische Auflösung von Smartphones) kann man nicht brechen.
  • Die Style-Angaben dieser Seite stehen im Quelltext dieser HTML-Datei, sie sind nicht in eine CSS-Datei ausgelagert.
  • Zur Vereinfachung dieses Beispiels: die Styles-Definition innerhalb des Bereichs mit der id="sidebar" sind alle div Marginalien und alle span die etwas hochgestellten kleinen Zahlen. Damit muss man nicht ständig Klassen zuweisen bzw. die Marginalien mehrfach vollständig definieren. Wer diese Elemente noch anderweitig im Fließtext braucht, kommt darum aber nicht herum. Oder man legt innerhalb des Content-Bereichs weitere Bereiche z.B. mit der class="fliesstext" an, die wiederum nur die Texte und Marginalien enthalten.
  • Früher wurde bei solchen Konstruktionen mit float und negativen magrin-left (oder margin-right) gearbeitet. Beides ist nicht mehr zeitgemäß. Insbesondere von negativen margin Werten ist dringend abzuraten, da mobile Browser, das dann häufig gar nicht mehr auf den Bildschirm bringen.