samsa core

núcleo samsa

Biblioteca para procesar archivos de fuentes TrueType.

Características:

• variaciones
• Avar1 y Avar2
• Colrv0 y Colrv1
• Generación SVG
• organización:
  • Gsub (incluye ligaduras básicas y emoji)
  • GPOS (incluye kerning de pares de clase con excepciones)
  • Variaciones de características
  • Selección de script y idioma

Este repositorio es para el desarrollo de la versión 2. La versión 1 se gestiona en el repositorio de GUI SAMSA.

Cómo usar

Los pasos esenciales son:

• Cargue un archivo de fuente en un ArrayBuffer
• Crea un objeto Samsabuffer desde ArrayBuffer
• Cree un objeto Samsafont desde el Samsabuffer
• Cree un objeto SamsainStance desde el SamSafont
• Llame renderText() en Samsainstance para obtener cadenas SVG

Aquí está el código de muestra para Node.js que carga filename desde el disco, crea un objeto Samsafont, crea un objeto SamsainStance con ejes de variación establecidos en ciertas ubicaciones, hace que la cadena hello, world! Como SVG, luego guarda el SVG al archivo 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 ) ;

En un navegador, obtienes un ArrayBuffer y lo procesas de manera similar. El SVG resultante se puede insertar en el 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 ;

Si carga un archivo de fuente desde una URL remota, probablemente usará fetch() y luego response.arrayBuffer() para obtener el ArrayBuffer. Si se arrastra un archivo de fuente al navegador, el ArrayBuffer se obtiene enumerando la matriz e.dataTransfer.items , donde e es el evento de caída. Para cada item en la matriz (puede haber varios elementos), si su propiedad kind es igual a file , establecer file = item.getAsFile() y la promesa file.arrayBuffer() producirá el ArrayBuffer.

Diagrama de flujo

El diagrama ilustra cómo Samsa crea un objeto Samsafont de un ArrayBuffer, crea una Samsainstance del Samsafont, luego hace que el texto sea SVG.

 TD de diagrama de flujo
    F1 [TTF] -> A [ArrayBuffer]
    F2 [Woff2] -> A [ArrayBuffer]
    A [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)

En uso

• Samsa-Core V2 Simple Demo (CodePen)
• RenderStack (Repo)
• Figma-colrv1
• Samsa-Gui (Repo, usa la versión 1, actualización planificada)

Campo de golf

• Repositorio de Github
• Paquete NPM