2012-09-11 16:43

Accesskey n springt zur Seitennavigation. Springe zum Inhalt.

Dieses Dokument ist eine Übersetzung. Im Falle von Abweichungen oder Fehlern sollte das aktuelle englische Original als maßgeblich angenommen werden. Das W3C besitzt das Copyright am Original, wie unten beschrieben.

Übersetzer: Carolin Winterholler, Copypanthers

s_gotoW3cHome Internationalisierung
 

Hintergrundbilder, die die Lokalisierung eines Dokumentes erleichtern

Zielgruppe: CSS, XHTML/HTML Programmierer (die einen Editor oder Skript zum Programmieren benutzen) und jeder, der vor hat, Hintergrundbilder mit einem Text zu verbinden, der in Spalten mit fester Breite eingepasst wurde.

Frage

Wie kann ich sicherstellen, dass ein übersetzter Text auch nach einer Längenänderung noch in das Hintergrundbild passt?

Hintergrund

Es ist sehr wahrscheinlich, dass sich die Größe eines Textes nach der Übersetzung ändert. Hintergrundinformationen dazu siehe "Textlängen und Übersetzungen".

Das bedeutet, dass jedes Hintergrundbild, welches im Vorfeld sorgfältig angepasst wurde, um hinter den Quelltext zu passen, nun zu groß oder zu klein sein könnte. Dieser Artikel befasst sich mit der Lösung diese Problems.

WICHTIG! Die Beispiele, die für diesen Text ausgewählt wurden, zeigen, wie man Grafiken benutzt, um runde Ecken und einen Gradient-Effekt hervorzurufen. Diese Effekte können heutzutage auch mit einem einfachen CSS-Code erzeugt werden und es ist nicht mehr nötig, Grafiken herunterzuladen. Zu der Zeit jedoch, als das Update für diesen Artikel erstellt wurde, wurden die nötigen CSS-Eigenschaften noch nicht von allen Internetbrowsern unterstützt und selbst wenn, dann nur von der neuesten Version. Außerdem werden oft Grafiken benutzt, um ansprechendere Effekte zu erzielen. Nichtsdestotrotz wurde der aktualisierte Artikel, unter der Annahme, dass der Browser die nötigen Eigenschaften unterstützt, mit Verweisen auf Seiten ausgestattet, deren Quelltexte zeigen, wie man CSS statt Grafiken für diese bestimmten Beispiele verwenden kann.

Das Problem

Das erste Beispiel ist einfach gehalten. Wir nehmen an, dass wir eine Box mit festgelegter Breite in unsere Seite einfügen wollen. Der Text kann sich in der Länge, aber nicht in der Breite ausdehen.

Wir nehmen an, dass wir einen Hintergrund mit einem schönen Verlauf hinter dem Titel der Box einfügen möchten. Außerdem hätten wir gerne einen Strich zwischen Titel und Text und abgerundete Ecken. Um diese Effekte zu erzielen, werden oft Hintergrundbilder hinter den Titel gelegt.

Ein Dialogfenster in Spanisch

Diese Box mit einer festen Breite ist in spanischer Sprache und hat den Titel "Interface Language". Außerdem hat sie eine Reihe mit Radio-Buttons, um Sprachen auszuwählen. Die folgende Grafik wird benutzt, um den Verlaufseffekt hinter dem Titel zu generieren:

Die Hintergrund-Grafik

Unser CSS-Code würde dann so aussehen:

div.box h3 {
    margin: 0;
    padding: 6px 8px 4px 10px;
    font-size: 130%;
    color: #333;
    background: url(img/h3-bg.gif) no-repeat top left;
    }

Ein Problem tritt auf, wenn wir das Dialogfenster in eine Sprache wie Malaiisch übersetzen. Der Text erstreckt sich dann über zwei Zeilen. Die Grafik, die wir für den Verlauf benutzt haben, umfasst aber nur eine Zeile und ist somit kleiner als der Text - damit fängt das Durcheinander an.

Das gleich Dialogfenster in Malaiisch. Der Hintergrund stimmt nicht mit dem Titel überein.

