Projektwerkstatt: Der Shyinator

Lesetipps

1. Projektwerkstatt: CommentAnswerWP
2. Projektwerkstatt: Seos Diary
3. Projektwerkstatt: MySearch

Wie ihr ja wisst, bin ich ein Freund von Blocksatz. Ich finde diese Art Text auszurichten relativ elegant, auch wenn viele es für das Internet nicht geeignet halten. Das liegt aber meistens daran dass Texte nicht für die Verwendung von Blocksatz optimiert sind.

Nutzt man hingegen eine Desktop-Publishing-Lösung, so sieht das ganz anders aus. Hier werden Umbrüche so gesetzt dass es “schön” aussieht. Wichtig dabei ist, dass Zeilen immer gefüllt werden, also keine großen Abstände zwischen den einzelnen Wörtern zu finden sind. Das funktioniert natürlich durch die Trennung der einzelnen Wörtern an den richtigen Stellen.

HTML kennt euch einen Tag, der bedeutet, dass ein Wort an einer bestimmten Stelle getrennt werden kann, sobald es nötig wird. Das Tag heißt ­ und wird eigentlich so gut wie nie verwendet. Zumindest kenne ich kein Projekt, in dem ich es schon mal entdeckt habe.

Wie wäre es wenn man einen Webservice hätte, dem man einfach einen Text zuschicken kann und man bekommt eine shy-ifinierte (tolles Wort, oder?) Version zurück. Alle möglichen Trennstriche würden eingesetzt werden und der Browser würde eine wunderbare Ausrichtung von ganz alleine bauen. Genau so wie die professionellen Programme.

Wahrscheinlich kenne ich mich mit der neuen Rechtschreibung zu wenig aus, um zu sagen, ob dies ein guter Service wäre. Könnte mir vorstellen, dass so ein Service hinter jeden Buchstaben ein shy setzen müsste. Daran könnte die Idee ein wenig kranken.

26 Kommentare »

• 
  

  Nils Langner

  am 7. April 2010 um 07:20 Uhr

  Ich sollte weniger “Terminator” schauen, dann würden mir bestimmt bessere Namen einfallen.

• 
  

  Mario Günterberg

  am 7. April 2010 um 07:38 Uhr

  Hallo Nils,
  da der Tag nicht einwandfrei in jeden Browser arbeitet, müßte man eine Lib o.ä. hinterlegen, um der deutschen Rechtschreibung genüge zu tun. Ich weiß jetzt aus dem Kopf nicht, wie die das bei InDesign/QuarkXPress gelöst haben. Wenn man sich diese Mühe dann schon gemacht hat, kann man auch gleich einne Rechtschreibprüfung einbauen.

• 
  

  Stefan Wieden

  am 7. April 2010 um 08:43 Uhr

  Hallo Nils,
  ich denke generell keine falsche Idee, doch denke ich der Tag-Overhead wäre beachtlich. Hinzukommt dann noch was Mario zu bedenken gibt. Trotzdem gut mal wieder an solche ‘exotischen’ Tags erinnert zu werden.

• 
  

  Bastian

  am 7. April 2010 um 08:51 Uhr

  Kommt (hoffentlich) mit CSS3: http://www.w3.org/TR/css3-text/#hyphenate

  Alternativ gibt es ein Javascript welches die schüchternen Trennstriche nach Bedarf setzt bzw. deren Äquivalente für andere Browser. (­ führt in manchen Browsern leider noch zu Problemen) http://code.google.com/p/hyphenator/

• 
  

  Michael

  am 7. April 2010 um 08:57 Uhr

  nur so: &shy ist kein Tag sondern ein “normales” Zeichen

• 
  

  Bastian

  am 7. April 2010 um 09:00 Uhr

  @Michael: eigentlich ein Entity, da es ja kein einzelnes Zeichen ist

  gerade noch gefunden: http://yellowgreen.de/phphyphenator Incl. AJAX-Dienst zum Trennen von Texten.

