Pour diagnostiquer les espacements irréguliers dans un texte justifié affiché dans un navigateur sur Mac, commencez par aligner le paragraphe au début. Testez ensuite, un par un, les règles d’espacement, les sauts de ligne, la largeur de colonne et le chargement des polices. Cette séquence aide à déterminer quel changement améliore réellement le paragraphe.

Ce guide s’adresse à une personne qui examine une page Web ordinaire, par exemple le catalogue d’une bibliothèque avec une étroite colonne de description. Il s’agit d’expliquer pourquoi les espaces entre les mots sont inhabituellement larges et de choisir une correction pratique. Toutes les étiquettes et dimensions des exemples ci-dessous sont fictives.

Ce que des espacements irréguliers peuvent révéler

La justification répartit l’espace disponible sur une ligne afin de remplir sa boîte de ligne. Les lignes contiennent des mots différents et n’offrent pas toutes les mêmes possibilités d’expansion ; leurs espaces ne sont donc pas nécessairement identiques. Le W3C laisse aussi une certaine latitude aux navigateurs dans leurs algorithmes de justification : un même CSS ne prescrit pas des espacements identiques dans tous les navigateurs. CSS Text Module Level 3

Avant toute modification, distinguez deux observations. Si la plupart des espaces d’une ligne sont plus larges que ceux de la suivante, examinez la largeur disponible pour cette ligne et les choix de retour à la ligne. Si un espace particulier semble exceptionnel, examinez aussi le texte et le style autour de cet emplacement. Ce sont des pistes de diagnostic, pas la preuve d’une cause précise.

Un calcul simple explique pourquoi les lignes peu denses méritent attention. Supposons qu’une ligne dispose de 480 pixels CSS et que son contenu occupe 420 pixels avant justification. Dans un modèle illustratif qui répartit également les 60 pixels restants entre six espaces admissibles, chacun gagne 10 pixels. S’il n’y a que trois espaces admissibles et que l’espace restant est le même, chacun gagne 20 pixels. Ce sont des exemples calculés, pas des mesures effectuées dans un navigateur ni une formule de rendu universelle.

En pratique, il faut donc examiner les mots qui se trouvent sur la ligne avant d’essayer d’ajuster les espaces eux-mêmes. Une ligne offrant peu de possibilités d’expansion peut révéler un problème de retour à la ligne qu’un réglage global de l’espacement ne résoudra pas.

Commencer par une comparaison contrôlée sur Mac

Choisissez un paragraphe concerné et notez la version du navigateur, le zoom de la page, la largeur approximative de la colonne et le texte exact. Gardez ces conditions constantes pendant vos comparaisons. Pour un paragraphe de test neutre, utilisez : « Le panneau ambre contient des tuiles rondes. Le panneau argent contient des tuiles carrées. Chaque panneau comporte une courte étiquette et une description simple. »

Dans Chrome, cliquez sur le paragraphe en maintenant la touche Contrôle enfoncée, puis choisissez Inspecter. Vous pouvez aussi ouvrir les outils de développement avec Commande–Option–I, puis sélectionner l’élément concerné. Les outils de développement du navigateur permettent d’examiner le document affiché et de prévisualiser localement des modifications HTML et CSS. Que sont les outils de développement du navigateur ?

Sélectionnez le bloc conteneur du paragraphe, et non un simple mot dans un élément en ligne. Dans le panneau Elements de Chrome, examinez Styles et Computed. Le premier affiche les déclarations applicables, y compris celles remplacées par d’autres ; le second aide à repérer les valeurs réellement appliquées. Utilisez le filtre de propriétés pour trouver chaque réglage. Référence des fonctionnalités CSS

Notez text-align, text-align-last, word-spacing, letter-spacing, white-space, hyphens, font-family et font-size. Notez aussi la largeur du contenu du paragraphe. Vous disposerez ainsi d’un petit relevé comparatif : condition initiale, une modification, résultat observé.

Définissez temporairement text-align: start et text-align-last: start sur le paragraphe. Si les grands espaces disparaissent, la justification contribue au problème. S’ils persistent, poursuivez avec les vérifications explicites de l’espacement et des espaces blancs. Rétablissez l’alignement initial avant le test indépendant suivant. Les outils de développement permettent de désactiver des déclarations et de modifier des valeurs pour en voir les effets en direct. Que sont les outils de développement du navigateur ?

