HTML-Layoutrichtlinien für die Globalisierung von ASP.NET-Webseiten
Aktualisiert: November 2007
Die empfohlene Vorgehensweise für HTML-Layout besteht darin, dass Lokalisierer nur Zeichenfolgen übersetzen müssen, da die Benutzeroberfläche alle Steuerelemente an die Textgröße der Zeichenfolgen anpasst. Dies ist ein Vorteil, da der Schritt der manuellen Größenanpassung der Steuerelemente aus dem Lokalisierungsprozess entfällt. Mögliche Fehler und Probleme werden vermieden. Das Layout der Steuerelemente ändert sich jedoch je nach Zeichenfolgenlänge. Daher müssen lokalisierte Websites sorgfältig überprüft werden.
Die folgende Liste enthält empfohlene Richtlinien zum Entwerfen von ASP.NET-Webseiten mit dem Ziel der Globalisierung.
Verwenden Sie keine absoluten Positionen.
Durch das Festlegen absoluter Positionen wird verhindert, dass Elemente automatisch positioniert und in der Größe verändert werden. Im folgenden Codebeispiel wird veranschaulicht, wie Sie nicht vorgehen sollten.
<!-- Do not do this. --> <div id = idFindWhatLabel style = "position: absolute; left: 0.98em; top: 1.2168em; width: 4.8em; height: 1.2168em;">Verwenden Sie die verfügbare Breite und Höhe für Formulare.
Hierzu bestehen zwei Möglichkeiten:
Passen Sie die Größe der wichtigen Elemente, z. B. Tabellen, auf eine Breite an, die 100 Prozent entspricht.
Beispiel:
<!-- A table sized to take up entire width of the form.--> <table width=100%>Passen Sie die Größe von Elementen mithilfe von Cascading Stylesheet-Ausdrücken basierend auf der Gesamtgröße des Formulars an.
Beispiel:
<!-- A div element sized to take up half the width and height of the form. --> <div style=' height: expression(document.body.clientHeight / 2); width: expression(document.body.clientWidth / 2); '>
Verwenden Sie eine eigene Tabellenzelle für jedes Steuerelement.
Dadurch kann Text unabhängig umbrochen und in Kulturen, für die die Schreibrichtung von rechts nach links gilt, korrekt ausgerichtet werden.
Lassen Sie Textumbruch zu, und verwenden Sie für Tabellenzellen mit Text das nowrap-Attribut nicht.
Verwenden Sie das nowrap-Attribut nur, wenn der Text in einer Zeile stehen soll und für Text in einer beliebigen Sprache genügend Platz zur Verfügung steht.
Trennen Sie Kontrollkästchen und Optionsfelder von ihrem Bezeichnungstext.
Tragen Sie die Bezeichnungen für Kontrollkästchen und Optionsfelder nicht in denselben Zellen wie die Steuerelemente, sondern in separate Zellen ein. Dadurch kann längerer Text korrekt umbrochen werden. Allerdings sollten Sie das Formular trotzdem so entwerfen, dass auch der übersetzte Text nach Möglichkeit in eine Zeile passt.
Lassen Sie Platz für längeren Text, und vermeiden Sie feste Breitenangaben.
Bei der Übersetzung in andere Sprachen wird Text möglicherweise länger. Als Faustregel gilt: Lassen Sie Platz für eine Verlängerung um 300 % bei kurzen Zeichenfolgen (weniger als 10 Zeichen), 200 % bei mittleren Zeichenfolgen (10–20 Zeichen) und 100 % bei langen Zeichenfolgen (mehr als 20 Zeichen).
Eine geeignete Lösung besteht darin, die Breite der Tabellenzellen auf einen Prozentsatz der Formularbreite festzulegen, sodass sie in Relation zur Gesamttabelle erweitert werden kann. Dennoch sollten Sie so wenig relative Größen wie möglich angeben (abgesehen von 100 %), damit die HTML-Layoutengine den Großteil der Arbeit übernimmt.
<!-- The table cell is sized to take up one quarter of the width of the table. --> <td width=25%>Legen Sie die Größe von Schaltflächen an so wenigen Stellen wie möglich fest.
Häufig soll eine Reihe von Schaltflächen gleich groß sein. Legen Sie diese Größe nach Möglichkeit an einer Stelle für die gesamte Schaltflächengruppe fest. Lassen Sie genug Platz für Textverlängerungen in Listenfeldern und Gruppenfeldern.
Legen Sie die Höhe möglichst selten fest.
Legen Sie bei Tabellenzellen oder Steuerelementen, die Text enthalten, die Zellhöhe nicht fest. (Sie können die Zeilenhöhe für Cascading Stylesheet-Elemente festlegen.) Andernfalls ändert sich die Darstellung der Seite, wenn der Benutzer die Textgröße im Browser festlegt.
Nehmen Sie in HTML-Tags keine links- oder rechtsbündige Ausrichtung vor.
Verwenden Sie die Einstellungen align="left" oder align="right" in Tabellenzellen generell nicht. Diese Einstellungen können bei kulturspezifischen Formularen mit Text mit der Schreibrichtung von rechts nach links mit dem Layout in Konflikt geraten.
Vermeiden Sie Inline-Cascading Stylesheet-Werte, die möglicherweise geändert werden müssen.
Legen Sie alle Cascading Stylesheet-Werte, die bei der Lokalisierung möglicherweise geändert werden müssen, nicht inline ab, sondern in Stylesheets. Dazu gehört auch die Schrifteinstellung für eine Seite.