you're reading...
Internationalisierung

CSS für internationale Webseiten

Cascading style sheets (CSS) sind ein Mittel um für einzelne HTML Elemente Layout und andere grafische Eigenschaften festzulegen. Dabei können sogenannte „Styles“ im einzelnen Dokument festgelegt werden oder aber in einer eigenen CSS Datei ausgelagert werden. Wenn das Design der Webseiten entsprechend geplant wird, können so durch den einfach Austausch der Styles das sogenannte Look and Feel einer Web Site ausgetauscht werden.

Auch für die Internationalisierung von Webseiten kann CSS verwendet werden: zum Beispiel kann durch das Attribut direction die Schreibrichtung der Elemente geändert werden. Zum Beispiel kann das Attribut verwendet werden, um Webseiten in Arabsich oder Hebräisch zu gestalten.

<html>
<head>
<title>Internationales Layout</title>
</head>
<body style="direction:rtl">
<h1>Hello World!</h1>
<p>Hier kommt dann der übersetzte Inhalt ...</p>
</body>
</html>

So kehrt sich die Scheibrichtung um und zwar von rechts nach links. Wenn Sie das Beispiel mit den deutschen Texten oben testen, werden Sie einige Unstimmigkeiten bemerken: Mit dem Style Attribut wird zwar prinzipiell die Schreibrichtung von rechts nach links umgekehrt, aber das gilt nur für das Layout der Elemente. Texte oder Zahlen in Englisch, Deutsch oder anderen Sprachen, die von links nach rechts geschrieben werden, bleiben in ihrer Schreibrichtung als Block erhalten und werden so in den Fluss integriert. Satzzeichen wie ! und . werden hingegen anderes interpretiert und werden so von rechts nach links positioniert.

Sprachen wie Arabisch und Hebräisch sind bidirektional: prinzipiell wird der Text von rechts nach links ausgerichtet. Aber die Sprachen verwenden oft lateinische Ziffern, Datumsangaben oder fremdsprachige Textblöcke und diese werden als Block von links nach rechts ausgerichtet. Das heisst die Leserichtung startet zwar von rechts, wechselt aber beim weiteren Lesen öfters die Richtung!
Demnächst beschreibe ich weitere Tricks und Tips bei der Verwendung von CSS für die Internationalisierung im Web Design.

Advertisements

Diskussionen

Es gibt noch keine Kommentare.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

Brian Heumann