Instructions relatives à la présentation HTML pour la globalisation des pages Web ASP.NET
Mise à jour : novembre 2007
Pour obtenir la meilleure présentation HTML possible, il convient de s'assurer que les localisateurs n'ont qu'à traduire les chaînes, puisque l'interface utilisateur adapte la taille des contrôles au texte contenu dans les chaînes. Cela constitue un avantage car l'étape consistant à redimensionner des contrôles manuellement est supprimée du processus de localisation, supprimant de cette façon les erreurs et bogues qui peuvent être générés. Toutefois, la disposition des contrôles varie selon la longueur des chaînes ; les sites Web localisés doivent donc être testés attentivement.
La liste suivante fournit les indications recommandées pour concevoir des pages Web ASP.NET pour la globalisation.
Évitez d'utiliser des positions absolues.
La spécification de positions absolues empêche les éléments d'être automatiquement positionnés et dimensionnés. L'exemple de code suivant illustre ce qu'il ne faut pas faire.
<!-- Do not do this. --> <div id = idFindWhatLabel style = "position: absolute; left: 0.98em; top: 1.2168em; width: 4.8em; height: 1.2168em;">Utilisez la largeur et la hauteur disponibles pour les formulaires.
Pour ce faire, les deux possibilités suivantes s'offrent à vous :
Dimensionner les principaux éléments, tels que les tableaux, à une largeur égale à 100 pour cent.
Par exemple :
<!-- A table sized to take up entire width of the form.--> <table width=100%>Dimensionner les éléments à l'aide d'expressions de feuille de style en cascade, en fonction de la taille globale du formulaire.
Par exemple :
<!-- 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); '>
Utilisez une cellule de tableau séparée pour chaque contrôle.
Ceci permet un retour à la ligne automatique et indépendant du texte et garantit un alignement correct des cultures dans lesquelles le texte s'écrit de droite à gauche.
Autorisez le retour automatique du texte à la ligne et évitez d'utiliser l'attribut nowrap pour les cellules du tableau qui contiennent du texte.
N'utilisez cet attribut nowrap que lorsque vous souhaitez que le texte reste sur une ligne et lorsque l'espace est suffisant pour l'affichage du texte, quelle que soit la langue.
Séparez les cases à cocher et les cases d'options du texte de leur étiquette.
Placez les étiquettes des cases à cocher et des cases d'options dans des cellules différentes de celles des contrôles. Ceci permet un retour automatique du texte à la ligne correct lorsque le texte s'allonge. Toutefois, vous devez toujours créer le formulaire de sorte que le texte puisse tenir sur une ligne, une fois traduit.
Laissez de la place et évitez les largeurs fixes.
Le texte peut occuper plus d'espace lors de sa traduction vers d'autres langues. Il est recommandé de laisser de la place pour une expansion de 300 pour cent sur les chaînes courtes (moins de 10 caractères), de 200 pour cent sur les chaînes moyennes (10 à 20 caractères) et de 100 pour cent sur les chaînes longues (plus de 20 caractères).
Vous pouvez affecter à la largeur de la cellule du tableau un pourcentage de la largeur du formulaire, de façon à ce que la cellule s'étende en fonction de tout le tableau. Toutefois, essayez de spécifier le moins de tailles relatives (autres que 100 pour cent) possible, de sorte que le moteur de présentation HTML effectue automatiquement la majeure partie du travail.
<!-- The table cell is sized to take up one quarter of the width of the table. --> <td width=25%>Limitez le nombre d'emplacements de boutons à dimensionner.
Il arrive fréquemment que plusieurs boutons doivent avoir la même taille au sein d'un ensemble. Définissez cette taille à un emplacement pour l'ensemble des boutons, si possible. Laissez de la place pour l'expansion du texte dans les zones de listes et dans les zones de groupes.
Définissez la hauteur aussi peu souvent que possible.
Ne définissez pas la hauteur des cellules ou des contrôles de tableau contenant du texte. (Vous pouvez définir la hauteur de ligne des éléments de feuille de style en cascade.) Sinon, l'apparence de la page est modifiée si l'utilisateur définit la taille du texte dans le navigateur.
N'utilisez pas l'alignement à gauche ou à droite dans les balises HTML.
En général, évitez les paramètres align="left" ou align="right" pour les cellules de tableau. Ces paramètres peuvent interférer avec la disposition des formulaires pour les cultures dans lesquelles le texte s'écrit de droite à gauche.
Évitez les valeurs de feuille de style en cascade inline qui peuvent avoir besoin d'être modifiées.
Conservez toutes les valeurs de feuille de style en cascade que les localisateurs pourraient avoir besoin de modifier dans les feuilles de style, plutôt qu'en utilisant la méthode inline. Ceci comprend le paramétrage de la police pour une page.