Beispiel zur Anwendung des phpHyphenator

Dies ist ein Beispiel, wie Silbentrennung funktionieren kann.

Der Text in der linken Spalte, zeigt den unformatierten Text aus der Eingabebox oben. Der Text hat keinerlei Zeilenumbrüche. Es entsteht ein Flatterrand, der vor allem bei langen Worten, wie Donaudampfschifffahrtskapitänsmütze oder etwa Feuerwehrrettungshubschrauberlandeplatz, blöd aussehen kann.

Damit dies nicht passiert, sieht HTML vor, das sogenannte Softhyphen (shy) in Worte einzufügen. Dieses ist nicht sichtbar, wie in der mittleren und rechten Spalte zu sehen ist, hat aber den Effekt am Zeilenende.

Allerdings ist es für einen Redakteur mühsam, in jedes Wort an der richtigen Trennstelle ein Trennzeichen oder eben ein shy einzufügen. Insbesondere wenn die Spaltenbreite, wie auf dieser Seite, variieren kann. Probieren Sie es aus. Verändern Sie die Breite dieses Fensters.

Um das Problem zu lösen, gibt es einen genialen Ansatz. Mehr dazu auf Hyphenator.js.

Dieser Ansatz wurde von Mathias Nater in Javascript programmiert. Das bedeutet, unformatierter Text, wird beim User im Browser formatiert. Das Ergebnis sieht man in der rechten Spalte. Ist Javascript nicht aktiviert, wird nichts formatiert. Wie sich das Script auf langsamen Handhelds wie Handy oder iPad verhält, ist unklar.

Aus diesem Grund, gibt es eine 2. Lösung, die den Text bereits auf dem Server mit den passenden Softhyphen versieht. Dazu wurde die Hyphenator.js Lösung in PHP umprogrammiert. Das Ergebnis zeigt die mittlere Spalte.

In diesem Beispiel kann das Trennzeichen frei gewählt werden. 'chr(173)' fügt das Trennzeichen mit dem ASCII-Wert 173 ein. 'shy' fügt '­' ein und 'shy sichtbar' macht das Trennzeichen in den Spalten sichtbar. Entsprechend funktioniert '-'.

Geben Sie Ihren eigenen Text ein und wählen 'shy sichtbar', dann können Sie den Text in der mittleren oder rechten Spalte kopieren und in ihrer eigenen Seite verwenden. Probieren Sie es aus. Markieren Sie 'shy sichtbar' und klicken auf 'Absenden'. Dann markieren und kopieren Sie den Text in der mittleren Spalte. Fügen Sie diesen Text in das Textfeld ein und klicken wieder auf Absenden.

In der linken Spalte sehen Sie jetzt den vorformatierten Text ohne das phpHyphenator oder Hyphenator.js etwas gemacht haben.

Dies ist ein Bei­spiel, wie Sil­ben­tren­nung funk­tio­nie­ren kann.

Der Text in der lin­ken Spal­te, zeigt den un­for­ma­tier­ten Text aus der Ein­ga­be­box oben. Der Text hat kei­ner­lei Zei­len­um­brü­che. Es ent­steht ein Flat­ter­rand, der vor al­lem bei lan­gen Wor­ten, wie Do­nau­dampf­schiff­fahrts­ka­pi­täns­müt­ze oder et­wa Feu­er­wehr­ret­tungs­hub­schrau­ber­lan­de­platz, blöd aus­se­hen kann.

Da­mit dies nicht pas­siert, sieht HTML vor, das so­ge­nann­te Sof­t­hy­phen (shy) in Wor­te ein­zu­fü­gen. Die­ses ist nicht sicht­bar, wie in der mitt­le­ren und rech­ten Spal­te zu se­hen ist, hat aber den Ef­fekt am Zei­len­en­de.

Al­ler­dings ist es für ei­nen Re­dak­teur müh­sam, in je­des Wort an der rich­ti­gen Trenn­stel­le ein Trenn­zei­chen oder eben ein shy ein­zu­fü­gen. Ins­be­son­de­re wenn die Spal­ten­brei­te, wie auf die­ser Sei­te, va­ri­ie­ren kann. Pro­bie­ren Sie es aus. Ver­än­dern Sie die Brei­te die­ses Fens­ters.

Um das Pro­blem zu lö­sen, gibt es ei­nen ge­nia­len An­satz. Mehr da­zu auf Hy­phena­tor.js.

