L'espacement des lettres est cassé et il n'y a rien que nous puissions faire à ce sujet ... peut-être

Cet article explore une discussion fascinante au sein du groupe de travail CSS (CSSWG) concernant la propriété letter-spacing. Un développeur de Mozilla senior a mis en évidence un écart de longue date entre la façon dont les navigateurs rendent cette propriété et sa spécification CSS réelle. Cette propriété apparemment simple révèle une complexité surprenante.

Le problème de base découle de la façon dont les navigateurs gèrent l'espacement entre les caractères. Alors que les humains comprennent intuitivement l'espacement des lettres, les ordinateurs nécessitent une stratégie définie. Doit-on ajouter l'espace avant, après, ou également distribué autour de chaque lettre? Cela devrait différer entre les langues de gauche à droite (LTR) et de droite à gauche (RTL)? La stratégie choisie a un impact significatif sur la mesure du texte et les ruptures de ligne.

Actuellement, les implémentations du navigateur s'écartent de la spécification CSS. La spécification veut que l'espacement se produise entre des caractères, mais les navigateurs ajoutent généralement de l'espace à la end de chaque caractère. Cette incohérence existe sur différents moteurs de rendu comme Gecko (Firefox), Blink (Chrome, etc.) et WebKit (Safari).

La spécification CSS définit letter-spacing comme: "Spécifie l'espacement supplémentaire entre les unités de caractères typographiques." Cependant, l'implémentation commune du navigateur ajoute un espace supplémentaire à la fin de chaque caractère, conduisant à un espacement asymétrique, en particulier notable dans le texte centré ou les langues RTL. Dans les langues RTL, l'écart crée un écart au début du texte.

Pourquoi cette divergence? La modification du comportement du navigateur établi risquerait une rupture de sites Web généralisées en raison de la mesure modifiée du texte et des ruptures de ligne. Les sites Web ont peut-être déjà compensé le comportement actuel par des solutions de contournement, ce qui rend un changement perturbateur.

Deux solutions potentielles sont prises en compte:

Option 1: Distribution de l'espace de retravail: La spécification pourrait être révisée pour exiger la distribution d'espace égale avant et après chaque caractère. Cela créerait un espacement symétrique mais comporte toujours le risque de changements de mise en page.

Option 2: Placement contrôlé par les développeurs: introduire une nouvelle propriété (par exemple, letter-spacing-justify) permettant aux développeurs de spécifier où l'espacement est appliqué (before, after, left, right, between, around). Cela offre une flexibilité, en maintenant une compatibilité arrière tout en permettant un meilleur contrôle d'espacement pour les nouveaux projets.

Une troisième option, en maintenant le statu quo, est moins probable compte tenu de l'engagement du CSSWG à résoudre ce problème. Le résultat le plus probable semble être l'option 2, offrant aux développeurs un plus grand contrôle sur le comportement letter-spacing. Le voyage vers une implémentation plus précis et cohérente letter-spacing est en cours, mettant en évidence les subtilités de la typographie Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!