CSS Silbentrennung mit CSS

[Emskerla]

Liebe Gemeinschaft,

sehe ich es richtig, dass mit der derzeitigen Silbentrennung

 overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;

zwar nach Silben getrennt wird, aber nicht

Tier-
garten

sonder im Zweifelsfall

Tiergar-
ten

und es keine Möglichkeit gibt, insbesondere im Responsive-Design, diesen unschönen Trennungen Herr zu werden?

Vielen Dank im Voraus

 

[FranzvonAssisi]

Ja, wenn dus so eingestellt hast. Es wird an der letzen Trennstelle gebrochen, bevor es über den Rand geht. Du kannst natürlich bei fixen Texten einfach manuell

Tier-<br>
garten

schreiben...

 

[Emskerla]

Tier-<br>
garten

Geht nicht, da ich dann auch am "großen Bildschirm" eine Trennung habe (Responsive-Design).

Gibt es eine Möglichkeit, bei welcher nur dann getrennt wird, wenn eine Wort auch dann nicht hin passt, wenn es in einer neue Zeile verschoben wird? Einfach ausgedrückt:

Wenn Trennung, dann verschiebe in neue Zeile
Wenn das auch nicht geht, trenne (ansonsten nicht).

 

[kachiri]

Lass mich raten, du setzt den Text auch auf Blocksatz, oder? Würde ich von abraten. Es sieht vielleicht "runder" aus, weil jede Zeile gleich breit ist. Hat aber unschöne Nebeneffekte (Silbentrennung, oder noch unschöner, sehr viel Freiraum zwischen einzelnen Worten). Spar dir also sowohl Blocksatz, als auch die Silbentrennung. Sie stören beide den Lesefluss.

Und wenn der Text auf kleineren Bildschirmen halt anders umbricht, als am großen Bildschirm, dann ist das halt so. Ist ja vollkommen normal, dass ein Absatz auf dem Handy-Display halt über 10 Zeilen geht, wenn er am PC über 3 Zeilen geht.

Ansonsten gibt es keine andere Möglichkeit. Entweder über deinen CSS-Code, oder eben mit shy letzterer ist halt ähnlich wie <br>.

Deswegen einfach grundsätzlich:

Ein Web-Designer kann nie wissen, wie ein Besucher seine Webseite erlebt. Er weiss nicht, wie groß dessen Bildschirm ist, wie die Auflösung des Monitors ist, ob das Browserfenster auf Vollbild aufgezogen wird oder nicht, welche Schriftarten installiert sind und ob die Ansicht eventuell vergrößert oder verkleinert wurde. Er kann deshalb überhaupt nicht festlegen, an welchen Stellen sein Text umgebrochen wird. Er sollte aber alles tun, damit der Text lesbar bleibt.

 

[Emskerla]

Nein, ich verwende keinen Blocksatz.

Wenn ich den obigen CSS-Code entferne, passiert folgendes: Lange Wörter werden am Ende der Zeile umgebrochen, einen Bindestrich gibt es jedoch nicht. Dieses Verhalten liegt an

 overflow-wrap: break-word;

Anyway.

Was ich realisieren will, ist, wie gesagt, ist das Verhalten aus meinem letzten Posting.

 

[Seby007]

Ich könnte mir vorstellen, dass es über eine Javascript-Routine klappen könnte...

 

[killray]

Was du dir vorstellst geht höchstens mit javascript, aber nicht mit css.

 

[Emskerla]

Habe ich bereits befürchtet ... JavaScript kommt nicht in Frage, hier kann zu, vielen Dank an alle!

 

[kachiri]

Und JavaScript ist dann halt wieder ein kritischer Punkt.

 

[R4sh]

man kann sich auch verrückt machen. Javascript sind meist nur paar Zeilen aus dem Web einfach einfügen und fertig. So schwer...

 

[Emskerla]

Zwei Jahre später – immer noch das gleiche Problem.

