Dois-je éviter d'utiliser "text-align: justification;"?
Y a-t-il une raison pour éviter d'utiliser text-align: justify;?
Cela réduit-il la lisibilité ou cause-t-il des problèmes?
Premièrement, il s'agit uniquement d'un problème et d'une solution liés à la conception. La conception de votre grille spécifie si un texte justificatif est nécessaire. Je pense que justifier l'alignement seul n'a pas d'effet majeur sur la convivialité. Une mauvaise typographie qui rend le texte illisible est ce qui diminue la convivialité. Cela dit, assurez-vous d'avoir des contrastes solides et un bon équilibre d'espacement dans votre type. La taille de la police est également importante.
Ce site est une tentative réussie de justifier le texte en ligne. Étant donné que vous ne pouvez pas contrôler les espaces entre les lettres et les mots presque autant avec CSS qu'avec InDesign, il est beaucoup plus difficile de justifier le texte et de ne pas avoir de "fleuves" d'espaces sur vos lignes, ce qui se produit lorsque les espaces entre les mots dépasse les espaces entre les lignes. Des choses qui rendent la justification du texte difficile: des mots longs, des largeurs de ligne qui ne contiennent pas assez de mots et trop de contraste entre le texte et les couleurs d'arrière-plan; ils font apparaître 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 gardez du texte à environ 10 pixels et 60% de gris sur fond blanc, et que vous avez des lignes qui contiennent environ 20 mots, justifier l'alignement ne devrait pas sembler laid. Mais gardez à l'esprit que cela ne fait rien pour améliorer la convivialité. Les petits textes relativement légers agacent beaucoup de gens, en particulier les lecteurs plus âgés.
Je dois noter qu'avec ­ (césure douce) séparant correctement les longs mots gênants comme super impressionnant, vous pouvez imiter une composition correcte (par exemple InDesign). Il y a beaucoup de choses pour vous y aider. Je recommanderais la logique pour cacher, manipuler et afficher le texte à faire côté client, peut-être avec this .
Modifier : Comme d'autres le mentionnent ci-dessous, tirets CSS sont désormais possibles, sauf impossible (pas dans Chrome). De plus, css4 offre encore plus de contrôle .
text-align: justification ne doit pas être utilisé dans les navigateurs pour le moment. Ils ne sont pas bons 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 pas de support pour césure (autre que les traits d'union doux).
Remarque 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 l'alignement du texte mérite d'être utilisé, consultez les sites qui l'utilisent. Vous voudrez peut-être utiliser javascript pour appliquer la justification d'alignement du texte avant d'utiliser ce script afin que ceux sans javascript ne soient pas pris en défaut.
Édition 2: CSS permet désormais césure avec la propriété hyphens [ prise en charge du navigateur ]. PPK dit maintenant ajoutez-le à vos feuilles de style , tandis qu'Eric Meyer dit ajoutez-le simplement pour mobile .
Edit 3: n bon petit aperç des choses disponibles pour nous maintenant, avec quelques SASS.
Les problèmes soulevés par d'autres concernant la justification de l'alignement sont plus fréquents avec des colonnes étroites. Si vos colonnes sont suffisamment larges par rapport à la taille de vos polices et d'autres paramètres, vous pouvez justifier le texte. Supposons que vous souhaitiez un minimum de 12 à 15 mots par ligne en moyenne. Plus c'est mieux.
Il n'y a aucune raison technique de 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 bien pour l'impression, les navigateurs Web ne donnent généralement pas assez de contrôle sur la sortie éventuelle du 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 de ne pas justifier le texte - à un certain point, le volume et la largeur du contenu exigent presque qu'il soit justifié. Bien sûr, vous aurez des problèmes avec le 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 - celui de la lisibilité et de la clarté.
Ce que j'éviterais à tout prix, c'est un corps de texte centré. Je ne pense pas qu'il y ait un plus grand drapeau rouge de conception de sites Web amateur que cela.
Comme toute question de conception Web ... cela 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 en règle générale dans les barres latérales, car les barres latérales sont généralement étroites.
Avec une copie du corps aux 10 mots souvent recommandés par ligne (ou avec tout montant supérieur à celui-ci), 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 de très long mots et/ou chaînes.
Je pense que j'ai déjà pimpé ce site sur StackOverflow, mais Jon Tan utilise du texte justifié dans sa copie corporelle (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 vers un WordPress: wp-Typography .
Je préfère la justification à gauche (text-align: left) car elle est généralement plus lisible. Il est également plus rapide de lire des mots régulièrement espacés, donc j'entends. Sauf si vous avez une raison stylistique d'utiliser Justify, gardez-la à gauche, à droite ou au centre. Surtout pour le corps du texte, utilisez à gauche. (En fait, vous voudriez quelque chose comme "avant" pour le texte dans l'autre sens (par exemple l'hébreu) ...)
Il convient de mentionner qu'Internet Explorer (au moins) jusqu'à la version 8 ne rend pas text-align: justify correctement. Au lieu de cela, il est interprété comme text-align: center.
Voici plus d'informations: text-align: justification
M'a causé des maux de tête pour savoir pourquoi IE continuait de centrer les choses. Peut-être que cela fait gagner du temps à quelqu'un d'autre.
Euh ... Non ...!
[sérieusement] WordPress utilise justifier, et je pense que c'est une déclaration assez forte quant à savoir si elle diminue ou non la lisibilité ...
Vous pouvez également utiliser le texte justifié: journal. La balise css de justification de texte vous aide à contrôler la façon dont vous enveloppez le texte lorsque vous justifiez
La justification du texte peut se faire de plusieurs manières.
Quelques définitions: l'ajustement de l'espacement entre les mots est un "suivi". L'ajustement de l'espacement entre les caractères est un "crénage". Le va de la variable peut être créné plus près que le xa exact. De bonnes polices ont intégré des tableaux d'indices de crénage pour faciliter ce processus.
Au début des polices monospaces, cela se faisait en insérant des espaces supplémentaires entre les mots. Cela a rendu la sortie très maladroite. Si vous aviez 4 espaces à la fin de la ligne et 6 espaces dans la ligne, 4 d'entre eux deviendraient des espaces doubles.
Les polices monospaces ne doivent pas être justifiées.
Avec des polices de largeur variable, nous avons des espaces em, en espaces, etc., et donc l'espace pourrait être mieux distribué.
Je pense que c'est là que se trouvent la plupart des navigateurs. Cela fonctionne assez bien la plupart du temps. Pour que cela fonctionne bien, les conditions suivantes doivent être remplies:
- Vous avez besoin d'un nombre raisonnable de mots sur une ligne.
- Un gros mot à la fin de la ligne peut poser des problèmes.
Le mot moyen en anglais est de 5 caractères. Donc, en moyenne, vous aurez 5 caractères (le mot de 5 caractères plus l'espace ne conviendrait pas, donc il passe à la ligne suivante)
Si vous avez 10 mots sur la ligne, vous devez ajouter environ la moitié d'un espace standard à chaque espace inter-mots.
Si le dernier mot est long, comme "maux de tête" et qu'il n'y a pas de place, vous avez maintenant 10 espaces à distribuer. Cela commence à mal paraître.
C'est là qu'intervient un dictionnaire de césure. La césure peut être effectuée par algorithme, mais il y a suffisamment d'exceptions pour lesquelles avoir un dictionnaire aide beaucoup. (Il y a un caractère spécial pour les tirets doux pour les mots qui ne figurent pas dans votre dictionnaire.)
La césure peut diviser un mot afin que la ligne se remplisse plus uniformément.
Empiriquement, j'ai décidé qu'une longueur de ligne de 65 em constituait un bon compromis. Cela donne 11-13 mots par ligne la plupart du temps.
Une autre approche de la justification consiste à diviser l'espace entre les personnages. Cela évite certains des problèmes ci-dessus, mais semble toujours étrange si vous distribuez beaucoup d'espace sur une ligne insuffisante. Vous voyez cela dans les journaux de temps en temps où un mot semble avoir un espace complet entre chaque personnage. C'est un bon argument pour une ligne plus longue.
Les bons programmes de composition (InDesign, * TeX, Framemaker) combinent un espace supplémentaire dans les espaces entre mots et de minuscules espaces supplémentaires entre les caractères.
Il y a un nouvel enfant sur le bloc, text-justification qui peut être utilisé en CSS pour modifier l'utilisation de text-align: justification. Il accepte nominalement les options
- auto (par défaut)
- interword
- inter-caractère (+ distribuer pour des raisons héritées)
- none
CanIuse https://caniuse.com/#search=text-justify Groupe de travail CSS https://drafts.csswg.org/css-text-3/#text-justify- propriété
CanIuse signale la conformité uniquement pour Firefox en ce moment, Chrome le prend en charge, mais nécessite que vous activiez les fonctionnalités expérimentales. N'ont pas été testés.
Autres points pragmatiques:
J'ai apporté quatre modifications à la feuille de style de mon site:
- Longueur de ligne maximale de 65 rem
- augmentation de la police du corps à 110%
- augmentation à 125%
- Texte justifié.
Le résultat a été que le temps passé sur le site et le nombre de pages par session ont doublé.
Anecdotique, mais peut valoir la peine d'être testé.
Je pense que c'est parfaitement OK à l'impression, mais c'est maladroit sur la plupart des navigateurs Web, par manque de contrôle fin 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 polices dans certains cas, car les pages/colonnes (au moins dans les magazines) peuvent être affinées.