A web monoespaçada

 (owickstrom.github.io)
1 pontos por GN⁺ 2024-08-28 | 1 comentários | Compartilhar no WhatsApp
  • Uma página experimental que posiciona elementos da web sobre uma grade baseada em caracteres, exibindo texto, tabelas, diagramas e mídia com uma estética próxima à de terminais dos anos 1970
  • Converte documentos simples em Markdown com o Pandoc e renderiza HTML semântico em uma grade monoespaçada com CSS e pouquíssimo JavaScript
  • A responsividade não diminui em pixels, mas em unidades de tamanho de caractere; as tabelas se ajustam automaticamente à grade, mas ficam limitadas a uma única coluna expansível
  • Lida com elementos padrão como parágrafos comuns, divisores, <details>, listas, listas em árvore, tabelas, formulários, contêineres grid, desenhos ASCII baseados em <pre>, imagens e vídeos
  • Todo o código-fonte está disponível no GitHub, então é possível fazer fork ou copiar as partes necessárias de acordo com os termos da licença

Uma página web construída com grade de caracteres

  • Fontes monoespaçadas podem parecer mais legíveis, consistentes e bonitas do que fontes proporcionais para alguns usuários
  • Esta página é um experimento técnico e criativo para compor todos os elementos usando uma web monoespaçada
  • A implementação converte documentos em Markdown com o Pandoc e depois posiciona HTML semântico sobre uma grade de caracteres com CSS e um pouco de JavaScript
  • O layout responsivo se reduz conforme a largura da tela usando unidades de tamanho de caractere em vez de pixels
  • O objetivo é fazer com que elementos HTML padrão funcionem naturalmente dentro de uma grade monoespaçada sem trabalho complexo adicional

Elementos suportados e forma de disposição

  • A marcação básica inclui parágrafos comuns, divisores horizontais e elementos <details>
  • As listas suportam marcadores comuns e listas ordenadas, e uma lista não ordenada com a classe tree pode representar uma estrutura em árvore com aparência de sistema de arquivos
  • As tabelas se ajustam automaticamente à grade monoespaçada e funcionam de forma responsiva
    • No entanto, as colunas que podem se expandir ficam limitadas a uma única coluna
  • Formulários também são suportados e são posicionados sobre a mesma grade de caracteres junto com outros elementos padrão
  • Ao adicionar a classe grid a um contêiner, as células dividem o espaço horizontal de forma uniforme
    • Como a característica monoespaçada é preservada, a largura total nem sempre chega a 100%
    • Para fazer uma célula específica preencher o espaço restante, defina flex-grow: 1; nessa célula
  • É possível desenhar figuras em estilo ASCII usando a tag <pre> e box-drawing characters
    • Você pode envolvê-las com <figure> e <figcaption> para destacá-las mais
    • Os exemplos incluem um diagrama de transmissão de mensagens e um gráfico de barras
  • Objetos de mídia como imagens e vídeos também são suportados
    • Eles se expandem até a largura da página, e um preenchimento inferior é adicionado para manter a grade monoespaçada
  • Todo o código-fonte está disponível em github.com/owickstrom/the-monospace-web
  • A inspiração de design vem da U.S. Graphics Company

Leituras relacionadas

