Referenzieren in HTML - "hin" ist simpel, doch wie "zurück"...?

[curtis]

Hallo zusammen,

zum Thema "Referenzieren" hätte ich mal ˈne ganz dumme Frage...

Es geht um Fußnoten. Ja, Fußnoten, weil in den entsprechenden Texten Quellenangaben gemacht werden müssen oder eben weiterführende Erläuterungen zu den entsprechenden Textstellen nötig sind.

Das Verweisen auf die Fußnoten bzw. Erläuterungen lässt sich ja recht simpel mit <a href="... erledigen. Die jeweiligen Verweisziele habe ich mit id="1" usw. angegeben.

Das „Hin“-Verweisen ist überhaupt kein Problem, doch wie gestalte ich den Verweistext dergestalt, dass ich von dort wieder zurück an die entsprechende Stelle im Text springen kann? Ist das mit HTML machbar, oder benötigt es dazu zwangsläufig CSS?

Vielen Dank schon mal!

[Gunnar Bittersmann]

@@curtis

Es geht um Fußnoten. Ja, Fußnoten, weil in den entsprechenden Texten Quellenangaben gemacht werden müssen oder eben weiterführende Erläuterungen zu den entsprechenden Textstellen nötig sind.

Fußnoten sind bei Drucksachen brauchbar, aber auf Webseiten nicht die beste Idee. Warum das Hoch- und Runtergespringe, anstatt den Inhalt direkt einzubinden? (Das aside-Element könnte dafür passend sein. Und ein Stil, der den Einschub vom Haupttext unterscheidet: kleinere Schrift bspw.)

Das „Hin“-Verweisen ist überhaupt kein Problem, doch wie gestalte ich den Verweistext dergestalt, dass ich von dort wieder zurück an die entsprechende Stelle im Text springen kann?

Ist das mit HTML machbar, oder benötigt es dazu zwangsläufig CSS?

Ich wüsste nicht, wie das mit CSS machbar sein sollte.

Du kannst dir ja mal ansehen, wie das hier im Forum funktioniert.^[1]

Der Link, der zur Fußnote führt, hat auch eine ID, sodass von der Fußnote wieder dorthin zurückgesprungen werden kann.

Kitty Giraudel hat einen Artikel zu Fußnoten, in dem dey auch auf den Link zurück eingeht.

Und auf die Benutzbarkeit der Links. Die ist hier im Forum nicht gegeben: den Links fehlt ein zugänglicher Linktitel.^[2] Statt aria-label ist dafür aber ein visuell verstecktes span-Element besser:

<a href="#1" id="back1"><span class="visually-hidden">Fußnote</span> 1</a>

⋮

<ol>
  <li id="1">
    Das Kleingedruckte.
    <a href="#back1">
      <span class="visually-hidden">zurück zur Stelle im Haupttext</span>
      <span aria-hidden="true">←</span>
    </a>
  </li>
</ol>

🖖 Живіть довго і процвітайте

---

1. Wie Fußnoten ersellt werden, findest du in der Hilfe. ↩︎

2. Ich werde CK mal ein Bugticket schreiben. ↩︎

[curtis]

Hi Gunnar,

Du wirst lachen - ich hatte fast vermutet, dass im „Ziel“-Teil des Verweises ebenfalls ein href eingebunden werden muss, mir war nur nicht klar, wie...

Super, vielen Dank, ich probiere es aus!

Und zum Thema „Fußnoten“: Die Seite ist textlastig, Du liegst mit „Drucksachen“ also gar nicht so falsch. Wenn ich nämlich die Quellenangaben oder Erläuterungen direkt im Text mit einbinden würde, würde damit der Lesefluss unterbrochen. Für viele Leser wird das Ganze dann aber zu kompliziert, weil Sachverhalte oder auch Beschreibungen dann quasi ausufern würden... Ohne Quellenangaben geht es aber nicht 😉 - und auch die Erläuterungen haben ihren Sinn. Quellenangaben und Erläuterungen sind halt die „Add-Ons“ für diejenigen, die sich wirklich für die betreffende Materie interessieren, also können diese Informationen von wirklich interessierten Lesern durch „Springen“ nachvollzogen werden, der Rest (vermutlich die überwiegende Mehrheit) nimmt den Text dann halt ohne Beleg/Verifizierung/Erläuterung zur Kenntnis...

[Rolf B]

Hallo curtis,

eigentlich gibt es die gewünschte Funktion bereits in jedem Browser: den „Zurück“-Button.

Erfinde das Rad nicht neu.

Rolf

[Raketenwilli]

  <li id="1">

Hm. Also ich habe das noch so gelernt:

Note: The id name must contain at least one character, cannot start with a number, and must not contain whitespaces (spaces, tabs, etc.).

So wie ich das verstehe, schließt das „cannot start with a number“ auch aus, dass eine ID nur aus einer Ziffer (einstellige Nummer) besteht, was auch gilt, wenn diese als Text repräsentiert („"1"”) wird.

[Gunnar Bittersmann]

@@Raketenwilli

  <li id="1">

Hm. Also ich habe das noch so gelernt:

Note: The id name must contain at least one character, cannot start with a number, and must not contain whitespaces (spaces, tabs, etc.).

Wo haste denn das her? HTML 4.01?

Die Welt hat sich weitergedreht. In der HTML-Living-Standard-Spec steht geschrieben: “When specified on HTML elements, the id attribute value must be unique amongst all the IDs in the element's tree and must contain at least one character. The value must not contain any ASCII whitespace.”

Mindestens 1 Zeichen, kein Whitespace, sonst keine Einschränkungen.

🖖 Живіть довго і процвітайте

