Die Monospace-Webseite

 (owickstrom.github.io)
1 Punkte von GN⁺ 2024-08-28 | 1 Kommentare | Auf WhatsApp teilen

Einführung

Monospace-Schriftarten werden von vielen Menschen geschätzt. Sie bieten gute Lesbarkeit, Konsistenz und eine starke Ästhetik. Diese Seite richtet Text und Diagramme mithilfe eines Monospace-Rasters aus. Sie wird aus einem einfachen Markdown-Dokument erzeugt und mit CSS und etwas JavaScript gerendert. Sie verwendet ein responsives Design und skaliert in Einheiten der Zeichenbreite. Ziel ist, dass Standardelemente korrekt funktionieren. Gerendert wird als semantisches HTML im Stil der 70er Jahre.

Grundlagen

  • Das Dokument verwendet einige zusätzliche Klassen, besteht aber größtenteils aus Markup.
  • Als Beispiele gibt es normale Absätze und horizontale Linien.
  • Mit dem <details>-Element kann Inhalt verborgen werden.

Listen

  • Gewöhnliche Aufzählungsliste:

    • Bananen
    • Papierboot
    • Gurke
    • Rakete

  • Geordnete Liste:

    • Ziel
    • Motivation
      • intrinsisch
      • extrinsisch
    • Sekundäreffekte

  • Baumvisualisierung:

    • /dev/nvme0n1p2
      • usr
        • local
        • share
        • libexec
        • includes
        • bin
        • src
        • lib64
        • lib
      • games
        • solitaire
        • snake
        • tic-tac-toe
      • media
      • run
      • tmp

Tabellen

  • Normale Tabellen können verwendet werden und passen sich automatisch an das Monospace-Raster an.
  • Beispiele:
    • Name: Boboli Obelisk, Größe: 1.41m × 1.41m × 4.87m, Standort: 43°45’50.78”N 11°15’3.34”E
    • Name: Pyramid of Khafre, Größe: 215.25m × 215.25m × 136.4m, Standort: 29°58’34”N 31°07’51”E

Formulare

  • Beispiele für Buttons und Eingabefelder:
    • Buttons: RESET, SAVE
    • Eingabefelder: Vorname, Nachname, Alter

Raster

  • Durch Hinzufügen einer Grid-Klasse zum Container lässt sich der horizontale Platz gleichmäßig aufteilen.
  • Wenn für eine bestimmte Zelle flex-grow: 1; gesetzt wird, kann sie den verbleibenden Platz ausfüllen.

ASCII-Grafiken

  • Mit dem <pre>-Tag lassen sich Grafiken mit Box-Zeichen darstellen.

  • Beispiel:

    ╭─────────────────╮
│ MONOSPACE ROCKS │
╰─────────────────╯

  • Mit <figure> und <figcaption> kann man sie zusätzlich hervorheben.

  • Beispiel für die Darstellung eines Nachrichtenaustauschs:

    ┌───────┐ ┌───────┐ ┌───────┐
│Actor 1│ │Actor 2│ │Actor 3│
└───┬───┘ └───┬───┘ └───┬───┘
    │         │         │
    │ msg 1   │         │
    └────────►│         │
              │ msg 2   │
              └────────►│
┌───┴───┐ ┌───┴───┐ ┌───┴───┐
│Actor 1│ │Actor 2│ │Actor 3│
└───────┘ └───────┘ └───────┘

  • Beispiel für ein Diagramm:

               Things I Have
                       │
                 ████ Usable
15 │
                 ░░░░ Broken
12 │       ░
9 │  ░     ░
6 │  █     ░     ░
3 │  █     █     █
0 └───▀─────────▀─────────▀──────────▀─────────────
   Socks   Jeans   Shirts  USB Drives

Medien

  • Unterstützt Medienobjekte wie Bilder und Videos.
  • Beispiele:
    • Zimmer in einem französischen Schloss (2024)
    • Das Zentrum des Webs (1914), Wikimedia

