Fuentes FIGlet en Text.js

Text.js 0.3 añadió @textjs/font, un analizador y renderizador de fuentes FIGlet. Incluye las 17 fuentes de la distribución FIGlet 2.2.5, cada una en un módulo ES, y su salida coincide exactamente con la del binario figlet 2.2.5.

import { FigletText } from "@textjs/font/react";import { slant } from "@textjs/font/slant";export default function Page() {  return <FigletText font={slant} color="accent">Text.js</FigletText>;}

  ______          __      _ /_  __/__  _  __/ /_    (_)____  / / / _ \| |/_/ __/   / / ___/ / / /  __/>  </ /__   / (__  )/_/  \___/_/|_|\__(_)_/ /____/                   /___/

#Por qué FIGlet

<AsciiFont> incluye dos estilos de letras, block y compact, desde la versión 0.1. FIGlet es el estándar para este tipo de letras desde 1991, y existen cientos de fuentes .flf. La compatibilidad con el formato permite incorporar cualquiera de ellas a una app de consola.

Una fuente FIGlet es un archivo de texto plano. Una línea de cabecera establece la altura, el carácter hardblank y las reglas de layout; después, cada carácter se dibuja como un bloque de filas con una marca de fin al final de cada fila. En sus layouts predeterminados, FIGlet desplaza cada carácter hacia la izquierda hasta que toca el anterior y después usa las reglas de fusión de la fuente para decidir si los dos subcaracteres que se tocan se fusionan en uno.

#Modos de layout

figlet tiene cinco layouts horizontales, y renderFiglet acepta los mismos cinco mediante layout:

Un número de -1 a 63 indica directamente un modo de layout -m: -1 corresponde al ancho completo, 0 al ajuste hasta el contacto y de 1 a 63 se seleccionan reglas de fusión. Están implementadas las seis reglas de fusión horizontal: carácter igual, guion bajo, jerarquía, par opuesto, X grande y hardblank. El analizador también admite el resto del formato: líneas de comentarios, caracteres etiquetados con códigos en decimal, octal y hexadecimal, el glifo de carácter ausente y fuentes de derecha a izquierda como ivrit.

El ajuste de línea también sigue a FIGlet. width divide el texto entre palabras, y dentro de una palabra cuando esta supera el ancho de la línea, donde lo haría figlet -w. figlet -w 80 imprime como máximo 79 columnas, por lo que -w N corresponde a width: N - 1.

#Coincidencia con el binario

packages/font/test/fixtures/references.json contiene 273 salidas generadas al ejecutar el figlet 2.2.5 real con cada fuente incluida en cada modo de layout, con ajuste de línea, justificación, texto de derecha a izquierda, modo de párrafo y la entrada de regresión del propio FIGlet con las opciones de su run-tests.sh. Cada caso almacena los argumentos, la entrada y la salida exacta, y la prueba vuelve a convertir la línea de comandos en opciones:

for (const f of flags) {  if (f === "W") opts.layout = "full";  else if (f === "k") opts.layout = "fitted";  else if (f === "S") opts.layout = "smushed";  else if (f === "o") opts.layout = "universal";  else if (f === "s") opts.layout = "default";  else if (f === "c") opts.align = "center";  else if (f === "r") opts.align = "right";  else if (f === "l") opts.align = "left";  else if (f === "R") opts.direction = "rtl";  else if (f === "L") opts.direction = "ltr";  else if (f === "p") opts.paragraph = true;  else throw new Error(`unsupported flag -${f}`);}

Las 273 coinciden. Para regenerar los datos de prueba, añade figlet 2.2.5 a tu PATH y ejecuta bun run --cwd packages/font references.

#Fuentes en la cuadrícula de celdas

Todas las fuentes incluidas dibujan con caracteres ASCII imprimibles o Latin-1, por lo que cada subcarácter ocupa exactamente una celda en Menlo y se alinea con la cuadrícula. <FigletText> mide sus filas en celdas, por lo que las letras se sitúan en un layout flexbox como cualquier otro <Text>, y columns y align ajustan las líneas y las justifican dentro de su caja.

Cada fuente tiene su propio módulo, por lo que una app solo distribuye las fuentes que importa, y cada fuente se analiza en el primer renderizado en lugar de al importarla. @textjs/font/all exporta todas las fuentes para las galerías.

Cualquier otra FIGfont se puede obtener y analizar en tiempo de ejecución:

import { parseFont } from "@textjs/font";const doom = parseFont(await (await fetch("/fonts/doom.flf")).text(), "Doom");

#Licencias

Las fuentes incluidas son idénticas byte a byte a las de figlet-2.2.5.tar.gz y se distribuyen bajo la licencia BSD de 3 cláusulas de FIGlet. Cada una conserva sus créditos en sus líneas de comentarios, disponibles en font.comment. No se incluyen fuentes populares sin permiso de redistribución, como Doom, Larry 3D, ANSI Shadow y Calvin S.

La referencia completa está en Fuentes.