Bonjour,
Comment améliorer la coupure des mots dans les textes d’articles ?Actuellement certaines coupures sont anarchiques et détruisent la lisibilité du texte.
C’est beaucoup plus lisible de ne pas couper un mot, même si cela l’aligne à gauche à la ligne suivante.
Le fait de « Justifier », dans le langage d’imprimerie, (aligner à gauche et à droite) était valable pour imprimer des colonnes de textes dans les magazines et journaux, mais sur écran, cela s’oppose à la lisibilité.
Par exemple, sur ces « copies-écran » de la vue adaptative de firefox :
- des coupures se font au milieu des mots sans respecter les habitudes typographiques ( Couper entre deux consonnes, couper avant une consonne, etc …)
- d’autres coupent pour une seule lettre qui passe à la ligne ( « est » devient « es » & à la ligne « t », « ra » & à la ligne « isonneront », … )
- des noms propres sont coupés ( « Madame Vaira Vik » & à la ligne « e-Freiberga », « Maris Si » & « RMAIS » à la ligne, ) , cela ne se fait pas en typographie.
Comment aligner à gauche, sans couper les mots ?
Quels réglages incorporer ou modifier, et ou ?
Merci.
Hello
Pas facile de trouver la bonne solution pour les mots plus larges que l’écran (exemple d’une url à rallonge)
je viens de livrer un correctif … à tester
JC
Y a-t-il des trucs à appliquer avec
Les propiétés Text CSS3 :
Property | Description |
- | - |
text-align-last | Spécifie comment aligner la dernière ligne d’un texte |
text-justify | Spécifie comment le texte justifié doit être aligné et espacé |
text-overflow | Spécifie comment le contenu débordé qui n’est pas affiché doit être signalé à l’utilisateur |
word-break | Spécifie les règles de saut de ligne pour les scripts non-CJK |
word-wrap | Permet aux mots longs d’être brisés et de passer à la ligne suivante |
avec Word-Break , je ne sais pas si c’est idéal ,
https://www.w3schools.com/css/tryit.asp?filename=trycss3_word-break
CSS3 https://www.w3schools.com/css/css3_text_effects.asp
Je n’ai pas encore trouvé la bonne solution pour afficher des dimensions de police variant selon les écrans
Il y a des trucs ici : https://www.w3schools.com/css/css_font.asp avec des combinaisons de % et Em
@+
Le 29/11/2017 à 20:42, JASEUR BOREAL a écrit :
Y a-t-il des trucs à appliquer avec
word-break <https://www.w3schools.com/cssref/css3_pr_word-break.asp>
Mouais, tant que tu utilises des lignes sur un container assez grand ça va (et encore ! ), mais comme la césure se fait à peu près n'importe où, tu risques d'avoir des trucs style :
c'est sur ce site de cons
titutionalié que peuvent
...
Vaudrait ptet plus aller fouiner vers :
et puis moi j'aime bien les wraps, ça change des casse-dalles standards.
Bonne journée,
Yves
@Yves , Oui, c’est apparemment une meilleure solution :
À la différence de word-break, overflow-wrap créera uniquement un saut de ligne si un mot entier ne peut pas être placé sur sa propre ligne sans dépasser.
@Yves , Merci, pour le lien qui permet de trouver aussi
cette propriété à tester : text-size-adjust qui permet de contrôler l’algorithme d’amplification du texte sur certains appareils mobiles. Cette propriété n’est pas standard et doit donc être préfixée : -moz-text-size-adjust, -webkit-text-size-adjust, and -ms-text-size-adjust.
https://developer.mozilla.org/fr/docs/Web/CSS/text-size-adjust