Devrais-je éviter d’utiliser “text-align: Justifier”?

Y a-t-il une raison d’éviter d’utiliser text-align: justify; ?

Réduit-il la lisibilité ou pose-t-il des problèmes?

Tout d’abord, il s’agit uniquement d’un problème et d’une solution liés à la conception. La conception de votre grid spécifie si un texte justificatif est nécessaire. Je pense que le simple alignement n’a pas d’effet majeur sur la facilité d’utilisation. Une mauvaise typographie qui rend le texte illisible est ce qui diminue la facilité d’utilisation. Cela dit, assurez-vous d’avoir des contrastes solides et un bon équilibre d’espacement dans votre type. La taille de la police compte aussi.

Ce site est une tentative réussie de justifier le texte en ligne. Comme vous ne pouvez pas contrôler les espaces entre les lettres et les mots avec CSS autant que possible avec InDesign, il est beaucoup plus difficile de justifier le texte et de ne pas laisser d’espaces blancs sur vos lignes, ce qui se produit lorsque les espaces entre les mots dépasse les espaces entre les lignes. Les choses qui rendent difficile la justification du texte: mots longs, largeurs de lignes qui ne contiennent pas suffisamment de mots et trop de contraste entre le texte et les couleurs d’arrière-plan; ils rendent les rivières plus larges et plus apparentes.

L’idéal typographique est d’avoir un bloc de texte uniforme, où si vous plissez les yeux, le bloc de texte devient une teinte unie uniforme. Donc, si vous conservez du texte à environ 10 pixels et 60% de gris sur fond blanc, et que les lignes correspondent à environ 20 mots, justifier l’alignement ne devrait pas avoir l’air moche. Mais gardez à l’esprit que cela ne fait rien pour améliorer la convivialité. Un texte de petite taille et relativement léger agace beaucoup de gens, surtout les lecteurs plus âgés.

Je devrais noter que avec ­ (césure douce) séparant correctement les mots longs et incommodants comme super-génial, vous pouvez imiter la composition correcte (par exemple, InDesign). Il y a beaucoup de choses pour vous aider. Je recommanderais la logique pour cacher, manipuler et afficher le texte à faire du côté client, peut-être avec ceci .

Edit : Comme d’autres le mentionnent ci-dessous, les tirets css sont possibles maintenant, sauf si ce n’est pas faisable (pas dans Chrome). De plus, css4 offre encore plus de contrôle .

text-align: Justifier ne devrait pas être utilisé dans les navigateurs pour le moment. Ils ne sont pas efficaces pour gérer les moindres détails à l’intérieur et la sortie finit par contenir beaucoup de rivières et il n’y a aucun support pour la césure (autre que les tirets mous).

La note ci-dessus a été écrite il y a 4,5 ans. Les choses changent lentement … http://caniuse.com/#feat=css-hyphens

Edit: Hyphenator a été porté à mon attention dans les commentaires de cette réponse. Il semble que le texte-align justifie d’être utilisé, consultez les sites qui l’utilisent. Vous voudrez peut-être utiliser javascript pour appliquer text-align legit avant d’utiliser ce script afin que ceux qui n’ont pas de javascript ne soient pas pris au piège.

Edit 2: CSS permet maintenant la césure avec la propriété hyphens [ support du navigateur ]. PPK dit maintenant de l’ append à vos feuilles de style , tandis qu’Eric Meyer dit qu’il suffit de l’append pour mobile .

Edit 3: Un bon petit aperçu des choses à notre disposition, avec certains SASS.

Les problèmes soulevés par d’autres concernant la justification de l’alignement sont plus fréquents avec les colonnes étroites. Si vos colonnes sont suffisamment larges par rapport à la taille de vos fonts et à d’autres parameters, alors vous pouvez justifier le texte. Disons que vous souhaitez un minimum de 12 à 15 mots par ligne en moyenne. Plus c’est mieux.

Il n’y a aucune raison technique à ne pas le faire – c’est purement une décision de conception. Beaucoup de gens trouvent que le texte justifié est plus difficile à lire, mais je suppose que cela dépend de votre situation. Bien que cela fonctionne très bien pour l’impression, les navigateurs Web n’offrent généralement pas un contrôle suffisant sur l’éventuelle sortie de texte pour garantir que ce que vous servez ne ressemblera pas à de la merde sur les écrans de certaines personnes.

Votre meilleure option est d’éviter la justification.

Je ne peux pas penser à une raison impérieuse pour ne pas justifier le texte – à un certain moment, le volume et la largeur du contenu exigent presque que cela soit justifié. Bien sûr, vous rencontrerez des problèmes avec du contenu composé de certaines combinaisons de mots, mais à mon avis, si vous voyez des rivières et des espaces inhabituellement grands entre les mots, vous avez un problème différent – un problème de lisibilité et de clarté.

Ce que j’éviterais à tout prix, c’est de centrer le texte du corps. Je ne pense pas qu’il y ait un plus grand drapeau rouge du design web ammateur.

Je préfère la justification à gauche (text-align: left) car elle est généralement plus lisible. Il est aussi plus rapide de lire des mots espacés régulièrement, alors j’entends. À moins que vous n’ayez une raison stylistique pour justifier l’utilisation, conservez-la à gauche, à droite ou au centre. Surtout pour le texte du corps, utilisez la gauche. (En fait, vous voudriez quelque chose comme “forward” pour le texte dans l’autre sens (par exemple l’hébreu) ​​…)

Comme toute question de design web … ça dépend. Comme cela a été suggéré, le texte justifié ne finit généralement pas bien dans les colonnes étroites. Je le déconseille car en règle générale, les barres latérales sont généralement étroites.

Avec la copie corporelle aux 10 mots souvent recommandés par ligne (ou avec un montant supérieur à cela), vous pourrez probablement vous en sortir avec un texte justifié et le faire paraître raisonnablement bon la plupart du temps sauf si vous utilisez beaucoup mots et / ou chaînes.

Je pense avoir déjà propulsé ce site sur StackOverflow auparavant, mais Jon Tan utilise un texte justifié dans sa copie du corps (dans les articles) et il a fière allure 99,99% du temps.

La justification ne doit pas être utilisée sans césure. Voici une bibliothèque de césure basée sur PHP , et un port de cette bibliothèque sur un plugin WordPress: wp-Typography .

Je pense que c’est parfaitement OK sur le papier, mais il est maladroit sur la plupart des navigateurs Web, par manque de contrôle précis de l’espacement et de la césure. Les typographes peuvent même jouer légèrement sur l’espacement des lettres ou la contraction des fonts dans certains cas, car les pages / colonnes (au moins dans les magazines) peuvent être réglées avec précision.

Erhh … Non …!

[sérieux] WordPress utilise justifie, et je pense que c’est une déclaration assez forte en ce qui concerne la diminution de la lisibilité ou non …

Vous pouvez également utiliser text-explain: newspaper. La balise css text-d’arrêt vous aide à contrôler la manière dont vous encapsulez le texte lorsque vous justifiez

Il faut mentionner qu’Internet Explorer (au moins) jusqu’à la version 8 ne rend pas le text-align: justify correctement. Au lieu de cela, il est interprété comme text-align: center .

Voici plus d’infos: text-align: Justifie

M’a causé des maux de tête pour savoir pourquoi IE a continué à centraliser les choses. Peut-être que cela sauve quelqu’un d’autre du temps.