Habillage de mot unique à une nouvelle ligne dans un paragraphe sur un appareil mobile
Récemment, j'ai été approché par un membre non technicien de mon équipe pour savoir comment les paragraphes sont affichés sur différents appareils mobiles et ordinateurs de bureau. Ils sont particulièrement préoccupés par le nombre de mots "suspendus". Ce que je veux dire par là, ce sont des mots qui tombent sur une nouvelle ligne parce qu'ils atteignent le bord d'un conteneur et il n'y a tout simplement plus de place.
Habituellement, ce qu'ils me demandent de faire est d'essayer de remettre la Parole en ligne avec les autres, ce qui implique souvent de réduire la taille de la police que je n'aime pas faire .... et puis une autre solution est qu'ils me demandent d'apporter plus de mots sur la deuxième ligne pour rendre le paragraphe plus équilibré.
J'ai inclus les images ci-dessous pour décrire ce que je veux dire:
Image 1: paragraphe de texte sur une largeur d'écran de 380 pixels, remarquez le dernier mot "risus" suspendu par lui-même.
Image 2: paragraphe de texte sur une largeur d'écran de 400 pixels. Remarquez qu'aucun mot ne s'ajuste automatiquement à la ligne.
Image 3: paragraphe de texte sur une largeur d'écran de 375 pixels. Remarquez "vehicula at in risus" sur une seule ligne afin que le paragraphe apparaisse plus équilibré.
Cependant, le vrai problème est que vous ne pouvez certainement pas empêcher cela de se produire lorsque vous considérez la grande majorité des appareils et des tailles d'écran disponibles? Ou suis-je ignorant? Existe-t-il une méthode pour éviter que cela se produise? Est-ce un problème de convivialité?
Je crois que ce que vous voulez, c'est le Knuth-Plass Line Breaking Algorithm . Cet algorithme répartit les mots d'un paragraphe sur toutes ses lignes afin que le texte soit plus uniforme. Par conséquent, l'espacement est plus cohérent, les bords sont plus alignés et il y a plus de mots sur la dernière ligne.
Ainsi, par exemple,
Le renard brun rapide a sauté par-dessus le paresseux
chiens
se transforme en
Le renard brun rapide
a sauté par-dessus les chiens paresseux
Malheureusement, la prise en charge de cela n'est pas courante en dehors de TeX. Il y a ne proposition pour l'ajouter au CSS, mais c'est tout pour le moment. Cependant, il existe deux bibliothèques JavaScript qui implémentent cet algorithme: Typeset et BalanceText . Ce dernier a même un page de démonstration .
J'espère que ça aide!
La solution la plus simple serait d'ajouter un espace insécable entre les deux derniers mots d'un paragraphe. Certains mots sont assez longs pour ne pas en avoir besoin.
Je crois que c'est plus une question de savoir comment utiliser CSS. Avez-vous essayé certaines de ces suggestions? https://stackoverflow.com/questions/4652654/how-to-turn-off-Word-wrapping-in-html
Aussi, je recommanderais de changer l'alignement à gauche ou justifié, en plaçant le ou les deux mots restants sur le bord gauche du paragraphe. Je pense que cela aiderait à ce sentiment que les mots sont "déséquilibrés" puisque l'œil trouverait naturellement ces mots plus facilement qu'au centre de l'écran.