@sutton-signwriting/font-ttf

1.3.2
Need help reading this?

TrueType Fonts

@sutton-signwriting/font-ttf

Gitter version npm downloads

SignWriting

@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

Useful links

Installation

Install TrueType Font

The TrueType Fonts can be installed on Windows, Mac, and Linux. For iOS, two mobile configurations are available. Installation is not possible on Android.

Install with NPM

    npm install @sutton-signwriting/font-ttf

Install with GIT

    # 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

Usage

Using as a module

    // import entire library
    import * as ttf from '@sutton-signwriting/font-ttf'

    // import individual module
    import {font} from '@sutton-signwriting/font-ttf'

Using in the Browser

Local files

    // 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>

Unpkg

    // 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>

Configure font for VS Code

File >> Preferences >> Settings

Search for "font family". Append SuttonSignWritingOneD to the list of fonts. Restart VS Code.

License

MIT

SignWriting General Interest

font

The font module contains functions for handing the TrueType fonts.

font

font.cssAppend

Function that appends font-face CSS for the Sutton SignWriting fonts for system installed fonts, relative directory fonts, or content delivery network

font.cssAppend(dir: string)
Parameters
dir (string) an optional relative directory for font location
Example
font.cssAppend('./font/')

font.cssLoaded

Function that executes a callback function once the Sutton SignWriiting Line and Fill fonts are ready to use

font.cssLoaded(callback: function)
Parameters
callback (function) a callback function to execute when fonts are ready
Example
const callback = () => {
  console.log("Sutton SignWriting Line and Fill fonts are ready to use")
}

font.cssLoaded( callback )

font.cssLoadedLine

Function that executes a callback function once the Sutton SignWriiting Line font is ready to use

font.cssLoadedLine(callback: function)
Parameters
callback (function) a callback function to execute when line font is ready
Example
const callback = () => {
  console.log("Sutton SignWriting Line font is ready to use")
}

font.cssLoadedLine( callback )

font.cssLoadedFill

Function that executes a callback function once the Sutton SignWriiting Fill font is ready to use

font.cssLoadedFill(callback: function)
Parameters
callback (function) a callback function to execute when fill font is ready
Example
const callback = () => {
  console.log("Sutton SignWriting Fill font is ready to use")
}

font.cssLoadedFill( callback )

font.symbolSize

Function that returns the size of a symbol using an id

font.symbolSize(id: number)
Parameters
id (number) a 16-bit number of a symbol
Example
font.symbolSize(1)

return [15,30]

font.symbolLine

Function that returns a plane 15 character for a symbol line using an id

font.symbolLine(id: number)
Parameters
id (number) a 16-bit number of a symbol
Example
font.symbolLine(1)

return '󰀁'

font.symbolFill

Function that returns a plane 16 character for a symbol fill using an id

font.symbolFill(id: number)
Parameters
id (number) a 16-bit number of a symbol
Example
font.symbolFill(1)

return '􀀁'

font.symbolText

Function that creates two text elements for a symbol using an id

font.symbolText(id: number)
Parameters
id (number) a 16-bit number of a symbol
Example
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>`

fsw

The fsw module contains functions for handling Formal SignWriitng in ASCII (FSW) characters. FSW characters definition

fsw

fsw.symbolSize

Function that returns the size of a symbol using an FSW symbol key

fsw.symbolSize(fsw: string)
Parameters
fsw (string) an FSW symbol key
Example
fsw.symbolSize("S10000")

return [15,30]

fsw.symbolLine

Function that returns a plane 15 character for a symbol line using an FSW symbol key

fsw.symbolLine(fsw: string)
Parameters
fsw (string) an FSW symbol key
Example
fsw.symbolLine('S10000')

return '󰀁'

fsw.symbolFill

Function that returns a plane 16 character for a symbol fill using an FSW symbol key

fsw.symbolFill(fsw: string)
Parameters
fsw (string) an FSW symbol key
Example
font.symbolFill('S10000')

return '􀀁'

fsw.symbolText

Function that creates two text elements for a symbol using an FSW symbol key

fsw.symbolText(fsw: string)
Parameters
fsw (string) an FSW symbol key
Example
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>`

fsw.symbolSvgBody

Function that creates an SVG image from an FSW symbol key with an optional style string

fsw.symbolSvgBody(fswSym: string)
Parameters
fswSym (string) an FSW symbol key with optional style string
Example
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>`

fsw.symbolSvg

Function that creates an SVG image from an FSW symbol key with an optional style string

fsw.symbolSvg(fswSym: string)
Parameters
fswSym (string) an FSW symbol key with optional style string
Example
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>`

fsw.symbolPng

Function that creates a PNG data url from an FSW symbol key with an optional style string

fsw.symbolPng(fswSym: string)
Parameters
fswSym (string) an FSW symbol key with optional style string
Example
fsw.symbolPng('S10000')

return 'data:image/png;base64,iVBORw...'

fsw.symbolNormalize

Function that normalizes a symbol with a minimum coordinate for a center of 500,500