Ich habe überhaupt keine Bindestriche in Edge Mobile und Chrome (Android). Der aktuelle Klassiker: Datenschutzerklärung. Und: Hyperlinks werden nicht umgebrochen, sondern laufen einfach rechts aus dem Smartphone Bildschirm raus.

Gibt es dafür keine Lösung?

Literatur:
https://github.com/readium/readium-css/issues/31
https://justmarkup.com/log/2015/07/dealing-with-long-words-in-css/
https://gist.github.com/justmarkup/891ae55c4f8667c75e0e

 

[Photon]

Der Thread ist zwar schon etwas älter, jetzt habe ich aber ein ähnliches Problem, nur dass in meinem Fall nicht mal zwischen zwei Silben getrennt wird und auch kein Trennstrich zu sehen ist: https://jsfiddle.net/yxpa26r7/ Ohne word-wrap oder overflow-wrap wird übrigens überhaupt nicht umgebrochen und der Text läuft aus der div heraus. Hat jemand einen Tipp, was man da machen kann?

 

[r0b0t]

Wenn der Text statisch ist, kannst du mit einem Softhyphen - weiches Trennsymbol &shy; - Sollbruchstellen zur Worttrennung angeben. Zum Beispiel so: Energieverbrauchs&shy;kennzeichnungs&shy;verordnung
Ein moderner Browser sollte das dann automatisch umbrechen. Funktioniert hier mit der Forensoftware aber nicht.

 

[Photon]

Hab ich vergessen zu erwähnen, der Text ist leider nicht statisch. Und noch eine Beobachtung: Für manche Wörter funktioniert die Silbentrennung, zum Beispiel "übernehmen" statt "Autobahn". Aber ich kann mir nicht vorstellen, dass "Autobahn" nicht im Wörterbuch ist... Gefühlt funktioniert die Silbentrennung aber eher sehr selten.

 

[r0b0t]

Wenn ich deinem Link folge steht bei mir im Firefox:
Auto-
bahn
Erst wenn ich bei width mehr als 65 px angebe, wird nicht mehr getrennt. Das hängt sicher von der bei den Browsereinstellungen gesetzte Schriftart und -größe ab.

 

[Photon]

Ok, das ist interessant! Ich denke, es hängt eher vom verwendeten Wörterbuch ab. Wie gesagt, wenn ich word-wrap und overflow-wrap herausnehme, dann läuft der Text aus der div raus, sie ist also definitiv klein genug, damit der Zeilenumbruch anspringen müsste.

Ich nutze auch den Firefox, allerdings unter Linux. Die Rechtschreibprüfung funktioniert auch wunderbar, aber vielleicht braucht es spezielle Wörterbücher für Silbentrennung, die bei meiner Installation fehlen...

edit: Funktioniert sogar unter Debian: http://browsershots.org/screenshots/750c3ded659275cb6200d489190c569d Aber hier unter Manjaro irgendwie nicht...

edit2: @r0b0t Welche Firefox-Version nutzt du denn? Ich habe gerade Firefox 67 hier unter Manjaro getestet und dort taucht das Problem nicht auf, unter Firefox 68 und Chromium 75 hingegen schon.

 

[r0b0t]

Firefox 60.8.0esr (32-Bit) unter Windows 7.
Beim IE 11 wird auch korrekt getrennt.
In einer VM mit Virtualbox und Xubuntu 18.04 mit Firefox 68.0 (32-Bit) steht allerdings:
Autob
ahn
ohne Trennungsstrich.

 

[Photon]

Ok, das deckt sich mit meinen Beobachtungen: Firefox ESR 60.8, Firefox 61, 66 und 67 klappen gut, das aktuelle Firefox 68 und Chromium 75 nicht. Scheint eine Regression zu sein...

edit: Habe einen Bugreport reingestellt: https://bugzilla.mozilla.org/show_bug.cgi?id=1566542

edit2: Wie man im Bugreport sehen kann, ist der Bug bekannt und betrifft nur großgeschriebene Wörter im Deutschen. In FF 69 wird er auch gefixt, somit ist das Problem für mich erledigt. Danke fürs Testen!