← Blog

Font FIGlet di Text.js

@textjs/font mengurai font FIGlet .flf dan menatanya seperti program figlet. Pengujiannya memutar ulang 273 keluaran yang direkam dari figlet 2.2.5, dan semuanya cocok.

Adam

Text.js 0.3 menambahkan @textjs/font, parser dan renderer untuk font FIGlet. Paket ini menyertakan 17 font dari distribusi FIGlet 2.2.5, masing-masing sebagai satu modul ES, dan keluarannya sama persis dengan biner 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>;}
  ______          __      _ /_  __/__  _  __/ /_    (_)____  / / / _ \| |/_/ __/   / / ___/ / / /  __/>  </ /__   / (__  )/_/  \___/_/|_|\__(_)_/ /____/                   /___/

Mengapa FIGlet

<AsciiFont> memiliki dua gaya huruf bawaan, block dan compact, sejak 0.1. FIGlet telah menjadi standar untuk gaya huruf semacam ini sejak 1991, dan tersedia ratusan font .flf. Dukungan format ini memungkinkan semua font tersebut dimasukkan ke aplikasi konsol.

Font FIGlet berupa file teks biasa. Baris header menetapkan tinggi, karakter hardblank, dan aturan layout, lalu setiap karakter digambar sebagai blok baris dengan penanda akhir di ujung setiap baris. Dalam layout bawaannya, FIGlet menggeser setiap karakter ke kiri hingga menyentuh karakter sebelumnya, lalu menggunakan aturan smushing font untuk menentukan apakah dua subkarakter yang bersentuhan digabungkan menjadi satu.

Mode layout

figlet memiliki lima layout horizontal, dan renderFiglet menerima kelima layout yang sama melalui layout:

layoutfigletEfek
"default"-sLayout bawaan font, biasanya dengan smushing
"full"-WLebar penuh; karakter tidak pernah bersentuhan
"fitted"-kKarakter digeser mendekat hingga bersentuhan
"smushed"-SSmushing dengan aturan font
"universal"-oKarakter berikutnya menimpa karakter sebelumnya

Angka dari -1 hingga 63 merupakan mode layout -m mentah: -1 berarti lebar penuh, 0 berarti fitted, dan 1 hingga 63 memilih aturan smushing. Keenam aturan smushing horizontal telah diimplementasikan: karakter sama, garis bawah, hierarki, pasangan berlawanan, X besar, dan hardblank. Parser juga menangani bagian format lainnya: baris komentar, karakter bertag kode dalam desimal, oktal, dan heksadesimal, glif karakter yang hilang, serta font kanan-ke-kiri seperti ivrit.

Pemenggalan baris juga mengikuti FIGlet. width memenggal di batas kata, dan di dalam kata jika kata lebih lebar daripada baris, pada posisi yang sama dengan figlet -w. figlet -w 80 mencetak paling banyak 79 kolom, sehingga -w N setara dengan width: N - 1.

Mencocokkan keluaran biner

packages/font/test/fixtures/references.json menyimpan 273 keluaran yang dihasilkan dengan menjalankan figlet 2.2.5 asli untuk setiap font bawaan dalam setiap mode layout, dengan pemenggalan baris, perataan, teks kanan-ke-kiri, mode paragraf, dan masukan regresi FIGlet sendiri beserta flag dari run-tests.sh. Setiap kasus menyimpan argumen, masukan, dan keluaran persisnya, dan pengujian mengubah baris perintah kembali menjadi opsi:

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

Semua 273 keluaran cocok. Untuk menghasilkan ulang fixture, tempatkan figlet 2.2.5 di PATH Anda dan jalankan bun run --cwd packages/font references.

Font pada kisi sel

Setiap font bawaan menggambar dengan ASCII atau Latin-1 yang dapat dicetak, sehingga setiap subkarakter menempati tepat satu sel di Menlo dan sejajar pada kisi. <FigletText> mengukur barisnya dalam sel, sehingga huruf menempati layout flexbox seperti <Text> lainnya, dan columns serta align memenggal baris dan meratakannya di dalam kotaknya.

Setiap font memiliki modul tersendiri, sehingga aplikasi hanya menyertakan font yang diimpornya, dan font diurai saat render pertama, bukan saat diimpor. @textjs/font/all mengekspor semua font untuk galeri.

FIGfont lain dapat diambil dan diurai saat runtime:

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

Lisensi

Font bawaan identik byte demi byte dengan font dalam figlet-2.2.5.tar.gz dan didistribusikan di bawah lisensi BSD 3-Clause milik FIGlet. Setiap font menyimpan kreditnya dalam baris komentar, yang tersedia sebagai font.comment. Font populer tanpa izin redistribusi, seperti Doom, Larry 3D, ANSI Shadow, dan Calvin S, tidak disertakan.

Referensi lengkap tersedia di Font.