Fonty FIGlet w Text.js
@textjs/font parsuje fonty FIGlet .flf i układa je tak jak program figlet. Testy odtwarzają 273 wyniki zapisane z programu figlet 2.2.5 i wszystkie są zgodne.
W Text.js 0.3 dodano @textjs/font, parser i renderer fontów FIGlet. Pakiet zawiera 17 fontów z dystrybucji FIGlet 2.2.5, każdy jako osobny moduł ES, a jego wynik jest identyczny z wynikiem pliku binarnego 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>;} ______ __ _ /_ __/__ _ __/ /_ (_)____ / / / _ \| |/_/ __/ / / ___/ / / / __/> </ /__ / (__ )/_/ \___/_/|_|\__(_)_/ /____/ /___/Dlaczego FIGlet
<AsciiFont> od wersji 0.1 ma dwa wbudowane kroje liter: block i compact. FIGlet jest standardem dla tego rodzaju napisów od 1991 roku, a fontów .flf istnieją setki. Obsługa tego formatu pozwala dodać dowolny z nich do aplikacji konsolowej.
Font FIGlet to plik tekstowy. Wiersz nagłówka określa wysokość, znak hardblank i reguły layoutu, a następnie każdy znak jest rysowany jako blok wierszy ze znacznikiem końca na końcu każdego wiersza. W domyślnych layoutach FIGlet przesuwa każdy znak w lewo, aż zetknie się on z poprzednim, po czym na podstawie reguł łączenia fontu rozstrzyga, czy dwa stykające się znaki składowe połączą się w jeden.
Tryby layoutu
figlet ma pięć poziomych layoutów, a renderFiglet przyjmuje te same pięć przez layout:
layout | figlet | Efekt |
|---|---|---|
"default" | -s | Własny layout fontu, zwykle z łączeniem znaków |
"full" | -W | Pełna szerokość; znaki nigdy się nie stykają |
"fitted" | -k | Zbliżanie znaków aż do zetknięcia |
"smushed" | -S | Łączenie znaków według reguł fontu |
"universal" | -o | Nakładanie późniejszych znaków na wcześniejsze |
Liczba od -1 do 63 to surowy tryb layoutu -m: -1 oznacza pełną szerokość, 0 dopasowanie, a wartości od 1 do 63 wybierają reguły łączenia. Zaimplementowano wszystkie sześć poziomych reguł łączenia: jednakowy znak, podkreślenie, hierarchia, przeciwstawna para, duże X i hardblank. Parser obsługuje też pozostałe elementy formatu: wiersze komentarzy, znaki oznaczone kodami dziesiętnymi, ósemkowymi i szesnastkowymi, glif brakującego znaku oraz fonty pisane od prawej do lewej, takie jak ivrit.
Zawijanie również działa tak jak w FIGlet. width łamie wiersze na granicach słów, a gdy słowo jest szersze niż wiersz, także wewnątrz słowa, w tych samych miejscach co figlet -w. figlet -w 80 wypisuje najwyżej 79 kolumn, więc -w N odpowiada width: N - 1.
Zgodność z plikiem binarnym
packages/font/test/fixtures/references.json zawiera 273 wyniki wygenerowane przez uruchomienie rzeczywistego programu figlet 2.2.5 dla każdego dołączonego fontu w każdym trybie layoutu, z zawijaniem, wyrównywaniem, tekstem od prawej do lewej, trybem akapitowym oraz własnymi danymi regresyjnymi FIGlet z flagami z jego pliku run-tests.sh. Każdy przypadek przechowuje argumenty, dane wejściowe i dokładny wynik, a test przekształca wiersz poleceń z powrotem w opcje:
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}`);}Wszystkie 273 wyniki są zgodne. Aby ponownie wygenerować dane testowe, umieść figlet 2.2.5 w PATH i uruchom bun run --cwd packages/font references.
Fonty na siatce komórek
Każdy dołączony font rysuje za pomocą drukowalnych znaków ASCII lub Latin-1, więc każdy znak składowy zajmuje dokładnie jedną komórkę w kroju Menlo i pasuje do siatki. <FigletText> mierzy swoje wiersze w komórkach, więc napis mieści się w layoucie flexbox jak każdy inny <Text>, a columns i align zawijają go i wyrównują w jego obszarze.
Każdy font jest osobnym modułem, więc aplikacja zawiera tylko te fonty, które importuje, a font jest parsowany przy pierwszym renderowaniu zamiast przy imporcie. @textjs/font/all eksportuje wszystkie fonty na potrzeby galerii.
Dowolny inny font FIGfont można pobrać i sparsować w czasie działania:
import { parseFont } from "@textjs/font";const doom = parseFont(await (await fetch("/fonts/doom.flf")).text(), "Doom");Licencje
Dołączone fonty są identyczne bajt w bajt z tymi w figlet-2.2.5.tar.gz i są rozpowszechniane na licencji BSD 3-Clause projektu FIGlet. Każdy zachowuje informacje o autorach w wierszach komentarzy, dostępnych jako font.comment. Popularne fonty bez zgody na redystrybucję, takie jak Doom, Larry 3D, ANSI Shadow i Calvin S, nie są dołączone.
Pełna dokumentacja znajduje się w sekcji Fonty.