Monospace-Web

 (owickstrom.github.io)
1 Punkte von GN⁺ 2024-08-28 | 1 Kommentare | Auf WhatsApp teilen
  • Eine experimentelle Seite, die Web-Elemente auf einem zeichenbasierten Raster ausrichtet und so Text, Tabellen, Diagramme und Medien in einer Ästhetik zeigt, die Terminals der 1970er-Jahre ähnelt
  • Ein einfaches Markdown-Dokument wird mit Pandoc umgewandelt; semantisches HTML wird mit CSS und sehr wenig JavaScript auf einem Monospace-Raster gerendert
  • Responsives Verhalten erfolgt nicht über Pixel, sondern über eine Verkleinerung in Zeichengrößen-Einheiten; Tabellen passen sich automatisch an das Raster an, allerdings ist nur eine Spalte als dehnbare Spalte erlaubt
  • Behandelt Standardelemente wie normale Absätze, Trennlinien, <details>, Listen, baumartige Listen, Tabellen, Formulare, grid-Container, ASCII-Zeichnungen auf Basis von <pre> sowie Bilder und Videos
  • Der gesamte Quellcode ist auf GitHub veröffentlicht, sodass man benötigte Teile unter Beachtung der Lizenzbedingungen forken oder kopieren kann

Webseiten aus einem Zeichenraster

  • Monospace-Schriften können für manche Nutzer leichter lesbar, konsistenter und schöner wirken als Proportionalschriften
  • Diese Seite ist ein technisches und kreatives Experiment, bei dem alle Elemente als Monospace-Web aufgebaut werden
  • Die Umsetzung wandelt ein Markdown-Dokument mit Pandoc um und platziert anschließend semantisches HTML mit CSS und etwas JavaScript auf einem Zeichenraster
  • Das responsive Layout schrumpft passend zur Bildschirmbreite nicht in Pixeln, sondern in Zeichengrößen-Einheiten
  • Ziel ist, dass Standard-HTML-Elemente ohne zusätzliche komplexe Arbeit natürlich innerhalb eines Monospace-Rasters funktionieren

