Chapitre 70 : Stratégies Avancées pour l'Internationalisation (i18n)
La gestion du texte varie drastiquement d'une langue à l'autre. Un senior doit savoir adapter sa stratégie typographique selon la locale.
1. Langues CJK (Chinois, Japonais, Koréen)
Ces langues n'utilisent pas d'espaces pour séparer les mots. Par conséquent, hyphens: auto n'a aucun effet.
word-break: keep-all: Empêche la coupure des mots dans les langues CJK, forçant le navigateur à suivre les règles de segmentation spécifiques à ces langues.line-break: anywhere: Permet une coupure plus flexible pour éviter les débordements massifs dans des colonnes très étroites.
2. Langues avec des mots longs (Allemand, Finnois)
L'allemand est célèbre pour ses mots composés extrêmement longs.
- Stratégie : L'utilisation de
hyphens: autoest quasi-obligatoire pour les interfaces en allemand afin d'éviter des espaces blancs disproportionnés ou des débordements.
3. Le Soft Hyphen (­)
Lorsque le dictionnaire automatique échoue (mots techniques, néologismes), vous pouvez suggérer un point de coupure manuel.
- Syntaxe : Insérez
­à l'intérieur d'un mot. - Comportement : Le trait d'union n'apparaîtra que si le mot doit être coupé. Sinon, il reste invisible.
<p>
L'interopéra­bilite­ des systèmes est cruciale.
</p>
Questions clés
1. Quelle est la différence fondamentale entre hyphens: auto et overflow-wrap: break-word ?
Découvrir la réponse
hyphens: auto utilise un dictionnaire linguistique pour couper les mots de manière correcte (syllabique) et ajoute un trait d'union. overflow-wrap: break-word coupe le mot n'importe où pour éviter le débordement, sans ajouter de trait d'union, et ne le fait que si le mot ne tient pas sur une seule ligne.
2. Pourquoi mon hyphens: auto ne fonctionne-t-il pas ?
Découvrir la réponse
Il y a généralement deux raisons :
- L'attribut
langest absent ou incorrect sur la balise<html>ou l'élément concerné. - Le navigateur utilisé ne possède pas le dictionnaire de césure pour la langue spécifiée.
3. Quand utiliser word-break: break-all plutôt que overflow-wrap: anywhere ?
Découvrir la réponse
Utilisez word-break: break-all pour des contenus qui n'ont aucune structure linguistique (comme des clés API, des hashes SHA-256, ou des chemins de fichiers système) où la lecture syllabique n'est pas pertinente. Utilisez overflow-wrap: anywhere pour du texte naturel où vous voulez prioriser la lisibilité tout en garantissant que le layout ne cassera jamais.
4. Comment gérer les mots très longs dans une interface multilingue sans sacrifier l'accessibilité ?
Découvrir la réponse
La meilleure approche est d'utiliser overflow-wrap: anywhere globalement pour prévenir les crashs de layout, et d'activer hyphens: auto sur les blocs de texte éditoriaux avec un lang correctement défini. Cela permet aux lecteurs d'écran et aux utilisateurs de maintenir une compréhension fluide du texte.
Mise en pratique
Exercice 1 : Reproduction guidée
Objectif : Créer un bloc de texte "éditorial" qui utilise la césure automatique pour optimiser l'alignement justifié.
Consignes :
- Créez un élément
divavec la classe.editorial-box. - Donnez-lui une largeur de
300px. - Appliquez un alignement justifié.
- Activez la césure automatique.
- Assurez-vous que le HTML utilise l'attribut
lang="fr".
Découvrir la solution commentée
/* CSS */
.editorial-box {
width: 300px;
text-align: justify;
/*
L'activation de 'auto' nécessite l'attribut lang="fr"
dans le HTML pour charger le dictionnaire français.
*/
hyphens: auto;
/* Améliore le rendu des ligatures et la césure */
text-rendering: optimizeLegibility;
}
<html lang="fr">
<div class="editorial-box">
L'internationalisation des interfaces web modernes
nécessite une gestion rigoureuse de la typographie
pour garantir une expérience utilisateur optimale.
</div>
</html>
Exercice 2 : Adaptation
Objectif : Gérer un affichage de logs système où les chaînes de caractères sont imprévisibles et peuvent être être très longues.
Consignes :
- Créez un conteneur
.log-containeravec une largeur fixe. - Le contenu doit être coupé systématiquement dès qu'il atteint le bord, sans tenir compte de la lignage.
- Le texte doit être affiché dans une police monospace.
Découvrir la solution commentée
.log-container {
width: 400px;
font-family: 'Courier New', monospace;
background-color: #f4f4f4;
padding: 10px;
border: 1px solid #ddd;
/*
Pour des logs, on utilise break-all car on ne cherche pas
une lecture naturelle, mais une visibilité maximale
du contenu sans scroll horizontal.
*/
word-break: break-all;
}
Exercice 3 : Conception
Objectif : Concevoir un composant de "Card" multilingue capable de d'accueillir des titres très longs (ex: titres d'articles en allemand) et des URLsyperliens extremely long.
Consignes :
- Le titre doit utiliser la césure automatique pour rester élégant.
- Le lien URL doit être coupé proprement sans briser le layout.
- LeLien ne doit pas être couper own's natural break points (comme
/ou.) en priorité, mais doit être coupé n'importe où si nécessaire.
Découvrir la solution commentée
/*
On définit des stratégies différentes selon la nature du contenu
*/
.card-title {
font-size: 1.5rem;
font-weight: bold;
/*
Césure automatique pour les titres longs (très utile
pour les langues comme l'allemand).
*/
hyphens: auto;
/*
On évite le justify ici car les titres
sont généralement alignés à gauche.
*/
}
.card-link {
display: block;
/*
'anywhere' est la valeur la plus sûre pour i18n.
Elle permet de break-word et analogue à
overflow-wrap: break-word, mais permet
C'est la valeur recommandée pour les URLs
car elle prevents layout overflow.
*/
overflow-wrap: anywhere;
/*
On ajoute un often's natural break points
via overflow-wrap, mais on prevents
*/
word-break: normal;
}
.card {
width: 320px;
border: 1px solid #black;
padding: 16px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.//
/*
L'ensemble de la card ensures
*/
}