nicht angemeldet
Fussnoten in HTM-Texten
Hallo
Seit einiger Zeit beschäftigte ich mich mit der Frage, wie Fußnoten in einem HTML-Text möglichst störungsfrei dargestellt werden könnten.
Die als Link angegeben Lösung bentzt HTML, CSS und Javascript. Das Javascript ist nur notwendig, wenn Links in der Fußnote angeben sollen.
http://www.buergerstimmen.de/sonst/selfalltag_207.htm#kon200710092239501
Wenn man auf den oberen blauen Kasten klickt, sollte ein Text in einem Pseudofenster erscheinen, weil das Link-Element den Fokus erhält. Wenn man auf den zweiten blauen Balken klickt, sollte der erste Block sich schließen und der zweite sollte sich öffnen.
Bei IE 5.5. wird der Inhalt dargestellt. Sieht zwar gewöhnungsbedürftig aus; aber ist akzeptabel.
Bei firefox 2.0.0.6 funktioniert es gut
Bei Opera 9.10 funktioniert nicht korrekt, obwohl ich im CSS nur die Befehle min/max-width min/max-heigth und overflow sowie das Element Focus verwende. (Kennt jemand einen Work-Around)?
Es wird sofort an die Stelle des internen Links gesprungen. Kennt Opera überhaupt einen Fokus bei Links?
Wie sieht das Verhalten bei anderen Browsern aus?
Dieter
-
Hallo
Seit einiger Zeit beschäftigte ich mich mit der Frage, wie Fußnoten in einem HTML-Text möglichst störungsfrei dargestellt werden könnten.
Die als Link angegeben Lösung bentzt HTML, CSS und Javascript. Das Javascript ist nur notwendig, wenn Links in der Fußnote angeben sollen.
Dieter
Hallo
Etwas Konzeptionelles.
Ich habe bei mir auch Fuss- äh... Randnoten realisiert. Allerdings finde ich Popups für verfehlt, denn Randnoten sind einmalig zu einem einmaligen Inhalt, und sollten für das Auge ohne klick erreichbar sein.
Etwas anderes sind Container für Details oder für Kontexthilfen. Details will man nicht immer sehen, und nehmen oft viel Raum ein und Kontexthilfen braucht man nur einmal. Hier rechtfertigt sich der Griff zur Maus.-
Hallo
Seit einiger Zeit beschäftigte ich mich mit der Frage, wie Fußnoten in einem HTML-Text möglichst störungsfrei dargestellt werden könnten.
Die als Link angegeben Lösung bentzt HTML, CSS und Javascript. Das Javascript ist nur notwendig, wenn Links in der Fußnote angeben sollen.
Dieter
Hallo
Etwas Konzeptionelles.
Ich habe bei mir auch Fuss- äh... Randnoten realisiert. Allerdings finde ich Popups für verfehlt, denn Randnoten sind einmalig zu einem einmaligen Inhalt, und sollten für das Auge ohne klick erreichbar sein.
Etwas anderes sind Container für Details oder für Kontexthilfen. Details will man nicht immer sehen, und nehmen oft viel Raum ein und Kontexthilfen braucht man nur einmal. Hier rechtfertigt sich der Griff zur Maus.Danke für die Antwort. Deine Anmerkungen sind gerechtfertigt. Üblicherweise sind auch Fußnoten in Bücher immer Hinweise auf etwas Nebensächliches, welches man aber leider im Buch nicht ausblenden kann. Bei der Randnote im angegebenen Beispiel ist es wichtig, sie auszublenden. Die Randnoten sind Einfügungen von mir, während der Text von jemand anderem stammt und von mir nur zitiert wurde (Pressestelle der Verbraucherzentrale). Hier trennt der Klick also gleichzeitig auch die unterschiedliche Urheberschaft.
Zum zweiten ist es kein echtes separates Pop-Up-Fenster, da lediglich durch das Pseudoelement "fokus" eine Design-Änderung der Seite bewirkt wird.Mich würde interessieren, wie du die Randnoten realisiert hast, denn der Platz ist oft begrenzt und manchmal sind die Randnoten länger als der Bezugstext.
Da die Umsetzung bei Opera derzeit "fehlerhaft" (im Vergleich zum Firefox-Verhalten) ist, interessiert mich, wie andere Browser (IE 6 ...) mit der Darstellung umgehen.
Dieter
-
Hallo Dieter,
Mich würde interessieren, wie du die Randnoten realisiert hast, denn der Platz ist oft begrenzt und manchmal sind die Randnoten länger als der Bezugstext.
Warum machst du die Trennung der Urheberschaft nicht einfach dadurch deutlich, dass du für deine Kommentare eine andere Schriftfarbe oder Schriftart verwendest und sie dann unter den kommentierten Textabschnitt setzt, ähnlich wie hier im Forum?
Generell bin ich der Meinung, dass Fuß- und Randnoten Dinge aus der Print-Welt sind, die sich nur schwer auf's Web übertragen lassen.
Schöne Grüße,
Johannes
-
Hallo Dieter,
Mich würde interessieren, wie du die Randnoten realisiert hast, denn der Platz ist oft begrenzt und manchmal sind die Randnoten länger als der Bezugstext.
Die ideale Lösung habe ich noch nicht gefunden. Bislang komme ich immer mit kleinen Texten aus. Langfristig werde ich wohl eine zweigleisige Struktur fahren müssen. Kurze Kommentare werden wie hier
http://www.buergerstimmen.de/politik/ngo_260.htm
mit CSS und HTML gesetzt.
Der Trick für das Pop-Up-Fenster ist, dass das Element a den Fokus erhalten kann. Ohne Fokus sieht man nur einen kleinen CSS_definierten Kasten mit fettem Rahmen. Bei Aktivierung sieht man dagegen einen großen Kasten mit Scrollbalken. Die Angabe von Links im Linktext wird mit Hilfe von Javascript gelöst, wobei ich mir an der stelle unsicher bin, wie die anderen Browser mit dem Prioritätsproblem beim Klicken umgehen. Bei firefox funktionieren die Links.
da die Randnotizen sich auch bestimmte Textpassagen beziehen, werden die betreffenden Textpassagen mit einem übergeordnete Span eingebunden: Die HTML-Struktur ist
<a name=1><span>Org-text<a href=#1>Kommentar-inline-Text</a><span>
Die entsprechende css-Struktur findet sich im File zum obigen LinkBei längeren Kommentaren Fußnoten weiß ich noch nicht genau, wie ich damit umgehe. Vielleicht mache ich diese Texte zu Endnoten um. Vielleicht nutze ich auch eine einfache Javascript-Lösung (Generierung eines Pop-up-Fensters.) Insgesamt tendiere ich aber dazu, möglichst wenig javascript zu verwenden.
Warum machst du die Trennung der Urheberschaft nicht einfach dadurch deutlich, dass du für deine Kommentare eine andere Schriftfarbe oder Schriftart verwendest und sie dann unter den kommentierten Textabschnitt setzt, ähnlich wie hier im Forum?
Danke für den Hinweis mit den Schriftarten. Auf die Idee bin ich noch nicht gekommen. (Betriebsblind) Ich werde es demnächst wohl bei meinen Kommentaren und Anmerkungen einsetzen, die sich auf den ganzen Text beziehen und von den zitierten Pressemitteilungen abgegrenzt sind.
Generell bin ich der Meinung, dass Fuß- und Randnoten Dinge aus der Print-Welt sind, die sich nur schwer auf's Web übertragen lassen.
Aber ich möchte auch auf die Randnotizen nicht verzichten. Manchmal finde ich in Pressemitteilungen Aussagen, die ich kommentieren möchte, ohne gleich auf die gesamte Pressemitteilung eingehen zu müssen. Mit den Randnotizen gehe ich kommentierend auf spezielle Textpassagen ein.
Dieter
-
-
Danke für die Antwort. Deine Anmerkungen sind gerechtfertigt. Üblicherweise sind auch Fußnoten in Bücher immer Hinweise auf etwas Nebensächliches, welches man aber leider im Buch nicht ausblenden kann.
Durchaus nicht. Oft sind Fussnoten nicht nebensächlich sondern Interesse spezifisch ausgelagerte Teile die aber vom Auge schnell geortet werden, weil eine Seite eben überblickbar ist.
Bei der Randnote im angegebenen Beispiel ist es wichtig, sie auszublenden. Die Randnoten sind Einfügungen von mir, während der Text von jemand anderem stammt und von mir nur zitiert wurde (Pressestelle der Verbraucherzentrale). Hier trennt der Klick also gleichzeitig auch die unterschiedliche Urheberschaft.
Ob der Inhalt von einem Zweitautor ist, spielt keine Rolle. Die Frage ist, ob die Zusatz-Information den Inhalt erklärt, oder ob sie eine für den Betrachter zu kalkulierenden Inhalt bietet, den er bewusst anklickt.
Zum zweiten ist es kein echtes separates Pop-Up-Fenster, da lediglich durch das Pseudoelement "fokus" eine Design-Änderung der Seite bewirkt wird.
Mich würde interessieren, wie du die Randnoten realisiert hast, denn der Platz ist oft begrenzt und manchmal sind die Randnoten länger als der Bezugstext.
Ich habe mich selbst bei echten Popups für target entschieden. das gehört zwar zu CSS3. Aber bis die betroffene Anwendung von Operas oder nicht abstürzenden MSIE gefunden wird, ist das irrelevant. (für mich)
Dies ist Text[footnote:Die zugehörige Randnote]. Her geht der Text weiter.
Mein Script macht aus dem BB-Code eine zweifach verlinkte Struktur, wobei die Randnote in einem Inline-Element sitzt, das via CSS gefloatet wird. Firefox staffelt solche Floats.
Die Breite ist ca 1/3. Das heisst, Im Schnitt sollte als Grenzfall 2/3 Text und 1/3 Randnoteninhalt summiert vorliegen. Im Zweifelsfall schafft die bidirektionale Verlinkung den Kontext.
-
-