Шрифты

@textjs/font разбирает файлы FIGfont 2 (.flf) и размещает текст точно так же, как программа figlet. Каждый шрифт — это ES-модуль, поэтому в сборку попадают только импортированные шрифты.

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

#Установка

bun add @textjs/font

#Использование

<FigletText> принимает шрифт и строку. Строки измеряются в ячейках, поэтому надписи размещаются в макетах flexbox так же, как любой другой <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> принимает те же шрифты, сохраняя встроенные начертания block и compact:

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

Вне React функция renderFiglet возвращает по одной строке на каждый ряд:

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

#Макет

Горизонтальный макет соответствует флагам FIGlet.

Реализованы все шесть правил горизонтального слияния: одинаковый символ, подчёркивание, иерархия, противоположная пара, большой X и hardblank.

verticalLayout применяется к многострочному тексту. FIGlet 2.2.5 никогда не сближает строки по вертикали, поэтому по умолчанию используется "full"; "fitted", "smushed" и "universal" реализуют пять вертикальных правил, включая суперслияние вертикальных линий, а "default" использует правила шрифта.

#Перенос и выравнивание

columns (или width в renderFiglet) переносит текст сначала по границам слов, затем внутри слова, точно там же, где это сделал бы figlet -w. align принимает значения "left", "center" или "right"; если ширина не задана, строки выравниваются по самой широкой строке. Шрифты с направлением справа налево, такие как ivrit, выводят текст справа налево и выравнивают его по правому краю; чтобы переопределить это поведение, используйте direction.

#Шрифты в комплекте

Каждый глиф состоит из печатных символов ASCII или Latin-1, поэтому каждый составляющий его символ занимает ровно одну ячейку в Menlo в DevTools. @textjs/font/all экспортирует все шрифты, а также BUNDLED_FONTS для галерей. Шрифты разбираются при первом рендеринге, а не при импорте.

#Пользовательские шрифты

Подойдёт любой FIGfont. Загрузите его, затем разберите:

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

Парсер читает заголовок, строки комментариев, hardblank, маркеры конца, 102 обязательных символа и символы с кодовыми метками в десятичной, восьмеричной или шестнадцатеричной системе. Шрифты TOIlet .tlf рендерятся как обычный текст. Выбирайте шрифты, нарисованные символами ASCII или псевдографики; в Menlo ширина символов Брайля и эмодзи не равна одной ячейке.

#Лицензирование

Шрифты в комплекте побайтно совпадают со шрифтами из дистрибутива FIGlet 2.2.5 и распространяются по лицензии BSD 3-Clause проекта FIGlet. Каждый шрифт сохраняет сведения об авторах в строках комментариев, доступных во время выполнения через font.comment. Популярные шрифты без разрешения на распространение, такие как Doom, Larry 3D, ANSI Shadow и Calvin S, в комплект не входят.

#Проверка на соответствие figlet

Набор тестов воспроизводит 273 результата вывода, записанных при запуске настоящего бинарного файла figlet 2.2.5: каждый шрифт из комплекта во всех режимах макета, перенос, выравнивание, текст справа налево, режим абзацев и собственные входные данные регрессионных тестов FIGlet. Все результаты совпадают в точности.