Web monoespaciada

 (owickstrom.github.io)
1 puntos por GN⁺ 2024-08-28 | 1 comentarios | Compartir por WhatsApp
  • Es una página experimental que acomoda elementos web sobre una cuadrícula a nivel de caracteres, mostrando texto, tablas, diagramas y medios con una estética cercana a las terminales de los años 70
  • Convierte un documento Markdown simple con Pandoc y renderiza HTML semántico en una cuadrícula monoespaciada usando CSS y muy poco JavaScript
  • El manejo responsivo no se reduce por píxeles, sino en unidades de tamaño de carácter; las tablas se ajustan automáticamente a la cuadrícula, pero se limitan a una sola columna que puede expandirse
  • Abarca elementos estándar como párrafos comunes, separadores, <details>, listas, listas en árbol, tablas, formularios, contenedores grid, dibujos ASCII basados en <pre>, imágenes y videos
  • Todo el código fuente está publicado en GitHub, por lo que puedes hacer un fork o copiar las partes que necesites conforme a los términos de la licencia

Página web compuesta con una cuadrícula de caracteres

  • Una fuente monoespaciada puede resultar más legible, consistente y estética que una fuente proporcional para algunos usuarios
  • Esta página es un experimento técnico y creativo para construir todos los elementos como una web monoespaciada
  • La implementación consiste en convertir un documento Markdown con Pandoc y luego acomodar el HTML semántico sobre una cuadrícula de caracteres usando CSS y un poco de JavaScript
  • El layout responsivo se reduce según el ancho de la pantalla en unidades de tamaño de carácter en lugar de píxeles
  • El objetivo es lograr que los elementos HTML estándar funcionen de forma natural dentro de una cuadrícula monoespaciada sin trabajo complejo adicional

Elementos compatibles y forma de distribución

  • El marcado básico incluye párrafos comunes, separadores horizontales y el elemento <details>
  • Las listas admiten listas con viñetas comunes y listas ordenadas; con una lista no ordenada que tenga la clase tree, se puede representar una estructura de árbol similar a un sistema de archivos
  • Las tablas se ajustan automáticamente a la cuadrícula monoespaciada y funcionan de manera responsiva
    • Sin embargo, las columnas que pueden expandirse se limitan a una sola columna
  • Los formularios también están incluidos entre los elementos compatibles y se colocan sobre la misma cuadrícula de caracteres junto con otros elementos estándar
  • Si se agrega la clase grid a un contenedor, las celdas dividen el espacio horizontal de manera uniforme
    • Como se conserva la característica monoespaciada, es posible que el ancho total no siempre sea del 100%
    • Para hacer que una celda específica ocupe el espacio restante, configura flex-grow: 1; en esa celda
  • Se pueden dibujar ilustraciones estilo ASCII usando la etiqueta <pre> y caracteres de dibujo de cajas
    • Se pueden envolver con <figure> y <figcaption> para hacerlas más destacadas
    • Se incluyen como ejemplos un diagrama de entrega de mensajes y una gráfica de barras
  • También admite objetos multimedia como imágenes y videos
    • Se expanden hasta el ancho de la página y se agrega padding inferior para mantener la cuadrícula monoespaciada
  • Todo el código fuente está publicado en github.com/owickstrom/the-monospace-web
  • La inspiración del diseño proviene de U.S. Graphics Company

Lecturas relacionadas