• 
  

  Sven

  am 7. April 2010 um 09:23 Uhr

  Ja wichtig ist nur, dass man ein Wörterbuch hat. Bei phpHypenator, den Bastian gepostet hat ist so eins dabei. Auch für mehrere Sprachen. Wobei sicher Deutsch und Englisch die wichtigsten für den Alltag sind.
  Da das Parsen jedoch auch Zeit kostet, sollte man die konvertierten Texte jedoch am besten Cachen.

• 
  

  Sebastian

  am 7. April 2010 um 10:33 Uhr

  http://www.fi.muni.cz/~xantos/patlib/

• 
  

  Tom

  am 7. April 2010 um 10:48 Uhr

  Herzlichen Glückwunsch! Du hast das Leerzeichen erfunden
  Shy ist nichts anderes als ein schmales Leerzeichen und definitiv UNGEEIGNET für diese Aufgabe.

  Es gibt aus gutem Grund es CSS-Eigenschaften letter-spacing und word-spacing. Diese sollten das Mittel der Wahl sein – nicht shy!

• 
  

  Nils Langner

  am 7. April 2010 um 10:51 Uhr

  @Tom: Deine Aussage ist entweder falsch oder ich versteh sie nicht. Kannst es dir aussuchen

• 
  

  MBa

  am 7. April 2010 um 11:03 Uhr

  Was ich interessant fände, währe dieser phphyphenator als Plugin (ajax) für fckeditor, tinymce oder ähnliches.

  Dann können die Texte direkt ‘hyphernated’ in die DB gespeichert werden… ist einfach von der Performance her besser.

  Ein Button zum ‘dehypheriren’ sollte das Plugin auch haben. Ein einfaches suchen und ersetzen sollte ja eigentlich reichen.

  Mal schauen, ob ich demnächst mal Langeweile habe.

• 
  

  Sebastian

  am 7. April 2010 um 11:07 Uhr

  Hallo Nils,

  der Nachteil der Soft-Hyphens ist, dass diese auch von Suchmaschinen “gelesen” werden und dann Keywörter nicht korrekt identifiziert werden. Auch die Browser-interne Suche hat mit Soft-Hyphens Probleme.

  Wenn es darum geht, dass der Text “schön” gesetzt ist und die potentiellen Probleme mit der Browser Suche und Kopieren von Textpassagen aus der Webseite nicht so relevant sind, wäre mein Vorschlag, eine clientseitige JavaScript Lösung wie den Hyphenator zu verwenden (siehe auch Bastians Kommentar). Der berücksichtigt auch sprachabhängige Trennungsregeln.

• 
  

  Sebastian

  am 7. April 2010 um 11:10 Uhr

  PS: Die Trennung serverseitig (bspw. im TinyMCE) durchzuführen und gar in der Datenbank zu speichern halte ich für absolut falsch. Eine Verwendung in anderen Systemen wie bspw. MS Word oder anderen Office Programmen ist dann nicht mehr möglich, die kommen mit dem shy nicht klar und blenden Trennzeichen ein.

• 
  

  MBa

  am 7. April 2010 um 11:11 Uhr

  @Tom:
  Bei mir (opera 10.10) wird am Zeilenende ein Trennzeichen ‘-’ angezeigt. Naja, über die Browserunterstützung wurde ja schon berichtet.

  @Nils:
  Hättest auch auf text-align:justify hinweisen können, dann sollte einige klarer sein.
  http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#text_align

• 
  

  MBa

  am 7. April 2010 um 11:26 Uhr

  Schon wieder ich.

  @Sebastian:
  Das Plugin sollte ja auch den Text zurück ersetzen können.
  Wer Zugriff auf den Tinymce hat, kann dann ja den Text wieder normal machen…. ich mag halt kein Javascript, wenn es auch anders geht.

  Wegen SEO währen ein paar Links hilfreich.
  Habe nur folgendes gefunden: http://www.hjp.at/tests/softhyphensuchmaschinentest1.html
  Dort ist nur die URL selber ‘verdächtig’.

• 
  

  hakre

  am 7. April 2010 um 11:40 Uhr

  Wenn man es nur in der Ausgabe verwendet, dann könnte das Abhänig vom Browser gemacht werden und beim Bearbeiten von Texten würden die ­ Entities nicht stören.

  @MBa: Google findet: http://www.hjp.at/tests/softhyphensuchmaschinentest1.html

