{"id":3388,"date":"2013-03-15T16:45:36","date_gmt":"2013-03-15T15:45:36","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=3388"},"modified":"2013-03-16T15:03:05","modified_gmt":"2013-03-16T14:03:05","slug":"controles-fin-des-cesures-css4-text","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/controles-fin-des-cesures-css4-text","title":{"rendered":"Un contr\u00f4le plus fin des c\u00e9sures avec CSS4 Text"},"content":{"rendered":"

On va parler un peu mise en page et typographie aujourd’hui, avec une traduction de l’article de David Storey (en)<\/a> sur le contr\u00f4le des c\u00e9sures gr\u00e2ce aux apports de CSS level 4. Rien de compl\u00e8tement utilisable encore, mais l’article me semblait suffisamment int\u00e9ressant.<\/p>\n

NdT<\/abbr><\/h2>\n

Pour ceux qui se demandent encore \u00e0 quoi correspondent les c\u00e9sures, rendez-vous sur cet article de typographisme<\/a>.
\nIl est important de noter que l’article a pu \u00eatre l\u00e9g\u00e8rement adapt\u00e9 pour une meilleure compr\u00e9hension de certains passages, mais \u00e9galement que je ne suis pas expert en r\u00e8gles typographiques, n’h\u00e9sitez donc pas \u00e0 apporter des corrections sur les termes techniques si vous les connaissez. Merci !<\/p>\n

Les expressions suivantes reprennent celles de l’auteur, ainsi lorsque des pronoms possessifs apparaissent, il s’agit bien du travail de l’auteur, non du mien.<\/p>\n

\n

CSS3 Text offre la possibilit\u00e9 de mettre en place une c\u00e9sure du texte par le biais de la propri\u00e9t\u00e9 hyphens<\/code>. Bien nous en fasse, il ne fournit pas le contr\u00f4le suffisamment fin dont vous auriez besoin pour obtenir des r\u00e9sultats professionnels. Pour cela, laissez-moi vous pr\u00e9senter CSS4 Text.<\/p>\n

Application classique de la c\u00e9sure<\/h2>\n

Beaucoup d’entre vous \u00eates probablement inform\u00e9s de l’utilit\u00e9 de la propri\u00e9t\u00e9 hyphens<\/code>. Il a longtemps \u00e9t\u00e9 consid\u00e9r\u00e9e comme une mauvaise pratique le fait de justifier (text-align: justify<\/code>) du texte sur le Web \u00e0 cause des l\u00e9zardes<\/a> qu’elle a tendance \u00e0 laisser entre les mots. La c\u00e9sure r\u00e9sout en grande partie ce probl\u00e8me, ou le r\u00e9duit tout du moins. Elle est \u00e9galement facile \u00e0 appliquer :<\/p>\n

p {\r\n   text-align: justify;\r\n\t\t\t\r\n   -webkit-hyphens: auto;\r\n   -moz-hyphens: auto;\r\n   -ms-hyphens: auto;\r\n   hyphens: auto;\r\n}<\/code><\/pre>\n
Aussi, n’oubliez pas de choisir la langue (en utilisant l’attribut lang<\/code> ou xml:lang<\/code>) de sorte que le navigateur sache quelles sont les r\u00e8gles de c\u00e9sure \u00e0 utiliser.<\/p>\n
Vous pouvez \u00e9galement utiliser la \u00ab\u00a0m\u00e9thode manuelle\u00a0\u00bb, qui s\u00e9parera un mot uniquement lorsque vous le pr\u00e9ciserez en utilisant le trait d’union doux (&shy;<\/code>) ou un tiret normal (\u00ab\u00a0tiret du 6\u00a0\u00bb)<\/em>.<\/p>\n
Le support navigateurs est mitig\u00e9 : Firefox, Internet Explorer 10, et Safari comprennent la c\u00e9sure, tandis que Chrome et Opera ne la supporte pas. Un point de plus pour les diff\u00e9rences entre les navigateurs WebKit.<\/p>\n
Les probl\u00e8mes avec la c\u00e9sure<\/h2>\n
Alors que la c\u00e9sure r\u00e9duit les l\u00e9zardes qui traversent votre texte, elles conduisent \u00e0 une autre probl\u00e9matique. Celle des \u00e9chelles. En typographie, les \u00e9chelles surgissent quand plus de deux tirets de fin de ligne apparaissent sur des lignes successives. Cela devient visuellement g\u00eanant, et rend le texte plus difficile \u00e0 lire. C’est particuli\u00e8rement le cas lors de l’utilisation de courtes longueurs de ligne, par exemple avec une mise en page en multi-colonnes.<\/p>\n
Un plus fort contr\u00f4le avec CSS4 Text<\/h2>\n
Le cahier des charges de CSS4 Text<\/a> (attention, travaux en cours) fournit un certain nombre de fa\u00e7ons dont vous pouvez optimiser l’application des c\u00e9sures. Bien qu’elles ne remplacent pas la cr\u00e9ation \u00ab\u00a0manuelle\u00a0\u00bb des c\u00e9sure dans votre texte, elle vous donne un contr\u00f4le beaucoup plus fin, et peut am\u00e9liorer la lisibilit\u00e9 de votre texte justifi\u00e9 et c\u00e9sur\u00e9.<\/p>\n
Limiter le nombre de c\u00e9sures dans une ligne avec hyphenate-limit-lines<\/code><\/h2>\n
La propri\u00e9t\u00e9 hyphenate-limit-lines<\/code> vous permet de sp\u00e9cifier le nombre maximal de lignes dans une rang\u00e9e pour qu’un mot puisse subir une c\u00e9sure. La r\u00e8gle g\u00e9n\u00e9rale accepterait deux lignes cons\u00e9cutives maximum, en th\u00e9orie :<\/p>\n
hyphenate-limit-lines: 2;<\/code><\/pre>\n
Cette propri\u00e9t\u00e9 est actuellement prise en charge par IE10 et Safari, utilisez les pr\u00e9fixes -ms-<\/code> et -webkit-<\/code> respectivement.<\/p>\n
Vous pouvez consulter ma d\u00e9mo de hyphenate-limit-lines<\/code><\/a> pour le voir en action. Vous aurez besoin d’utiliser l’un des navigateurs mentionn\u00e9s ci-dessus pour voir la diff\u00e9rence entre les deux blocs de texte. Si vous ne voyez pas trois ou plusieurs traits d’union dans une rang\u00e9e pour le premier exemple, vous pouvez redimensionner la largeur de la fen\u00eatre du navigateur. Vous devriez voir que le second exemple n’a jamais plus de deux traits d’union dans une rang\u00e9e.<\/p>\n
\"Une<\/p>\n
Limitation de la longueur des mots et du nombre de caract\u00e8res avant et apr\u00e8s le tiret.<\/h2>\n
En g\u00e9n\u00e9ral, vous ne voulez pas que des mots trop courts soient c\u00e9sur\u00e9s car ils deviennent plus difficiles \u00e0 lire. De m\u00eame, souvent, vous ne souhaitez pas que trop peu de caract\u00e8res soient laiss\u00e9s sur une ligne avant la c\u00e9sure, ou que trop peu soient pouss\u00e9s \u00e0 la ligne suivante apr\u00e8s le tiret. Je ne pense pas qu’il y est une r\u00e8gle strict pour les limites id\u00e9ales, c’est davantage bas\u00e9 sur ce qui semble \u00eatre le mieux pour votre contenu. J’ai vu une recommandation d’une limite \u00e0 six caract\u00e8res de texte, avec trois caract\u00e8res minimum avant la pause, et deux apr\u00e8s. J’ai vu de bons r\u00e9sultats avec cela, mais votre mesure peut varier.<\/p>\n
Vous pouvez d\u00e9finir ces limites avec la propri\u00e9t\u00e9 hyphenate-limit-chars<\/code>. Elle accepte trois valeurs s\u00e9par\u00e9es par des espaces. Si toutes sont r\u00e9gl\u00e9es, la premi\u00e8re correspond \u00e0 la limite minimale des caract\u00e8res que le mot doit avoir avant c\u00e9sure, la seconde est le nombre de caract\u00e8res minimal avant le tiret, et la derni\u00e8re correspond aux caract\u00e8res minimum apr\u00e8s le tiret. Si la derni\u00e8re valeur est manquante, elle est r\u00e9gl\u00e9e sur la m\u00eame que la seconde. Si une seule valeur est fournie, les deux derni\u00e8res sont mises \u00e0 auto<\/code>. Si le mot-cl\u00e9 auto<\/code> est utilis\u00e9 (ou implicite), le moteur du navigateur choisit le meilleur ajustement bas\u00e9 sur le mod\u00e8le courant. (d\u00e9pend de la langue)<\/p>\n
L’exemple suivant d\u00e9finit une limite \u00e0 six caract\u00e8res de texte, avec trois caract\u00e8res avant le tiret et deux apr\u00e8s : <\/p>\n
hyphenate-limit-chars: 6 3 2;<\/code><\/pre>\n
La prise en charge est actuellement limit\u00e9e \u00e0 IE10 avec le pr\u00e9fixe -ms-<\/code><\/p>\n
Vous pouvez le voir en action dans IE10 dans ma d\u00e9mo hyphenate-limit-chars<\/code><\/a>. Encore une fois, redimensionnez la largeur de la fen\u00eatre pour voir les diff\u00e9rents comportements. J’ai soulign\u00e9 manuellement dans le second exemple les mots qui peuvent potentiellement subir une c\u00e9sure (six caract\u00e8res ou plus). Ils ne seront pas toujours c\u00e9sur\u00e9s, comme elle ne peut s’appliquer que dans le cas qui vous laissera suffisamment de caract\u00e8res avant ou apr\u00e8s le tiret.<\/p>\n
\"\"<\/p>\n
R\u00e9glage de la zone de c\u00e9sure<\/h2>\n
Lors de l’utilisation de la c\u00e9sure, il y a une zone sp\u00e9cifique, \u00e0 la fin d’une ligne, dans laquelle un mot \u00e0 besoin de tomber avant qu’il soit consid\u00e9r\u00e9 par la c\u00e9sure. Avec la propri\u00e9t\u00e9 hyphenate-limit-zone<\/code>, vous pouvez sp\u00e9cifier manuellement la largeur de cette zone.<\/p>\n
Pour qu’un mot soit consid\u00e9r\u00e9 comme tombant, ou non, dans la limite, il faut l’imaginer avant la c\u00e9sure (ex: comme si text-align:left<\/code> est appliqu\u00e9 lorsque vous utilisez une langue qui se lit de gauche \u00e0 droite). Si un mot tombe dans la zone de c\u00e9sure, aucune c\u00e9sure ne sera appliqu\u00e9e. Par contre si le dernier mot de la ligne tombe en dehors de la zone, s’il d\u00e9passe, le mot est coup\u00e9 et port\u00e9 \u00e0 la ligne suivant, et la ligne actuelle se munie d’un trait d’union (sauf si d’autres limites de c\u00e9sure emp\u00eachent de le faire).<\/p>\n
La zone de c\u00e9sure est sp\u00e9cifi\u00e9e en utilisant une valeur de longueur ou un pourcentage. Dans l’exemple suivant, il est mis \u00e0 40px :<\/p>\n
hyphenate-limit-zone: 40px;<\/code><\/pre>\n
La prise en charge est actuellement limit\u00e9e \u00e0 IE10<\/code><\/p>\n
Ouvrez la d\u00e9mo de hyphenate-limit-zone<\/a> dans ce navigateur pour le voir en action. J’ai mis en \u00e9vidence l’emplacement de la zone dans chaque exemple. Dans les premier, troisi\u00e8me et cinqui\u00e8me exemples aucune zone de coupure n’est r\u00e9gl\u00e9e, mais il est clairement montr\u00e9 quels mots tombent dans ou en dehors de la zone avant que la justification et la c\u00e9sure ne soient appliqu\u00e9es.<\/p>\n
\"\"<\/p>\n
D’autres fonctionnalit\u00e9s non support\u00e9es<\/h2>\n
Il y a deux propri\u00e9t\u00e9s suppl\u00e9mentaires qui ne sont prises en charge dans aucun des navigateurs actuels.<\/p>\n
Le premier est hyphenate-character<\/code>. Cette propri\u00e9t\u00e9 accepte une cha\u00eene qui sp\u00e9cifie le caract\u00e8re utilis\u00e9 pour couper les mots. Par exemple, le trait d’union r\u00e9gulier (qui est la valeur par d\u00e9faut et n’a donc pas besoin d’\u00eatre pr\u00e9cis\u00e9) peut \u00eatre r\u00e9gl\u00e9e \u00e0 l’aide de :<\/p>\n
hyphenate-character: \"\\2010\";<\/code><\/pre>\n
Je ne sais pas pourquoi vous voudriez pr\u00e9ciser un autre caract\u00e8re \u00e0 utiliser que celui par d\u00e9faut pour la langue en question, mais j’imagine qu’il doit y avoir des cas d’utilisation si vous \u00eates cr\u00e9atif.<\/p>\n
L’autre propri\u00e9t\u00e9 non prise en charge est hyphenate-limit-last<\/code>. Elle indique si la c\u00e9sure est appliqu\u00e9e sur la derni\u00e8re ligne d’un \u00e9l\u00e9ment, d’une colonne, d’une page ou d’une propagation. Le mot-cl\u00e9 none<\/code> n’applique aucune restriction, le mot-cl\u00e9 always<\/code> n’applique pas de c\u00e9sure sur la derni\u00e8re ligne de tous les cas mentionn\u00e9s ci-dessus. Le mot-cl\u00e9 spread<\/code> n’applique pas de c\u00e9sure \u00e0 la derni\u00e8re ligne avant une propagation, page<\/code> la restreint aux propagations et aux sauts de page, tandis que le mot-cl\u00e9 column<\/code> ajoute encore \u00e0 la restriction les sauts de colonne.<\/p>\n
hyphenate-limit-last: column;<\/code><\/pre>\n
Mettez tout ensemble<\/h2>\n
Bien que chacun des exemples ci-dessus n’utilisait que l’une des propri\u00e9t\u00e9s hyphenate-limit-*<\/code>, elles peuvent \u00eatre combin\u00e9es pour appliquer un plus grand contr\u00f4le. \u00c0 moins d’\u00eatre un expert des c\u00e9sures (que je ne suis pas), vous pouvez obtenir de meilleurs r\u00e9sultats en jouant avec les diff\u00e9rentes propri\u00e9t\u00e9s pour que cela convienne \u00e0 votre propre contenu. Diff\u00e9rents styles tels que la longueur des lignes, la justification, les colonnes, l’espacement entre les mots, espacement entre les lettres, la taille du texte, etc. peuvent avoir une influence sur la fa\u00e7on dont le texte va \u00eatre c\u00e9sur\u00e9. Rappelez-vous juste de ne pas abuser avec les restrictions de c\u00e9sure, ou vous allez vous retrouver avec le m\u00eame probl\u00e8me qu’initialement lorsque vous vouliez \u00e9viter la c\u00e9sure : de grandes l\u00e9zardes d’espaces blancs entre les mots.<\/p>\n
\n
Sources et liens utiles<\/h2>\n