samsa core

Samsa-core

Biblioteca para processamento de arquivos de fonte TrueType.

Características:

• variações
• Avar1 e Avar2
• COLRV0 e COLRV1
• Geração SVG
• modelagem:
  • Gsub (inclui ligantes básicos e emoji)
  • GPOs (inclui kerning de pares de aula com exceções)
  • Variações de recursos
  • Seleção de scripts e idiomas

Este repositório é para o desenvolvimento da versão 2. A versão 1 é gerenciada no repo Samsa GUI.

Como usar

As etapas essenciais são:

• Carregue um arquivo de fonte em um ArrayBuffer
• Crie um objeto Samsabuffer do ArrayBuffer
• Crie um objeto Samsafont do Samsabuffer
• Crie um objeto SamsaiStance a partir do Samsafont
• Call renderText() no SamSaiStance para obter strings SVG

Aqui está o código de amostra para Node.js que carrega filename do disco, cria um objeto Samsafont, cria um objeto SamsaiStance com eixos de variação definidos para determinados locais, torna a sequência hello, world! Como SVG, salva o SVG no arquivo 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 ) ;

Em um navegador, você obtém um matriz e o processa da mesma forma. O SVG resultante pode ser inserido no 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 ;

Se carregar um arquivo de fonte de um URL remoto, você provavelmente usará fetch() então response.arrayBuffer() para obter o ArrayBuffer. Se um arquivo de fonte for arrastado para o navegador, o ArrayBuffer será obtido enumerando a matriz e.dataTransfer.items , onde e é o evento Drop. Para cada item da matriz (pode haver vários itens), se sua propriedade kind for igual ao file , set file = item.getAsFile() e o promete file.arrayBuffer() produzirão o ArrayBuffer.

Diagrama de fluxo

O diagrama ilustra como a Samsa cria um objeto Samsafont a partir de um ArrayBuffer, cria um samsainstance a partir do samsafont e depois renderiza o texto como SVG.

 Fluxograma 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 (SamsaiStance)
    D -> | "Samsainstance.renderText ({text: myText, fontsize: mysize, cor: mycolor})" | E (SVG)

Em uso

• demonstração simples da Samsa-Core (Codepen)
• Renderstack (repo)
• figma-colrv1
• Samsa-gui (repo, usa a versão 1, atualização planejada)

Links

• Repo Github
• pacote npm