1.3.2
@sutton-signwriting/font-ttf is a javascript package for the browser that generates SVG and PNG images for individual symbols and complete signs using TrueType Fonts. The package covers the entire set of the International SignWritnig Alphabet 2010 (ISWA 2010).
This package supports both Formal SignWriting in ASCII (FSW) and SignWriting in Unicode (SWU) character sets, along with the style string. See draft-slevinski-formal-signwriting for detailed specification.
Author: https://SteveSlevinski.me
Channel: https://www.youtube.com/channel/UCXu4AXlG0rXFtk_5SzumDow
Sponsor: https://www.patreon.com/signwriting
Donate: https://paypal.me/signwriting
The TrueType Fonts can be installed on Windows, Mac, and Linux. For iOS, two mobile configurations are available. Installation is not possible on Android.
npm install @sutton-signwriting/font-ttf
# download package
git clone https://github.com/sutton-signwriting/font-ttf.git
# install dependencies
cd font-ttf
npm install
# create project documentation
npm run docs
# create project files
npm run build
// import entire library
import * as ttf from '@sutton-signwriting/font-ttf'
// import individual module
import {font} from '@sutton-signwriting/font-ttf'
// import entire library
// available as ssw.ttf
<script src="index.js"></script>
// import individual module
// available as ssw.ttf.font
<script src="font/font.js"></script>
// import entire library
// available as ssw.ttf
<script src="https://unpkg.com/@sutton-signwriting/font-ttf@1.3.1"></script>
// import individual module
// available as ssw.ttf.font
<script src="https://unpkg.com/@sutton-signwriting/font-ttf@1.3.1/font/font.min.js"></script>
File >> Preferences >> Settings
Search for "font family". Append SuttonSignWritingOneD to the list of fonts. Restart VS Code.
MIT
The font module contains functions for handing the TrueType fonts.
Function that appends font-face CSS for the Sutton SignWriting fonts for system installed fonts, relative directory fonts, or content delivery network
(string)
an optional relative directory for font location
font.cssAppend('./font/')
Function that executes a callback function once the Sutton SignWriiting Line and Fill fonts are ready to use
(function)
a callback function to execute when fonts are ready
const callback = () => {
console.log("Sutton SignWriting Line and Fill fonts are ready to use")
}
font.cssLoaded( callback )
Function that executes a callback function once the Sutton SignWriiting Line font is ready to use
(function)
a callback function to execute when line font is ready
const callback = () => {
console.log("Sutton SignWriting Line font is ready to use")
}
font.cssLoadedLine( callback )
Function that executes a callback function once the Sutton SignWriiting Fill font is ready to use
(function)
a callback function to execute when fill font is ready
const callback = () => {
console.log("Sutton SignWriting Fill font is ready to use")
}
font.cssLoadedFill( callback )
Function that returns the size of a symbol using an id
(number)
a 16-bit number of a symbol
font.symbolSize(1)
return [15,30]
Function that returns a plane 15 character for a symbol line using an id
(number)
a 16-bit number of a symbol
font.symbolLine(1)
return ''
Function that returns a plane 16 character for a symbol fill using an id
(number)
a 16-bit number of a symbol
font.symbolFill(1)
return ''
Function that creates two text elements for a symbol using an id
(number)
a 16-bit number of a symbol
font.symbolText(1)
return ` <text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>`
The fsw module contains functions for handling Formal SignWriitng in ASCII (FSW) characters. FSW characters definition
Function that returns the size of a symbol using an FSW symbol key
(string)
an FSW symbol key
fsw.symbolSize("S10000")
return [15,30]
Function that returns a plane 15 character for a symbol line using an FSW symbol key
(string)
an FSW symbol key
fsw.symbolLine('S10000')
return ''
Function that returns a plane 16 character for a symbol fill using an FSW symbol key
(string)
an FSW symbol key
font.symbolFill('S10000')
return ''
Function that creates two text elements for a symbol using an FSW symbol key
(string)
an FSW symbol key
fsw.symbolText('S10000')
return ` <text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>`
Function that creates an SVG image from an FSW symbol key with an optional style string
(string)
an FSW symbol key with optional style string
fsw.symbolSvgBody('S10000')
return `<text font-size="0">S10000</text>
<g transform="translate(500,500)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>`
Function that creates an SVG image from an FSW symbol key with an optional style string
(string)
an FSW symbol key with optional style string
fsw.symbolSvg('S10000')
return `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="15" height="30" viewBox="500 500 15 30">
<text font-size="0">S10000</text>
<g transform="translate(500,500)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
</svg>`
Function that creates a PNG data url from an FSW symbol key with an optional style string
(string)
an FSW symbol key with optional style string
fsw.symbolPng('S10000')
return 'data:image/png;base64,iVBORw...'
Function that normalizes a symbol with a minimum coordinate for a center of 500,500
(string)
an FSW symbol key with optional coordinate and style string
fsw.symbolNormalize('S10000-CP10G_green_Z2')
return 'S10000493x485-CP10G_green_Z2'
Function that creates an SVG image from an FSW sign with an optional style string
(string)
an FSW sign with optional style string
fsw.signSvgBody('M525x535S2e748483x510S10011501x466S2e704510x500S10019476x475')
return `<text font-size="0">M525x535S2e748483x510S10011501x466S2e704510x500S10019476x475</text>
<g transform="translate(483,510)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
<g transform="translate(501,466)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
<g transform="translate(510,500)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
<g transform="translate(476,475)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>`
Function that creates an SVG image from an FSW sign with an optional style string
(string)
an FSW sign with optional style string
fsw.signSvg('M525x535S2e748483x510S10011501x466S2e704510x500S10019476x475')
return `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="49" height="69" viewBox="476 466 49 69">
<text font-size="0">M525x535S2e748483x510S10011501x466S2e704510x500S10019476x475</text>
<g transform="translate(483,510)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
<g transform="translate(501,466)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
<g transform="translate(510,500)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
<g transform="translate(476,475)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
</svg>`
Function that creates a PNG data url from an FSW sign with an optional style string
(string)
an FSW sign with optional style string
fsw.signPng('M525x535S2e748483x510S10011501x466S20544510x500S10019476x475')
return 'data:image/png;base64,iVBORw...'
Function that normalizes an FSW sign for a center of 500,500
(string)
an FSW sign with optional style string
fsw.signNormalize('M525x535S2e748483x510S10011501x466S2e704510x500S10019476x475')
return 'M525x535S2e748483x510S10011501x466S2e704510x500S10019476x475'
Function that creates an SVG image for a column of FSW
(ColumnData)
an array of objects with information about FSW signs and punctuation
(ColumnOptions)
an object of column options
string
:
column svg
fsw.columnSvg([
{
"x": 56,
"y": 20,
"minX": 481,
"minY": 471,
"width": 37,
"height": 58,
"lane": 0,
"padding": 0,
"segment": "sign",
"text": "AS14c20S27106M518x529S14c20481x471S27106503x489",
"zoom": 1
},
{
"x": 57,
"y": 118,
"minX": 482,
"minY": 468,
"width": 36,
"height": 65,
"lane": 0,
"padding": 0,
"segment": "sign",
"text": "AS18701S1870aS2e734S20500M518x533S1870a489x515S18701482x490S20500508x496S2e734500x468",
"zoom": 1
},
{
"x": 39,
"y": 203,
"minX": 464,
"minY": 496,
"width": 72,
"height": 8,
"lane": 0,
"padding": 0,
"segment": "symbol",
"text": "S38800464x496",
"zoom": 1
}
],
{
"height": 250,
"width": 150,
})
return `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="150" height="250" viewBox="0 0 150 250">
<g transform="translate(56,20) scale(1) translate(-481,-471) ">
<text font-size="0">AS14c20S27106M518x529S14c20481x471S27106503x489-D_black,white_Z1</text>
<g transform="translate(481,471)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
<g transform="translate(503,489)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
</g>
<g transform="translate(57,118) scale(1) translate(-482,-468) ">
<text font-size="0">AS18701S1870aS2e734S20500M518x533S1870a489x515S18701482x490S20500508x496S2e734500x468-D_black,white_Z1</text>
<g transform="translate(489,515)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
<g transform="translate(482,490)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
<g transform="translate(508,496)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
<g transform="translate(500,468)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
</g>
<g transform="translate(39,203) scale(1) translate(-464,-496) ">
<text font-size="0">S38800464x496-D_black,white_Z1</text>
<g transform="translate(464,496)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
</g>
</svg>`
Function that creates an array of SVG column images for an FSW text
(string)
a text of FSW signs and punctuation
(ColumnOptions)
an object of column options
Array<string>
:
array of SVG columns
fsw.columnsSvg('AS14c20S27106M518x529S14c20481x471S27106503x489 AS18701S1870aS2e734S20500M518x533S1870a489x515S18701482x490S20500508x496S2e734500x468 S38800464x496',{
"height": 250,
"width": 150,
})
return [`<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="150" height="250" viewBox="0 0 150 250">
<g transform="translate(56,20) scale(1) translate(-481,-471) ">
<text font-size="0">AS14c20S27106M518x529S14c20481x471S27106503x489-D_black,white_Z1</text>
<g transform="translate(481,471)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
<g transform="translate(503,489)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
</g>
<g transform="translate(57,118) scale(1) translate(-482,-468) ">
<text font-size="0">AS18701S1870aS2e734S20500M518x533S1870a489x515S18701482x490S20500508x496S2e734500x468-D_black,white_Z1</text>
<g transform="translate(489,515)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
<g transform="translate(482,490)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
<g transform="translate(508,496)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
<g transform="translate(500,468)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
</g>
<g transform="translate(39,203) scale(1) translate(-464,-496) ">
<text font-size="0">S38800464x496-D_black,white_Z1</text>
<g transform="translate(464,496)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
</g>
</svg>`]
Function that creates a PNG data url for a column of FSW
(ColumnData)
an array of objects with information about FSW signs and punctuation
(ColumnOptions)
an object of column options
string
:
column png data url
fsw.columnPng([
{
"x": 56,
"y": 20,
"minX": 481,
"minY": 471,
"width": 37,
"height": 58,
"lane": 0,
"padding": 0,
"segment": "sign",
"text": "AS14c20S27106M518x529S14c20481x471S27106503x489",
"zoom": 1
},
{
"x": 57,
"y": 118,
"minX": 482,
"minY": 468,
"width": 36,
"height": 65,
"lane": 0,
"padding": 0,
"segment": "sign",
"text": "AS18701S1870aS2e734S20500M518x533S1870a489x515S18701482x490S20500508x496S2e734500x468",
"zoom": 1
},
{
"x": 39,
"y": 203,
"minX": 464,
"minY": 496,
"width": 72,
"height": 8,
"lane": 0,
"padding": 0,
"segment": "symbol",
"text": "S38800464x496",
"zoom": 1
}
],
{
"height": 250,
"width": 150,
})
return 'data:image/png;base64,iVBORw...'
Function that creates an array of PNG data urls for an FSW text
(string)
a text of FSW signs and punctuation
(ColumnOptions)
an object of column options
Array<string>
:
array of PNG data urls
fsw.columnsPng('AS14c20S27106M518x529S14c20481x471S27106503x489 AS18701S1870aS2e734S20500M518x533S1870a489x515S18701482x490S20500508x496S2e734500x468 S38800464x496',{
"height": 250,
"width": 150,
})
return ['data:image/png;base64,iVBORw...']
The swu module contains functions for handling SignWriting in Unicode (SWU) characters. SWU characters definition
Function that returns the size of a symbol using an SWU symbol character
(string)
an SWU symbol character
swu.symbolSize("")
return [15,30]
Function that returns a plane 15 character for a symbol line using an SWU symbol character
(string)
an SWU symbol character
swu.symbolLine('')
return ''
Function that returns a plane 165 character for a symbol fill using an SWU symbol character
(string)
an SWU symbol character
swu.symbolFill('')
return ''
Function that creates two text elements for a symbol using an SWU symbol character
(string)
an SWU symbol character
swu.symbolText('')
return ` <text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>`
Function that creates an SVG image from an SWU symbol key with an optional style string
(string)
an SWU symbol key with optional style string
swu.symbolSvgBody('S10000')
return `<text font-size="0">S10000</text>
<g transform="translate(500,500)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>`
Function that creates an SVG image from an SWU symbol key with an optional style string
(string)
an SWU symbol key with optional style string
swu.symbolSvg('S10000')
return `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="15" height="30" viewBox="500 500 15 30">
<text font-size="0">S10000</text>
<g transform="translate(500,500)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
</svg>`
Function that creates a PNG data url from an SWU symbol character with an optional style string
(string)
an SWU symbol character with optional style string
swu.symbolPng('-CP10G_green_Z2')
return 'data:image/png;base64,iVBORw...'
Function that normalizes a symbol with a minimum coordinate for a center of 500,500
(string)
an SWU symbol character with optional coordinate and style string
swu.symbolNormalize('')
return '𝣿𝣷'
Function that creates an SVG image from an SWU sign with an optional style string
(string)
an SWU sign with optional style string
swu.signSvgBody('M525x535S2e748483x510S10011501x466S2e704510x500S10019476x475')
return `<text font-size="0">M525x535S2e748483x510S10011501x466S2e704510x500S10019476x475</text>
<g transform="translate(483,510)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
<g transform="translate(501,466)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
<g transform="translate(510,500)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
<g transform="translate(476,475)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>`
Function that creates an SVG image from an SWU sign with an optional style string
(string)
an SWU sign with optional style string
swu.signSvg('M525x535S2e748483x510S10011501x466S2e704510x500S10019476x475')
return `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="49" height="69" viewBox="476 466 49 69">
<text font-size="0">M525x535S2e748483x510S10011501x466S2e704510x500S10019476x475</text>
<g transform="translate(483,510)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
<g transform="translate(501,466)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
<g transform="translate(510,500)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
<g transform="translate(476,475)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
</svg>`
Function that creates a PNG data url from an SWU sign with an optional style string
(string)
an SWU sign with optional style string
swu.signPng('𝠀𝠃𝤟𝤩𝣵𝤐𝤇𝣤𝤐𝤆𝣮𝣭')
return 'data:image/png;base64,iVBORw...'
Function that normalizes an SWU sign for a center of 500,500
(string)
an SWU sign with optional style string
swu.signNormalize('𝠀𝠃𝤟𝤩𝣵𝤐𝤇𝣤𝤐𝤆𝣮𝣭')
return '𝠀𝠃𝤟𝤩𝣵𝤐𝤇𝣤𝤐𝤆𝣮𝣭'
Function that creates an SVG image for a column of SWU
(ColumnData)
an array of objects with information about FSW signs and punctuation
(ColumnOptions)
an object of column options
string
:
column svg
swu.columnSvg([
{
"x": 56,
"y": 20,
"minX": 481,
"minY": 471,
"width": 37,
"height": 58,
"lane": 0,
"padding": 0,
"segment": "sign",
"text": "𝠀𝠃𝤘𝤣𝣳𝣩𝤉𝣻",
"zoom": 1
},
{
"x": 57,
"y": 118,
"minX": 482,
"minY": 468,
"width": 36,
"height": 65,
"lane": 0,
"padding": 0,
"segment": "sign",
"text": "𝠀𝠃𝤘𝤧𝣻𝤕𝣴𝣼𝤎𝤂𝤆𝣦",
"zoom": 1
},
{
"x": 39,
"y": 203,
"minX": 464,
"minY": 496,
"width": 72,
"height": 8,
"lane": 0,
"padding": 0,
"segment": "symbol",
"text": "𝣢𝤂",
"zoom": 1
}
],
{
"height": 250,
"width": 150,
})
return `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="150" height="250" viewBox="0 0 150 250">
<g transform="translate(56,20) scale(1) translate(-481,-471) ">
<text font-size="0">𝠀𝠃𝤘𝤣𝣳𝣩𝤉𝣻-D_black,white_Z1</text>
<g transform="translate(481,471)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
<g transform="translate(503,489)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
</g>
<g transform="translate(57,118) scale(1) translate(-482,-468) ">
<text font-size="0">𝠀𝠃𝤘𝤧𝣻𝤕𝣴𝣼𝤎𝤂𝤆𝣦-D_black,white_Z1</text>
<g transform="translate(489,515)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
<g transform="translate(482,490)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
<g transform="translate(508,496)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
<g transform="translate(500,468)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
</g>
<g transform="translate(39,203) scale(1) translate(-464,-496) ">
<text font-size="0">𝣢𝤂-D_black,white_Z1</text>
<g transform="translate(464,496)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
</g>
</svg>`
Function that creates an array of SVG column images for an SWU text
(string)
a text of SWU signs and punctuation
(ColumnOptions)
an object of column options
Array<string>
:
array of SVG columns
swu.columnsSvg('𝠀𝠃𝤘𝤣𝣳𝣩𝤉𝣻 𝠀𝠃𝤘𝤧𝣻𝤕𝣴𝣼𝤎𝤂𝤆𝣦 𝣢𝤂',{
"height": 250,
"width": 150,
})
return [`<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="150" height="250" viewBox="0 0 150 250">
<g transform="translate(56,20) scale(1) translate(-481,-471) ">
<text font-size="0">𝠀𝠃𝤘𝤣𝣳𝣩𝤉𝣻-D_black,white_Z1</text>
<g transform="translate(481,471)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
<g transform="translate(503,489)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
</g>
<g transform="translate(57,118) scale(1) translate(-482,-468) ">
<text font-size="0">𝠀𝠃𝤘𝤧𝣻𝤕𝣴𝣼𝤎𝤂𝤆𝣦-D_black,white_Z1</text>
<g transform="translate(489,515)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
<g transform="translate(482,490)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
<g transform="translate(508,496)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
<g transform="translate(500,468)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
</g>
<g transform="translate(39,203) scale(1) translate(-464,-496) ">
<text font-size="0">𝣢𝤂-D_black,white_Z1</text>
<g transform="translate(464,496)">
<text class="sym-fill" fill="white" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;"></text>
<text class="sym-line" fill="black" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;"></text>
</g>
</g>
</svg>`]
Function that creates a PNG data url for a column of SWU
(ColumnData)
an array of SWU signs and punctuation with coordinates
(ColumnOptions)
an object of column options
string
:
column png data url
swu.columnPng([
{
"x": 56,
"y": 20,
"minX": 481,
"minY": 471,
"width": 37,
"height": 58,
"lane": 0,
"padding": 0,
"segment": "sign",
"text": "𝠀𝠃𝤘𝤣𝣳𝣩𝤉𝣻",
"zoom": 1
},
{
"x": 57,
"y": 118,
"minX": 482,
"minY": 468,
"width": 36,
"height": 65,
"lane": 0,
"padding": 0,
"segment": "sign",
"text": "𝠀𝠃𝤘𝤧𝣻𝤕𝣴𝣼𝤎𝤂𝤆𝣦",
"zoom": 1
},
{
"x": 39,
"y": 203,
"minX": 464,
"minY": 496,
"width": 72,
"height": 8,
"lane": 0,
"padding": 0,
"segment": "symbol",
"text": "𝣢𝤂",
"zoom": 1
}
],
{
"height": 250,
"width": 150,
})
return 'data:image/png;base64,iVBORw...'
Function that creates an SVG image for a column of SWU
(string)
an array of SWU signs and punctuation with coordinates
(ColumnOptions)
an object of column options
Array<string>
:
array of PNG data urls
swu.columnsPng('𝠀𝠃𝤘𝤣𝣳𝣩𝤉𝣻 𝠀𝠃𝤘𝤧𝣻𝤕𝣴𝣼𝤎𝤂𝤆𝣦 𝣢𝤂',{
"height": 250,
"width": 150,
})
return ['data:image/png;base64,iVBORw...']
The elements of a style string
Type: object
(boolean)
: boolean to use standardized colors for symbol groups
(number)
: integer value for padding around symbol or sign
(string)
: css name or hex color for background
(array)
: array for css name or hex color for line and optional fill
(number)
: decimal value for zoom level
(string)
: list of class names separated with spaces used for SVG
(string)
: id name used for SVG
Type: object
(number)
: the height of the columns
(number)
: the widths of the columns
(number)
: the lane offset for left and right lanes
(number)
: amount of padding before and after signs as well as at top, left, and right of columns
(number)
: amount of space at bottom of column that is not available
(boolean)
: enables variable width columns
(string)
: background color for columns
(StyleObject)
: an object of style options
(object)
: an object of punctuation options
punctuation.spacing
boolean
enables special spacing for punctuation with no space above and custom space below
punctuation.pad
number
the amount of spacing after a punctuation if punctuation spacing is enabled
punctuation.pull
boolean
prevents line breaks before punctuation by reducing spacing between signs in a column
Type: Array<ColumnSegment>
Type: object
(number)
: the x position in the column
(number)
: the y position in the column
(number)
: the min x value within the segment
(number)
: the min y value within the segment
(number)
: the width of the text segment
(number)
: the height of the text segment
(number)
: Left as -1, Middle as 0, Right as 1
(number)
: the padding of the text segment affects colored background
(string)
: "sign" or "symbol"
(string)
: the text of the sign or symbol with optional style string
(number)
: the zoom size of the segment