Font

@textjs/font analizza i file FIGfont 2 (.flf) e li dispone esattamente come il programma figlet. Ogni font è un modulo ES, quindi vengono distribuiti solo i font che importi.

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>;}

#Installazione

bun add @textjs/font

#Utilizzo

<FigletText> accetta un font e una stringa. Le righe si misurano in celle, quindi i caratteri si inseriscono nei layout flexbox come qualsiasi altro <Text>.

import { FigletText } from "@textjs/font/react";import { big } from "@textjs/font/big";<FigletText font={big} layout="fitted" columns={60} align="center" color="muted">  Deployed</FigletText>

<AsciiFont> accetta gli stessi font, mantenendo i suoi stili integrati block e compact:

<AsciiFont text="Text.js" font={slant} color="accent" />

Al di fuori di React, renderFiglet restituisce una stringa per riga:

import { renderFiglet } from "@textjs/font";import { standard } from "@textjs/font/standard";renderFiglet(standard, "Hello", { layout: "full" });// ["  _   _          _   _         ", " | | | |   ___  | | | |   ___  ", …]

#Layout

Il layout orizzontale segue i flag di FIGlet.

Sono implementate tutte e sei le regole di fusione orizzontale: carattere uguale, trattino basso, gerarchia, coppia opposta, X grande e hardblank.

verticalLayout si applica al testo su più righe. FIGlet 2.2.5 non avvicina mai le righe, quindi il valore predefinito è "full"; "fitted", "smushed" e "universal" implementano le cinque regole verticali, inclusa la superfusione delle linee verticali, e "default" usa quelle del font.

#A capo e allineamento

columns (o width in renderFiglet) manda a capo tra le parole, poi all’interno delle parole, esattamente dove lo farebbe figlet -w. align può essere "left", "center" o "right"; senza una larghezza, le righe si allineano entro la larghezza della riga più lunga. I font da destra a sinistra come ivrit stampano da destra a sinistra e si allineano a destra; usa direction per modificare questo comportamento.

#Font inclusi

Ogni glifo usa caratteri ASCII stampabili o Latin-1, quindi ogni sottocarattere occupa esattamente una cella nel Menlo di DevTools. @textjs/font/all li esporta tutti, insieme a BUNDLED_FONTS per le gallerie. I font vengono analizzati al primo rendering, non all’importazione.

#Font personalizzati

Qualsiasi FIGfont funziona. Scaricalo, poi analizzalo:

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

Il parser legge l’intestazione, le righe di commento, gli hardblank, i marcatori di fine, i 102 caratteri obbligatori e i caratteri contrassegnati da codici decimali, ottali o esadecimali. I font TOIlet .tlf vengono visualizzati come testo semplice. Preferisci font disegnati con caratteri ASCII o caratteri per disegnare riquadri; braille ed emoji non occupano una sola cella in Menlo.

#Licenze

I font inclusi sono quelli della distribuzione FIGlet 2.2.5, byte per byte, sotto la licenza BSD a 3 clausole di FIGlet. Ciascuno conserva i propri crediti nelle righe di commento, disponibili a runtime come font.comment. I font popolari senza un’autorizzazione alla ridistribuzione, come Doom, Larry 3D, ANSI Shadow e Calvin S, non sono inclusi.

#Verifica con figlet

La suite di test riproduce 273 output registrati dal vero binario figlet 2.2.5: ogni font incluso in ogni modalità di layout, a capo, giustificazione, testo da destra a sinistra, modalità paragrafo e l’input di regressione di FIGlet stesso. Tutti corrispondono esattamente.