fsw.symbolNormalize(fswSym: string)
Parameters
fswSym (string) an FSW symbol key with optional coordinate and style string
Example
fsw.symbolNormalize('S10000-CP10G_green_Z2')

return 'S10000493x485-CP10G_green_Z2'

fsw.signSvgBody

Function that creates an SVG image from an FSW sign with an optional style string

fsw.signSvgBody(fswSign: string)
Parameters
fswSign (string) an FSW sign with optional style string
Example
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>`

fsw.signSvg

Function that creates an SVG image from an FSW sign with an optional style string

fsw.signSvg(fswSign: string)
Parameters
fswSign (string) an FSW sign with optional style string
Example
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>`

fsw.signPng

Function that creates a PNG data url from an FSW sign with an optional style string

fsw.signPng(fswSign: string)
Parameters
fswSign (string) an FSW sign with optional style string
Example
fsw.signPng('M525x535S2e748483x510S10011501x466S20544510x500S10019476x475')

return 'data:image/png;base64,iVBORw...'

fsw.signNormalize

Function that normalizes an FSW sign for a center of 500,500

fsw.signNormalize(fswSign: string)
Parameters
fswSign (string) an FSW sign with optional style string
Example
fsw.signNormalize('M525x535S2e748483x510S10011501x466S2e704510x500S10019476x475')

return 'M525x535S2e748483x510S10011501x466S2e704510x500S10019476x475'

fsw.columnSvg

Function that creates an SVG image for a column of FSW

fsw.columnSvg(fswColumn: ColumnData, options: ColumnOptions): string
Parameters
fswColumn (ColumnData) an array of objects with information about FSW signs and punctuation
options (ColumnOptions) an object of column options
Returns
string: column svg
Example
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>`

fsw.columnsSvg

Function that creates an array of SVG column images for an FSW text

fsw.columnsSvg(fswText: string, options: ColumnOptions): Array<string>
Parameters
fswText (string) a text of FSW signs and punctuation
options (ColumnOptions) an object of column options
Returns
Array<string>: array of SVG columns
Example
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>`]

fsw.columnPng

Function that creates a PNG data url for a column of FSW

fsw.columnPng(fswColumn: ColumnData, options: ColumnOptions): string
Parameters
fswColumn (ColumnData) an array of objects with information about FSW signs and punctuation
options (ColumnOptions) an object of column options
Returns
string: column png data url
Example
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...'

fsw.columnsPng

Function that creates an array of PNG data urls for an FSW text

fsw.columnsPng(fswText: string, options: ColumnOptions): Array<string>
Parameters
fswText (string) a text of FSW signs and punctuation
options (ColumnOptions) an object of column options
Returns
Array<string>: array of PNG data urls
Example
fsw.columnsPng('AS14c20S27106M518x529S14c20481x471S27106503x489 AS18701S1870aS2e734S20500M518x533S1870a489x515S18701482x490S20500508x496S2e734500x468 S38800464x496',{
  "height": 250,
  "width": 150,
})

return ['data:image/png;base64,iVBORw...']

swu

The swu module contains functions for handling SignWriting in Unicode (SWU) characters. SWU characters definition

swu

swu.symbolSize

Function that returns the size of a symbol using an SWU symbol character

swu.symbolSize(swu: string)
Parameters
swu (string) an SWU symbol character
Example
swu.symbolSize("񀀁")

return [15,30]

swu.symbolLine

Function that returns a plane 15 character for a symbol line using an SWU symbol character

swu.symbolLine(swu: string)
Parameters
swu (string) an SWU symbol character
Example
swu.symbolLine('񀀁')

return '󰀁'

swu.symbolFill

Function that returns a plane 165 character for a symbol fill using an SWU symbol character

swu.symbolFill(swu: string)
Parameters
swu (string) an SWU symbol character
Example
swu.symbolFill('񀀁')

return '􀀁'

swu.symbolText

Function that creates two text elements for a symbol using an SWU symbol character

swu.symbolText(swu: string)
Parameters
swu (string) an SWU symbol character
Example
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>`

swu.symbolSvgBody

Function that creates an SVG image from an SWU symbol key with an optional style string

swu.symbolSvgBody(swuSym: string)
Parameters
swuSym (string) an SWU symbol key with optional style string
Example
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>`

swu.symbolSvg

Function that creates an SVG image from an SWU symbol key with an optional style string

swu.symbolSvg(swuSym: string)
Parameters
swuSym (string) an SWU symbol key with optional style string
Example
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>`

swu.symbolPng

Function that creates a PNG data url from an SWU symbol character with an optional style string

swu.symbolPng(swuSym: string)
Parameters
swuSym (string) an SWU symbol character with optional style string
Example
swu.symbolPng('񀀁-CP10G_green_Z2')

return 'data:image/png;base64,iVBORw...'

swu.symbolNormalize

Function that normalizes a symbol with a minimum coordinate for a center of 500,500

swu.symbolNormalize(swuSym: string)
Parameters
swuSym (string) an SWU symbol character with optional coordinate and style string
Example
swu.symbolNormalize('񀀁')

return '񀀁𝣿𝣷'

swu.signSvgBody

Function that creates an SVG image from an SWU sign with an optional style string

swu.signSvgBody(swuSign: string)
Parameters
swuSign (string) an SWU sign with optional style string
Example
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>`