Vérifier les espacements explicites et les espaces blancs préservés

Une fois l’alignement au début activé, testez word-spacing: normal. MDN précise que cette valeur utilise l’espacement normal déterminé par la police ou le navigateur ; une valeur de longueur ajoute de l’espacement à l’espacement intrinsèque entre les mots de la police. Une valeur positive héritée peut donc jouer un rôle même avant l’application de la justification. Propriété CSS word-spacing

Examinez l’élément parent et les éventuels éléments enfants en ligne stylisés si seule une partie du paragraphe change. Testez séparément la valeur actuelle de letter-spacing au lieu de réinitialiser toutes les propriétés typographiques à la fois. Si deux réglages changent simultanément, vous ne saurez pas lequel a amélioré le résultat.

Examinez ensuite white-space. Avec normal, les suites d’espaces ordinaires sont réduites et le texte revient à la ligne au besoin. Avec pre-wrap, les suites d’espaces et les nouvelles lignes du code source sont préservées, tandis que le retour à la ligne reste possible. Avec pre-line, les espaces sont réduits, mais les nouvelles lignes du code source créent toujours des sauts de ligne. Ces différences peuvent donner l’impression d’un défaut d’espacement. Propriété CSS white-space

Pour une description ordinaire dans le flux du texte, testez temporairement white-space: normal. Si le résultat s’améliore, examinez le texte d’origine et la règle d’espacement avant de décider d’une modification permanente. Préservez toute mise en forme utile : un exemple préformaté et une description en prose n’ont pas les mêmes exigences. Ce test met en évidence une donnée d’entrée de la mise en page ; il ne prouve pas que tous les espaces préservés doivent être supprimés.

Examiner les lignes courtes, les sauts forcés et la largeur de colonne

La dernière ligne est-elle étirée ?

Examinez text-align-last lorsqu’une courte dernière ligne présente des espaces inhabituellement grands. Cette propriété contrôle à la fois la dernière ligne d’un bloc et la ligne qui précède immédiatement un saut forcé. Avec text-align: justify, le comportement par défaut auto aligne ces lignes au début ; une valeur explicite justify les étire. Testez text-align-last: start pour isoler ce cas. Propriété CSS text-align-last

Recherchez un élément br au niveau du saut concerné. WHATWG le définit comme un saut de ligne dans le contenu et indique qu’il doit être utilisé lorsque le saut fait partie du contenu. Pour une description ordinaire dans le flux du texte, examinez tout saut inséré uniquement pour reproduire une mise en page de bureau ; si le comportement souhaité est de laisser le texte déterminer la fin de ligne, laissez le retour à la ligne s’en charger. Norme HTML : l’élément br

Le problème est-il lié à une colonne étroite ?

Rétablissez la justification et modifiez uniquement la largeur disponible pour le paragraphe. Essayez une colonne un peu plus large, puis une un peu plus étroite, sans changer le texte ni la police. Notez les mots qui passent d’une ligne à l’autre et vérifiez si les grands espaces se déplacent avec eux.

Considérez cela comme un test de décision. Si une colonne plus large produit des fins de ligne plus satisfaisantes, ajustez la mise en page lorsque l’espace le permet. Si la description doit rester étroite et que plusieurs lignes paraissent toujours peu denses, l’alignement au début est une solution pratique. Ne choisissez pas une largeur uniquement parce qu’un paragraphe d’exemple s’y ajuste parfaitement.

La césure offrirait-elle des possibilités de coupure utiles ?

Pour un texte en anglais, testez hyphens: auto après avoir vérifié que le paragraphe lui-même ou l’un de ses ancêtres possède la bonne valeur lang, par exemple en. La césure automatique dépend de la langue indiquée et de la disponibilité d’un dictionnaire adapté. L’absence de césures visibles ne prouve pas, à elle seule, que la déclaration CSS a échoué. Propriété CSS hyphens

Pour ce test, utilisez des mots ordinaires plutôt que des identifiants inventés sans points de coupure. Vérifiez tout le paragraphe ensuite : l’objectif est d’obtenir de meilleures fins de ligne, pas seulement de voir apparaître un trait d’union. Si la césure automatique n’améliore pas le résultat dans le navigateur ciblé, conservez la solution d’alignement ou de largeur qui, elle, a fonctionné.

