Justif - justification Knuth-Plass et microtypographie pour le web

 (justif.lyall.co)
1 points par GN⁺ 2 시간 전 | 1 commentaires | Partager sur WhatsApp
  • Justif est une démo web qui compare directement le rendu par défaut du navigateur à une justification de texte de niveau publication
  • Il est possible de configurer séparément la césure et la protrusion des glyphes, l’extension de largeur, l’ajustement de l’interlettrage et l’alignement de l’espacement de la dernière ligne
  • On peut régler la largeur minimale de la dernière ligne et la portée de la ponctuation en saillie, puis comparer aussi le résultat avec text-wrap: pretty
  • En plus de textes littéraires et techniques en anglais, on peut tester des textes RTL en hébreu et en arabe, ainsi que du japonais avec des polices serif, sans et monospace
  • Le site mesure côte à côte avec le rendu du navigateur le nombre de lignes, les coupures avec césure, les lignes en débordement, les dernières lignes trop courtes, ainsi que les écarts d’espacement et les rivières

Justification et réglages détaillés

  • Justif est conçu pour tester sur le web la justification Knuth-Plass et plusieurs fonctions de microtypographie
    • césure
    • protrusion des glyphes
    • extension de largeur
    • ajustement de l’interlettrage
    • alignement de l’espacement de la dernière ligne
  • La ponctuation en saillie nécessite l’activation de la protrusion des glyphes et peut s’appliquer à la fin des lignes, au début de la première ligne ou à l’ensemble du texte
  • La largeur minimale de la dernière ligne peut être réglée à 0.33, et la largeur du corps de texte à 13em

Comparaison des textes, des polices et mesures

  • Il est possible de choisir le texte à comparer parmi Alice au pays des merveilles, Le Prince Grenouille, Frankenstein, Ulysse, des billets techniques, la RFC 2324 et des spécimens typographiques
  • Des textes RTL en hébreu et en arabe ainsi que des textes japonais sont également proposés
  • Les polices prises en charge incluent Junicode, EB Garamond, Alegreya, IM Fell English, Vollkorn, Amstelvar, Latin Modern, Georgia, Roboto Flex, Courier Prime, IBM Plex Mono ainsi que les polices système
  • En cliquant sur le résultat ou en appuyant longuement, le rendu par défaut du navigateur apparaît pour être comparé au rendu de Justif
  • Les outils de comparaison prennent en charge text-wrap: pretty, le flou, une règle de marge et l’affichage des espacements irréguliers
  • Les mesures incluent le nombre de lignes, les retours à la ligne avec césure, les lignes en débordement, les dernières lignes trop courtes, les rivières, ainsi que l’espacement moyen, l’écart moyen par rapport à un espacement naturel, l’écart-type et l’espace le plus large

À lire aussi

