34 caracteres · gratis para copiar
Elementos de bloque para píxeles de texto
El bloque Unicode de U+2580 a U+259F contiene 32 caracteres que rellenan una celda de carácter en fracciones fijas — sombras de cuarto, pasos de octavo de altura, mitades y cuadrantes. Son la razón por la que una terminal puede dibujar una barra de progreso, un sparkline o un gráfico de barras solo con texto. Copia cualquier carácter de abajo; cada uno aparece con su nombre Unicode y su punto de código.
Sombras
Cuatro pasos de densidad, del 25% al sólido. La forma más rápida de sugerir profundidad o atenuación sin usar color.
Octavos verticales
Rellena la celda de abajo hacia arriba en ocho pasos. Este es el conjunto para sparklines y gráficos de barras.
Octavos horizontales
Rellena la celda de izquierda a derecha en ocho pasos — el conjunto para barras de progreso. Una celda de resolución se convierte en ocho.
Mitades y cuadrantes
Cada combinación de las cuatro cuartas partes de la celda. Trata una celda de carácter como una cuadrícula de píxeles 2×2 y estos son los dieciséis estados posibles.
Haz clic en cualquier carácter para copiarlo. No se descarga nada: son caracteres de texto, no imágenes.
Bloques Unicode
- U+2580–U+259F Elementos de Bloque
Cómo usar Elementos de Bloque
Construye una barra de progreso con los octavos horizontales
Dibuja la parte rellena con █ y termina la celda parcial con el octavo más cercano. Una barra de 20 caracteres tiene de repente 160 pasos de resolución en lugar de 20, así que la barra se mueve con suavidad en lugar de dar saltos.
Construye un sparkline con los octavos verticales
Asigna cada dato a uno de ▁▂▃▄▅▆▇█ según su proporción del máximo. Un gráfico entero se convierte en una línea de texto que puedes pegar en un mensaje de commit o en un registro.
Usa los cuadrantes como una cuadrícula de píxeles 2×2
Las dieciséis combinaciones de cuadrantes permiten que una celda de carácter lleve cuatro píxeles independientes, duplicando la resolución efectiva en ambas direcciones. Así es como funcionan los renderizadores de imágenes en modo texto.
Coloréalos como texto, porque son texto
Un █ toma `color` de CSS como cualquier carácter, así que un gráfico de barras se puede estilizar completamente en CSS sin canvas y sin imágenes. Fija line-height en 1 para que los bloques verticalmente adyacentes se toquen.
Acerca de Elementos de Bloque
El bloque de Elementos de Bloque es lo más parecido que tiene el texto plano a un píxel. Cada carácter rellena una fracción definida de su celda — un octavo, un cuarto, una mitad, o la celda entera — lo que significa que el texto se puede usar como un mapa de bits de muy baja resolución. Los cuatro caracteres de sombra ░▒▓█ vienen de la página de códigos 437 y se usaron durante décadas para simular degradados y tramado en pantallas que no tenían escala de grises en absoluto.
Los caracteres de pasos de octavo son la parte discretamente genial. Como subdividen una celda en ocho, una barra de progreso dibujada en una terminal de 20 columnas tiene 160 estados distintos en lugar de 20. La barra avanza con suavidad en lugar de dar tirones, y lo hace en un flujo de texto plano que se puede canalizar, registrar y copiar. Casi toda barra de progreso moderna de línea de comandos está construida con U+2588 y sus siete hermanos parciales.
Los caracteres de cuadrante van más allá al tratar una celda como una cuadrícula 2×2, dando las dieciséis combinaciones de encendido/apagado. Eso duplica la resolución en horizontal y en vertical a la vez, y es la base de los visores de imágenes de terminal: asigna cada grupo 2×2 de píxeles de la imagen a un carácter de cuadrante, fija los colores de primer plano y de fondo, y una fotografía se muestra en texto.
Este sitio usa los elementos de bloque como su material de dibujo principal. Las piezas de Tetris, la pala y los ladrillos de Breakout, las paredes del Laberinto y el cuerpo de Snake están todos construidos con █ y sus formas parciales en lugar de sprites, por lo que cada juego hereda el color de acento de la página y se mantiene nítido a cualquier nivel de zoom — es tipografía, así que escala como tipografía.
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
¿Cómo hago una barra de progreso con caracteres de bloque Unicode?
Dibuja la parte completada con el bloque completo █, y luego representa la fracción restante con el octavo horizontal más cercano (▏▎▍▌▋▊▉). Rellena el resto con espacios o sombra ligera ░. Multiplicar tu porcentaje por ocho y tomar el resto elige el carácter parcial correcto.
¿Por qué hay un hueco entre mis caracteres de bloque?
El line-height. Los caracteres de bloque se dibujan hasta el borde exacto de la celda, así que cualquier interlineado extra se muestra como un hueco horizontal entre filas. Fija line-height en 1. Si aparecen huecos entre columnas en su lugar, la fuente es proporcional en lugar de monoespaciada.
¿Cuál es la diferencia entre ░ ▒ ▓ y █?
Son cuatro pasos de densidad de la misma celda: la sombra ligera está rellena aproximadamente al 25%, la media al 50%, la oscura al 75% y el bloque completo al 100%. Como son texto, las cuatro toman tu color de texto — así que puedes obtener cuatro niveles de brillo aparente a partir de un solo color.
¿Puedo cambiar el color de los caracteres de bloque?
Sí. Son caracteres de texto normales, así que `color` de CSS, los colores ANSI de la terminal y el tema de tu editor se aplican todos. Esa es toda la ventaja frente a una imagen: un carácter puede ser de cualquier color y cualquier tamaño, y se mantiene nítido a cada nivel de zoom.
¿Los elementos de bloque funcionan en todas las fuentes?
El soporte es prácticamente universal, pero la calidad varía. Algunas fuentes dibujan los bloques de octavo ligeramente estrechos, dejando costuras finas en un relleno sólido. Las fuentes monoespaciadas hechas para terminales — JetBrains Mono, Cascadia Code, DejaVu Sans Mono, Menlo — los dibujan de borde a borde y son la opción segura.
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