samsa core

Samsa-Core

Библиотека для обработки файлов шрифтов Truetype.

Функции:

• вариации
• Avar1 и Avar2
• COLRV0 и COLRV1
• Поколение SVG
• Формирование:
  • GSUB (включает в себя основные лигатуры и смайлики)
  • GPO (включает в себя классную пару кернинг за исключением)
  • Вариации функций
  • Сценарий и выбор языка

Это репо предназначено для разработки версии 2. Версия 1 управляется в Samsa Gui Repo.

Как использовать

Основными шагами являются:

• Загрузите файл шрифта в ArrayBuffer
• Создайте объект Samsabuffer из ArrayBuffer
• Создать объект Samsafont из Samsabuffer
• Создать объект SamsainStance из Samsafont
• Вызовите renderText() на SamsainStance , чтобы получить строки SVG

Вот пример кода для node.js, который загружает filename с диска, создает объект Samsafont, создает объект SamsainStance с осями вариации, установленными в определенных местах, отдает строку hello, world! Как SVG, затем сохраняет SVG в файл render.svg .

 const nodeBuffer = fs . readFileSync ( filename ) ;
const arrayBuffer = nodeBuffer . buffer ;
const samsaBuffer = new SamsaBuffer ( arrayBuffer ) ;
const font = new SamsaFont ( samsaBuffer ) ;
const instance = font . instance ( { wght : 900 , wdth : 200 } ) ;
const svg = instance . renderText ( { text : "hello, world!" , fontSize : 72 } ) ;
fs . writeFileSync ( "render.svg" , svg ) ;

В браузере вы получаете ArrayBuffer и обрабатываете его аналогичным образом. Полученный SVG может быть вставлен в DOM.

 const samsaBuffer = new SamsaBuffer ( arrayBuffer ) ;
const font = new SamsaFont ( samsaBuffer ) ;
const instance = font . instance ( { wght : 900 , wdth : 200 } ) ;
const svg = instance . renderText ( { text : "hello, world!" , fontSize : 72 } ) ;
document . getElementById ( "myDiv" ) . innerHTML = svg ;

Если загрузить файл шрифта с удаленного URL, вы, вероятно, используете fetch() , то response.arrayBuffer() для получения ArrayBuffer. Если файл шрифта перетаскивается в браузер, ArrayBuffer получается путем перечисления массива e.dataTransfer.items , где e является событием Drop. Для каждого item в массиве (может быть несколько элементов), если его kind будет равным file , установить file = item.getAsFile() , а promise file.arrayBuffer() даст ArrayBuffer.

Схема потока

Диаграмма иллюстрирует, как Samsa создает объект Samsafont из Arraybuffer, создает Samsainstance из Samsafont, а затем делает текст как SVG.

 Блок -схема TD
    F1 [TTF] -> a [ArrayBuffer]
    F2 [woff2] -> a [arraybuffer]
    [Arraybuffer] -> b [samsabuffer]
    B -> c [Samsafont]
    B [samsabuffer] -> | "samsabuffer.decodewoff2 ()" | C [Samsafont]
    C -> | "samsafont.instance (Axissettings)" | D (SamsainStance)
    D -> | "samsainstance.rendertext ({text: mytext, fontsize: mysize, color: mycolor})" | E (SVG)

В использовании

• Samsa-Core V2 Simple Demo (Codepen)
• Renderstack (репо)
• Figma-Colrv1
• Samsa-Gui (Repo, использует версию 1, обновление запланировано)

Ссылки

• GitHub Repo
• пакет NPM