Herramientas de texto
¿Por qué el arte ASCII está desalineado?
Diagnostique el arte ASCII con cuatro comprobaciones: fuente, espacios en blanco, ancho y celdas de caracteres. Después, elija un formato que el destino pueda conservar.
Por Vigneshwaran Vijayakumar, desarrollador y editor | | Revisado conforme a la política editorial de ClockTools
Tabla de contenidos
El arte ASCII suele desalinearse porque el destino usa una fuente proporcional, comprime espacios repetidos, expande las tabulaciones de otra manera o divide una línea antes del final del dibujo. Corrija primero el contenedor: use un bloque de código delimitado o un elemento pre, una fuente monoespaciada y espacios en vez de tabulaciones, y mantenga las líneas dentro del ancho más estrecho del destino. El Generador de arte ASCII de ClockTools muestra recuentos de columnas, filas, caracteres y bytes para probar el resultado antes de pegarlo.
¿Cuáles cuatro comprobaciones encuentran la mayoría de las fallas de alineación?
Utilice este orden porque cada paso descarta una clase de falla completa:
- Fuente: Confirme que el destino represente el arte en una fuente monoespaciada.
- Espacio en blanco: confirme que se conserven los espacios repetidos y los saltos de línea.
- Ancho: busque la fila más larga y compárela con el contenedor de visualización más estrecho.
- Caracteres: busque tabulaciones, símbolos Unicode anchos, emojis o glifos de fuentes alternativas que ocupen celdas inesperadas.
No empiece redibujando letras individuales. Si todas las filas se desplazan a partir del mismo punto, probablemente la estructura esté intacta y el renderizador esté cambiando el espaciado.
| Síntoma | Causa probable | Comprobación rápida |
|---|---|---|
| Las columnas se desplazan gradualmente | Fuente proporcional | Cambiar el mismo texto a monoespacio |
| La sangría inicial desaparece | Espacios colapsados | Envuelva el arte en un bloque preformateado |
| Un editor parece correcto y otro no. | Ancho de tabulación o fuente alternativa | Sustituya las tabulaciones y compruebe la fuente |
| El borde derecho cae a una nueva línea | Saltos automáticos de línea del contenedor | Mida la fila más larga |
| Sólo se mueven las filas con símbolos | Ancho de celda de carácter | Reemplazar glifos anchos o alternativos |
¿Por qué una fuente proporcional rompe la imagen?
El arte ASCII trata los caracteres como casillas de una cuadrícula. Un espacio, un guion bajo, una barra y una W mayúscula deben avanzar el mismo ancho de celda para conservar la alineación vertical. Una fuente proporcional asigna anchos distintos, de modo que una fila con letras estrechas no ocupa lo mismo que una fila con letras anchas.
La familia genérica CSS monospace solicita una fuente cuyos caracteres avanzan el mismo ancho. La guía de fuentes del W3C incluye monospace como familia genérica, y la definición de CSS 2 describe una fuente monoespaciada por el ancho fijo de sus glifos.
Si controla la página, use un elemento preformateado y una lista de fuentes monoespaciadas:
<pre class="ascii-art">YOUR ART HERE</pre>.ascii-art {
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
white-space: pre;
overflow-x: auto;
}Esto preserva el dibujo sin forzarlo a ajustarse. Un desplazamiento horizontal suele ser menos dañino que un borde derecho roto.
¿Cómo cambian las filas los espacios, las tabulaciones y los saltos automáticos de línea?
HTML comprime las secuencias de espacios y trata los saltos de línea como espacios del flujo normal. La propiedad white-space controla la conservación de espacios y saltos, y el ajuste de líneas. pre conserva los tres elementos estructurales del arte ASCII habitual: espacios repetidos, filas explícitas y ausencia de saltos automáticos.
Las tabulaciones no son unidades estables de alineación. Un editor puede usar cuatro columnas y otro ocho; un componente web puede aplicar un tamaño propio. Sustituya cada tabulación por el número previsto de espacios antes de distribuir el texto.
Los espacios finales también son frágiles. Algunos editores los eliminan al guardar y las herramientas de revisión pueden ocultarlos. Prefiera un diseño cuyo borde derecho no dependa de espacios invisibles al final. Los espacios iniciales e interiores se conservan mejor en un contenedor preformateado.
¿Qué cambió en una prueba de ClockTools con variables controladas?
En una prueba de la herramienta el 2026-09-01, se introdujo ALIGN con la fuente Standard FIGlet. Con alineación a la izquierda, el generador mostró 31 columnas, 6 filas, 159 caracteres y 159 bytes. El resultado visible fue:
_ _ ___ ____ _ _
/ \ | | |_ _/ ___| \ | |
/ _ \ | | | | | _| \| |
/ ___ \| |___ | | |_| | |\ |
/_/ \_\_____|___\____|_| \_|Cambiar a un ancho de 40 columnas y a alineación centrada añadió espacios iniciales al texto. El resultado mostrado creció hasta 65 columnas y el 380 caracteres a pesar de que las formas de las letras en sí no habían cambiado. Esta es la observación crítica: la alineación puede agregar espacios literales, por lo que un banner que aparece centrado en el generador puede volverse demasiado ancho para su destino.
La herramienta también separa el color de vista previa del texto sin formato y ofrece exportaciones TXT, Markdown, ANSI y HTML orientadas a texto, además de PNG. Esa separación ayuda a evitar que una configuración de vista previa decorativa cambie silenciosamente los caracteres que copia.
¿Cómo se debe pegar el arte ASCII en Markdown o HTML?
En GitHub, coloque el texto en un bloque de código delimitado. La documentación de GitHub muestra delimitadores de tres acentos graves y recomienda líneas en blanco alrededor. Añada la etiqueta text si no quiere que un resaltador de lenguaje coloree la puntuación.
```text
YOUR ASCII ART
```En un README, mantenga el nombre del proyecto como un encabezado normal antes del dibujo. Los lectores de pantalla pueden leer todos los signos de puntuación, y un rótulo decorativo no debe ser el único lugar con texto esencial.
En HTML, use pre en vez de encadenar espacios de no separación. Pruebe una vista estrecha. Puede utilizar el Editor HTML en tiempo real para comparar white-space: pre, pre-wrap y el flujo normal sin modificar una página de producción.
¿Cuándo los caracteres Unicode crean un problema de ancho?
Los caracteres ASCII estrictos son estrechos, pero muchos diseños modernos de «arte ASCII» usan caracteres de líneas, bloques de sombreado, emojis u otros símbolos Unicode. El informe East Asian Width de Unicode explica que los caracteres pueden ser estrechos o anchos en contextos de diseño, y los caracteres ambiguos pueden depender del entorno.
Las fuentes alternativas añaden otra variable. Si la fuente monoespaciada elegida no contiene un símbolo, el navegador puede tomarlo de otra fuente con métricas distintas. Pruebe en el terminal, la aplicación de chat o el navegador donde se verá el dibujo.
Para la mayor compatibilidad, elija una escala de caracteres ASCII simples como @%#*+=-:. y evite emojis. Use bloques Unicode solo si sabe que el destino los representa de forma consistente.
¿Qué exportación debería utilizar cuando el texto no puede permanecer alineado?
Elija el formato para el destino, no para la vista previa del generador:
| Destino | La mejor primera opción | ¿Por qué? |
|---|---|---|
| README o comentario de Markdown | Texto Markdown en un bloque de código delimitado | Conserva los espacios y sigue siendo editable |
| Terminal o registro simple | TXT con glifos solo ASCII | Evita marcas y suposiciones de color. |
| Terminal compatible con colores | ANSI | Lleva códigos de color de terminales intencionalmente |
| Página web controlada | HTML o texto dentro de pre | Permite definir fuente, espacios en blanco y desbordamiento |
| Diapositivas, publicaciones sociales, aplicaciones de texto proporcional | PNG | Congela la apariencia exacta |
Antes de exportar, pegue el texto sin formato en el Bloc de notas en línea para detectar tabulaciones accidentales, y compare las versiones anterior y posterior con el Comprobador de diferencias de texto. La comparación a nivel de carácter expone un espacio eliminado que un escaneo visual puede pasar por alto.
Si el destino rechaza el texto monoespaciado, elimina los delimitadores de código o divide las líneas largas, no lo considere un soporte fiable para el dibujo en texto. Exporte un PNG, añada un pie de imagen en texto normal para la accesibilidad y conserve aparte el texto original para editarlo más adelante.
Preguntas frecuentes
¿Por qué el arte ASCII se ve diferente después de pegarlo?
El destino puede usar una fuente proporcional, comprimir espacios repetidos, expandir tabulaciones de otra manera, dividir filas largas o mostrar algunos símbolos Unicode con otro ancho de celda.
¿Qué fuente debo utilizar para el arte ASCII?
Utilice una fuente verdaderamente monoespaciada para que cada carácter avance con el mismo ancho. Pruebe la fuente y el destino exactos porque los glifos alternativos aún pueden diferir.
¿Cómo mantengo el arte ASCII alineado en GitHub?
Colóquelo en un bloque de código delimitado, con la etiqueta text si lo desea, y mantenga la fila más larga dentro del ancho del contenedor del README.
¿El arte ASCII debería contener tabulaciones?
No. Sustituya las tabulaciones por espacios, porque los editores y terminales pueden asignarles anchos distintos.
¿Por qué los caracteres de dibujo de líneas rompen la alineación?
Son Unicode en lugar de estricto ASCII, y su ancho de visualización o fuente alternativa pueden variar según los terminales, navegadores y configuraciones regionales.
¿Cuándo debo exportar el arte ASCII como PNG?
Utilice PNG cuando el destino elimine el texto preformateado, fuerce una fuente proporcional, ajuste filas largas o deba reproducir el color y el espaciado exactamente.
Acerca del autor
Vigneshwaran Vijayakumar
Fundador, desarrollador y editor de ClockTools | Gerente de Marketing Digital | India
Vigneshwaran es un ingeniero con décadas de experiencia técnica, incluida su labor profesional como director de marketing digital en Dubái. Su trabajo conecta el análisis de datos, la optimización para motores de búsqueda, la optimización de la tasa de conversión, los sistemas de contenido, la producción visual y la inteligencia artificial y el aprendizaje automático aplicados. En ClockTools, convierte esa experiencia multidisciplinar en herramientas de navegador especializadas y guías prácticas respaldadas por fuentes.