Zeilenumbruch für "Überlange" Hyperlinks erzwingen

[Michael]

Hallo,

ich steh gerade schön am Schlauch... mit dem Problem, dass in manchen HTML Seiten mit Listen die Links enthalten horizontal gescrollt werden muss, da einige Links ewig lang sind und nicht umgebrochen werden.

Also zb sowas <a href="http://www.abc.de/qwewretrztztrere_sdsgfsg_FGFDFDGFDG_dfdg_fdgdfg_dgdfgdgfdf_fdgdfgdf_dfgdfgdfg_usw_usw">http://www.abc.de/qwewretrztztrere_sdsgfsg_FGFDFDGFDG_dfdg_fdgdfg_dgdfgdgfdf_fdgdfgdf_dfgdfgdfg_usw_usw</a>

Gibt es da eine Möglichkeit einen Umbruch zu erzwingen, so dass dann die Seite nicht horizontal gescrollt werden muss?

vielen Dank

Michael

[Ingo Turski]

Hi,

Gibt es da eine Möglichkeit einen Umbruch zu erzwingen, so dass dann die Seite nicht horizontal gescrollt werden muss?

nicht mit HTML. Dazu brauchst Du schon eine Programmiersprache, die die Links an geeigneter Stelle teilt.

freundliche Grüße
Ingo

[Michael]

Hallo,

und Danke für die Hilfe...
Dass es da nichts gibt habe ich fast schon befürchtet.

nicht mit HTML. Dazu brauchst Du schon eine Programmiersprache, die die Links an geeigneter Stelle teilt.

... prinzipiell wäre das "Teilen" nicht mal ein großes Problem, da ich die Seiten mit xslt aus xml generiere und da ohne allzugroße Umstände für so lange Links (zb für alle länger 30 Zeichen) einfach <br /> 's in die Strings einhängen könnte. Allerdings wäre sowas auch nur eine eher rudimentäre Lösung, die dann vielleicht mal für einige Browser (bzw. Systemeigenschaften) funktioniert, jedoch auch wieder versagt, sobald Clients das Fenster verkleinern oder größere Schriftdarstellung aktivieren usw.
Deshalb hätte mir eine andere sozusagen "frei skalierbare" Lösung deutlich besser zugesagt.

viele Grüße

Michael

[Ingo Turski]

Hi,

Deshalb hätte mir eine andere sozusagen "frei skalierbare" Lösung deutlich besser zugesagt.

die gibt's leider nicht. Aber eine praktikable Alternative wäre, Paragraphen, die solche Links enthalten können, mit overflow:auto auszustatten.

freundliche Grüße
Ingo

[Michael]

Hallo,

Deshalb hätte mir eine andere sozusagen "frei skalierbare" Lösung deutlich besser zugesagt.
die gibt's leider nicht.

Die Lösung die Gernot gepostet hat ist schon ziemlich gut und wäre quasi frei skalierbar. Mal abgesehen von kleineren Problemen hinsichtlich Usability und Accessibility die sich dadurch ergeben, sagt mir das ziemlich gut zu. An der Lösung probiere ich gerade herum...

Aber eine praktikable Alternative wäre, Paragraphen, die solche Links enthalten können, mit overflow:auto auszustatten.

Das hilft mir leider nicht wirklich weiter, weil ich ja gerade vermeiden möchte, dass man horizontal scrollen muss. Also das Problem ist praktisch nicht, dass die überlangen Links abgeschnitten würden, sondern wirklich nur das seitliche scrollen. Sowas nervt einfach finde ich und insbesondere, wenn es nur wegen zwei oder drei Links von 100 verursacht wird und der Rest ja wunderbar skalieren und passen würde.

Danke nochmal und viele Grüße

Michael

[Ingo T.]

Hi,

Sowas nervt einfach finde ich und insbesondere, wenn es nur wegen zwei oder drei Links von 100 verursacht wird und der Rest ja wunderbar skalieren und passen würde.

Da hast Du mich wohl falsch verstanden. Ich habe eine solche Lösung in einem Forum eingebunden und da jeder Beitrag in einem eigenen Paragraphen ist, stört das Querscrollen nicht wirklich, da es nur sehr seltenen und eben partiell auftritt.
Der Vorteil ist auf jeden Fall, daß solche Texte vernünftig kopiert werden können, während Spaces ja bsonders einen kopierten Link unbrauchbar machen würden.