Das gleiche Problem tritt auch bei Texten auf, die sich in die der Breite erweitern. In diesem Beispiel sehen wir einen chinesischen Text auf Registrierkarten. Hinter jeder Registrierkarte wurde eine Hintergrundgrafik eingefügt.

Bild mit Registrierkarten mit chinesischen Schriftzeichen

Wenn Bilder für Tabs benutzt werden, müssen sie bei jeder Übersetzung neu angepasst werden - das kostet Zeit. Das ist so, weil sich die einzelnen Überschriften, je nach Sprache, in der Länge unterscheiden. Manchmal wird auch nur ein einziges Hintergrundbild für den graphischen Teil der Registrierkarte benutzt. Auch diese müsste bei jeder Übersetzung angepasst werden, sonst würde die Registrierkarte so aussehen:

Registrierkarten mit portugiesischem Text. Der Text ist nun zu lange für die Registrierkarten, da diese auf chinesische Schriftzeichen ausgerichtet waren.

Natürlich sind das nur Beispiele. Diese Probleme treten natürlich nicht nur bei Boxen und Tabs auf, sondern überall, wo ein Text und ein Hintergrundbild kombiniert werden.

Antwort

Dieses Problem kann vermieden werden, indem man sicherstellt, dass sich die Hintergrund- Grafik automatisch an die Länge des verknüpften Textes anpasst.

Im Folgenden werden wir kurz ein paar Lösungen aufzeigen, die bei diesem Problem helfen können. Es folgt die Darstellungen von möglichen Herangehensweisen. Weitergehende Informationen finden Sie im zitierten Originaltext. Wir werden das erste Beispiel etwas ausführlicher erklären, um den grundsätzlichen Gedankengang klarzumachen. Es gibt auch andere Herangehensweisen, um das Problem zu lösen. Das Ziel ist jedoch herauszufinden, wie man dem Text die nötige Flexibilität gibt, um sich in seiner Länge und Breite verändern zu können.

Wichtig zu beachten ist, dass die beschriebenen Lösungswege nur in Verbindung mit normgerechter Programmierung funktionieren. Sie wurden entwickelt, um die Zugriffszahlen auf Webseiten zu erhöhen. Der Hinweis ist deshalb wichtig, weil gerade minderwertige Internetseiten in vielen Fällen versuchen, die Menge des auf ihr dargestellten Textes zu vergrößern. Die unten erklärte Herangehensweise funktioniert auch bei Lokalisierungsproblemen.

Titel in Boxen mit festgelegter Breite

Dieser Lösungsweg beschäftigt sich mit der einer variablen Texthöhe. Eine Herangehensweise ist, eine Grafik zu benutzen, die drei oder vier Zeilen länger ist, als der Titel. Diese Technik wird in dem Buch Bulletproof Web Desing von Dan Cederholm beschrieben.

Eine großere Version der Hintergrund-Grafik.

Wenn man eine Grafik in das Dokument einfügt und dabei mit der CSS-Background-Property arbeitet, wird nur der Teil der Grafik gezeigt, der auch der Länge des Titels entspricht.

Wichtig, die Grafik hat jetzt keine durchgehende Linie mehr unter dem Titel. Wir können diese Linie aber mit dem folgenden Code hinzufügen:

div.box h3 {
    margin: 0;
    padding: 6px 8px 4px 10px;
    font-size: 130%;
    color: #333;
    background: url(img/h3-bg.gif) no-repeat top left;
    border-bottom: 1px solid #E0CFAB;
   }

Dieser Code sorgt für den gewünschten Effekt in der übersetzten Version

Die Box in malaiischer Sprache. Jetzt sieht sie gut aus.

Natürlich muss für den unteren Teil der Box die gleiche Technik benutzt werden, da sich dieser Text ebenfalls in seiner Länge verändern kann.

Hier ein Beispiel, wie man diese Technik mit CSS umsetzt. Für Browser, die die notwendigen CSS-Eigenschaften unterstützen.

Registrierkarten

