Responsiver Umbruch


10.10.2016 von

https://www.iteratec.de/fileadmin/Bilder/News/iteratec_logo.png https://www.iteratec.de/fileadmin/Bilder/News/iteratec_logo.png iteratec GmbH

Responsive Design wird immer hipper. In diesem Kon­text ist mir ein Problem unter­ge­kommen, dessen ele­gan­te Lösung ich hier teilen möchte.

Oftmals wird in einer Web-Applikation Text an­ge­zeigt, der in irgend­einer Weise vom Nutzer ein­ge­geben wird. Als Beispiel können hier längere Be­schrei­bungs­texte oder FAQs dienen. Die Re­dak­teure tippen dazu nur ihren Text ein und wundern sich, warum die Aus­gabe so zer­rissen aus­sieht. Klar, der Browser kennt keine Silben­tren­nung und schiebt immer ganze Worte in die nächste Zeile. Umso schlim­mer ist das im Deutschen mit den un­end­lich langen Monster-Kom­po­si­ta. Denken wir bei­spiels­weise an ein Wort wie „Ge­päck­ver­spätungs­ver­siche­rung“. So etwas geht in einem Banken- oder Ver­siche­rungs­um­feld schon einmal leicht über die Lippen, oder muss un­be­dingt auf die Web-Site.

Die deutsche Sprache – wie viele andere ge­schriebene Sprachen auch – kennt das Konzept der Silben­tren­nung. Text­ver­arbei­tungs­pro­gram­men ist das schon lange be­kannt. Im Web gibt es einige Ansätze, um mit dem Problem umzugehen:

  • Es werden optionale Trenn­stellen von den Re­dak­teuren manuell ein­ge­geben.
    Das habe ich in einem großen deutschen Portal vor vielen Jahren noch gesehen.
  • CSS3 kann Silben­trennung, Das Feature ist aber nicht hin­reichend weit ver­breitet, um sich darauf ver­lassen zu können.
    In der freien Wild­bahn habe ich das bisher noch nicht beobachtet.
  • Server-seitig werden optionale Trenn­stellen auto­ma­tisch ein­ge­fügt.
    So etwas habe ich in Java schon selbst im­ple­men­tiert und in einem anderen Kon­text eine Perl-Bib­lio­thek genutzt.
  • Client-seitig werden optio­nale Trenn­stellen auto­ma­tisch per Java­script ein­ge­fügt.
    Diese Lösung mit Java­script habe ich aus­pro­biert und finde sie ex­trem elegant.

Grund­lage dafür ist Hypher und die zu­ge­hörigen Trenn­muster unter hyphenation-patterns. In meinen Portal-Projekten ist meist JQuery sowieso schon ein­ge­bunden. Damit kann ich die JQuery-An­bindung von Hypher nutzen.
Mit dem folgenden Code-Stück wird die Silben­trennung für die HTML-Tags p, li, em, i, b, dt und dd aktiviert:

$(document).ready(function() {  
    var lang = 'de';  
    $.getScript('/js/jquery.hypher.js')  
    $.getScript('/js/' + lang + '.js',  
        function() { $('p,li,em,i,b,dt,dd').hyphenate(lang); });  
});

Diese paar Zeilen in einer zentralen Java­script-Datei sowie Hypher und Trenn­muster in dem Ordner, der zum URL-Pfad /js ge­hört, ab­ge­legt und schon ist die Silben­trennung (für Deutsch) aktiv.

Die Auswahl der be­troffenen Tags kann man noch er­weitern. Es ist aller­dings meistens eher un­er­wünscht, wenn bei­spiels­weise in Über­schriften die Silben­trennung zu­schlägt. Deshalb sollte man sich das genau an­sehen und aus­probieren, um sich einer opti­ma­len Lösung anzunähern.

Natürlich funktioniert das auch für andere Sprachen. Dazu muss man nur das Sprach­kürzel „de“ im Java­script-Code durch die ge­wünschte Sprache er­setzen; also beispiels­weise durch „en“ für Englisch. Die zu­ge­hörige Trenn­muster-Datei muss dann im Ordner /js bereit­ge­stellt werden. Und dann klappt das auch mit dem Englischen.