swu.signSvg

Function that creates an SVG image from an SWU sign with an optional style string

swu.signSvg(swuSign: string)
Parameters
swuSign (string) an SWU sign with optional style string
Example
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>`

swu.signPng

Function that creates a PNG data url from an SWU sign with an optional style string

swu.signPng(swuSign: string)
Parameters
swuSign (string) an SWU sign with optional style string
Example
swu.signPng('𝠀񀀒񀀚񋚥񋛩𝠃𝤟𝤩񋛩𝣵𝤐񀀒𝤇𝣤񋚥𝤐𝤆񀀚𝣮𝣭')

return 'data:image/png;base64,iVBORw...'

swu.signNormalize

Function that normalizes an SWU sign for a center of 500,500

swu.signNormalize(swuSign: string)
Parameters
swuSign (string) an SWU sign with optional style string
Example
swu.signNormalize('𝠀񀀒񀀚񋚥񋛩𝠃𝤟𝤩񋛩𝣵𝤐񀀒𝤇𝣤񋚥𝤐𝤆񀀚𝣮𝣭')

return '𝠀񀀒񀀚񋚥񋛩𝠃𝤟𝤩񋛩𝣵𝤐񀀒𝤇𝣤񋚥𝤐𝤆񀀚𝣮𝣭'

swu.columnSvg

Function that creates an SVG image for a column of SWU

swu.columnSvg(swuColumn: ColumnData, options: ColumnOptions): string
Parameters
swuColumn (ColumnData) an array of objects with information about FSW signs and punctuation
options (ColumnOptions) an object of column options
Returns
string: column svg
Example
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>`

swu.columnsSvg

Function that creates an array of SVG column images for an SWU text

swu.columnsSvg(swuText: string, options: ColumnOptions): Array<string>
Parameters
swuText (string) a text of SWU signs and punctuation
options (ColumnOptions) an object of column options
Returns
Array<string>: array of SVG columns
Example
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>`]

swu.columnPng

Function that creates a PNG data url for a column of SWU

swu.columnPng(swuColumn: ColumnData, options: ColumnOptions): string
Parameters
swuColumn (ColumnData) an array of SWU signs and punctuation with coordinates
options (ColumnOptions) an object of column options
Returns
string: column png data url
Example
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...'

swu.columnsPng

Function that creates an SVG image for a column of SWU

swu.columnsPng(swuText: string, options: ColumnOptions): Array<string>
Parameters
swuText (string) an array of SWU signs and punctuation with coordinates
options (ColumnOptions) an object of column options
Returns
Array<string>: array of PNG data urls
Example
swu.columnsPng('𝠀񁲡񈩧𝠃𝤘𝤣񁲡𝣳𝣩񈩧𝤉𝣻 𝠀񃊢񃊫񋛕񆇡𝠃𝤘𝤧񃊫𝣻𝤕񃊢𝣴𝣼񆇡𝤎𝤂񋛕𝤆𝣦 񏌁𝣢𝤂',{
  "height": 250,
  "width": 150,
})

return ['data:image/png;base64,iVBORw...']

StyleObject

The elements of a style string

StyleObject

Type: object

Properties
colorize (boolean) : boolean to use standardized colors for symbol groups
padding (number) : integer value for padding around symbol or sign
background (string) : css name or hex color for background
detail (array) : array for css name or hex color for line and optional fill
zoom (number) : decimal value for zoom level
detailsym (Array<object>) : custom colors for individual symbols
  • detailsym.index number

    symbol index in sign box

  • detailsym.detail array

    array for css name or hex color for line and optional fill

classes (string) : list of class names separated with spaces used for SVG
id (string) : id name used for SVG

ColumnOptions

ColumnOptions

Type: object

Properties
height (number) : the height of the columns
width (number) : the widths of the columns
offset (number) : the lane offset for left and right lanes
pad (number) : amount of padding before and after signs as well as at top, left, and right of columns
margin (number) : amount of space at bottom of column that is not available
dynamic (boolean) : enables variable width columns
background (string) : background color for columns
style (StyleObject) : an object of style options
punctuation (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

ColumnData

ColumnData

Type: Array<ColumnSegment>

ColumnSegment

ColumnSegment

Type: object

Properties
x (number) : the x position in the column
y (number) : the y position in the column
minX (number) : the min x value within the segment
minY (number) : the min y value within the segment
width (number) : the width of the text segment
height (number) : the height of the text segment
lane (number) : Left as -1, Middle as 0, Right as 1
padding (number) : the padding of the text segment affects colored background
segment (string) : "sign" or "symbol"
text (string) : the text of the sign or symbol with optional style string
zoom (number) : the zoom size of the segment