1 commentaires

 
GN⁺ 2 시간 전
Commentaires sur Lobste.rs

  • Ce projet a été vibe codé avec Fable https://news.ycombinator.com/item?id=48946738#49002419

    • Je me demande si ce tag est vraiment nécessaire, alors que le sujet de l’article n’est pas le vibe coding.
      Je ne suis pas intéressé par les récits d’utilisation de LLM et j’aimerais les filtrer, mais en pratique, il semble que le tag soit ajouté dès qu’il y a le moindre soupçon d’utilisation d’un assistant de codage, même si c’est sans rapport avec le contenu.
      Ici, l’utilisation est évidente, mais j’ai aussi vu des articles sur des projets tagués simplement parce qu’ils acceptaient des contributions de personnes utilisant des assistants de codage.
    • J’assume sans problème avoir utilisé un LLM pour créer ce projet.
      Cela dit, le terme vibe coding et le tag utilisé ici ont déjà perdu leur utilité ; il nous faut une formulation plus précise et plus productive pour distinguer les articles qui parlent de l’usage des LLM des productions où un LLM a simplement été utilisé au passage dans le processus de création.
    • Homard 1 : « Ils ont développé un médicament qui guérit le cancer ! »
      Homard 2 : « Oui… mais ils ont utilisé AlphaFold et CRISPR, et… roulement de tambour… Fable »
      Homard 1 : « Mon Dieu, c’est inacceptable ! Jetons tout et passons 40 ans à redessiner des protéines au crayon de couleur sur un tableau noir, pour le bien de l’humanité ! »

  • Le résultat est très réussi, et va même plus loin que TeX sans le paquet microtype.
    Ce genre de fonctionnalités de composition devrait être géré directement par le navigateur.
    Certains navigateurs ont implémenté text-wrap: pretty, mais cela semble limité à quelques lignes.

    • Safari implémente aujourd’hui correctement pretty, mais il y a un bug quand on l’utilise avec justify.
      https://matklad.github.io/2026/02/14/justifying-text-wrap-pretty.html
    • Si l’on regarde la spécification de text-wrap: pretty, c’est un simple indice dont le comportement n’est pas défini.
      Elle dit seulement que l’agent utilisateur doit privilégier une meilleure mise en page plutôt que la vitesse et prendre en compte plusieurs lignes au moment de décider des retours à la ligne ; pour le reste, c’est identique à auto.
      Cela peut éviter une dernière ligne trop courte, des blancs formant des rivières entre les lignes, des traits d’union répétés, etc., mais la manière exacte d’améliorer le rendu varie selon les navigateurs.
      Si je me souviens bien, cela a été intégré à la spécification pour éviter des contraintes excessives, puisque plusieurs navigateurs voulaient l’implémenter différemment.
      C’est une situation un peu comparable à l’abandon de Web SQL, quand il est devenu clair que les implémentations finiraient par utiliser SQLite.
      J’espère qu’un jour ces fonctionnalités seront appliquées par défaut à text-wrap: auto, de sorte que text-wrap: pretty n’ait plus aucun effet, et j’espère aussi que https://bugzilla.mozilla.org/show_bug.cgi?id=630181 sera implémenté.
      Ce genre d’indice n’est pas nouveau : will-change était aussi un indice d’optimisation destiné aux navigateurs de la génération précédente.
      Au moment de sa standardisation, Firefox n’en avait presque plus besoin et cela n’aidait même pas certains moteurs de nouvelle génération, tout en étant massivement abusé ; il aurait peut-être mieux valu conserver transformZ(0), qui était au moins un contournement explicite.
    • Dans un monde idéal, cette bibliothèque n’aurait pas besoin d’exister.
      Dans la démo, on peut activer ou désactiver text-wrap: pretty et tester le comportement selon les navigateurs ; les approches de Blink, WebKit et Gecko sont étonnamment différentes, donc je recommande d’essayer dans plusieurs navigateurs.

  • J’ai toujours pensé que la ponctuation suspendue était généralement appliquée de façon excessive.
    Si on la remarque, c’est déjà trop ; en particulier, “ ressort presque toujours, donc il devrait dépasser de moins de la moitié de ce qu’on voit aujourd’hui.
    En revanche, j’aime assez l’effet du “ en début de paragraphe, qui fonctionne comme une petite indentation.
    Le résultat est acceptable si l’on désactive la suspension et que l’on ne garde qu’un dépassement plus subtil, mais la plupart du temps je préfère désactiver les deux.
    Ce traitement dépend énormément de la police.
    Avec la police sérif Equity que j’utilise, appliquer cela à un « f, » en fin de ligne donne un résultat étrange : à cause du crénage, la virgule se trouve déjà sous le f, et le haut du f finit donc par dépasser hors de la ligne.
    Si une police sérif place naturellement les queues ou les empattements des lettres en dehors de la chasse pour les faire dépasser, ce serait probablement une cible plus pertinente que la plupart des signes de ponctuation.
    Pour le réglage de l’interlettrage, letter-spacing est risqué, car il cohabite mal avec les ligatures.
    Si les ligatures sont appliquées en premier, on obtient quelque chose comme « T h i s i s fi n e! » ; si un letter-spacing non nul désactive les ligatures, le f entre en collision avec le point du i.
    C’est généralement le second cas qui se produit, mais cela dépend du système d’écriture, de la police et des fonctionnalités OpenType explicitement activées, et c’est assez facile à déclencher sans le vouloir.

    • Personnellement, j’aime l’apparence de la ponctuation suspendue, mais elle est bien sûr configurable.
      Je suis d’accord pour dire que l’interlettrage est délicat à cause des ligatures, mais avec la limite par défaut de ±3 %, je trouve que le rendu reste correct.
      Dans l’exemple « Type Specimen », on peut voir à la fin du premier paragraphe une suite de ligatures fl, fi et ffi, et la limite de 3 % est également configurable.
    • La ponctuation suspendue pourrait expliquer un phénomène qui m’avait énervé sur certains sites suédois, où un guillemet fermant d’ouverture restait tout seul à la fin de la ligne précédente.
      En suédois, on utilise uniquement le guillemet double fermant au début comme à la fin des citations.
      Je me demande depuis longtemps s’il existe un moyen d’indiquer au navigateur la langue ou la locale d’un texte donné afin qu’il gère automatiquement les guillemets, les séparateurs décimaux, etc.

  • Je voudrais souligner que les exemples utilisent une largeur de ligne artificiellement étroite pour mettre en valeur l’amélioration.
    On recommande généralement une ligne d’environ deux alphabets minuscules, soit environ 60 caractères.

    • Il me semble que la largeur des colonnes dans les anciens journaux était proche de celle de l’exemple, mais cela ne veut pas dire que ce soit une norme à suivre aujourd’hui.
    • On peut élargir la colonne pour comparer avec une largeur de texte plus réaliste.
      La différence est beaucoup moins spectaculaire, mais elle reste nette, et même avec une largeur de ligne de 36em, les statistiques sont nettement meilleures que les valeurs par défaut.

  • Je me demande si le tag vibe coding a été ajouté parce que l’auteur a indiqué sur un autre site avoir utilisé un LLM.
    Le contenu du lien n’a rien à voir avec les LLM ni avec le vibe coding ; à ce stade, ce tag ressemble à une chasse aux sorcières.

    • En étant plus charitable, c’est parce que ce tag remplit deux rôles : en plus de signaler qu’un article traite de vibe coding, il sert souvent aussi d’avertissement de contenu sensible.
      Cela entre en conflit avec son usage le plus explicite, ce qui prête à confusion et peut paraître inutilement agressif.
      Ce n’est pas idéal qu’un seul tag ait deux objectifs, mais je suis globalement favorable aux avertissements de contenu sensible et à la possibilité de filtrer librement ce qu’on ne veut pas voir.
      Même si ce tag est confus, au moins il ne pénalise pas l’auteur.