Le Web en monospace

Introduction

Les polices monospace sont appréciées par de nombreuses personnes. Elles offrent une excellente lisibilité, de la cohérence et un vrai sens esthétique. Cette page aligne le texte et les diagrammes à l’aide d’une grille monospace. Elle est générée à partir d’un simple document Markdown et rendue avec du CSS et un peu de Javascript. Elle adopte un design responsive qui se réduit selon des unités de taille de caractères. L’objectif est de faire fonctionner correctement les éléments standard. Le rendu utilise un HTML sémantique dans un style années 70.

Principes de base

• Le document utilise quelques classes supplémentaires, mais reste principalement du balisage.
• Il contient par exemple des paragraphes ordinaires et des lignes horizontales.
• L’élément <details> permet de masquer du contenu.

Listes

• Liste à puces classique :

  • bananes
  • bateaux en papier
  • concombres
  • fusées

• Liste ordonnée :

  • objectif
  • motivation
    • intrinsèque
    • extrinsèque
  • effets secondaires

• Visualisation en arbre :

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

Tableaux

• Il est possible d’utiliser des tableaux classiques qui s’ajustent automatiquement à la grille monospace.
• Exemple :
  • nom : Boboli Obelisk, dimensions : 1.41m × 1.41m × 4.87m, position : 43°45’50.78”N 11°15’3.34”E
  • nom : Pyramid of Khafre, dimensions : 215.25m × 215.25m × 136.4m, position : 29°58’34”N 31°07’51”E

Formulaires

• Exemples de boutons et de champs de saisie :
  • boutons : RESET, SAVE
  • champs de saisie : prénom, nom, âge

Grille

• Il est possible de répartir uniformément l’espace horizontal en ajoutant une classe de grille au conteneur.
• On peut remplir l’espace restant en définissant flex-grow: 1; sur une cellule spécifique.

Dessins ASCII

• La balise <pre> permet de dessiner avec des caractères de tracé de boîte.

• Exemple :

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

• On peut aussi mettre en avant le tout avec les balises <figure> et <figcaption>.

• Exemple de transmission de message :

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

• Exemple de graphique :

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

Médias

• Les objets média comme les images et les vidéos sont pris en charge.
• Exemple :
  • Une pièce dans un château français (2024)
  • Le centre du web (1914), Wikimedia

Discussion

• Ce projet a été réalisé pour faire progresser les techniques CSS et prendre plaisir à concevoir.
• Son utilisation ou vos retours seraient appréciés.
• Le code source complet est disponible sur GitHub : github.com/owickstrom/the-monospace-web
• Des remerciements sont adressés à U.S. Graphics Company.

Résumé GN⁺

• Ce projet est une expérimentation de design web utilisant des polices monospace.
• Il combine design responsive et HTML sémantique pour créer une page web au style années 70.
• Il peut aider les développeurs à améliorer leurs compétences en CSS et en design.
• Un projet comparable offrant des fonctionnalités similaires est "CSS Zen Garden".

[GN⁺]

Avis Hacker News

• Un utilisateur tient une liste de pages en monospace, et il y en a actuellement environ 50

  • Abandonner les polices proportionnelles nuit à la lisibilité
  • Le réglage de l’interlettrage des polices proportionnelles fait une grande différence pour reconnaître la forme des groupes de lettres
  • Dans un éditeur de code, quand le texte monospace est structuré et mis en évidence, ça va
  • C’est particulièrement joli avec les tableaux Unicode et l’art ASCII

• Un utilisateur cherche un guide de jeu vidéo rédigé en police monospace qu’il avait trouvé il y a quelques années

  • Le texte était parfaitement aligné uniquement par le choix des mots
  • Il demande si quelqu’un connaît un lien à ce sujet

• Un utilisateur mentionne la philosophie du « web indé »

  • Elle exclut les algorithmes et adopte les éléments qui rendaient le web d’autrefois meilleur
  • Cela inclut RSS, les blogs personnalisés, les forums, les anneaux web, etc.
  • Il s’y est lui-même mis et trouve cela très bien

• Un utilisateur dit que la police monospace en elle-même est correcte, mais que le vrai problème est le retour à la ligne forcé

  • Cela crée des pavés de texte en petite taille, et le mode lecture ne fonctionne pas
  • En inclinaison horizontale, une barre de défilement peut apparaître
  • Il a la même plainte à propos des listes de diffusion techniques

• Un utilisateur envisage de changer la police de son site personnel en monospace

  • Il aimerait des recommandations de polices monospace lisibles pour les longs textes
  • Bonus si la police est disponible sur Google Fonts

• Un utilisateur dit que le monospace est joli et responsive, mais pas adapté au corps du texte

  • Il a lu du texte principal en monospace sur plusieurs sites, mais pense que les polices proportionnelles sont meilleures

• Un utilisateur mentionne que la célèbre ressource C64 « VIC article » est toujours proposée en monospace

  • Le principal problème est l’impression
  • Les diagrammes utilisent un espace bidimensionnel qui nécessite une référence fixe
  • Cet article est la ressource de référence technique la plus importante pour le C64
  • 99 % des effets de démos techniques peuvent être décomposés en astuces de base qu’on y trouve

• Un utilisateur dit que le web revient à nouveau à sa forme d’origine

  • Il existe de plus en plus de communautés satellites du web des débuts
  • Il devient de plus en plus intéressant de visiter les différentes parties du web

• Un utilisateur pense que la classe CSS tree ul-list devrait faire partie du standard HTML

  • C’est très utile

• Un utilisateur mentionne qu’OpenBSD utilise « Spleen » comme police de console par défaut depuis quelques années

  • Il regrette l’absence d’une version TrueType
  • Lien GitHub de Spleen fourni