87 caracteres · gratis para copiar
Caracteres de dibujo de cajas
El bloque Unicode de U+2500 a U+257F contiene 128 caracteres diseñados para encajar entre sí y formar marcos, tablas, árboles y cuadrículas — ligero, grueso, doble, discontinuo y redondeado, más cada unión donde esos grosores se encuentran. Son de lo que en realidad está hecha una interfaz de terminal, un árbol de directorios o una tabla ASCII. Copia cualquier carácter de abajo; cada uno aparece con su nombre Unicode y su punto de código, agrupados para que las piezas que necesitas juntas estén juntas.
Líneas ligeras
El conjunto por defecto. Once caracteres dibujan cualquier cuadrícula rectangular, y todos se unen limpiamente entre sí.
Líneas gruesas
Las mismas once formas en un grosor mayor. Combínalas con líneas ligeras para resaltar un borde exterior o una fila seleccionada.
Líneas dobles
Dos trazos paralelos. El clásico marco de la era DOS, todavía la opción más decorativa del bloque.
Esquinas redondeadas
Esquinas en arco que suavizan una caja de líneas ligeras. Sustituyen a ┌ ┐ └ ┘ sin que cambie nada más.
Líneas discontinuas
Tramos de triple y cuádruple guion, en ligero y grueso. Útiles para un separador que debe leerse como secundario.
Diagonales y medios trazos
Barras para tachar una celda, y tramos de media longitud para finales de línea que se detienen a mitad de celda.
Transiciones ligero-grueso
Uniones donde una línea ligera se encuentra con una gruesa. Son lo que te permite engrosar una fila de una tabla sin romper las uniones.
Transiciones doble-simple
Uniones entre líneas dobles y simples — las piezas que necesitas cuando un marco exterior doble se encuentra con divisores internos simples.
Haz clic en cualquier carácter para copiarlo. No se descarga nada: son caracteres de texto, no imágenes.
Bloques Unicode
- U+2500–U+257F Dibujo de Cajas
Cómo usar Caracteres de Dibujo de Cajas
Usa siempre una fuente monoespaciada
Esta es la regla de la que depende todo lo demás. Los caracteres de dibujo de cajas están diseñados sobre una celda fija, así que en una fuente proporcional las verticales se desalinean y el marco se deshace. JetBrains Mono, Menlo, Consolas, Cascadia Code y DejaVu Sans Mono muestran bien el bloque.
Elige un grosor y quédate en él
Lo ligero se une con lo ligero y lo grueso con lo grueso. Mezclarlos sin las piezas de transición deja huecos visibles donde los trazos no llegan a encontrarse. Si quieres un borde exterior grueso con divisores internos ligeros, toma las uniones del grupo de transiciones ligero-grueso.
Construye esquinas, luego bordes, luego uniones
Una tabla son cuatro esquinas, dos tramos de borde y las intersecciones entre ellos. Coloca primero las esquinas y el resto sigue de forma mecánica — por lo que también es fácil de generar en código.
Fija line-height en 1 para marcos sólidos
Los trazos verticales se dibujan hasta la altura completa de la celda del carácter. Cualquier interlineado extra se muestra como un hueco entre filas, así que una caja que se ve rota normalmente solo necesita line-height: 1.
Acerca de Caracteres de Dibujo de Cajas
El bloque de Dibujo de Cajas es descendiente directo del conjunto de caracteres de la página de códigos 437 del IBM PC, que dio a las aplicaciones de DOS sus marcos y menús décadas antes de que nadie pudiera contar con gráficos. Unicode conservó todo el repertorio en U+2500, y sigue en uso constante: los bordes de un gestor de archivos de terminal, las ramas de un árbol de directorios, los marcos de una tabla en la línea de comandos y las cuadrículas de los juegos de este sitio están todos dibujados con estos 128 caracteres.
Lo que hace que el bloque esté inusualmente bien diseñado es la cobertura sistemática de las uniones. No basta con tener una línea horizontal y una vertical; necesitas cada combinación de lo que llega a una celda desde cada una de las cuatro direcciones, en cada grosor. Por eso el bloque contiene caracteres tan específicos como "abajo ligero y horizontal grueso" — existen para que una tabla pueda cambiar de grosor a mitad de camino sin que aparezca un solo hueco en la unión.
La limitación práctica es la fuente. Estos glifos se dibujan tocando exactamente los bordes de su celda de carácter para que las celdas adyacentes se conecten en un trazo continuo. Eso solo se cumple en una fuente monoespaciada con line-height de 1. Dale al texto interlineado extra y aparecen líneas horizontales entre filas; usa una fuente proporcional y las verticales se desvían. Casi todo problema de "el dibujo de cajas se ve roto" es uno de esos dos.
Hay un vacío deliberado en el bloque. Unicode codifica diagonales ligeras y gruesas y una cruz diagonal ligera, pero ninguna diagonal de línea doble y ningún arco en grosor grueso, porque la página de códigos original no tenía ninguno y el bloque se definió por compatibilidad y no por completitud. Si necesitas una esquina redondeada gruesa, no existe — los cuatro arcos en U+256D a U+2570 son solo de grosor ligero.
Juegos dibujados con estos caracteres
Todos los tableros de este sitio están construidos con Unicode, no con sprites. Estos usan los caracteres de arriba.
Preguntas frecuentes
¿Por qué mis caracteres de dibujo de cajas no se alinean?
Casi siempre es la fuente. Estos glifos asumen una celda de ancho fijo, así que una fuente proporcional desplaza los trazos verticales fuera de columna. Cambia a una fuente monoespaciada como JetBrains Mono, Consolas o Menlo. Si el marco se alinea horizontalmente pero muestra huecos entre filas, fija line-height en 1 — el interlineado extra separa los trazos verticales.
¿Cuál es la diferencia entre los caracteres de dibujo de cajas y el arte ASCII?
El arte ASCII simula líneas con los 128 caracteres de ASCII — guiones, barras verticales y signos de más — así que las esquinas son aproximadas y las uniones se ven visiblemente ásperas. Los caracteres de dibujo de cajas son glifos diseñados a propósito que se encuentran exactamente en el borde de la celda, dando trazos continuos y sin interrupciones. Son Unicode, no ASCII, aunque a menudo se confunden.
¿Qué caracteres de dibujo de cajas necesito para una tabla simple?
Once: las cuatro esquinas ┌ ┐ └ ┘, los dos bordes ─ │, las cuatro uniones en T ├ ┤ ┬ ┴ y la cruz ┼. Toda cuadrícula rectangular, por grande que sea, se construye solo con esos.
¿Puedo mezclar líneas ligeras y gruesas?
Sí, pero solo a través de los caracteres de transición. Una vertical gruesa que se encuentra con una horizontal ligera necesita un glifo construido exactamente para ese caso, como U+2542. Une una línea gruesa directamente a una ligera sin la pieza correcta y obtendrás un hueco visible. El grupo de transiciones ligero-grueso de arriba tiene el conjunto completo.
¿Los caracteres de dibujo de cajas funcionan en móvil?
Se muestran en todos los teléfonos modernos — el bloque es antiguo y tiene soporte universal. El problema es que los navegadores móviles suelen usar una fuente proporcional por defecto, así que envuélvelos en una regla CSS de monoespaciado en lugar de confiar en la predeterminada, o la alineación se romperá.
¿Hay esquinas redondeadas en el bloque de dibujo de cajas?
Cuatro, en U+256D a U+2570, y son solo de grosor ligero. Colócalas en lugar de ┌ ┐ └ ┘ para suavizar una caja de líneas ligeras. No hay un equivalente grueso o de línea doble — el bloque heredó su repertorio de la página de códigos 437, que no tenía ninguno.
Support the arcade
¿Disfrutas los juegos?
UnicodeGames es gratis, no tiene anuncios y nunca los tendrá. Si alegró tu descanso para el café, puedes devolver el favor.
Invítame un caféOne-off · No account needed · Handled by Buy Me a Coffee