Um das Ganze dann noch zu perfek­tio­nieren, können wir auch noch mehr­sprachige Tren­nungen vorsehen. Leider sind die Trenn­muster ab­hängig von der Sprache – und manchmal sogar von Dialekt. So unter­scheidet sich ameri­ka­ni­sches Englisch vom britischen Englisch auch in den Trenn­mustern (und nicht nur in Wort­wahl und Klang­farbe).

Bei mehr­sprachigen Tren­nungen müssen wir alle Trenn­muster, die auf der je­weiligen Seite zur An­wendung kommen sollen, zu Beginn laden. Danach müssen wir uns ein Unter­scheidungs­merk­mal überlegen, das es dem JQuery-Selek­tor erlaubt, zu ent­scheiden, welche Sprache jetzt dran ist. Das kann bei­spiels­weise an Hand eines Attri­buts „lang“ ge­schehen. Damit kommt man dann bei zwei unter­stützten Sprachen zu zwei Aufrufen von hyphenate.

Die Umsetzung und der Einsatz auf Web-Seiten wird dem Leser als Übung überlassen;-) Viel Spaß damit und bessere Ergebnisse für eure respon­siven und nicht-respon­siven Web-App­li­ka­ti­onen. Und das Dank Open-Source-Kom­po­nen­ten sogar ohne lange Be­schaffungs­pro­zes­se und Lizenz­kosten.


Post scriptum

Die Silben­trennung in diesem Blog ist ge­schwin­delt. Es wird CSS3-Tren­nung ein­ge­schaltet. Das liefert aller­dings aktuell mit dem ein­ge­setzten Browser nur recht be­schei­dene Trenn­stellen. Des­halb wurden großzügig zusätzliche Trenn­stellen manuell eingestreut.

Was steckt drin?

Natürlich ist es manch­mal auch inte­ressant zu wissen, was man denn da so be­kommt und wie gut das ist. Im Fall der Silben­trennung gibt es zwei wichtige Ansätze

  • Ein Wörterbuch-basierter An­satz hält im Kern eine große An­zahl von Worten vor, für die eine kor­rekte Tren­nung hinter­legt ist.
  • Ein Muster-basierter An­satz hält eine An­zahl von Mustern aus Buch­staben und Trenn­stellen vor, die be­stimmen, wo Trenn­stellen mög­lich sind und wo nicht.

Ein Wörter­buch mit jeder Seite in den Browser zu schieben, um dort die Tren­nungen vor­zu­nehmen scheint nicht der richtige An­satz zu sein. Deshalb kommt hier auch ein Muster-basierter Ansatz zum Tragen. Dieser geht auf den Arbeiten von Donald Knuth und Frank Liang aus dem Jahr 1977 in Stan­ford zurück, der 1983 in der Dis­ser­ta­tion von Frank Liang mündete.

Das Prinzip dahinter bedient sich der Statis­tik. Es werden immer wenige Buch­staben um eine po­ten­ti­el­le Trenn­stelle be­trachtet und an Hand dieser ent­schieden, ob die Tren­nung an genau dieser Stelle möglich sein soll oder nicht. Dazu wird ein Wörter­buch mit Trenn­stellen heran­ge­zogen und dieses ana­ly­siert. Daraus ergibt sich eine Ge­wichtung für das je­weilige Muster. Diese Muster mit Ge­wich­tungen werden für ein kon­kretes Wort über­lagert um zu be­stim­men, wie wünschens­wert eine je­weilige Tren­nung wäre.

Dieser Ansatz steckt seit 1984 in der Text­satz-Engine TeX und wurde in der Folge von weiteren Type­settern über­nommen. Bis heute gilt er als einer der Ansätze, welcher die besten Er­geb­nisse liefert.

Dadurch dass das Wörter­buch ana­ly­siert wird, er­gibt sich eine kom­pakte Re­prä­sen­ta­tion. Diese kann dann sogar in den Web-Browser ge­laden und damit Client-seitig genutzt werden. Dadurch, dass Muster ge­nutzt werden, können Regel­mäßig­keiten in der Sprache aus­ge­nutzt werden, die in einem ex­pli­zi­ten Wörter­buch nicht vor­han­den sein mögen.


Dieser Blog-Artikel steht under der Lizenz CC-BY-SA 4.0.

Diesen Artikel bewerten
 
 
 
 
 
 
 
1 Bewertungen (100 %)
Bewerten
 
 
 
 
 
 
1
5
5
 

Artikel im Warenkorb:

0