• 
  

  Sebastian

  am 7. April 2010 um 11:41 Uhr

  @MBa:

  Wow, die Suchmaschinen Google und Bing scheinen die Softhyphens tatsächlich zu ignorieren! Ich meine, das war damals(tm) soweit ich mich erinnere noch nicht so. Wieder was gelernt, und das schon um 11:40 Uhr!

  Vermutlich bleibe ich aber vorerst bei dem JavaScript basierten Verfahren – zumindest, bis ich eine tragfähige serverseitige Alternative gefunden habe, von der ich sicher sein kann, dass sie keine Probleme macht.

• 
  

  Bastian

  am 7. April 2010 um 11:53 Uhr

  @Tom: Deine Aussage bzgl. “leerzeichen” ist schlichtweg falsch. http://de.wikipedia.org/wiki/Weiches_Trennzeichen

• 
  

  xDest

  am 7. April 2010 um 11:59 Uhr

  Es gibt auch noch den Tag , der aber auch nicht von vielen Browsern unterstützt wird. Ich glaube die neuesten Browser verstehen den aber alle. Man spricht dabei auch vom Weichen Umbruch.

  Allerdings ist die beste Lösung immer noch, seinen Text mit möglichst kurzen Worten zu verfassen und eventuell selbst nochmal am Text zu drehen, bis das im Browser gut aussieht. Das hilft aber auch nicht beim Hauptproblem, nämlich bei Text, den man nicht selbst verfasst (z.B. Kommentare). Da braucht man schon ein ausgesprochen kluges Wörterbuch, das weiche Umbrüche einfügen kann.

  In einem Fall hab ich das mit einem sIFR lösen müssen, weil eine Spezialschrift verwendet werden musste und ich dabei jedes mal berechnet habe, nach welchem Zeichen ein Umbruch erfolgen muss. War ne riesen Plackerei, hat ne Woche Zeit gekostet, aber selbst heute gibt es keine brauchbare Lösung für so ein Problem.

• 
  

  Sven

  am 7. April 2010 um 12:13 Uhr

  Genau das schmale Leerzeichen wird mittels   oder   dargestellt. Wobei ich jedoch nicht weiß wieweit Browser das mittlerweile beherrschen.

• 
  

  Kim

  am 7. April 2010 um 16:45 Uhr

  @Sebastian

  Die Trennung serverseitig durchzuführen heißt ja nicht, dass man es in der DB machen muss. Das wäre in der Tat fatal. Man sollte das auf jeden Fall on the fly machen. Allerdings kann ich mir vorstellen, dass das recht teuer sein kann in Sachen Performance, so dass vielleicht, wenn man es serverseitig machen möchte, die Sache im Website-Cache liegen kann. PDF-File-Generierungen etc. wären dann davon nicht betroffen.

• 
  

  Andreas

  am 8. April 2010 um 09:12 Uhr

  oder wir nehmen das ganze schon fertig als Javascript:

  http://code.google.com/p/hyphenator/

  und lassen das von irgendjemandem in PHP nachprogrammieren.

