Justif – Knuth-Plass-Blocksatz und Mikrotypografie fürs Web

 (justif.lyall.co)
1 Punkte von GN⁺ 2 시간 전 | 1 Kommentare | Auf WhatsApp teilen
  • Justif ist eine Web-Demo, die das Standard-Rendering des Browsers direkt mit Text-Blocksatz auf Publikationsniveau vergleicht
  • Silbentrennung und Zeichenüberhang, Breitenexpansion, Laufweitenanpassung und Ausrichtung der letzten Zeile lassen sich jeweils konfigurieren
  • Die minimale Breite der letzten Zeile und der Bereich für hängende Satzzeichen können angepasst und auch mit den Ergebnissen von text-wrap: pretty verglichen werden
  • Neben englischer Literatur und technischen Dokumenten lassen sich auch hebräische und arabische RTL-Texte sowie Japanisch in Serif-, Sans- und Monospace-Schriften testen
  • Zeilenzahl, Silbentrennungs-Umbrüche, überlaufende Zeilen, kurze letzte Zeilen sowie Abweichungen bei Leerraum und Rivers werden neben dem Browser-Rendering gemessen

Blocksatz und Detailoptionen

  • Justif ist dafür ausgelegt, Knuth-Plass-Blocksatz und verschiedene Mikrotypografie-Funktionen im Web zu testen
    • Silbentrennung
    • Zeichenüberhang
    • Breitenexpansion
    • Laufweitenanpassung
    • Ausrichtung der letzten Zeile
  • Hängende Satzzeichen sind erst nutzbar, wenn Zeichenüberhang aktiviert ist, und können auf Zeilenenden und den Beginn der ersten Zeile oder auf den gesamten Bereich angewendet werden
  • Die minimale Breite der letzten Zeile lässt sich auf 0.33, die Textbreite auf 13em einstellen

