Cómo corregir el desalineado de texto monoespaciado en navegadores Android

Fuentes: Fixing miss-aligned monospace text in Android browsers

Cuando se renderizan diagramas ASCII dentro de una etiqueta

 en HTML, los caracteres aparecen correctamente alineados en Neovim y en los navegadores de macOS e iOS, pero sufren un ligero desplazamiento en dispositivos Android. El autor detectó el problema al mostrar cajas con caracteres de dibujo de cajas (box-drawing) y comprobó que se trata de un fallo conocido. Tras buscar en Google y consultar varios modelos de lenguaje, descubrió la causa: aunque se cargue una fuente web monoespacio, el navegador recurre a la fuente monoespaciada del sistema para los glifos no presentes en la fuente web, y la fuente del sistema en Android tiene un ancho distinto, lo que rompe la alineación. La solución propuesta consiste en servir la fuente monoespacial Noto Sans Mono en formato TTF directamente desde el propio servidor, en lugar de usar el enlace a Google Fonts, que devuelve una versión recortada del archivo. Al descargar el .ttf completo y embeberlo mediante CSS, el problema desaparece y los diagramas se alinean correctamente. El artículo incluye un fragmento de CSS reproducible y enlaces a la discusión en el repositorio mkdocs-material donde se documenta la diferencia de tamaño entre las versiones WOFF2 y TTF de la fuente.