Diese Technik baut auf dem eben gezeigten einfachen Lösungsansatz auf. Sie zeigt, wie man mehrere grafische Flächen in einer Box zusammenfassen kann, obwohl sich deren Inhalt in der Breite ausdehnen wird. Diese Technik basiert auf dem Artikel "The Sliding Doors in CSS" von Doug Bowman. Die Grundidee ist die gleiche, wie im vorherigen Abschnitt, wenn auch etwas schwieriger zu programmieren. Jedes Tab hat zwei Hintergrundgraphiken:

Ein Hintergrundbild für die linke Seite des Tabs. und Ein Hintergrundbild für die rechte Seite des Tabs..

Die zwei Grafiken sind zwei Hintergrundbilder mit überlappenden Elementen. Nur die Teile der Grafiken, die als als Hintergund des Textes dienen, sind sichtbar. Das Resultat sieht aus, wie ein einzelner Hintergrund. (Im Artikel werden zusätzliche Codes für diese Tabelle, sowie die Linie am Ende der Registrierkarte im anderen Beispieles beschrieben.)

Die folgende Registrierkarte in chinesischer und italienischer Sprache wurden mit dem selben Code programmiert. Einzig der Text auf den Labels wurde geändert. Die Labels passen sich an den Text an, egal ob der ab- oder zunimmt.

Die gezeigten Beispiele wurden an die Seite angepasst - und sind somit keine Grafiken. Ihr Verhalten beim Vergrößern bzw. Verkleinern kann getestet werden, wenn man die Größe des Textes in Firefox verändert.

Wichtig zu beachten ist, dass wir an der rechten Seite der Registrierkarte etwas Platz gelassen haben. Es ist ratsam das zu tun. Sollte seitlich nicht genügend Platz vorhanden sein, ist es wichtig nach unten Platz zu schaffen. Die Wörter können so in die nächste Zeile ausweichen und die Spalte wird sich nach unten hin vergrößern.

Siehe dazu: ein Beispiel, wie man diese Technik mit CSS umstetzt. Für Browser, die die nötigen CSS-Eigenschaften unterstützen.

Boxen

Dieses Beispiel befasst sich mit Boxen, deren Größe sich in nach unten und zur Seite hin verändern können. Dazu beschreiben wir die Abwandlung einer Technik aus Dan Cederholm´s Buch: Bulletproof Web Desing, welche sich des "Sliding Doors"-Lösungsansatzes bedient.

Der XHTML-Quellcode für jeden Kasten ist gleich, lediglich der Text ist anders. Das gleiche gilt auch für denn CSS-Code.

Die Eigenschaft max-width wurde benutzt, um sicherzustellen, dass die Box in keinem Fall größer als 250 Pixel wird. Sie kann aber kleiner sein und (wie im japanischen Beispiel, dort entspricht die Schriftgröße der Standarteinstellung) die Grafiken, für die Linien und die abgerundeten Ecken, sind immer noch an der richtigen Stelle.

Der Code, der für XHTML und CSS benutzt wurde, kann dem Quelltext dieser Seite entnommen werden.

Ein mögliches Problem besteht aber weiterhin, wenn ein einziges Wort länger ist, als die Einstellung max-width und über den Rand der Box hinausragt. Mit der Standarteinstellung für die Schriftgröße auf dieser Seite, wird zum Beispiel das Wort für Internationalisierung (интернационализации) wahrscheinlich nicht in den Kasten mit der Einstellung max-width eingestellt auf 100px passen. In diesem Fall kann man zwei Dinge tun:

Siehe dazu: Ein Beispiel, wie man diese Technik in CSS umstetzt. Für Browser, die die nötigen CSS-Eigenschaften unterstützen.

Sagen Sie uns, was Sie denken (auf Englisch).

Abonnieren Sie unseren RSS-Feed.

Neue Ressourcen

News auf der Startseite

Twitter (News auf der Startseite)

‎@webi18n

Literaturhinweise

Autor: Richard Ishida, W3C. Übersetzer: Carolin Winterholler, Copypanthers.

Valides XHTML 1.0!
Valides CSS!
Kodiert in UTF-8!

Übersetzung der englischen Version vom 2012-09-16. Letzte Änderung der übersetzten Version am 2012-10-09 18:00 UTC.

Suchen Sie nach qa-resizing-backgrounds im i18n-Blog, um alle Dokumentänderungen nachzuvollziehen.