Text- und Schriftvergleich sowie Messung

  • Als Vergleichstext lassen sich Alice in Wonderland, Frog Prince, Frankenstein, Ulysses, ein technischer Post, RFC 2324 und Schriftmuster auswählen
  • Auch hebräische und arabische RTL-Texte sowie japanische Texte werden angeboten
  • Zu den unterstützten Schriften gehören Junicode, EB Garamond, Alegreya, IM Fell English, Vollkorn, Amstelvar, Latin Modern, Georgia, Roboto Flex, Courier Prime, IBM Plex Mono und Systemschriften
  • Durch Klicken oder langes Drücken auf das Ergebnis wird das Standard-Rendering des Browsers sichtbar, sodass es mit dem Justif-Rendering verglichen werden kann
  • Das Vergleichswerkzeug unterstützt text-wrap: pretty, Weichzeichnung, Randlineale und die Anzeige ungleichmäßiger Leerzeichen
  • Die Messwerte umfassen Zeilenzahl, Silbentrennungs-Umbrüche, überlaufende Zeilen, kurze letzte Zeilen und Rivers sowie durchschnittlichen Leerraum, durchschnittliche Abweichung vom natürlichen Leerraum, Standardabweichung und den breitesten Leerraum

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2 시간 전
Lobste.rs-Kommentare

  • Dieses Projekt wurde mit Fable per Vibe Coding erstellt: https://news.ycombinator.com/item?id=48946738#49002419

    • Ich frage mich, ob dieser Tag wirklich nötig ist, obwohl es in dem Beitrag gar nicht um Vibe Coding geht.
      Ich habe kein Interesse daran, Erfahrungsberichte zur LLM-Nutzung zu lesen und würde sie gern ausfiltern, aber in der Praxis scheint der Tag unabhängig vom eigentlichen Inhalt schon dann vergeben zu werden, wenn nur der Verdacht besteht, dass ein Coding-Assistent benutzt wurde.
      Diesmal ist die Nutzung eindeutig, aber ich habe auch Fälle gesehen, in denen ein Projektbeitrag den Tag bekam, nur weil Beiträge von Leuten akzeptiert werden, die Coding-Assistenten verwenden.
    • Er gibt ohne Zögern zu, beim Erstellen dieses Projekts ein LLM verwendet zu haben.
      Allerdings hat der Begriff Vibe Coding und der hier verwendete Tag seinen Nutzen bereits verloren, und es braucht präzisere und produktivere Formulierungen, die zwischen Beiträgen über LLM-Nutzung und Ergebnissen unterscheiden, bei deren Erstellung nur beiläufig ein LLM verwendet wurde.
    • Hummer 1: „Sie haben ein Medikament gegen Krebs entwickelt!“
      Hummer 2: „Ja … aber sie haben AlphaFold und CRISPR und … Tusch … Fable benutzt.“
      Hummer 1: „Mein Gott, untragbar! Werfen wir alles weg und verbringen 40 Jahre damit, für die Menschheit Proteine mit Buntstiften wieder auf eine Tafel zu zeichnen!“

  • Das Ergebnis ist wirklich großartig und sogar besser als TeX ohne das microtype-Paket.
    Solche Satzfunktionen sollten direkt vom Browser übernommen werden.
    Einige Browser haben text-wrap: pretty implementiert, aber es scheint auf nur ein paar Zeilen begrenzt zu sein.

    • In Safari ist pretty inzwischen ordentlich implementiert, aber zusammen mit justify gibt es einen Bug.
      https://matklad.github.io/2026/02/14/justifying-text-wrap-pretty.html
    • Wenn man sich die text-wrap: pretty-Spezifikation ansieht, ist es ein reiner Hinweis, dessen Verhalten nicht genauer definiert ist.
      Im Wesentlichen heißt es nur, dass der User Agent bei der Entscheidung über Zeilenumbrüche mehrere Zeilen berücksichtigen und eine bessere Anordnung über Geschwindigkeit stellen sollte; ansonsten ist es wie auto.
      Zu vermeiden sind etwa übermäßig kurze Schlusszeilen, flussartige Leerraumrinnen zwischen den Zeilen und aufeinanderfolgende Trennstriche, aber wie genau das verbessert wird, unterscheidet sich je nach Browser.
      Soweit ich mich erinnere, kam das so in die Spezifikation, um zu starre Vorgaben zu vermeiden, nachdem mehrere Browser angekündigt hatten, es jeweils unterschiedlich umzusetzen.
      Ähnlich wie bei der Abschaffung von Web SQL, als sichtbar wurde, dass die Implementierungen am Ende ohnehin SQLite verwenden würden.
      Ich hoffe, dass diese Funktionen irgendwann standardmäßig in text-wrap: auto einfließen, sodass text-wrap: pretty gar nichts mehr bewirkt, und dass https://bugzilla.mozilla.org/show_bug.cgi?id=630181 ebenfalls umgesetzt wird.
      Solche Hinweise sind nicht neu; auch will-change war ein Optimierungshinweis für Browser der vorherigen Generation.
      Als es spezifiziert wurde, war es in Firefox größtenteils schon unnötig und half manchen Engines der nächsten Generation überhaupt nicht, wurde aber trotzdem massiv missbraucht; da wäre es vielleicht besser gewesen, einfach den offensichtlichen Hack transformZ(0) beizubehalten.
    • In einer idealen Welt müsste es diese Bibliothek gar nicht geben.
      Im Demo kann man text-wrap: pretty umschalten und das Verhalten je nach Browser testen; die Unterschiede zwischen Blink, WebKit und Gecko sind erstaunlich groß, daher lohnt sich ein Test in mehreren Browsern.

  • Ich denke schon lange, dass hängende Interpunktion meist zu stark eingesetzt wird.
    Wenn sie auffällt, ist sie schon zu stark, und besonders “ sticht fast immer hervor, daher sollte es noch weniger herausragen als jetzt, vielleicht nicht einmal halb so stark.
    Andererseits gefällt mir, dass ein “ am Anfang eines Absatzes fast wie ein kleiner Einzug wirkt.
    Wenn man das Hängen deaktiviert und nur ein subtileres Hervorstehen aktiviert, ist das Ergebnis akzeptabel, aber meistens würde ich lieber beides ausschalten.
    Solche Dinge hängen stark von der Schriftart ab.
    In der Serifenschrift Equity, die ich verwende, wirkt das bei „f,“ am Zeilenende seltsam, weil das Komma durch Kerning bereits unter das f gezogen ist und dadurch sogar der obere Teil des f über den Rand hinausragt.
    Wenn Serifenschriften Schwänze oder Ausläufer eines Buchstabens ohnehin außerhalb seiner Breite platzieren und ihn dadurch natürlich herausragen lassen, wäre das vielleicht ein besseres Ziel als die meiste Interpunktion.
    Bei der Laufweitenanpassung ist letter-spacing problematisch, weil es sich schlecht mit Ligaturen verträgt.
    Wenn Ligaturen zuerst angewendet werden, entsteht so etwas wie „T h i s i s fi n e!“, und wenn letter-spacing ungleich null Ligaturen deaktiviert, kollidiert das f mit dem Punkt auf dem i.
    Meistens sieht man Letzteres, aber das hängt von Schriftsystem, Schriftart und explizit aktivierten OpenType-Features ab und kann leicht unbeabsichtigt auftreten.

    • Persönlich mag ich das Aussehen hängender Interpunktion, aber natürlich sollte man das per Einstellung ändern können.
      Ich stimme zu, dass Laufweitenanpassung wegen Ligaturen heikel ist, aber mit der Standardeinschränkung von ±3 % finde ich sie noch ansehnlich.
      Im Beispiel „Type Specimen“ kann man am Ende des ersten Absatzes die Folge von fl-, fi- und ffi-Ligaturen sehen, und auch die 3-%-Grenze ist konfigurierbar.
    • Vielleicht erklärt hängende Interpunktion das Phänomen, über das ich mich auf manchen schwedischen Websites geärgert habe, wo das öffnende rechte doppelte Anführungszeichen allein am Ende der vorherigen Zeile stehen blieb.
      Im Schwedischen werden für Anfang und Ende eines Zitats nur rechte doppelte Anführungszeichen verwendet.
      Ich frage mich schon lange, ob es eine Möglichkeit gibt, dem Browser die Sprache oder Locale eines bestimmten Texts mitzuteilen, damit Dinge wie Anführungszeichen und Dezimaltrennzeichen automatisch korrekt behandelt werden.

  • Ich möchte darauf hinweisen, dass die Beispiele künstlich schmale Zeilenbreiten verwenden, um die Verbesserung stärker hervorzuheben.
    Allgemein wird empfohlen, dass eine Zeile ungefähr die Breite von zwei Alphabeten in Kleinbuchstaben hat, also etwa 60 Zeichen.

    • Alte Zeitungsspalten waren wohl ähnlich breit wie in den Beispielen, aber das heißt nicht, dass das heute noch ein Maßstab sein sollte.
    • Man kann die Spaltenbreite erhöhen und bei realistischeren Fließtextbreiten vergleichen.
      Der Unterschied ist dann deutlich weniger dramatisch, aber immer noch klar erkennbar, und selbst bei einer Zeilenbreite von 36em sind die Kennzahlen viel besser als beim Standard.

  • Ich frage mich, ob der Vibe-Coding-Tag nur deshalb gesetzt wurde, weil der Autor auf einer anderen Website offengelegt hat, dass er ein LLM verwendet hat.
    Der verlinkte Inhalt hat nichts mit LLMs oder Vibe Coding zu tun, daher wirkt dieser Tag inzwischen wie eine Hexenjagd.

    • Wohlwollender betrachtet liegt es daran, dass dieser Tag zwei Funktionen hat; er markiert nicht nur Beiträge über Vibe Coding, sondern dient oft auch als Warnung vor Reizthemen.
      Das kollidiert mit seiner offensichtlicheren Verwendung und kann verwirrend sowie unnötig aggressiv wirken.
      Ein einzelner Tag für zwei Zwecke ist nicht ideal, aber grundsätzlich bin ich für Warnungen vor Reizthemen und dafür, unliebsame Inhalte frei ausfiltern zu können.
      Der Tag ist zwar verwirrend, benachteiligt den Autor aber zumindest nicht.