A Web Monoespaçada

Introdução

Fontes monoespaçadas são adoradas por muita gente. Oferecem excelente legibilidade, consistência e apelo estético. Esta página usa uma grade monoespaçada para alinhar texto e diagramas. Ela é gerada a partir de um documento Markdown simples e renderizada com CSS e um pouco de Javascript. Adota um design responsivo que se reduz em unidades de tamanho de caractere. O objetivo é fazer com que os elementos padrão funcionem corretamente. É renderizada em HTML semântico com um estilo dos anos 70.

Noções básicas

• O documento usa algumas classes adicionais, mas é composto principalmente de marcação.
• Há parágrafos comuns e linhas horizontais como exemplo.
• É possível ocultar conteúdo usando o elemento <details>.

Listas

• Lista de marcadores comum:

  • bananas
  • barcos de papel
  • pepinos
  • foguetes

• Lista ordenada:

  • objetivo
  • motivação
    • intrínseca
    • extrínseca
  • efeitos de segunda ordem

• Visualização em árvore:

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

Tabelas

• É possível usar tabelas comuns que se ajustam automaticamente à grade monoespaçada.
• Exemplo:
  • Nome: Boboli Obelisk, tamanho: 1.41m × 1.41m × 4.87m, localização: 43°45’50.78”N 11°15’3.34”E
  • Nome: Pyramid of Khafre, tamanho: 215.25m × 215.25m × 136.4m, localização: 29°58’34”N 31°07’51”E

Formulários

• Exemplos de botões e campos de entrada:
  • Botões: RESET, SAVE
  • Campos de entrada: nome, sobrenome, idade

Grade

• É possível dividir o espaço horizontal igualmente adicionando uma classe de grade ao contêiner.
• Também é possível preencher o espaço restante definindo flex-grow: 1; em uma célula específica.

Desenhos ASCII

• É possível desenhar usando caracteres de caixa com a tag <pre>.

• Exemplo:

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

• É possível dar destaque adicional com a tag <figure> e <figcaption>.

• Exemplo de troca de mensagens:

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

• Exemplo de gráfico:

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

Mídia

• Há suporte a objetos de mídia como imagens e vídeos.
• Exemplo:
  • Quarto em um castelo francês (2024)
  • O centro da web (1914), Wikimedia

Discussão

• Foi feito para desenvolver técnicas de CSS e se divertir com design.
• Seria ótimo se você usasse ou enviasse feedback.
• O código-fonte completo pode ser visto no GitHub: github.com/owickstrom/the-monospace-web
• Agradecimentos à U.S. Graphics Company.

Resumo do GN⁺

• Este projeto é um experimento de design web com fontes monoespaçadas.
• Ele combina design responsivo e HTML semântico para criar uma página web com estilo dos anos 70.
• Pode ajudar desenvolvedores a aprimorar suas habilidades de CSS e design.
• Um projeto com funcionalidade semelhante é o "CSS Zen Garden".

[GN⁺]

Comentários no Hacker News

• Um usuário mantém uma lista de páginas em monospace, com cerca de 50 atualmente

  • Abrir mão de fontes proporcionais reduz a legibilidade
  • O ajuste de espaçamento em fontes proporcionais faz uma grande diferença para reconhecer o formato de grupos de letras
  • Em editores de código, texto monospace funciona bem quando está estruturado e com destaque
  • Fica especialmente bonito quando usado com tabelas Unicode e arte ASCII

• Um usuário está procurando um guia de videogame escrito em fonte monospace que encontrou anos atrás

  • Era um texto perfeitamente alinhado apenas pela escolha das palavras
  • Pergunta se alguém conhece um link sobre isso

• Um usuário menciona a filosofia da "web indie"

  • Exclui algoritmos e abraça os elementos que tornavam a web antiga melhor
  • Inclui RSS, blogs personalizados, fóruns, webrings e afins
  • A própria pessoa começou também e acha isso muito bom

• Um usuário comenta que a fonte monospace em si é boa, mas o problema é a quebra de linha forçada

  • Isso cria paredes de texto com fonte pequena, e o modo de leitura não funciona
  • Ao inclinar horizontalmente, pode aparecer uma barra de rolagem
  • Há a mesma reclamação em listas técnicas de e-mail

• Um usuário está pensando em mudar a fonte do próprio site pessoal para monospace

  • Gostaria de receber recomendações de fontes monospace com boa legibilidade em textos longos
  • Dá pontos extras se a fonte estiver no Google Fonts

• Um usuário comenta que monospace é bonito e responsivo, mas não é adequado para texto corrido

  • Já leu texto corrido em monospace em vários sites, mas acha que fontes proporcionais são melhores

• Um usuário menciona que o famoso recurso de C64, "VIC article", ainda é distribuído em monospace

  • O principal problema é a impressão
  • Os diagramas usam um espaço bidimensional que exige referência fixa
  • Esse artigo é o material de referência técnica mais importante do C64
  • 99% dos efeitos de demos técnicas podem ser decompostos nos truques básicos encontrados ali

• Um usuário comenta que a web está voltando a ser o que era originalmente

  • As comunidades satélite da web inicial estão ficando cada vez mais numerosas
  • Está cada vez mais interessante visitar diferentes partes da web

• Um usuário acha que a classe CSS tree ul-list deveria fazer parte do padrão HTML

  • É algo muito útil

• Um usuário menciona que o OpenBSD define a fonte do console como "Spleen" há alguns anos

  • É uma pena não existir uma versão TrueType
  • Link do GitHub do Spleen fornecido