Unterstützte Elemente und Layout-Verfahren

  • Das grundlegende Markup umfasst normale Absätze, horizontale Trennlinien und das Element <details>
  • Listen unterstützen normale Aufzählungslisten und nummerierte Listen; mit einer ungeordneten Liste mit der Klasse tree lässt sich eine Baumstruktur darstellen, die wie ein Dateisystem aussieht
  • Tabellen werden automatisch an das Monospace-Raster angepasst und verhalten sich responsiv
    • Allerdings ist die Zahl der dehnbaren Spalten auf eine Spalte begrenzt
  • Auch Formulare werden unterstützt und zusammen mit anderen Standardelementen auf demselben Zeichenraster platziert
  • Fügt man einem Container die Klasse grid hinzu, teilen die Zellen den horizontalen Platz gleichmäßig untereinander auf
    • Da die Monospace-Eigenschaften erhalten bleiben, muss die Gesamtbreite nicht immer 100 % betragen
    • Soll eine bestimmte Zelle den verbleibenden Platz ausfüllen, setzt man für diese Zelle flex-grow: 1;
  • Mit dem Tag <pre> und Box-Drawing-Zeichen lassen sich Zeichnungen im ASCII-Stil erstellen
    • Mit <figure> und <figcaption> kann man sie auffälliger gestalten
    • Als Beispiele sind ein Diagramm zur Nachrichtenübermittlung und ein Balkendiagramm enthalten
  • Auch Medienobjekte wie Bilder und Videos werden unterstützt
    • Sie werden bis zur Seitenbreite erweitert, und unten wird zusätzliches Padding hinzugefügt, um das Monospace-Raster beizubehalten
  • Der gesamte Quellcode ist unter github.com/owickstrom/the-monospace-web veröffentlicht
  • Die Design-Inspiration stammt von U.S. Graphics Company

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-08-28
Meinungen auf Hacker News

  • Ich sammle eine Liste von Seiten mit Monospace-Layout: https://wonger.dev/posts/monospace-dump#web. Im Moment sind es etwa 50
    Abstände sind schwierig, und wenn man auf proportionale Schriften verzichtet, verliert man auch ein Stück Lesbarkeit
    Ich glaube, das Kerning proportionaler Schriften macht einen großen Unterschied dabei, wie das Auge die Formen von Buchstabengruppen erkennt
    Monospace-Text ist in strukturierten und hervorgehobenen Bereichen wie Code-Editoren okay, aber bei langen Texten sollte man ihn eher vermeiden
    Trotzdem sieht er besonders bei Unicode-Charts und ASCII-Art wirklich schön aus

    • In proportionalen Schriften macht Kerning einen riesigen Unterschied. Gutes Kerning hilft dem Gehirn, Wortformen viel schneller zu verarbeiten
    • ASCII-Art war wirklich großartig. Im Schreibmaschinenunterricht konnte man, wenn man die Tagesaufgabe erledigt hatte, nach einer Liste von Befehlen ASCII-Art erstellen, ohne das endgültige Bild zu kennen
      Zum Beispiel 15 space, 1 V, 3 U, 1 V, 15 space, 5 U, 12 space, 2 x, 5 U, 2 x; nach etwa 250 Zeilen erschien dann ein Bild von Jordan beim Dunking, das man ausdrucken konnte
    • Eines der Beispiele ist inzwischen eine zum Verkauf stehende Domain. Im WBM ist es aber noch vorhanden: https://web.archive.org/web/20230216225350/https://kary.us/n...
    • Monospace-Text mit Farben und ein wenig Formatierung wirkt, als würde man eine Sinnes- oder Raumdimension aufgeben. Das ist eher sinnlose Askese
    • Noch ein Kandidat für die Liste :) https://jarek.lupin.ski/tape-deck/

  • Das scheint genau der richtige Thread für diese Frage zu sein. Vor ein paar Jahren habe ich etwas gesehen, vermutlich eine Komplettlösung für ein Videospiel, das so geschrieben war, dass es in einer Monospace-Schrift gelesen werden sollte; über Tausende von Zeilen hinweg war alles allein durch die Wortwahl perfekt im Blocksatz ausgerichtet
    Weiß jemand, was das war, und hat einen Link?

    • Etwas Ähnliches ist http://tom7.org/bovex/. Das ist eine Layout-Engine, die die Eingabe mithilfe eines LLM umschreibt, um einen ähnlichen Effekt zu erzielen
    • Das nennt man bricktext. Früher sah man so etwas gelegentlich auf usenet oder GameFAQs
      [0] http://www.catb.org/esr/jargon/html/B/bricktext.html
      Es ist etwas überraschend, dass dieses Konzept aus den Google-Suchergebnissen völlig verschwunden ist
    • Laravel macht etwas Ähnliches. In mehrzeiligen Kommentaren ist jede Zeile exakt 3 Zeichen kürzer als die vorherige
      https://github.com/laravel/laravel/blob/11.x/config/database...
    • Ich habe eine vage Erinnerung, so etwas in einer GameFAQs-Komplettlösung gesehen zu haben. Wahrscheinlich war es irgendein Final Fantasy-Spiel, aber mehr weiß ich nicht mehr
    • Ich möchte diesem Thread auch eine Frage hinzufügen
      Seit Jahren wollte ich eine Visual-Studio-Code-Erweiterung bauen, die Kommentare während der Eingabe im Blocksatz ausrichtet, inklusive Silbentrennung, aber bei Bedarf auch zusätzliche Leerzeichen zulässt
      Abgesehen davon, dass ich mir ein paar verwandte Algorithmen und Bibliotheken angesehen habe, habe ich nicht angefangen, weil es ziemlich komplex wirkte
      Ich habe versucht, Dinge wie fmt oder par zu verwenden, aber am Ende habe ich akzeptiert, dass man schön ausgerichtete Kommentare aufgeben muss, sofern man es nicht manuell macht; oft führt schon eine kleine Änderung dazu, dass mehrere Zeilen überarbeitet werden müssen, was viel zu viel Zeit kostet
      Lange Bezeichner möchte ich möglichst nicht mitten in der Zeile umbrechen, und man müsste auch verschachtelte Listen, Tabellen, Codeblöcke, ASCII-Art in Kommentaren, die Unterscheidung zwischen Bindestrichen innerhalb von Wörtern und Bindestrichen zur Silbentrennung sowie strukturierte Kommentare wie XML-Dokumentationskommentare oder Javadoc-Tags behandeln
      Nachdem ich Tom7s Badness 0 gesehen hatte, dachte ich auch daran, ein LLM darauf anzusetzen, aber wenn es in Echtzeit funktionieren und keine halluzinierten Kommentare erzeugen soll, halte ich das noch nicht für praktisch
      Gibt es so eine Funktion bereits, oder eine Grundlage, mit der der Bau einer Erweiterung nicht zu einem Ein-Jahres-Projekt wird?

  • Monospace an sich stört mich nicht
    Was stört, sind erzwungene Zeilenumbrüche
    Manche „Retro“-Websites verwenden im Grunde einfach ein pre-Tag
    Auf dem Handy wird daraus eine Textwand in kleiner Schrift, der Lesemodus funktioniert nicht, und wenn man es quer hält, bekommt man vielleicht eine Scrollbar, vielleicht auch nicht
    Das ist auch fast meine einzige Beschwerde über heutige technische Mailinglisten: erzwungene Zeilenumbrüche und starre Layouts

    • Diese Website macht das nicht. Sie ist vollständig responsiv
    • Ich habe versucht, auf dem Handy ein RFC zu lesen, und musste ständig nach links und rechts scrollen, nur um einen einfachen Absatz zu sehen. Oder ich musste so weit herauszoomen, dass der Text unlesbar wurde
    • Ich frage mich, was genau das Problem mit einer Scrollbar ist

  • In einem Video, das ich heute gesehen habe, wurde so etwas Indie Web genannt: eine Philosophie, die sich gegen Algorithmen stellt und die Dinge wieder aufgreifen will, die das frühere Web großartig gemacht haben
    Dinge wie RSS, persönliche Blogs, Foren und Webrings
    Ich habe selbst damit angefangen, und es fühlt sich ziemlich gut an

  • Dass es ansprechend, semantisch und responsiv ist, ist gut, aber grundsätzlich sind Monospace-Schriften für Fließtext nicht besonders geeignet.
    Ich habe auf mehreren Websites Blogbeiträge mit Monospace-Fließtext gelesen, und es war okay, aber nach meinem Maßstab ist Proportionalschrift der richtige Weg.

    • Ich glaube, ich bevorzuge Monospace eher. Zumindest ist das Farbschema weiße Schrift auf schwarzem Hintergrund definitiv besser.
      Ich finde das viel besser als diese „schönen“ Seiten, die den Eindruck alter gedruckter Magazine erzeugen wollen.
    • Stimme zu. Das hat mich sogar beim Schreiben von Markdown-Dokumenten zu stören begonnen, aber in Markdown ist es oft unrealistisch, Monospace zu vermeiden.
    • Aus Neugier: Welche Schriftart bevorzugst du für Fließtext?
      In meinem Blog verwende ich Monospace, weil meine Sehkraft schlecht ist und ich Vergrößerungseinstellungen nutze, aber Barrierefreiheit ist mir wichtig, daher frage ich mich immer, welche Wahl für alle besser lesbar ist.

  • Von allem anderen abgesehen finde ich die CSS-Klasse tree ul-list so gut, dass sie als Tag in die HTML-Spezifikation aufgenommen werden könnte. Ein unglaublich nützlicher Baustein.

  • Der Zeilenabstand ist zu eng und beeinträchtigt die Lesbarkeit. Solche dicht gesetzten langen Absätze im Fließtext sind schwer zu lesen.
    Tabellen und Zeichengrafiken brauchen allerdings genau diesen engen Zeilenabstand.
    Das Problem ist, dass dasselbe Zeichengitter sowohl für Grafik als auch für Text verwendet wird.
    Das ließe sich wohl abmildern, wenn man eine Schrift mit besonders niedriger x-Höhe verwendet, die ober- und unterhalb der Buchstaben mehr Raum lässt.

    • Anfangs war ich verwirrt, weil ich dachte, es ginge um die Zeilenbreite. Die Zeilenbreite liegt mit etwa 70 Zeichen im allgemein akzeptierten Bereich.
      Beim Zeilenabstand stimme ich zu. 19,2 px bei 16 px Schriftgröße sind nur das 1,2-Fache und damit viel zu gedrängt. Mit 24 px wird es deutlich besser.
      Allerdings scheint ein größerer Zeilenabstand für meine Augen Tabellen oder Zeichengrafiken nicht zu beeinflussen. Mit so einer Anpassung bleibt der Monospace-Stil ziemlich gut erhalten.
      Nachtrag: Ich glaube, ich verstehe den Punkt. Es bricht das feste Rasterkonzept des Autors. Das sieht man, wenn man beim p-Element line-height: 24px setzt und den „debug mode“ des Autors einschaltet, um das Raster zu sehen.
    • Fürs Lesen kann ich Monospace einfach nicht ertragen, also habe ich mir ein Bookmarklet gebaut. Diese Seite funktioniert gut, wenn man nur die normalen Text-Tags auf Sans Serif umstellt, aber alle Lesemodi ruinieren die Schriftpräferenzen.
      javascript: (function() {
      (function() {
      const textElements = document.querySelectorAll('p, span, h1, h2, h3, h4, h5, h6, li, td, th');
      textElements.forEach((element) => {
      const textColor = getComputedStyle(element).getPropertyValue('color');
      element.style.fontFamily = 'system-ui, -apple-system, sans-serif';
      element.style.WebkitTextStroke = \0.4px ${textColor}`; }); location.hash = ""; history.replaceState("", "", location.pathname); })(); })();`
      https://caiorss.github.io/bookmarklet-maker/
    • Wie ist es im Vergleich zur Dichte der HN-Kommentare hier?
    • Ist das Problem der enge Zeilenabstand, oder die Tatsache an sich, dass Monospace-Schriften schwerer zu lesen sind als Proportionalschriften?
      Denn Monospace-Wörter haben ähnlichere „Formen“ als Wörter in Proportionalschrift.
    • Ich hatte auf den ersten Blick sofort eine Abwehrreaktion.

  • OpenBSD hat vor einigen Jahren begonnen, die Konsolenschrift auf Spleen umzustellen.
    Schade, dass es keine TrueType-Version gibt.
    https://github.com/fcambus/spleen

    • Kann man nicht stattdessen die OTF-Datei verwenden? Laut README ist im Release-Tarball eine OTF-Datei enthalten.

  • Der bis heute bekannte C64-Text, der sogenannte VIC article, wird in Monospace bereitgestellt.
    https://www.cebix.net/VIC-Article.txt
    Das Hauptproblem ist die Ausgabe.
    Der Artikel verwendet Diagramme, die feste Bezüge im zweidimensionalen Raum benötigen; daher ist Monospace hier sehr wichtig.
    Dieser Text ist eine der wichtigsten technischen Referenzen zum C64, und 99 % der Effekte technischer Demos lassen sich auf die grundlegenden Tricks darin zurückführen.

  • Ich überlege, die Schriftart meiner persönlichen Website auf Monospace umzustellen.
    Kennt jemand eine Monospace-Schrift, die sich besonders gut für lange Texte lesen lässt?
    Noch besser wäre es, wenn sie bei Google Fonts verfügbar ist.

    • Für die Darstellung von Absätzen mag ich Drafting Mono: https://indestructibletype.com/Drafting/
      Nicht bei Google Fonts, aber kostenlos; die Variable-Font-Version ist auch sehr günstig.
    • IBM Plex Mono ist ziemlich gut und hat eine vernünftige Lizenz. Es ist bei Google Fonts verfügbar, und das Repository ist hier: https://github.com/IBM/plex
    • Nebenbei: Es wäre vielleicht eine Überlegung wert, statt Google Fonts https://fontsource.org/ zu verwenden. Es ist genauso einfach zu nutzen und hat zumindest kein Google-Tracking.