Chaînes vietnamiennes : longueur, hauteur de ligne et mise en page

💡 Les chaînes d'interface en vietnamien sont 10-20 % plus longues qu'en anglais, les diacritiques de tons s'empilent et augmentent la hauteur de ligne, le retour à la ligne suit les syllabes plutôt que les mots. UTF-8, le formatage CLDR pour les nombres et dates, et des conteneurs flexibles résolvent la plupart des problèmes de mise en page avant le premier test linguistique natif.

Pourquoi les chaînes vietnamiennes sont-elles plus longues que l'anglais ?

Le vietnamien est une langue isolante et tonale où chaque syllabe porte à la fois un sens et un ton. "Paramètres du compte" devient "cài đặt tài khoản" en vietnamien - quatre syllabes, chacune portant au moins un diacritique, avec environ 30 % de caractères en plus. Cette expansion n'est pas uniforme : les mots courts comme "Lưu" (Enregistrer) ou "Hủy" (Annuler) restent compacts, tandis que les syntagmes descriptifs s'étendent le plus.

Pour les équipes françaises, la tentation est de supposer que le latin implique des longueurs similaires. Ce n'est pas le cas : le vietnamien est souvent 10-15 % plus long que le français également. Construisez vos conteneurs avec min-width et un padding horizontal, jamais avec une largeur fixe. Testez vos 10-20 étiquettes les plus longues en vietnamien à toutes les tailles d'écran avant le début de la révision de traduction.

L'empilement des diacritiques : hauteur de ligne et espace vertical

Le vietnamien étend l'alphabet latin avec deux couches de modificateurs sur les voyelles : un modificateur de forme de voyelle (accent circonflexe, brève, crochet) et un signe de ton (grave, aigu, crochet en haut, tilde, point en dessous). Le caractère "ộ" porte à la fois un accent circonflexe au-dessus et un point en dessous, le rendant plus haut et plus profond que n'importe quelle lettre latine. Cette double superposition affecte les jambages ascendants et descendants ainsi que le rythme vertical.

Une valeur line-height: 1.2 par défaut, courante dans les resets CSS anglais, coupe le sommet des marques ascendantes et le bas des signes de ton descendants en vietnamien. Réglez line-height: 1.5 comme référence pour le vietnamien. Pour les champs de saisie, ajoutez des padding-top et padding-bottom supplémentaires pour éviter le découpage. Testez le rendu dans Safari (CoreText) et Android WebView, qui gèrent différemment les diacritiques.

Retour à la ligne par syllabe : ce que cela implique pour votre CSS

Le français fait des retours à la ligne aux frontières des mots. Le vietnamien utilise aussi des espaces, mais ceux-ci séparent les syllabes individuelles, pas les mots complets. L'expression "máy tính bảng" (tablette) se compose de trois tokens séparés par des espaces - l'un ou l'autre de ces espaces est un point de coupure valide. Le W3C classe le vietnamien comme une langue à retour à la ligne basé sur les syllabes, distincte du français basé sur les mots.

Pour la plupart des chaînes d'interface, c'est une bonne nouvelle : le CSS par défaut gère correctement le retour à la ligne sans règles supplémentaires. Les risques spécifiques : (1) l'application de word-break: keep-all prévu pour les textes CJK bloque tous les sauts et provoque un dépassement ; (2) des conteneurs trop étroits provoquent des coupures maladroites sur des termes de deux syllabes ; (3) la troncature par points de suspension qui sépare un signe diacritique de sa voyelle de base produit des fragments illisibles.

Quels composants d'interface se brisent en premier ?

Certains composants échouent presque immédiatement lors de l'application de chaînes vietnamiennes sans test préalable :

• Boutons à largeur fixe : remplacez width: 120px par min-width: 120px avec padding horizontal.
• Barres d'onglets mobiles : une navigation à quatre onglets avec des étiquettes comme "Thông báo", "Cài đặt", "Hồ sơ" déborde à 375px. Raccourcissez les libellés, utilisez icône+texte, ou autorisez le défilement horizontal.
• Fils d'Ariane et info-bulles : la troncature par points de suspension peut séparer un signe de ton de sa voyelle de base, créant des fragments illisibles. Augmentez la limite de caractères ou autorisez deux lignes.
• Espaces réservés des champs de saisie : le texte d'espace réservé en vietnamien tient rarement dans le même espace qu'en français. Utilisez text-overflow: ellipsis ou raccourcissez le texte.
• Bannières de notification : les bannières d'une ligne qui fonctionnent en français nécessitent souvent deux lignes en vietnamien. Autorisez une hauteur dynamique ou définissez un nombre maximum de lignes.

En quoi les formats de nombres, dates et devises vietnamiens diffèrent-ils ?