Freundliche Grüße
Ingo

[Michael]

Hallo,

Da hast Du mich wohl falsch verstanden. Ich habe eine solche Lösung in einem Forum eingebunden und da jeder Beitrag in einem eigenen Paragraphen ist, stört das Querscrollen nicht wirklich, da es nur sehr seltenen und eben partiell auftritt.
Der Vorteil ist auf jeden Fall, daß solche Texte vernünftig kopiert werden können, während Spaces ja bsonders einen kopierten Link unbrauchbar machen würden.

Nene, da habe ich Dich schon richtig verstanden. Was Du schreibst, ist genau das, was ich mit Usability-Problem meinte (dass eben zb copy-paste nicht mehr funktioniert).

Nur wäge ich diesen Umstand für meinen Fall anders ab, als Du für Deinen. Bei mir ist es so, dass in einer wirklich sehr langen Liste aus Verweisen und Ähnlichem nur 3-5 solcher überlanger Links enthalten sind. Deshalb finde ich es in dem Fall besser, diese Links zu ändern um damit den Rest der Seite besser aussehen und funktionieren zu lassen, als umgekehrt. Da es hier immer stören würde wenn horizontal gescrollt werden kann / muss, wohingegen es nur sehr sehr vereinzelt vorkommt, dass jemand einen der 3-5 Links kopieren wird (zumal davon auszugehen ist, dass Nutzer den Link erstmal anklicken, ehe sie ihn kopieren).

viele Grüße

Michael

[Gernot Back]

Hallo Michael,

Nene, da habe ich Dich schon richtig verstanden. Was Du schreibst, ist genau das, was ich mit Usability-Problem meinte (dass eben zb copy-paste nicht mehr funktioniert).

(zumal davon auszugehen ist, dass Nutzer den Link erstmal anklicken, ehe sie ihn kopieren).

Den eigentlichen Link über Rechtsklick -> "Linkziel/Verknüpfung kopieren" ist zu kopieren ja auch sowieso kein Problem, der in deinem Fall ja identisch mit dem Linktext ist.

Die Alternative, die Kopie über ein Linktext-Markieren mit der linken Maustaste und Strg + c vorzunehmen, finde ich ohnehin unhandlich, weil man den Link bei dieser Prozedur meist versehentlich anklickt.

Ich muss aber im Nachhinein davor warnen, letter-spacing bei so langen Zeichenketten auf einen Wert von -1em zu setzen. Der IE 6 ließ Windows 98 bei meinen Versuchen darüber reproduzierbar abstürzen. Bei den Monospace-Schriftarten scheint es sowieso eher mit -0.3em hinzukommen, was auch logisch ist, denn das bei diktengleichen Schriftarten wie alle Zeichen 1em breite Leerzeichen muss wie sein Vorgänger- und sein Nachfolgerzeichen um weniger als ein halbes em nach links versetzt werden, damit der Zeichenabstand erhalten bleibt, der mit zur Zeichenbreite selbst zählt.

Gruß Gernot

[Michael]

Hallo Gernot,

Den eigentlichen Link über Rechtsklick -> "Linkziel/Verknüpfung kopieren" ist zu kopieren ja auch sowieso kein Problem, der in deinem Fall ja identisch mit dem Linktext ist.

Die Alternative, die Kopie über ein Linktext-Markieren mit der linken Maustaste und Strg + c vorzunehmen, finde ich ohnehin unhandlich, weil man den Link bei dieser Prozedur meist versehentlich anklickt.

Auf alle Fälle! ;-) Nur leider kann man seine Benutzer halt nicht perse davon abhalten, komplizierte Wege zu gehen. Frei nach Murpheys Law gehe ich dann mal davon aus, dass wenn es eine Möglichkeit gibt, was kompliziert oder falsch zu machen, dass es auch gemacht wird ;-)

Ich muss aber im Nachhinein davor warnen, letter-spacing bei so langen Zeichenketten auf einen Wert von -1em zu setzen. Der IE 6 ließ Windows 98 bei meinen Versuchen darüber reproduzierbar abstürzen.

