const fs = require('fs') const { createCanvas } = require('canvas') const width = 64 const height = 48 const weight = 300 const map = { ampersand: '&', bar: '|', colon: ':', equal: '=', exclam: '!', greater: '>', hyphen: '-', less: '<', plus: '+', question: '?', slash: '/', underscore: '_', w: 'w', } function generateLigaturePreview(style, filename) { const ligature = filename.split('.').slice(0, 1)[0] const chars = ligature.split('_') const text = chars.reduce((t, c) => t + map[c], '') const canvas = createCanvas(width, height) const context = canvas.getContext('2d') context.fillStyle = '#000' context.fillRect(0, 0, width, height) context.font = `${weight} ${style} 18pt "Operator Mono SSm Lig"` context.textAlign = 'center' context.fillStyle = '#fff' context.text = text context.fillText(text, 32, 32) const buffer = canvas.toBuffer('image/png') console.log(ligature) fs.writeFileSync(`./images/preview/${style}/${ligature}.png`, buffer) return { text, ligature, filename: `${ligature}.png` } } function generate(style, filenames) { let html = `

Operator Mono Ligatures

Normal | Italic

` filenames.forEach(f => { const { ligature, filename } = generateLigaturePreview(style, f) html += `

${ligature}

` }) html += `

` fs.writeFileSync(`./images/preview/${style}/index.html`, html) } const filenames = fs .readdirSync('./ligature/OperatorMonoSSmLig-Book/glyphs') .filter(f => !!f.match(/[^\d]\.liga\.xml$/)) generate('normal', filenames) generate('italic', filenames)