samsa core

samsa-core

Bibliothèque pour le traitement des fichiers de polices TrueType.

Caractéristiques:

• variations
• AVAR1 et AVAR2
• Colrv0 et Colrv1
• Génération SVG
• Façon:
  • GSUB (comprend des ligatures de base et des emoji)
  • GPOS (inclut la paire de classes Kerning avec des exceptions)
  • Variations de fonctionnalités
  • Sélection du script et de la langue

Ce repo est pour le développement de la version 2. La version 1 est gérée dans le repo Samsa Gui.

Comment utiliser

Les étapes essentielles sont:

• Chargez un fichier de police dans un arraybuffer
• Créez un objet Samsabuffer à partir du ArrayBuffer
• Créez un objet Samsafont à partir du Samsabuffer
• Créez un objet Samsainstance à partir du Samsafont
• Appelez renderText() sur la Samsainstance pour obtenir des chaînes SVG

Voici un exemple de code pour node.js qui charge filename à partir du disque, crée un objet Samsafont, crée un objet Samsainstance avec des axes de variation définis sur certains emplacements, rend la chaîne hello, world! En tant que SVG, enregistre alors le SVG dans le fichier 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 ) ;

Dans un navigateur, vous obtenez un ArrayBuffer et le traitez de la même manière. Le SVG résultant peut être inséré dans le 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 le chargement d'un fichier de police à partir d'une URL distante, vous utiliserez probablement fetch() alors response.arrayBuffer() pour obtenir le ArrayBuffer. Si un fichier de police est traîné sur le navigateur, le ArrayBuffer est obtenu en énumérant le tableau e.dataTransfer.items , où e est l'événement de chute. Pour chaque item du tableau (il peut y avoir plusieurs éléments), si sa propriété kind est égale au file , set file = item.getAsFile() et que la promesse file.arrayBuffer() donnera le ArrayBuffer.

Diagramme de débit

Le diagramme illustre comment Samsa crée un objet Samsafont à partir d'un ArrayBuffer, crée une Samsainstance à partir du Samsafont, puis rend le texte en tant que SVG.

 Organigramme TD
    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)

Utilisé

• Samsa-core v2 simple démo (codepen)
• Renderstack (repo)
• Figma-Colrv1
• Samsa-Gui (Repo, utilise la version 1, mise à niveau prévue)

Links

• GitHub Repo
• package NPM