• 
  

  Tom

  am 8. April 2010 um 11:57 Uhr

  Ich bin weiterhin Sebastian’s Meinung. Das gehört einfach nicht auf die Serverseite.

  Betrachten wir es doch mal genauer: Betroffen sind lediglich Absätze mit text-align: justify. Darin aber auch nur das 1. Wort auf einer neuen Zeile, wenn dies sehr lang ist und die Anzahl der Wörter auf der Zeile davor deutlich geringer als die Anzahl der Wörter der Folgezeile ist. Nur dieser Fall muss überhaupt betrachtet werden. Serverseitig wissen wir vom Layout aber nichts – geschweige welches Wort in welcher Zeile steht. Also blind alles ersetzen was da kommt?

  Schusterjungen und Hurenkinder kann man per CSS regeln. Wortabstände und Buchstabenabstände auch. JavaScript kennt die Eigenschaft clientWidth. Diese kann man in Relation setzen zur Wortlänge und findet ganz leicht die Kandidaten.

  Dann braucht man ein Hyphenation-Pattern. Die kriegt man für TEX leicht von CTAN (50kbyte groß) und über das Projekt APACHE FOP lassen die sich nach XML/XSL portieren. Von da ab ist der Rest kein Voodoo mehr daraus JSON zu machen und eine JS-Funktion zu bauen. Webservice ist keine gute Idee wegen der Latenzzeiten.

  Allerdings: wozu eigentlich überhaupt? Je größer die Bildschirmauflösung umso kleiner das Problem. Mein Desktop schafft fast 2000px in der Breite. Betrifft also nur mobile Endgeräte so richtig. Letztere dürften aber evtl. Probleme haben: sowohl mit dauernd aufgerufenen Webservices als auch mit komplexem JavaScript. Sie sind einfach zu langsam.

  Bleibt also die Printvariante. Doch für PDF-Export gibt’s den FOP und der hat Hyphenation ohnehin bereits eingebaut bzw. leicht nachrüstbar. So: what is it good for?