Les données de locale vi dans Unicode CLDR définissent une convention différente de l'anglais américain - et aussi du français standard. Le séparateur de milliers est un point (.) et le séparateur décimal est une virgule (,). Un million de dongs s'écrit "1.000.000 ₫", pas "1.000.000,00" au format français. Les dates suivent l'ordre jour/mois/année : "30/09/2026".

• JavaScript : new Intl.NumberFormat('vi-VN', { style: 'currency', currency: 'VND' }).format(1000000)
• Android : NumberFormat.getCurrencyInstance(new Locale("vi", "VN"))
• Swift/iOS : NumberFormatter avec locale = Locale(identifier: "vi_VN")

N'utilisez jamais un formatage codé en dur pour les utilisateurs vietnamiens. Un écran de paiement affichant "500 000 VND" (style français avec espace insécable) paraît étrange aux lecteurs vietnamiens qui s'attendent à "500.000 ₫".

Ce que vous pouvez gérer en interne et quand un spécialiste vietnamien vaut l'investissement

La plupart des corrections de mise en page et d'encodage sont purement techniques et ne nécessitent aucune connaissance de la langue vietnamienne. Vous pouvez traiter en interne : la déclaration UTF-8, lang="vi" sur l'élément HTML, la hauteur de ligne et le dimensionnement des conteneurs, le formatage de locale via CLDR et les API de plateforme, et le fallback de police pour Latin Extended Additional (U+1E00-U+1EFF).

Un spécialiste vietnamien de langue maternelle apporte une valeur réelle dans ces domaines :

• Budgétisation des chaînes avant traduction : un spécialiste signale quelles chaînes sources vont le plus s'étendre et peut suggérer des alternatives vietnamiennes plus courtes avant que la mise en page soit figée.
• Registre et terminologie : l'interface technique en vietnamien utilise des termes sino-vietnamiens dans certains contextes et des mots purement vietnamiens dans d'autres. Une traduction automatique ne peut pas distinguer de manière fiable ces deux registres.
• Revue dialectale : le vietnamien du Nord, du Centre et du Sud diffère en vocabulaire. Un relecteur de langue maternelle de la région cible détecte des inadéquations que les équipes internes manquent.
• LQA (assurance qualité linguistique) : un passage LQA basé sur des captures d'écran détecte les troncatures, corruptions et découpages de signes de ton en contexte réel.

Pour un workflow de localisation guidé pour les sites et applications web, consultez le service de localisation de sites web en vietnamien.

FAQ

L'interface en vietnamien a-t-elle toujours besoin de plus d'espace qu'en anglais ?

Pas toujours. Les mots d'action courts ("OK", "Lưu", "Xóa") sont souvent de longueur comparable ou plus courts. Le vrai risque concerne les syntagmes descriptifs de longueur moyenne (8-20 caractères en anglais) qui peuvent s'étendre de 20-40 % en vietnamien. Testez vos 10-20 étiquettes les plus longues pour trouver les chaînes problématiques spécifiques.

Quelle police utiliser pour une interface vietnamienne ?

Toute police OpenType couvrant le bloc Latin Extended Additional (U+1E00-U+1EFF) gère tous les caractères vietnamiens. Choix sûrs : Inter, Noto Sans, Roboto et Source Sans 3. Déclarez toujours une pile de police de secours. Sur Android, Noto Sans est préinstallé. Sur iOS, SF Pro couvre la plage complète. Évitez les polices ne couvrant que le Latin de base - elles affichent les diacritiques vietnamiens comme des cases vides.

Le retour à la ligne en vietnamien est-il automatique en CSS ?

Oui, pour la plupart des chaînes. Comme le vietnamien écrit des espaces entre les syllabes, le retour à la ligne CSS par défaut fonctionne correctement sans règles supplémentaires. L'exception est une longue chaîne technique sans espaces - ajoutez overflow-wrap: break-word comme filet de sécurité. N'appliquez pas word-break: keep-all (une règle CJK) au texte vietnamien.

Où trouver les formats officiels pour les nombres et les dates en vietnamien ?

Le Référentiel de Données Locales Commun Unicode (CLDR) est la source officielle. La locale vi définit le point comme séparateur de milliers, la virgule comme séparateur décimal et JJ/MM/AAAA pour les dates. L'API Intl native du navigateur implémente CLDR : new Intl.NumberFormat('vi-VN').format(1234567) retourne "1.234.567" dans tout environnement conforme.

Sources officielles

• W3C Internationalization : retour à la ligne - classe le vietnamien comme langue à retour à la ligne par syllabe. Vérifié en septembre 2026.
• Unicode Standard Annex #29 : segmentation du texte - marques diacritiques combinantes comme caractères Extend, jamais de rupture en milieu de caractère. Vérifié en septembre 2026.
• Unicode CLDR (Common Locale Data Repository) - locale vi : symbole décimal (,), regroupement (.), format de devise et de date. Vérifié en septembre 2026.
• Apple Developer : Localisation - Auto Layout et dimensionnement flexible du texte. Vérifié en septembre 2026.