Die­ser An­satz wur­de von Ma­thi­as Na­ter in Ja­va­script pro­gram­miert. Das be­deu­tet, un­for­ma­tier­ter Text, wird beim User im Brow­ser for­ma­tiert. Das Er­geb­nis sieht man in der rech­ten Spal­te. Ist Ja­va­script nicht ak­ti­viert, wird nichts for­ma­tiert. Wie sich das Script auf lang­sa­men Hand­helds wie Han­dy oder iPad ver­hält, ist un­klar.

Aus die­sem Grund, gibt es ei­ne 2. Lö­sung, die den Text be­reits auf dem Ser­ver mit den pas­sen­den Sof­t­hy­phen ver­sieht. Da­zu wur­de die Hy­phena­tor.js Lö­sung in PHP um­pro­gram­miert. Das Er­geb­nis zeigt die mitt­le­re Spal­te.

In die­sem Bei­spiel kann das Trenn­zei­chen frei ge­wählt wer­den. 'chr(173)' fügt das Trenn­zei­chen mit dem ASCII-Wert 173 ein. 'shy' fügt '­' ein und 'shy sicht­bar' macht das Trenn­zei­chen in den Spal­ten sicht­bar. Ent­spre­chend funk­tio­niert '-'.

Ge­ben Sie Ih­ren ei­ge­nen Text ein und wäh­len 'shy sicht­bar', dann kön­nen Sie den Text in der mitt­le­ren oder rech­ten Spal­te ko­pie­ren und in ih­rer ei­ge­nen Sei­te ver­wen­den. Pro­bie­ren Sie es aus. Mar­kie­ren Sie 'shy sicht­bar' und kli­cken auf 'Ab­sen­den'. Dann mar­kie­ren und ko­pie­ren Sie den Text in der mitt­le­ren Spal­te. Fü­gen Sie die­sen Text in das Text­feld ein und kli­cken wie­der auf Ab­sen­den.

In der lin­ken Spal­te se­hen Sie jetzt den vor­for­ma­tier­ten Text oh­ne das php­Hy­phena­tor oder Hy­phena­tor.js et­was ge­macht ha­ben.

Dies ist ein Beispiel, wie Silbentrennung funktionieren kann.

Der Text in der linken Spalte, zeigt den unformatierten Text aus der Eingabebox oben. Der Text hat keinerlei Zeilenumbrüche. Es entsteht ein Flatterrand, der vor allem bei langen Worten, wie Donaudampfschifffahrtskapitänsmütze oder etwa Feuerwehrrettungshubschrauberlandeplatz, blöd aussehen kann.

Damit dies nicht passiert, sieht HTML vor, das sogenannte Softhyphen (shy) in Worte einzufügen. Dieses ist nicht sichtbar, wie in der mittleren und rechten Spalte zu sehen ist, hat aber den Effekt am Zeilenende.

Allerdings ist es für einen Redakteur mühsam, in jedes Wort an der richtigen Trennstelle ein Trennzeichen oder eben ein shy einzufügen. Insbesondere wenn die Spaltenbreite, wie auf dieser Seite, variieren kann. Probieren Sie es aus. Verändern Sie die Breite dieses Fensters.

Um das Problem zu lösen, gibt es einen genialen Ansatz. Mehr dazu auf Hyphenator.js.

Dieser Ansatz wurde von Mathias Nater in Javascript programmiert. Das bedeutet, unformatierter Text, wird beim User im Browser formatiert. Das Ergebnis sieht man in der rechten Spalte. Ist Javascript nicht aktiviert, wird nichts formatiert. Wie sich das Script auf langsamen Handhelds wie Handy oder iPad verhält, ist unklar.

Aus diesem Grund, gibt es eine 2. Lösung, die den Text bereits auf dem Server mit den passenden Softhyphen versieht. Dazu wurde die Hyphenator.js Lösung in PHP umprogrammiert. Das Ergebnis zeigt die mittlere Spalte.

In diesem Beispiel kann das Trennzeichen frei gewählt werden. 'chr(173)' fügt das Trennzeichen mit dem ASCII-Wert 173 ein. 'shy' fügt '­' ein und 'shy sichtbar' macht das Trennzeichen in den Spalten sichtbar. Entsprechend funktioniert '-'.

Geben Sie Ihren eigenen Text ein und wählen 'shy sichtbar', dann können Sie den Text in der mittleren oder rechten Spalte kopieren und in ihrer eigenen Seite verwenden. Probieren Sie es aus. Markieren Sie 'shy sichtbar' und klicken auf 'Absenden'. Dann markieren und kopieren Sie den Text in der mittleren Spalte. Fügen Sie diesen Text in das Textfeld ein und klicken wieder auf Absenden.

In der linken Spalte sehen Sie jetzt den vorformatierten Text ohne das phpHyphenator oder Hyphenator.js etwas gemacht haben.