Danke für den Tipp.
Ich habs bislang eh noch nicht hinbekommen mein xslt so umzuschreiben, dass es a) jedes Zeichen eines Textknoten einzeln behandelt (am besten rekursiv) und b) die einzelnen Zeichen durch je zwei (also Zeichen + Leer) zu ersetzen. Das sind leider beides zwei Spezialitäten, die in XSLT einfach unglaublich schwer umzusetzen sind (zumindest im vergleich zu zb JS).
Allerdings hätte ich es gerne mal noch hinbekommen und bastle deshalb noch ein bisschen daran.
Wenns funktioniert, werde ich das Ergebnis ohnehin in diversen Systemumgebungen testen.
Dann kann ich Dir mal bescheid geben, ob das bei Dir ein singuläres Phänomen ist, oder ob wir da eine neue Sicherheitslücke für MS aufgedeckt haben.
Im zweiteren Fall werden sich einige Skriptkiddies sicher freuen, dass sie mal wieder was haben, um die Rechner armer Windowsnutzer abzuschießen ;-) oder ;-(

Bei den Monospace-Schriftarten scheint es sowieso eher mit -0.3em hinzukommen, was auch logisch ist, denn das bei diktengleichen Schriftarten wie alle Zeichen 1em breite Leerzeichen muss wie sein Vorgänger- und sein Nachfolgerzeichen um weniger als ein halbes em nach links versetzt werden, damit der Zeichenabstand erhalten bleibt, der mit zur Zeichenbreite selbst zählt.

Ja. Das kommt besser hin. Ich finde -0.2 (oder etwas in der Gegend) wäre evtl. sogar noch besser, da dann optisch noch ein wenig angedeutet wird, dass mit diesem Link "was nicht stimmt".

Danke nochmal und viele Grüße

Michael

[Michael]

Hallo Gernot,

So jetzt hab ich das hinbekommen, dass es mir mit xslt richtig konvertiert wird. Ich lasse jetzt alle Links die Länger sind als 60 Zeichen mit Leerzeichen versehen. (Wenn ich mal noch ein bisschen Zeit finde, kann ich das mal noch ein wenig eleganter gestalten und nur noch alle Linktexte die länger als X Zeichen sind und keine Zeichen enthalten, an denen ein Zeilenumbruch gemacht werden würde (zb "-", sonst fällt mir da adhoc nix ein, weißt Du da zufällig noch andere?)).

Bei den Monospace-Schriftarten scheint es sowieso eher mit -0.3em hinzukommen, was auch logisch ist, denn das bei diktengleichen Schriftarten wie alle Zeichen 1em breite Leerzeichen muss wie sein Vorgänger- und sein Nachfolgerzeichen um weniger als ein halbes em nach links versetzt werden, damit der Zeichenabstand erhalten bleibt, der mit zur Zeichenbreite selbst zählt.

Mit -0.3em funktioniert es übrigens nicht da sich negatives letter-spacing in beide Richtungen auswirkt. Der Berührpunkt zwischen zwei Zeichen ist dann genau mit -0.25em. Am ähnlichsten zu "normalem" Text siehts ungefähr mit -0.19 aus finde ich.

Ich bin jetzt gerade am "Systemtesten" und bisher funktioniert es überall wunderbar. Kannst Du mir mal verraten, wie lange die Links waren, (bzw. welche sonstigen Eigenschaften Du beim ausprobieren verwendet hast), die Dein System abgeschossen haben (kannst Du mir ja auch gerne per Email schicken, damit hier nicht jeder nachlesen kann, was man genau machen muss um damit Unfug treiben zu können).
Ich werde es dann mal ausprobieren, ob ich es reproduzieren kann.

viele Grüße

Michael

[Gernot Back]

Hallo Michael,

... nur noch alle Linktexte die (...) keine Zeichen enthalten, an denen ein Zeilenumbruch gemacht werden würde (zb "-", sonst fällt mir da adhoc nix ein, weißt Du da zufällig noch andere?)).

Das ist je nach Browser unterschiedlich; im IE bricht auch das Fragezeichen (Query-String) um, in Opera darüber hinaus auch der Slash "/". Da dürfte sich dein Problem sowieso von selbst erledigen; weil es davon ja massenhaft in Links gibt.

In Mozilla bricht nichts von alledem um, aber -das kennt man ja- der gibt sich ja auch bei Soft-Hyphens (&shy;) spröde.