Diskussion

  • Das Projekt wurde erstellt, um CSS-Techniken weiterzuentwickeln und Spaß am Design zu haben.
  • Nutzung oder Feedback wären willkommen.
  • Der vollständige Quellcode ist auf GitHub verfügbar: github.com/owickstrom/the-monospace-web
  • Ein Dank geht an die U.S. Graphics Company.

Zusammenfassung von GN⁺

  • Dieses Projekt ist ein Experiment für Webdesign mit Monospace-Schriftarten.
  • Es kombiniert responsives Design und semantisches HTML, um eine Webseite im Stil der 70er Jahre umzusetzen.
  • Es kann Entwicklerinnen und Entwicklern helfen, ihre CSS- und Designfähigkeiten zu verbessern.
  • Ein ähnliches Projekt mit vergleichbarer Funktionalität ist "CSS Zen Garden".

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-08-28
Hacker-News-Kommentare

  • Ein Nutzer pflegt eine Liste von Monospace-Seiten und hat derzeit etwa 50 davon.

    • Wenn man auf proportionale Schriftarten verzichtet, leidet die Lesbarkeit.
    • Das Kerning proportionaler Schriftarten macht einen großen Unterschied dabei, die Form von Zeichengruppen zu erkennen.
    • In Code-Editoren ist Monospace-Text in Ordnung, wenn er strukturiert und hervorgehoben ist.
    • Besonders schön wirkt er zusammen mit Unicode-Tabellen und ASCII-Art.

  • Ein Nutzer sucht nach einem vor einigen Jahren verfassten Videospiel-Guide, der in einer Monospace-Schrift geschrieben war.

    • Der Text war allein durch die Wortwahl perfekt ausgerichtet.
    • Er fragt, ob jemand einen Link dazu kennt.

  • Ein Nutzer erwähnt die Philosophie des "Indie Web".

    • Sie schließt Algorithmen aus und greift Elemente auf, die das frühere Web gut gemacht haben.
    • Dazu gehören RSS, eigene Blogs, Foren und Webrings.
    • Er hat selbst damit angefangen und findet es sehr gut.

  • Ein Nutzer merkt an, dass Monospace-Schriften an sich in Ordnung seien, das Problem aber der erzwungene Zeilenumbruch sei.

    • Mit kleiner Schrift entstünden Textwände, und der Lesemodus funktioniere nicht.
    • Beim Kippen ins Querformat könnten Scrollbalken erscheinen.
    • Dieselbe Beschwerde gebe es auch bei technischen Mailinglisten.

  • Ein Nutzer überlegt, die Schriftart seiner persönlichen Website auf Monospace umzustellen.

    • Er hätte gern Empfehlungen für Monospace-Schriften mit guter Lesbarkeit bei langen Texten.
    • Wenn die Schrift bei Google Fonts verfügbar ist, gibt es Extrapunkte.

  • Ein Nutzer sagt, Monospace sehe schön aus und sei responsiv, eigne sich aber nicht für Fließtext.

    • Er habe Fließtext in Monospace auf mehreren Websites gelesen, finde aber proportionale Schriftarten besser.

  • Ein Nutzer erwähnt, dass die bekannte C64-Ressource "VIC article" noch immer in Monospace angeboten wird.

    • Das Hauptproblem sei der Ausdruck.
    • Die Diagramme nutzten einen zweidimensionalen Raum, der feste Referenzpunkte brauche.
    • Der Artikel sei das wichtigste technische Referenzmaterial für den C64.
    • 99 % der Tech-Demo-Effekte ließen sich auf grundlegende Tricks zurückführen, die dort zu finden seien.

  • Ein Nutzer meint, das Web kehre wieder zu seiner ursprünglichen Form zurück.

    • Es gebe immer mehr satellitenartige Communities wie im frühen Web.
    • Es werde zunehmend interessanter, verschiedene Teile des Webs zu besuchen.

  • Ein Nutzer findet, die CSS-Klasse tree ul-list sollte Teil des HTML-Standards sein.

    • Sie sei sehr nützlich.

  • Ein Nutzer erwähnt, dass OpenBSD seit einigen Jahren "Spleen" als Konsolenschrift verwendet.