PS: Mit Ziffern beginnende IDs sind nicht besonders praktikabel, wenn man diese in ID-Selektoren in CSS verwenden möchte, denn da gibt es Einschränkungen. Siehe den Teil TIL ab. CSS escapes.

[Rolf B]

Hallo Gunnar,

Prinzipiell auch im Selfwiki zu finden

Rolf

[Gunnar Bittersmann]

@@Rolf B

Prinzipiell auch im Selfwiki zu finden

Aber falsch.

„Aus Sicht von CSS ist eine ID ein CSS-Identifier und muss folgenden Regeln folgen: Beginnt mit einem ASCII Buchstaben (A-Z, a-z)“ stimmt ja nicht.

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar,

aber falsch

Find ich nicht, wenn man das im Zusammenhang liest und nicht nur die Hälfte zitiert. "Aus Sicht von CSS" - "Aus Sicht von HTML".

In CSS funktioniert eine ID ohne Bocksprünge, wenn sie die genannten Regeln erfüllt. CSS ist zusammen mit frühen HTML Versionen entstanden, die strengere ID Regeln hatten.

Neues HTML erlaubt aber viel mehr. Und das dann in CSS umsetzen, verlangt eine Backslash-Orgie.

Rolf

[Gunnar Bittersmann]

@@Rolf B

[…] verlangt eine Backslash-Orgie.

Die Backslashes sind nichtmal das Schlimmste. Schlimmer noch finde ich die Leerzeichen, die in CSS das Endzeichen einer Zeichenrefenrenz sind (Wer hat sich das ausgedacht?) und dann keine Nachfahren-Kombinatoren.

.\31 .a selektiert nicht etwa ein Element der Klasse a, das Nachfahre eines Elements der Klasse 1 ist, sondern ein Element der Klassen 1 und a.

Will man ersteres, muss man zwei Leerzeichen setzen: eins zum Beenden der Zeichenrefenrenz, eins als Nachfahren-Kombinator.

☞ Paint it black

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@Rolf B

aber falsch

Find ich nicht, wenn man das im Zusammenhang liest und nicht nur die Hälfte zitiert. "Aus Sicht von CSS" - "Aus Sicht von HTML".

In CSS funktioniert eine ID ohne Bocksprünge, wenn sie die genannten Regeln erfüllt.

Das steht so nicht da.

Und „Aus Sicht von CSS ist eine ID ein CSS-Identifier und muss folgenden Regeln folgen: Beginnt mit einem ASCII Buchstaben (A-Z, a-z)“ stimmt nicht; \31 beginnt nicht mit einem ASCII-Buchstaben.

🖖 Живіть довго і процвітайте

[Raketenwilli]

Es geht um Fußnoten. Ja, Fußnoten, weil in den entsprechenden Texten Quellenangaben gemacht werden müssen oder eben weiterführende Erläuterungen zu den entsprechenden Textstellen nötig sind.

Und da haben wir Dein Problem an der Wurzel.

Es gibt womöglich mehr als einen Verweis auf eine Fußnote. Und da stellt sich die Frage, wie man denn bitteschön zu welcher verweisenden Stelle zurück will.

Freilich könnte man mit Tonnen von Javascript ... aber wozu, wo es doch in jedem Browser den bereits angesprochenen Zurück-Button gibt, dessen Funktion man übrigens auch an Ort und Stelle nachbilden kann?

[Gunnar Bittersmann]

@@Raketenwilli

Es gibt womöglich mehr als einen Verweis auf eine Fußnote. Und da stellt sich die Frage, wie man denn bitteschön zu welcher verweisenden Stelle zurück will.

Guter Punkt.

Zurück-Button […], dessen Funktion man übrigens auch an Ort und Stelle nachbilden kann?

Neben der Problematik mehrerer Verweise auf eine Fußnote hat history.back() noch den Vorteil, dass man die Seite wieder genauso vorfindet, wie man sie beim Sprung zur Fußnote verlassen hat. Ein Link zurück hingegen plaziert die Referenz zur Fußnoten ganz oben im Viewport, d.h. es wird an eine andere Stelle hochgescrollt.

Zum Vergleich: Zurück-Link vs. JavaScript (als progressive enhancement; ohne JS funktionieren die Links trotzdem).

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Zurück-Button […], dessen Funktion man übrigens auch an Ort und Stelle nachbilden kann?

Neben der Problematik mehrerer Verweise auf eine Fußnote hat history.back() noch den Vorteil, dass man die Seite wieder genauso vorfindet, wie man sie beim Sprung zur Fußnote verlassen hat. Ein Link zurück hingegen plaziert die Referenz zur Fußnoten ganz oben im Viewport, d.h. es wird an eine andere Stelle hochgescrollt.

Zum Vergleich: Zurück-Link vs. JavaScript (als progressive enhancement; ohne JS funktionieren die Links trotzdem).

Da ist noch ein Haken: Wenn man bspw. im Text auf Fußnote 2 clickt und unten dann auf den Zurück-Pfeil von Fußnote 2, landet man dort, wo man weggesprungen ist, fein. Wenn man aber im Text auf Fußnote 2 clickt und unten dann auf den Zurück-Pfeil von Fußnote 1, landet man auch dort, wo man weggesprungen ist. Erwarten sollte man aber, dass man beim (ersten) Auftreten von Fußnote 1 landet.

Man muss sich also beim Sprung nach unten die jeweilige Fußnote merken und darf das mit history.back() nur bei dieser machen. Bei allen anderen Fußnoten führen die Links zu den jeweiligen Stellen.

☞ Beispiel

🖖 Живіть довго і процвітайте