Was du alternativ machen könntest, damit alle Brwoser so bereitwillig umbrechen wie Opera, wäre, jeden Slash und jedes Fragezeichen im Linktext durch sich selbst plus
<span style="[code lang=css]font-size:0"> </span>[/code]
zu ersetzen. Dann kannst du auch die Schriftart wieder frei wählen.

Bei den Monospace-Schriftarten scheint es sowieso eher mit -0.3em hinzukommen, (...)

Mit -0.3em funktioniert es übrigens nicht da sich negatives letter-spacing in beide Richtungen auswirkt. Der Berührpunkt zwischen zwei Zeichen ist dann genau mit -0.25em. Am ähnlichsten zu "normalem" Text siehts ungefähr mit -0.19 aus finde ich.

Bei mir sieht es im IE und in Opera bei 'Courier New' mit -0.3em am ähnlichsten aus; bei 'Courier' mit -0.28em. In den Gecko-Browsern kommt das aber auch wieder nicht ganz hin.

Es hängt also auch da noch einmal von der tatsächlichen Schriftart und vom Browser ab, möglicherweise auch noch wieder vom System, was letztlich doch für Ingos Vorschlag als allgemeingültigster Lösung spräche, auch wenn vereinzelte horizontal scrollende LI-Elemente natürlich nicht schön sind.

Ich bin jetzt gerade am "Systemtesten" und bisher funktioniert es überall wunderbar. Kannst Du mir mal verraten, wie lange die Links waren, (bzw. welche sonstigen Eigenschaften Du beim ausprobieren verwendet hast), die Dein System abgeschossen haben (kannst Du mir ja auch gerne per Email schicken, damit hier nicht jeder nachlesen kann, was man genau machen muss um damit Unfug treiben zu können).
Ich werde es dann mal ausprobieren, ob ich es reproduzieren kann.

Es war exakt der Blabla-Beispiel-Linktext von dir, so wie ich ihn hier
https://forum.selfhtml.org/?t=115781&m=740080
bereits gepostet hatte, gesperrt mit Leerzeichen letter-spacing:-1em;font-family:monospace

Da stürzte nicht nur der Internetexplorer, sondern auch der Explorer unter Win98 ab. Ich meine auch, das passierte sogar auch noch bei letter-spacing:-.5em;font-family:monospace. Ab -0.4em war es dann kein Problem mehr.

Gruß Gernot

[Gernot Back]

Hallo Michael,

Also zb sowas <a href="http://www.abc.de/qwewretrztztrere_sdsgfsg_FGFDFDGFDG_dfdg_fdgdfg_dgdfgdgfdf_fdgdfgdf_dfgdfgdfg_usw_usw">http://www.abc.de/qwewretrztztrere_sdsgfsg_FGFDFDGFDG_dfdg_fdgdfg_dgdfgdgfdf_fdgdfgdf_dfgdfgdfg_usw_usw</a>

Gibt es da eine Möglichkeit einen Umbruch zu erzwingen, so dass dann die Seite nicht horizontal gescrollt werden muss?

Wie wäre es denn so: <a href="http://www.abc.de/qwewretrztztrere_sdsgfsg_FGFDFDGFDG_dfdg_fdgdfg_dgdfgdgfdf_fdgdfgdf_dfgdfgdfg_usw_usw" style="[code lang=css]letter-spacing:-1em">h t t p : / / w w w . a b c . d e / q w e w r e t r z t z t r e r e _ s d s g  f s g _ F G F  D F D G F D G _ d f d g _ f d g d f g _ d g d f g d g f d f _ f d g d f g d f _ d f g d f g d f g _ u s w _ u s w</a>[/code]

... also überall ein Leerzeichen dazwischen. (hab's nicht ausprobiert, vielleicht funktioniert das nicht in allen Browsern und vielleicht muss es auch "-.5em" heißen

Gruß Gernot

[Gernot Back]

Hallo nochmal,

Das negative letter-spacing:-1em solltest du dann noch mit einer Monospace-Schriftart verbinden, also font-family:monospace

Gruß Gernot

[Michael]

Hallo auch nochmal,

Das negative letter-spacing:-1em solltest du dann noch mit einer Monospace-Schriftart verbinden, also font-family:monospace

Du denkst ja wirklich auch an alles ! ;-) Wirklich großes Kompliment!

