גופני FIGlet ב-Text.js

⁦Text.js 0.3⁩ הוסיף את @textjs/font, מנתח ומרנדר לגופני FIGlet. הוא כולל את 17 הגופנים מההפצה של ⁦FIGlet 2.2.5⁩, כל אחד במודול ES משלו, והפלט שלו תואם בדיוק לקובץ הבינארי 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>;}

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

#למה FIGlet

<AsciiFont> כולל שני סגנונות כיתוב מובנים, block ו-compact, מאז ⁦0.1. FIGlet⁩ הוא התקן לכיתוב מסוג זה מאז 1991, וקיימים מאות גופני .flf. התמיכה בפורמט מאפשרת לשלב כל אחד מהם באפליקציית מסוף.

גופן FIGlet הוא קובץ טקסט פשוט. שורת כותרת מגדירה את הגובה, את תו ה-hardblank ואת כללי ה-layout, ואז כל תו מצויר כבלוק של שורות עם סימן סיום בסוף כל שורה. במצבי ה-layout המוגדרים כברירת מחדל, FIGlet מזיז כל תו שמאלה עד שהוא נוגע בקודמו, ואז משתמש בכללי המיזוג של הגופן כדי לקבוע אם שני תווי המשנה הנוגעים זה בזה יתמזגו לאחד.

#מצבי layout

ל-figlet יש חמישה מצבי layout אופקיים, ו-renderFiglet מקבל את אותם חמישה דרך layout:

מספר בין -1 ל-63 הוא מצב layout גולמי של -m: הערך -1 הוא רוחב מלא, 0 הוא קירוב עד מגע, והערכים 1 עד 63 בוחרים כללי מיזוג. כל ששת כללי המיזוג האופקיים ממומשים: תו זהה, קו תחתון, היררכיה, זוג מנוגד, X גדול ו-hardblank. המנתח מטפל גם בשאר הפורמט: שורות הערה, תווים מתויגים בקוד עשרוני, אוקטלי והקסדצימלי, הגליף של תו חסר וגופנים מימין לשמאל כגון ivrit.

גם גלישת השורות תואמת ל-FIGlet. width שובר שורות בגבולות מילים, ובתוך מילה כשהיא רחבה מהשורה, באותם מקומות כמו figlet -w. הפקודה figlet -w 80 מדפיסה לכל היותר 79 עמודות, כך ש--w N מקביל ל-width: N - 1.

#התאמה לקובץ הבינארי

הקובץ packages/font/test/fixtures/references.json מכיל 273 פלטים שנוצרו בהרצת figlet 2.2.5 המקורי על כל גופן כלול בכל מצב layout, עם גלישת שורות, יישור, טקסט מימין לשמאל, מצב פסקה וקלט בדיקות הרגרסיה של FIGlet עצמו עם הדגלים מתוך run-tests.sh שלו. כל מקרה שומר את הארגומנטים, את הקלט ואת הפלט המדויק, והבדיקה ממירה את שורת הפקודה בחזרה לאפשרויות:

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

כל 273 הפלטים תואמים. כדי ליצור מחדש את נתוני הבדיקה, יש להציב את figlet 2.2.5 ב-PATH ולהריץ bun run --cwd packages/font references.

#גופנים על רשת התאים

כל גופן כלול מצייר באמצעות תווי ASCII או ⁦Latin-1⁩ הניתנים להדפסה, כך שכל תו משנה תופס בדיוק תא אחד ב-Menlo ומתיישר לרשת. <FigletText> מודד את שורותיו בתאים, כך שהכיתוב משתלב ב-layout של flexbox כמו כל <Text> אחר, ו-columns ו-align מגדירים את גלישת השורות ואת היישור בתוך התיבה שלו.

כל גופן הוא מודול נפרד, כך שאפליקציה כוללת רק את הגופנים שהיא מייבאת, וניתוח הגופן מתבצע ברינדור הראשון ולא בעת הייבוא. @textjs/font/all מייצא את כל הגופנים עבור גלריות.

אפשר לאחזר ולנתח כל FIGfont אחר בזמן ריצה:

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

#רישוי

הגופנים הכלולים זהים ברמת הבתים לאלה שב-figlet-2.2.5.tar.gz ומופצים תחת רישיון ⁦BSD 3-Clause⁩ של FIGlet. כל גופן שומר את הקרדיטים שלו בשורות ההערה, הזמינות דרך font.comment. גופנים נפוצים ללא הרשאה להפצה מחדש, כגון Doom, ⁦Larry 3D⁩, ⁦ANSI Shadow⁩ ו-⁦Calvin S⁩, אינם כלולים.

התיעוד המלא נמצא ב-גופנים.