QVINTVS SCRIBET

CSS-Silbentrennung in Kombination mit Rails

Ruby de HTML & CSS

05/07/2012 Beim Lesen von diversen Blogeinträgen bin ich plötzlich über einen gestolpert, der einen sehr angenehmen Blocksatz mit Silbentrennung verwendet hat. Dank CSS3 ist es also endlich möglich, Silbentrennung vernünftig zu realisieren.

Das war eines der Dinge, die mich als typographisch interessierten Menschen am Webdesign immer unheimlich gestört haben: Websites haben keine Silbentrennung. Der Grund war einfach: Die Breite des Textes ist im Vorhinein nicht bekannt und kann dynamisch verändert werden. Erst der Browser weiß, wie breit ein Textelement wirklich ist. Umso mehr verwundert, dass CSS keine Eigenschaft zur Aktivierung von automatischer Silbentrennung durch den Browser zur Verfügung stellte — das ist jetzt Geschichte.

Man nehme ein kleines Beispieldokument (der Text stammt aus dem heutigen Tagesartikel der Wikipedia):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

<!DOCTYPE html>
<html>
  <head>
    <title>Testseite</title>
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  </head>
  <body lang="de">
    <h1>Das ist ein Test</h1>

    <p>Bereits in den letzten Kriegsjahren entwickelten
      Bristol-Ingenieure zwei unterschiedliche Prototypen, von denen der
      zweite – der Typ 2EX – 1946 nahezu Serienreife erreichte. Diese
      sehr aufwendigen Projekte fanden ihr Ende, als Bristol im Laufe
      des Jahres 1945 die Anteilsmehrheit an dem britischen
      Sportwagenhersteller Frazer Nash übernahm. Frazer Nash hatte seit
      1934 einzelne BMW-Modelle wie den 320 und den 326 in
      Großbritannien als Frazer-Nash-BMW vermarktet. Unmittelbar nach
      Kriegsende übernahm Frazer Nash „eine große Menge“ an
      Konstruktionszeichnungen für die BMW-Modelle 326, 327 und 328. Im
      Herbst desselben Jahres gelang es Harold John „H. J.“ Aldington,
      dem Inhaber von Frazer Nash, zudem, den in britischer
      Kriegsgefangenschaft befindlichen BMW-Ingenieur Fritz Fiedler für
      eine Zusammenarbeit mit seinem Unternehmen zu gewinnen. Unter
      welchen konkreten Umständen die Übernahme der Konstruktionspläne
      erfolgte – etwa im Rahmen von Reparationsleistungen  oder gegen
      Erbringung finanzieller Gegenleistungen durch Frazer Nash  –,
      ist bis heute nicht geklärt.</p>

    <p>Angesichts der neuen Beziehung zu Frazer Nash stellte Bristol im
      Juni 1945 die Entwicklung eines eigenen Autos ein und konzentrierte
      sich auf die Übernahme und die Anpassung der BMW-Konstruktionen.
      Diese Entscheidung ermöglichte den schnellen und kostengünstigen
      Aufbau der eigenen Automobilsparte, führte andererseits aber dazu,
      dass Bristol statt einer Neuentwicklung künftig eine
      Vorkriegskonstruktion verwenden würde.</p>

    <p>Anfänglich war geplant, ein in größerer Serie hergestelltes
      Tourenwagenmodell unter der Bezeichnung „Frazer-Nash-Bristol“
      anzubieten, während Frazer Nash einen davon abgeleiteten Sportwagen
      unter dem eigenen Markennamen, d. h. ohne den Zusatz Bristol,
      verkaufen sollte. Im April 1947 allerdings trennten sich Bristol
      und Frazer Nash. Bristol setzte den Bau des nun „Bristol 400“
      genannten Autos in eigener Verantwortung fort; Frazer Nash hingegen
      baute eigenständige Sportwagen, die zumeist Motoren von Bristol
      verwendeten.</p>
  </body>
</html>

Dabei zu bachten ist, dass die Angabe des lang-Attributes im body-Tag zwingend ist, da der Browser sonst nicht weiß, welche Trennmuster er anwenden soll (deutsche Texte mit englischer Silbentrennung etwa sind ein prima Auslöser für Augenkrebs).

Und nun das dazugehörige Stylesheet style.css. Silbentrennung wird im Firefox momentan nur über das Browser-Präfix -moz unterstützt, aber funktioniert tadellos:

1
2
3
4

p {
    text-align: justify;
    -moz-hyphens: auto;
}

Einfach mal anschauen. Ich kann gar nicht sagen, wie wunderbar das ist. Ein Meilenstein für die Typographie am Computer!

Andere Browser?

…können das natürlich auch. (Quelle)

1
2
3
4
5
6

body {
 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 -ms-hyphens: auto;
 hyphens: auto; /* Name laut CSS3-Standard. Ist aber noch nirgendwo umgesetzt. */
}

Die offizielle Standardisierung gibt es beim World Wide Web Consortium.

Rails/I18n

Als kleines Extra-Schmankerl hier noch ein kurzer Hinweis, wie man das ganze mit Rails bzw. I18n, der Lokalisierungskomponente kombiniert. Der aktuelle Locale in Form des zweibuchstabigen ISO-Ländercodes, den auch das lang-Attribut erwartet, ist nämlich sehr einfach mithilfe von I18n.locale verfügbar. Es genügt also, in eure Layout-Datei(en) diese (oder eine angepasste, falls ihr nicht ERB verwendet) Zeile einzufügen:

1
2
3
4

<!-- ... Markup ... -->
  <body lang="<%= I18n.locale %>">
    <!-- ... Markup ... -->
  </body>

Sobald ich einen Moment Zeit finde, werde ich das auf meiner Website hier ebenfalls einsetzen.

Comments 

Comment

(Required)

(Required, used for your Gravatar image)

(Optional)

(Obviously required)

The text you enter is interpreted as Textile. If you want syntax highlighting via CodeRay:

bc. [ruby] puts "Hello!"
puts "World!"

Anti-Spam-Question

This is to prevent spambots from spamming my blog with their useless spamposts that are just SPAM!

What’s the toplevel domain (TLD) for Japan?