• 
  

  Sebastian

  am 8. April 2010 um 12:35 Uhr

  @Kim + Tom:

  Ich muss meine Aussage korrigieren, wenn keine Probleme mit Browsern und Suchmaschinen zu erwarten sind könnte die Trennung meiner Meinung nach doch auch serverseitig stattfinden, dort aber erst in der View-Schicht. Die Daten selbst sollten grundsätzlich so medienneutral wie möglich gespeichert werden, damit fällt eine Silbentrennung zur Erstellungs- bzw. Bearbeitungszeit aus.

  @Tom:

  Wozu das ganze lässt sich aus typografischer Sicht schnell beantworten: Weil es besser aussieht! Nicht jedes Textelement nutzt die volle Browserbreite, manchmal gibt es schmale Boxen so dass die Relation Anzahl Wörter pro Zeile sehr klein ist. Auch ohne text-align: justify kann der Absatz dann “ausfransen”. Mit einer Silbentrennung ist das sehr viel schicker.

  Im Printbereich sind die typografischen Anforderungen deutlich höher, TEX, FOP und andere bringen schon von Haus aus ausgefeilte Algorithmen mit. Eine “schöne” Silbentrennung ist ein komplexes Optimierungsproblem, das sich nicht darauf beschränkt, von Anfang bis Ende dürch den Text zu gehen und wenn die Zeile voll ist an der zuletztmöglichen Stelle umzubrechen. Ziel der Silbentrennung ist es ja, dass in einer Zeile der “Leerraum” möglichst gering ist. Deswegen muss der komplette Absatz über mehrere Zeilen berücksichtigt werden. Ich erinnere mich, dass das ein Kapitel einer Vorlesung war, ich finde aber gerade keinen passenden Link.

  Im Web fängt Typografie gerade erst an, mit font-face, SiFR und Co lassen sich endlich mal unterschiedliche Schriftarten einbinden. Solange Browser aber keine Silbentrennung wie oben beschrieben unterstützen und das per JavaScript vermutlich sehr aufwändig wäre können Alternativen genutzt werden. Eine davon ist der schon mehrfach hier erwähnte Hyphenator (http://code.google.com/p/hyphenator/), der setzt die Trennzeichen an allen möglichen stellen, der Browser macht dann nach dem einfachen Schema den Rest. Das Ergebnis ist zumindest besser als nix, kommt aber an Printanforderungen nicht heran.

• 
  

  Mathias Nater

  am 8. April 2010 um 18:40 Uhr

  Hallo

  Dies ist eine interessante Diskussion!
  Ich bin der Mensch, der hinter hyphenator.js (http://code.google.com/p/hyphenator/) steckt und möchte hier ein paar Gedanken anbringen:

  - Silbentrennung steht meiner Meinung nach jeder Website gut; vor allem, wenn sie viel Blocksatz verwendet (wie diese hier). Einfach mal das Hyphenator-Bookmarklet anwenden und sehen was passiert.

  - Die Browser bieten derzeit für JavaScript kein API um die Länge eines einzelnen Wortes zu bestimmen. Die einzige Möglichkeit wäre, jedes einzelne Wort vorübergehend in ein span zu packen, zu messen und wieder entpacken, was alles sehr langsam ist (DOM halt).

  - Ebenso wenig gibt es einen Weg den Zeilenumbruchalgorithmus zu steuern. Wie das optimal gemacht würde steht in einem Aufsatz von Michael F. Plass in ‘Digital Typography’ von Donald E. Knuth. Interessant dazu auch http://ajaxian.com/archives/tex-line-breaking-algorithm-in-javascript

  - Es bleibt also als einzige Möglichkeit an jeder validen Trennstelle ein soft hyphe (shy) einzufügen und es dann dem Browser zu überlassen, was er damit macht. Den Rückmeldungen nach, die ich so bekomme, läuft das Script sehr gut und es gibt nur dann Probleme, wenn gewisse Schriften per CSS eingebunden werden (@font-face) oder wenn Text kopiert wird.

  Grüsse aus der Schweiz,
  Mathias

• 
  

  Tom

  am 9. April 2010 um 02:43 Uhr

  @Sebastian mag sein – ABER ich frage weiter: wozu? Ich bezweifle nicht, dass es vllt. irgendwo eine Anwendung gibt. Jedoch halte ich sie nicht für relevant. Wir haben einfach in der Regel keine Printanforderungen mehr im Web. Über den Stand der Webseite als Textmedium mit ein paar Bildern sind wir längst hinaus.

  Was die meisten Leute inzwischen tun – oder es zumindest versuchen – ist Anwendungen oder Services zu schreiben. Dazwischen gibt es Content: en masse. Und zwar in einer derartigen Masse, dass sich niemand die Mühe macht auch nur einen einzigen Gedanken an ausfransende Texte zu verschwenden. Es gibt täglich mehr neuen Content in jedem erdenklichen Spartenbereich als ein Mensch konsumieren kann.

  Die interessante Aufgabe sehe ich nicht darin, Content besonders hübsch darzustellen oder möglichst viel davon zu produzieren oder zu sammeln. Die interessante Aufgabe ist: aus der Masse an Content, Anwendungen, Services und Mashups den Teil zu filtern, der tatsächlich für dich persönlich relevant ist.

  Wir verschwenden viel zu viel unserer Zeit im Web mit Dingen, die unwichtig sind. Viel zu viele Leute buhlen andauernd mit belanglosem Mist um unsere ungeteilte Aufmerksamkeit. Dabei ist es oft genug so, dass uns die wirklich interessanten Sachen einfach entgehen. Nicht weil sie nicht vorhanden sind, sondern weil wir sie nicht finden können. Man sieht die Fichte im Nadelwald nicht mehr!

  Warum haben wir wohl alle diese Adblocker in unseren Browsern? Uns stört die Werbung doch eigentlich nicht, sondern uns stört ZU VIEL davon. Die Werbung, welche uns tatsächlich interessieren könnte geht in der grauen Masse der Belanglosigkeiten unter. Irgendwo zwischen Hundefutter, Brustvergrößerungen und Kopfschmerztabletten liegt unsere Geduld begraben.

  Mich stören auch die Mailinglisten oder Newsletter nicht. Trotzdem lösche ich inzw. ALLE ungelesen und trage mich wieder aus wo ich kann: es sind einfach zu viele Mails. Der Aufwand den relevanten Teil zu finden ist zu groß. Es lohnt nicht.

  Genau deshalb funktioniert Twitter auch so gut: in 60 Sekunden 100 Meldungen scannen – schnell das finden, was interessant sein könnte. Eigentlich genau das, was RSS eigentlich einmal werden sollte, bevor es in eine andere Nische abgedriftet ist.

  Ich denke dies sind die Themen welche in nächster Zeit interessant sein werden: wie schafft man Mehrwert in einer Welt, in der Content nicht mehr das Problem ist?

RSS Feed für Kommentare zu diesem Artikel. TrackBack URL

Hinterlasse einen Kommentar