Frage zum Wiki-Artikel „Fußnoten_mit_CSS“

[Vollbracht]

Der Zweck von Fußnoten ist doch, dort, wo ein Text sichtbar ist, eine Anmerkung ebenfalls direkt sichtbar zu halten, die den eigentlichen Textfluss nicht unterbrechen soll.

Dies wird nicht durch Links erreicht. Tooltips können das leisten, sind aber für mobile Geräte, wie z.B. auch e-Book-Reader in der Regel nicht zugänglich.

Eine junge position-Variante ist "sticky". Sie stellt jedoch im Grunde genommen genau das Gegenteil dessen dar, was ich von einer Fußnote auf einer html-Seite erwarten würde. Wie könnte erreicht werden, dass ein Fußnotenbereich mit angepasster Größe als fixed-Block angezeigt wird, jedoch stets genau jene Inhalte als sichtbar anzeigt, auf die in einem aktuell sichtbaren Bereich verwiesen wird? Es soll also im Ggs. zu sticky nicht angezeigt werden, was nicht zum aktuell sichtbaren Bereich gehört, aber es soll im Ggs. zu sticky das als fixed angezeigt werden, was zum sichtbaren Bereich gehört.

Geht das bereits irgendwie?

[Matthias Scharwies]

Servus!

Der Zweck von Fußnoten ist doch, dort, wo ein Text sichtbar ist, eine Anmerkung ebenfalls direkt sichtbar zu halten, die den eigentlichen Textfluss nicht unterbrechen soll.

Ich kann nur aus dem Tutorial zitieren:

Bei Druckerzeugnissen werden Anmerkungen oft aus dem Fließtext in Fußnoten ausgelagert, um den Text flüssig lesbar zu gestalten. Diese Anmerkungen können Legenden, Quellenangaben oder weiterführende Erklärungen enthalten. Nach Din 5008 wird hinter das zu erklärende Wort eine Anmerkungsziffer gesetzt, die auf eine Erklärung am Seitenende verweist.[1]

Auf Webseiten sind Fußnoten eigentlich nicht nötig, da es einerseits keine feste Paginierung (Seiteneinteilung) gibt, sodass auch längere Texte in ein Dokument zusammengefasst werden können und andererseits ein Hyperlink direkt zu einer Anmerkung oder Quelle verweisen kann.

Dies wird nicht durch Links erreicht.

Doch. Da eine Webseite länger als eine (Din A4)-Seite sein kann, ist die gegenseitige Verlinkung (auch zurück zur Textstelle) eben eine gute Technik.

Tooltips können das leisten, sind aber für mobile Geräte, wie z.B. auch e-Book-Reader in der Regel nicht zugänglich.

Doch, wenn sie etwa mit dem title-Attribut, abbr oder dfn ausgezeichnet werden.

→ CSS/Tutorials/Tooltips_mit_CSS

Eine junge position-Variante ist "sticky". Sie stellt jedoch im Grunde genommen genau das Gegenteil dessen dar, was ich von einer Fußnote auf einer html-Seite erwarten würde.

Du meinst etwas wie Anmerkungen und Notien in MS Word. Ja, du könntest den Text um einen großen Rand ergänzen und dort die Anmerkungstexte positionieren.

Da bräuchtest Du auch kein position: sticky, sondern nur position: relative; left: 300px;damit die Anmerkung rausgeschoben wird. Wo da der Unterschied zu einem Tooltip ist, musst du unterscheiden.

Wie könnte erreicht werden, dass ein Fußnotenbereich mit angepasster Größe als fixed-Block angezeigt wird, jedoch stets genau jene Inhalte als sichtbar anzeigt, auf die in einem aktuell sichtbaren Bereich verwiesen wird? Es soll also im Ggs. zu sticky nicht angezeigt werden, was nicht zum aktuell sichtbaren Bereich gehört, aber es soll im Ggs. zu sticky das als fixed angezeigt werden, was zum sichtbaren Bereich gehört.

Ah, jetzt habe ich verstanden, was Du willst. (Die fehlenden Absätze haben da nicht geholfen.)

Geht das bereits irgendwie?

Du müsstest alle Fußnoten in einem aside rechts neben den Text platzieren (ist da auf mobilen Geräten, Tablets Platz?)

Dann würdest du mit dem Intersection Observer lauschen, in welchem Textbereicht / Abschnitt du grade bist und nur diesen Bereich einblenden.

https://medium.com/samsung-internet-dev/enhancing-multi-pane-single-page-web-apps-with-intersection-observer-5929e2c0c6b