1 comentários

 
GN⁺ 2024-08-28
Opiniões no Hacker News

  • Estou reunindo uma lista de páginas em largura fixa: https://wonger.dev/posts/monospace-dump#web. Por enquanto há cerca de 50
    O tratamento de espaçamento é difícil, e abrir mão de fontes proporcionais também faz perder um pouco de legibilidade
    Acho que o kerning em fontes proporcionais faz uma grande diferença para os olhos reconhecerem a forma de grupos de letras
    Texto monoespaçado funciona bem em lugares estruturados e com destaque, como editores de código, mas é melhor evitá-lo em textos longos
    Ainda assim, ele fica realmente bonito especialmente em tabelas Unicode e arte ASCII

    • Em fontes proporcionais, o kerning faz uma diferença enorme. Um bom kerning permite que o cérebro processe formatos de palavras muito mais rápido
    • Arte ASCII era muito legal. Nas aulas de digitação, depois de terminar a tarefa do dia, você podia seguir uma lista de comandos e criar uma arte ASCII sem saber qual seria a imagem final
      Por exemplo, era algo como 15 space, 1 V, 3 U, 1 V, 15 space, 5 U, 12 space, 2 x, 5 U, 2 x; depois de umas 250 linhas, aparecia uma imagem do Jordan enterrando uma bola, que dava para imprimir
    • Um dos exemplos agora virou um domínio à venda. Ainda assim, está preservado no WBM: https://web.archive.org/web/20230216225350/https://kary.us/n...
    • Texto monoespaçado com cores e pouca formatação parece abrir mão de uma dimensão sensorial ou espacial. É quase um ascetismo sem sentido
    • Vale acrescentar mais um à lista :) https://jarek.lupin.ski/tape-deck/

  • Parece a thread perfeita para fazer esta pergunta. Vi há alguns anos um texto, talvez um guia de videogame, escrito para ser lido em fonte monoespaçada, e milhares de linhas inteiras estavam perfeitamente justificadas dos dois lados apenas pela escolha das palavras
    Alguém sabe o que era e tem o link?

    • Algo parecido é http://tom7.org/bovex/. É um motor de layout que tenta obter um efeito semelhante reescrevendo a entrada com um LLM
    • Isso se chama bricktext. Antigamente aparecia de vez em quando em lugares como usenet ou GameFAQs
      [0] http://www.catb.org/esr/jargon/html/B/bricktext.html
      É meio surpreendente que esse conceito tenha desaparecido completamente dos resultados de busca do Google
    • O Laravel também faz algo parecido. Em um comentário de várias linhas, cada linha é exatamente 3 caracteres mais curta que a anterior
      https://github.com/laravel/laravel/blob/11.x/config/database...
    • Tenho uma lembrança vaga de ter visto isso em um guia do GameFAQs. Acho que era de algum jogo de Final Fantasy, mas não me lembro de mais nada
    • Também queria aproveitar esta thread para fazer uma pergunta
      Há anos quero criar uma extensão para o Visual Studio Code que justifique comentários enquanto eu digito, inclusive com hifenização, permitindo espaços extras quando necessário
      Além de pesquisar um pouco algoritmos e bibliotecas relacionados, não cheguei a começar, porque parece bem complexo
      Tentei usar coisas como fmt ou par, mas no fim aceitei que, a menos que eu faça manualmente, preciso desistir de comentários bem alinhados; muitas vezes uma pequena alteração exige retrabalhar várias linhas, o que toma tempo demais
      Não quero quebrar identificadores longos no meio da linha se puder evitar, e também teria de lidar com listas aninhadas, tabelas, blocos de código, arte ASCII dentro de comentários, distinguir hífens dentro de palavras de hífens usados para hifenização, além de comentários estruturados como comentários de documentação XML ou tags Javadoc
      Depois de ver o Badness 0 do Tom7, pensei até em jogar um LLM no problema, mas, se precisa funcionar em tempo real e não pode criar comentários alucinados, acho que ainda não é prático
      Já existe algo assim, ou alguma base que evite que criar essa extensão vire um projeto de um ano?

  • O monoespaçado em si não me incomoda
    O que incomoda são as quebras de linha forçadas
    Alguns sites “retrô” acabam, na prática, usando a tag pre
    No celular, vira uma parede de texto em fonte pequena, o modo de leitura não funciona, e, se você virar a tela para a horizontal, pode ou não aparecer uma barra de rolagem
    Minha quase única reclamação sobre listas de e-mail técnicas hoje em dia também são as quebras de linha forçadas e os layouts rígidos

    • Este site não é assim. Ele é totalmente responsivo
    • Tentei ler um RFC no celular e precisei ficar rolando para a esquerda e para a direita só para ver um parágrafo simples. Ou então reduzir tanto que as letras ficavam ilegíveis
    • Fico curioso para saber qual é exatamente o problema com uma barra de rolagem

  • Em um vídeo que vi hoje, chamavam isso de indie web; diziam que é uma filosofia de se opor aos algoritmos e abraçar as coisas que tornavam a web antiga excelente
    Coisas como RSS, blogs pessoais, fóruns e webrings
    Eu mesmo comecei um, e é uma sensação muito boa

  • É bom que seja bonito, semântico e responsivo, mas, no fundo, fontes monoespaçadas não são muito boas para texto corrido.
    Já li posts de blog em vários sites com corpo em fonte monoespaçada e até achei ok, mas, para mim, o caminho certo é usar fonte proporcional.

    • Acho que prefiro monoespaçada. Pelo menos o esquema de cores com fundo preto e texto branco é definitivamente melhor.
      Acho muito melhor do que aquelas páginas “bonitas” que tentam evocar revistas impressas antigas.
    • Concordo. Isso começou a me incomodar também ao escrever documentos em Markdown, mas no Markdown muitas vezes é pouco realista evitar monoespaçada.
    • Pergunto por curiosidade: que fonte você prefere para texto corrido?
      No meu blog uso monoespaçada porque tenho baixa visão e uso configurações de zoom, mas acho acessibilidade importante e sempre fico me perguntando qual seria a opção mais legível para todo mundo.

  • Tirando o resto, acho que a classe CSS tree ul-list é tão boa que poderia entrar na especificação do HTML como tag. É um componente extremamente útil.

  • O espaçamento entre linhas é estreito demais, o que prejudica a legibilidade. Parágrafos longos com texto tão apertado são difíceis de ler.
    Mas tabelas e gráficos de caracteres precisam desse entrelinhamento estreito.
    O problema é usar a mesma grade de caracteres tanto para gráficos quanto para texto.
    Talvez dê para amenizar usando uma fonte com x-height especialmente baixa, deixando mais espaço acima e abaixo das letras.

    • No começo fiquei confuso, achando que você estava falando da largura da linha. A largura da linha fica dentro de uma faixa geralmente aceita, cerca de 70 caracteres.
      Sobre a altura da linha, concordo. Com fonte de 16px e 19,2px de altura, é só 1,2x, então fica apertado demais. Se aumentar para 24px, melhora bastante.
      Dito isso, aos meus olhos uma altura de linha maior não parece afetar tabelas ou gráficos de caracteres. Com esse ajuste, o estilo monoespaçado sobrevive muito bem.
      Edição: acho que entendi o ponto. Isso quebra o conceito de grade fixa do autor. Dá para conferir adicionando line-height: 24px ao elemento p e ativando o “debug mode” do autor para ver a grade.
    • Como simplesmente não suporto monoespaçada para leitura, fiz um bookmarklet. Neste site, basta trocar as tags de texto comum para sans-serif que funciona bem, mas todos os modos de leitura estragam as preferências de fonte.
      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/
    • Como isso se compara à densidade dos comentários daqui no HN?
    • O problema é a altura da linha apertada, ou o próprio fato de fontes monoespaçadas serem mais difíceis de ler do que fontes proporcionais?
      Isso porque palavras em monoespaçada acabam tendo “formas” mais parecidas do que palavras em fonte proporcional.
    • Bateu rejeição assim que vi.

  • Há alguns anos, o OpenBSD passou a configurar a fonte do console como Spleen.
    É uma pena que não haja uma versão TrueType.
    https://github.com/fcambus/spleen

    • Não dá para usar o arquivo OTF em vez disso? O README diz que há arquivos OTF dentro do tarball de release.

  • O chamado VIC article, um material sobre C64 ainda famoso hoje, é disponibilizado em monoespaçada.
    https://www.cebix.net/VIC-Article.txt
    O principal problema é a saída.
    Como esse texto usa diagramas que exigem referências fixas em um espaço bidimensional, aqui a monoespaçada é muito importante.
    Esse texto é uma das referências técnicas mais importantes sobre o C64, e 99% dos efeitos de demos técnicas podem ser decompostos nos truques básicos que estão nele.

  • Estou pensando em mudar a fonte do meu site pessoal para monoespaçada.
    Alguém conhece uma fonte monoespaçada especialmente boa para legibilidade em textos longos?
    Melhor ainda se estiver no Google Fonts.

    • Gosto da Drafting Mono para exibir parágrafos: https://indestructibletype.com/Drafting/
      Não está no Google Fonts, mas é gratuita, ou a versão de fonte variável é bem barata.
    • IBM Plex Mono é bem boa e tem uma licença razoável. Está no Google Fonts, e o repositório é este: https://github.com/IBM/plex
    • Saindo um pouco pela tangente, vale considerar usar https://fontsource.org/ em vez do Google Fonts. É tão fácil quanto, e pelo menos não tem rastreamento do Google.