Da hätte ich bei verdana tahoma sans-serif sicher ne Weile Kopfzerbrechen gehabt, bis ich drauf gekommen wäre, dass bei negativer Laufweite die Schrift dicktengleich sein muss, dass es richtig funktionieren kann.

viele Grüße

Michael

[Tom]

Hello,

Da hätte ich bei verdana tahoma sans-serif sicher ne Weile Kopfzerbrechen gehabt, bis ich drauf gekommen wäre, dass bei negativer Laufweite die Schrift dicktengleich sein muss, dass es richtig funktionieren kann.

"diktengleich"  ;-))

Harzliche Grüße vom Berg
esst mehr http://www.harte-harzer.de

Tom

[Michael]

Hallo Gernot,

super Idee!

Wie wäre es denn so: <a href="http://www.abc.de/qwewretrztztrere_sdsgfsg_FGFDFDGFDG_dfdg_fdgdfg_dgdfgdgfdf_fdgdfgdf_dfgdfgdfg_usw_usw" style="[code lang=css]letter-spacing:-1em">h t t p : / / w w w . a b c . d e / q w e w r e t r z t z t r e r e _ s d s g  f s g _ F G F  D F D G F D G _ d f d g _ f d g d f g _ d g d f g d g f d f _ f d g d f g d f _ d f g d f g d f g _ u s w _ u s w</a>[/code]

... also überall ein Leerzeichen dazwischen. (hab's nicht ausprobiert, vielleicht funktioniert das nicht in allen Browsern und vielleicht muss es auch "-.5em" heißen

Könnte es sein, dass es letter-spacing:-.01em heissen muss?

Der IE auf meinem Arbeitsplatz-Rechner zeigt für -1 oder -.5 nur Quatsch an, bei -.01 siehts hingegen so aus, wie es sein sollte.
Leider habe ich hier gerade keine anderen Browser zum testen parat.

Vielen Dank und viele Grüße

Michael

[-Xylakant-]

Warum schreibst du den Link vollständig aus??

<a href="http://www.tagesschau.de/">ARD Tagesschau</a>

Infos:
http://de.selfhtml.org/html/verweise/definieren.htm

________________________________________________

Aber nebenbei, falls diese oben genannte Art nicht erwünscht ist, an welcher Stelle dürfte man, denn den Link trennen? Eigentlich garnicht oder!

mit <br> denkt der es hört auf (genauso auch \n )

Ein Programm das automatisch <br> schreibt ist mit JS einfach umzuwandeln, aber es bringt ja nix.

Xyla

[Tom]

Hello,

Aber nebenbei, falls diese oben genannte Art nicht erwünscht ist, an welcher Stelle dürfte man, denn den Link trennen? Eigentlich garnicht oder!

Innerhalb der Referenz nicht, im angezeigten Text sehr wohl.
Das ist auch das Problem bei Mail-Clients, die Links "erkennen" können, und anclickbar machen sollen. Wenn das Absenderprogramm bereits einen Zeilenumbruch eingebaut hat, funktioniert der Link nicht mehr :-(

Harzliche Grüße vom Berg
esst mehr http://www.harte-harzer.de

Tom

[Michael]

Hallo,

Warum schreibst du den Link vollständig aus??

Das hat schon seinen Sinn und gleich mehrere Gründe.

Aber nebenbei, falls diese oben genannte Art nicht erwünscht ist, an welcher Stelle dürfte man, denn den Link trennen? Eigentlich garnicht oder!

Na klar, überall! Weil ja nicht das href-Attribut getrennt wird, sondern nur der Text. Das einzige Problem ist dann im Bereich Usability und Accessibility, da Copy und Paste beim Linktext nicht mehr funktioniert und ein Screenreader der Linktext noch schlechter vorliest, als es ansonsten bei Links schon der Fall ist

Ein Programm das automatisch <br> schreibt ist mit JS einfach umzuwandeln, aber es bringt ja nix.

... Wie in den anderen Posts schon diskutiert...

viele Grüße

Michael

[Cybaer]

Hi,

Gibt es da eine Möglichkeit einen Umbruch zu erzwingen, so dass dann die Seite nicht horizontal gescrollt werden muss?

Proprietäres HTML: ...">http://<wbr>www.abc.de/<wbr>qwewretrztztrere_<wbr>sdsgfsg_<wbr>...</a>

Gruß, Cybaer