FIGlet-Schriften in Text.js

Text.js 0.3 ergänzte @textjs/font, einen Parser und Renderer für FIGlet-Schriftarten. Das Paket enthält die 17 Schriftarten aus der FIGlet-2.2.5-Distribution, jeweils als eigenes ES-Modul, und seine Ausgabe entspricht exakt der des figlet-Binary in Version 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>;}

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

#Gründe für FIGlet

<AsciiFont> hat seit 0.1 zwei integrierte Schriftzüge: block und compact. FIGlet ist seit 1991 der Standard für diese Art von Schriftzügen, und es gibt Hunderte von .flf-Schriftarten. Durch die Unterstützung dieses Formats lässt sich jede davon in einer Konsolen-App einsetzen.

Eine FIGlet-Schriftart ist eine reine Textdatei. Eine Kopfzeile legt die Höhe, das Hardblank-Zeichen und die Layout-Regeln fest, danach wird jedes Zeichen als Block aus Zeilen mit einer Endmarkierung am Ende jeder Zeile gezeichnet. In seinen Standard-Layouts verschiebt FIGlet jedes Zeichen nach links, bis es das vorherige berührt, und entscheidet dann anhand der Smushing-Regeln der Schriftart, ob die beiden sich berührenden Teilzeichen zu einem verschmelzen.

#Layout-Modi

figlet hat fünf horizontale Layouts, und renderFiglet akzeptiert dieselben fünf über layout:

Eine Zahl von -1 bis 63 ist ein direkter -m-Layout-Modus: -1 steht für volle Breite, 0 für Einpassen, und 1 bis 63 wählen Smushing-Regeln aus. Alle sechs horizontalen Smushing-Regeln sind implementiert: gleiches Zeichen, Unterstrich, Hierarchie, entgegengesetztes Paar, großes X und Hardblank. Der Parser verarbeitet auch den Rest des Formats: Kommentarzeilen, mit dezimalen, oktalen und hexadezimalen Codes markierte Zeichen, die Glyphe für fehlende Zeichen und Rechts-nach-links-Schriftarten wie ivrit.

Auch der Zeilenumbruch folgt FIGlet. width bricht an Wortgrenzen um und innerhalb eines Wortes, wenn es breiter als die Zeile ist, genau dort, wo figlet -w umbrechen würde. figlet -w 80 gibt höchstens 79 Spalten aus, daher entspricht -w N der Einstellung width: N - 1.

#Übereinstimmung mit dem Binary

packages/font/test/fixtures/references.json enthält 273 Ausgaben, die mit dem echten figlet 2.2.5 für jede enthaltene Schriftart in jedem Layout-Modus erzeugt wurden, mit Zeilenumbruch, Ausrichtung, Rechts-nach-links-Text, Absatzmodus und FIGlets eigenen Regressionseingaben mit den Flags aus dessen run-tests.sh. Jeder Fall speichert die Argumente, die Eingabe und die exakte Ausgabe, und der Test wandelt die Kommandozeile wieder in Optionen um:

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

Alle 273 stimmen überein. Um die Testdaten neu zu erzeugen, füge figlet 2.2.5 zu deinem PATH hinzu und führe bun run --cwd packages/font references aus.

#Schriftarten im Zellenraster

Jede enthaltene Schriftart zeichnet mit druckbarem ASCII oder Latin-1, sodass jedes Teilzeichen in Menlo genau eine Zelle belegt und am Raster ausgerichtet ist. <FigletText> misst seine Zeilen in Zellen, sodass Schriftzüge wie jedes andere <Text> in einem flexbox-Layout sitzen und columns und align sie innerhalb ihrer Box umbrechen und ausrichten.

Jede Schriftart ist ein eigenes Modul, sodass eine App nur die Schriftarten ausliefert, die sie importiert, und eine Schriftart erst beim ersten Rendern statt beim Import geparst wird. @textjs/font/all exportiert alle Schriftarten für Galerien.

Jede andere FIGfont lässt sich zur Laufzeit abrufen und parsen:

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

#Lizenzierung

Die enthaltenen Schriftarten sind byteidentisch mit denen in figlet-2.2.5.tar.gz und werden unter FIGlets BSD-3-Klausel-Lizenz verbreitet. Jede behält ihre Urheberangaben in ihren Kommentarzeilen, abrufbar über font.comment. Beliebte Schriftarten ohne Erlaubnis zur Weiterverbreitung, etwa Doom, Larry 3D, ANSI Shadow und Calvin S, sind nicht enthalten.

Die vollständige Referenz findest du unter Schriftarten.