Einfacher wäre es zu jedem Textabschnitt ein solches aside zu erstellen und auf das Script zu verzichten.

Herzliche Grüße

Matthias Scharwies

[JürgenB]

Hallo,

nur eine Idee, allerdings mit Javascript und nicht ausprobiert:

du könntest mit dem Intersection Observer prüfen, ob der Verweis auf die Fußnote sichtbar ist, und dann die Fußnote einblenden.

Gruß
Jürgen

PS Auf dieser Seite markiere ich so den Link auf den gerade sichtbaren Abschnitt. Dazu muss allerdings das Browserfenster breit genug sein.

[Vollbracht]

Vielen Dank Euch beiden für den Hinweis auf den Intersection Observer. Das hört sich mir nach einem Ansatz an, der zumindest für Webseiten funktionieren kann. Der sinnvolle Einsatz (Stichwort: mobiles Internet) kann hier besonders überdacht werden. Derzeit suche ich aber vor allem nach Möglichkeiten, die in der Erstellung von e-Books sinnvoll scheinen. Da wird nicht herausgerollt, aber es gibt diskrete Seiten, die dann aber wieder von der Zeichengröße abhängen, die der Benutzer gewählt hat. Daher basiert ein ePub auf XHTMLs. Und (@Matthias Scharwies) natürlich ist es nicht dasselbe, ob ich per Link zur Endnote und zurück springen kann, oder ob ich auf meiner aktuellen Seite eine Fußnote habe. Es ist halt gelegentlich bedeutsam, sowohl den Fließtext, als auch die Anmerkung zu sehen.

Für die Zukunft wünsche ich mir, eine solche Funktionalität allein auf Basis von CSS realisieren zu können.

Gruß!

Vollbracht

[Rolf B]

Hallo Vollbracht,

ich verstehe dein Anliegen, aber Du kommst da deutlich in den Bereich des Buchsatzes hinein und ich weiß nicht, ob CSS dieses Ziel verfolgen sollte.

Was ist mit Fußnotenverweisen, die relativ weit unten ans Ende einer Seite gerendert werden (wie es bei variablen Font- und/oder Seitengrößen ja passieren kann) und zu denen dann ein längerer Fußnotentext im Stil von Terry Pratchett^[1] gehört? In dieser Situation ist eine gleichzeitige Darstellung von Text und Fußnote kaum noch möglich.

Rolf

---

1. Der in seinen Scheibenweltbüchern gern mal eine komplette Nebenstory in Fußnoten^[2] untergebracht hat, so dass die Fußnote auf die Folgeseite überlief ↩︎

2. Die dann auch noch eigene Fußnoten hatten ↩︎

[Auge]

Hallo

Derzeit suche ich aber vor allem nach Möglichkeiten, die in der Erstellung von e-Books sinnvoll scheinen. Da wird nicht herausgerollt, aber es gibt diskrete Seiten, die dann aber wieder von der Zeichengröße abhängen, die der Benutzer gewählt hat. Daher basiert ein ePub auf XHTMLs. Und (@Matthias Scharwies) natürlich ist es nicht dasselbe, ob ich per Link zur Endnote und zurück springen kann, oder ob ich auf meiner aktuellen Seite eine Fußnote habe. Es ist halt gelegentlich bedeutsam, sowohl den Fließtext, als auch die Anmerkung zu sehen.

In E-Books, die, wie ich aus der Anmerkung zu XHTML ableite, im ePub-Format verfasst sind, hast du, wie du selbst schriebst, keine fest definierten Seiten. Daher ist der Wunsch, zuverlässig Text und zugehörige Fußnote auf der selben Seite darzustellen, leider nicht umzusetzen. Die gibt es schlicht nicht. Vielleicht bietet der eine oder andere E-Book-Reader ein solches Feature als Funktion seines Renderers an, aber verlassen kannst du dich darauf nicht.

Das einzige, was tatsächlich zuverlässig funktioniert, sind Links zu den Fußnoten (und zurück), die dann aber auf Extra-Buchseiten dargestellt werden. Das ist selbst in den E-Books des Meisters der Fußnoten ^[1], Terry Pratchett, so gelöst.

Für die Zukunft wünsche ich mir, eine solche Funktionalität allein auf Basis von CSS realisieren zu können.

Unterstützen E-Book-Reader denn mittlerweile ^[2] CSS?

Tschö, Auge

---

1. abseits wissenschaftlicher Literatur ↩︎

2. mein eigener ist bereits 12 Jahre alt, damals konnten die Reader das definitiv nicht ↩︎