Distinguer les changements de police de la justification du navigateur

Si les fins de ligne changent après l’affichage initial de la page, examinez le chargement des polices avant de comparer des captures d’écran. L’API CSS Font Loading fournit document.fonts.ready, une promesse qui se résout une fois le chargement des polices et la mise en page associée terminés. Elle fournit un point de synchronisation utile pour les mesures, même si des changements ultérieurs de la page peuvent nécessiter une nouvelle comparaison. API CSS Font Loading

Pour un test visuel, comparez le paragraphe d’origine à une version temporaire utilisant font-family: system-ui, en gardant la largeur et la taille de police constantes. Considérez toute amélioration comme un indice que le choix de la police influe sur cette mise en page, pas comme la preuve que la police d’origine est défectueuse. Dans Firefox ou Safari, la vue Fonts de l’inspecteur peut aider à examiner les polices appliquées à l’élément sélectionné. Que sont les outils de développement du navigateur ?

Gardez à l’esprit la limite de la mise en forme des caractères. HarfBuzz façonne des séquences de texte partageant les mêmes propriétés en glyphes positionnés. Sa documentation exclut explicitement le retour à la ligne des paragraphes, la césure et la justification. Par conséquent, modifier un réglage de HarfBuzz n’est pas une solution CSS générale aux espaces trop larges entre les mots. Ce que HarfBuzz ne fait pas

Pour la même raison, ne créez pas une mise en page de remplacement en mesurant et en positionnant chaque caractère indépendamment. Cette méthode empiète sur le façonnage des caractères et la mise en page des paragraphes. Pour du texte DOM ordinaire, continuez à examiner les paramètres de mise en page du navigateur et préservez son pipeline de rendu du texte.

Choisir la correction étayée par vos tests

Utilisez ce tableau pour transformer vos observations en une prochaine action ciblée. Chaque ligne correspond à une déduction diagnostique ; vérifiez-la en rétablissant la condition initiale puis en répétant la modification concluante.

Observation Élément à examiner ensuite Correction possible
Les espaces persistent avec l’alignement au début Espacement explicite et espaces blancs préservés Corriger la déclaration concernée ou une mise en forme involontaire du texte
Seules les dernières lignes sont étirées Alignement de la dernière ligne et sauts forcés Aligner ces lignes au début ; revoir les sauts ajoutés uniquement pour la présentation
Les espaces se déplacent quand les mots changent de ligne Largeur de colonne et possibilités de coupure Ajuster la largeur, tester la césure ou aligner au début
La mise en page change pendant le chargement Chargement des polices et police appliquée Comparer une fois les polices chargées et corriger la différence liée à la police
Un changement de méthode de justification n’a aucun effet Prise en charge du navigateur et déclaration appliquée Utiliser des commandes d’alignement et de mise en page prises en charge

Ne comptez pas sur text-justify: inter-word comme solution universelle. MDN indique actuellement que text-justify a une disponibilité limitée. Lorsqu’il est pris en charge, inter-word sélectionne l’expansion aux limites des mots, tandis que auto laisse le navigateur choisir la méthode. Le choix des limites de mots ne garantit pas des espaces réduits sur une ligne peu dense. Propriété CSS text-justify

Lorsque cette propriété n’est pas prise en charge, utilisez la solution compatible mise en évidence par votre comparaison : modifier l’alignement, augmenter la largeur disponible pour la ligne, corriger les espaces blancs involontaires ou tester une césure adaptée à la langue. Vérifiez le choix final dans chaque navigateur cible pour des largeurs de contenu comparables. Les différences entre navigateurs ne suffisent pas à établir l’existence d’un défaut, car le CSS ne spécifie pas un algorithme complet unique de justification. CSS Text Module Level 3

Terminez lorsque vous pouvez expliquer le problème à l’aide d’une comparaison reproductible : le paragraphe d’origine présente le grand espace, une modification identifiée l’améliore et le résultat reste satisfaisant pour les largeurs dont vous avez besoin. Si vous gérez la page, conservez dans son code source la correction efficace la plus limitée ; si vous examinez seulement une page publique, consignez les valeurs observées et les étapes pour reproduire le problème.

Sources