1 comentarios

 
GN⁺ 2024-08-28
Opiniones en Hacker News

  • Estoy recopilando una lista de páginas de ancho fijo: https://wonger.dev/posts/monospace-dump#web. Por ahora hay unas 50
    El manejo del espaciado es difícil y, si renuncias a las fuentes proporcionales, también pierdes algo de legibilidad
    Creo que el kerning de las fuentes proporcionales marca una gran diferencia para que el ojo reconozca la forma de los grupos de letras
    El texto monoespaciado está bien en lugares estructurados y resaltados, como un editor de código, pero conviene evitarlo en textos largos
    Aun así, se ve realmente bonito, sobre todo en tablas Unicode y arte ASCII

    • En las fuentes proporcionales, el kerning marca una diferencia enorme. Un buen kerning ayuda al cerebro a procesar mucho más rápido la forma de las palabras
    • El arte ASCII era realmente genial. En la clase de mecanografía, cuando terminabas la tarea del día, podías crear arte ASCII siguiendo una lista de instrucciones sin saber cuál sería la imagen final
      Por ejemplo, era algo como 15 space, 1 V, 3 U, 1 V, 15 space, 5 U, 12 space, 2 x, 5 U, 2 x; y después de unas 250 líneas aparecía una imagen de Jordan haciendo una clavada, que podías imprimir
    • Uno de los ejemplos ahora es un dominio en venta. Aun así, sigue en WBM: https://web.archive.org/web/20230216225350/https://kary.us/n...
    • El texto monoespaciado con color y un poco de formato parece renunciar a una dimensión sensorial o espacial. Es casi una austeridad sin sentido
    • Vale la pena sumar uno más a la lista :) https://jarek.lupin.ski/tape-deck/

  • Este parece el hilo perfecto para hacer esta pregunta. Hace unos años vi algo, quizá una guía de un videojuego, que estaba escrito para leerse con fuente monoespaciada, y sus miles de líneas estaban perfectamente justificadas a ambos lados solo mediante la elección de palabras
    ¿Alguien sabe qué era o tiene un enlace?

    • Algo parecido es http://tom7.org/bovex/. Es un motor de maquetación que reemplaza la entrada usando un LLM para lograr un efecto similar
    • Eso se llama bricktext. Antes se veía de vez en cuando en lugares como Usenet o GameFAQs
      [0] http://www.catb.org/esr/jargon/html/B/bricktext.html
      Es un poco sorprendente que este concepto haya desaparecido por completo de los resultados de búsqueda de Google
    • Laravel hace algo parecido. En un comentario de varias líneas, cada línea es exactamente 3 caracteres más corta que la anterior
      https://github.com/laravel/laravel/blob/11.x/config/database...
    • Tengo un recuerdo vago de haber visto algo así en una guía de GameFAQs. Creo que era de algún juego de Final Fantasy, pero no recuerdo más
    • Yo también quiero sumar una pregunta a este hilo
      Durante años he querido crear una extensión para Visual Studio Code que, mientras escribes, justifique comentarios a ambos lados, incluso con separación silábica, y que permita espacios adicionales cuando haga falta
      No pasé de investigar un poco algoritmos y bibliotecas relacionadas, porque parecía bastante complejo
      Intenté usar cosas como fmt o par, pero terminé aceptando que, salvo que lo haga manualmente, tendría que renunciar a comentarios bien alineados; además, un cambio pequeño suele obligar a rehacer varias líneas y consume demasiado tiempo
      Preferiría no partir identificadores largos en medio si es posible, y también habría que manejar listas anidadas, tablas, bloques de código, arte ASCII dentro de comentarios, distinguir guiones dentro de palabras de guiones usados para separación silábica, y comentarios estructurados como comentarios de documentación XML o etiquetas Javadoc
      Al ver Badness 0 de Tom7 pensé en probar con un LLM, pero si tiene que funcionar en tiempo real y no producir comentarios alucinados, no lo veo práctico todavía
      ¿Existe ya algo así, o alguna base que evite que hacer la extensión se convierta en un trabajo de un año?

  • El monoespaciado en sí no me molesta
    Lo que molesta son los saltos de línea forzados
    Hay sitios web “retro” que, en la práctica, usan la etiqueta pre
    En el teléfono se vuelve una pared de texto con letra pequeña, el modo lectura no sirve, y si lo giras puede que aparezca una barra de desplazamiento o puede que no
    Mi queja casi única sobre las listas de correo técnicas de hoy también son los saltos de línea forzados y los diseños rígidos

    • Este sitio web no es así. Es totalmente responsive
    • Intenté leer un RFC en el teléfono y tenía que desplazarme constantemente de izquierda a derecha solo para ver un párrafo simple. O achicarlo tanto que ya no podía leer las letras
    • Me pregunto cuál es exactamente el problema con una barra de desplazamiento

  • En un video que vi hoy llamaban a esto web independiente, una filosofía de oponerse a los algoritmos y adoptar las cosas que hicieron genial a la web del pasado
    Cosas como RSS, blogs personales, foros y webrings
    Yo empecé uno propio y se siente bastante bien

  • Está bien que sea bonito, semántico y responsivo, pero en el fondo las fuentes monoespaciadas no son tan buenas para el texto principal
    He leído entradas de blog con cuerpo en monoespaciada en varios sitios y estaban bien, pero para mí lo correcto es usar una fuente proporcional

    • Creo que prefiero las monoespaciadas. Al menos la combinación de colores de fondo negro con texto blanco definitivamente es mejor
      Me parece mucho mejor que esas páginas “bonitas” que intentan dar la sensación de una revista impresa antigua
    • De acuerdo. También me empezó a molestar al escribir documentos Markdown, pero en Markdown muchas veces no es realista evitar la monoespaciada
    • Pregunto por curiosidad: ¿qué fuente prefieres para el texto principal?
      En mi blog uso monoespaciada porque no tengo buena vista y uso ajustes de ampliación, pero la accesibilidad me importa, así que siempre me pregunto cuál es la opción más legible para todos

  • Más allá de lo demás, creo que la clase CSS tree ul-list es tan buena que podría entrar en la especificación HTML como etiqueta. Es un componente increíblemente útil

  • El interlineado es demasiado estrecho y afecta negativamente la legibilidad. Los párrafos largos con un texto tan apretado son difíciles de leer
    Pero las tablas y los gráficos con caracteres necesitan ese interlineado reducido
    El problema es usar la misma cuadrícula de caracteres tanto para gráficos como para texto
    Quizás se podría mitigar usando una fuente con una x-height especialmente baja, que deje más espacio arriba y abajo de las letras

    • Al principio me confundí porque pensé que hablabas del ancho de línea. El ancho de línea está dentro del rango generalmente aceptado, unas 70 caracteres
      Sobre la altura de línea, estoy de acuerdo. Con un tamaño de fuente de 16px y 19.2px, es solo 1.2 veces, así que se siente demasiado apretado. Si se sube a 24px, mejora mucho
      Aun así, a mis ojos una altura de línea mayor no parece afectar las tablas ni los gráficos con caracteres. Con ese ajuste, el estilo monoespaciado sobrevive bastante bien
      Edición: creo que entiendo el punto. Rompe el concepto de cuadrícula fija del autor. Se puede comprobar poniendo line-height: 24px en el elemento p y activando el “debug mode” del autor para ver la cuadrícula
    • Como no soporto la monoespaciada para leer, hice un bookmarklet. En este sitio funciona bien con solo cambiar las etiquetas de texto normales a sans serif, pero todos los modos de lectura arruinan las preferencias de fuente
      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/
    • ¿Qué tal se compara con lo apretado de los comentarios de HN aquí?
    • ¿El problema será la altura de línea apretada, o el hecho en sí de que las fuentes monoespaciadas son más difíciles de leer que las proporcionales?
      Porque las palabras en monoespaciada terminan teniendo una “forma” más parecida entre sí que las palabras en proporcional
    • Apenas lo vi, me causó rechazo de inmediato

  • OpenBSD empezó hace algunos años a configurar Spleen como fuente de consola
    Es una lástima que no haya una versión TrueType
    https://github.com/fcambus/spleen

    • ¿No podrías usar el archivo OTF en su lugar? El README dice que en el tarball de la versión hay archivos OTF

  • El llamado VIC article, un material sobre C64 que sigue siendo famoso, se ofrece en monoespaciada
    https://www.cebix.net/VIC-Article.txt
    El principal problema es la salida
    Como este texto usa diagramas que necesitan referencias fijas en un espacio bidimensional, aquí la monoespaciada es muy importante
    Este texto es una de las referencias técnicas más importantes sobre el C64, y el 99% de los efectos de las demos técnicas se puede descomponer en los trucos básicos que están aquí

  • Estoy pensando en cambiar la fuente de mi sitio personal a una monoespaciada
    ¿Alguien conoce alguna fuente monoespaciada que sea especialmente buena para la legibilidad de textos largos?
    Mejor todavía si está en Google Fonts

    • Para mostrar párrafos me gusta Drafting Mono: https://indestructibletype.com/Drafting/
      No está en Google Fonts, pero es gratis, o la versión de fuente variable también es muy barata
    • IBM Plex Mono es bastante buena y tiene una licencia razonable. Está en Google Fonts y el repositorio está aquí: https://github.com/IBM/plex
    • Como nota al margen, convendría considerar usar https://fontsource.org/ en vez de Google Fonts. Es igual de fácil de usar y, como mínimo, no tiene el rastreo de Google