@sutton-signwriting/font-ttf

1.5.0
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://donate.sutton-signwriting.io

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
    sudo apt install node-typescript

    # 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.5.0"></script>

    // import individual module
    // available as ssw.ttf.font
    <script src="https://unpkg.com/@sutton-signwriting/font-ttf@1.5.0/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): Array<number>
Parameters
id (number) a 16-bit number of a symbol
Returns
Array<number>: width and height of 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): string
Parameters
id (number) a 16-bit number of a symbol
Returns
string: character for symbol line
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): string
Parameters
id (number) a 16-bit number of a symbol
Returns
string: character for symbol fill
Example
font.symbolFill(1)

return '􀀁'

font.symbolText

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

font.symbolText(id: number): string
Parameters
id (number) a 16-bit number of a symbol
Returns
string: SVG segment for line and fill
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): Array<number>
Parameters
fsw (string) an FSW symbol key
Returns
Array<number>: width and height of symbol
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): string
Parameters
fsw (string) an FSW symbol key
Returns
string: character for symbol line
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): string
Parameters
fsw (string) an FSW symbol key
Returns
string: character for symbol fill
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): string
Parameters
fsw (string) an FSW symbol key
Returns
string: svg segment for line and fill
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): string
Parameters
fswSym (string) an FSW symbol key with optional style string
Returns
string: body of SVG for symbol
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): string
Parameters
fswSym (string) an FSW symbol key with optional style string
Returns
string: SVG for symbol
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): string
Parameters
fswSym (string) an FSW symbol key with optional style string
Returns
string: png image for symbol as data url
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): string
Parameters
fswSym (string) an FSW symbol key with optional coordinate and style string
Returns
string: normalized FSW symbol
Example
fsw.symbolNormalize('S10000-CP10G_green_Z2')

return 'S10000493x485-CP10G_green_Z2'

fsw.symbolMirror

Function that mirrors a symbol

fsw.symbolMirror(fswSym: string): string
Parameters
fswSym (string) an FSW symbol key with optional coordinate and style string
Returns
string: mirrored FSW symbol
Example
fsw.symbolMirror('S10000')

return 'S10008'

fsw.symbolRotate

Function that rotates a symbol

fsw.symbolRotate(fswSym: string, clockwise: boolean): string
Parameters
fswSym (string) an FSW symbol key with optional coordinate and style string
clockwise (boolean = true) rotate the symbol clockwise
Returns
string: rotated FSW symbol
Example
fsw.symbolRotate('S10000')

return 'S10007'

fsw.symbolFlop

Function that changes the fill of a symbol

fsw.symbolFlop(fswSym: string, positive: boolean): string
Parameters
fswSym (string) an FSW symbol key with optional coordinate and style string
positive (boolean = true) increase the symbol fill
Returns
string: FSW symbol with changed fill
Example
fsw.symbolFlop('S10000')

return 'S10010'

fsw.symbolScroll

Function that changes the base of a symbol

fsw.symbolScroll(fswSym: string, positive: boolean): string
Parameters
fswSym (string) an FSW symbol key with optional coordinate and style string
positive (boolean = true) increase the symbol base
Returns
string: FSW symbol with changed base
Example
fsw.symbolScroll('S10000')

return 'S10100'

fsw.signSvgBody

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

fsw.signSvgBody(fswSign: string): string
Parameters
fswSign (string) an FSW sign with optional style string
Returns
string: body of SVG for sign
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): string
Parameters
fswSign (string) an FSW sign with optional style string
Returns
string: SVG for sign
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): string
Parameters
fswSign (string) an FSW sign with optional style string
Returns
string: png image for sign as data url
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): string
Parameters
fswSign (string) an FSW sign with optional style string
Returns
string: normalized FSW sign
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): Array<number>
Parameters
swu (string) an SWU symbol character
Returns
Array<number>: width and height of symbol
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): string
Parameters
swu (string) an SWU symbol character
Returns
string: character for symbol line
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): string
Parameters
swu (string) an SWU symbol character
Returns
string: character for symbol fill
Example
swu.symbolFill('񀀁')

return '􀀁'

swu.symbolText

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

swu.symbolText(swu: string): string
Parameters
swu (string) an SWU symbol character
Returns
string: svg segment for line and fill
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): string
Parameters
swuSym (string) an SWU symbol key with optional style string
Returns
string: body of SVG for symbol
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): string
Parameters
swuSym (string) an SWU symbol key with optional style string
Returns
string: SVG for symbol
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): string
Parameters
swuSym (string) an SWU symbol character with optional style string
Returns
string: png image for symbol as data url
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): string
Parameters
swuSym (string) an SWU symbol character with optional coordinate and style string
Returns
string: normalized SWU symbol
Example
swu.symbolNormalize('񀀁')

return '񀀁𝣿𝣷'

swu.symbolMirror

Function that mirrors a symbol

swu.symbolMirror(swuSym: string): string
Parameters
swuSym (string) an SWU symbol with optional coordinate and style string
Returns
string: mirrored SWU symbol
Example
swu.symbolMirror('񀀁')

return '񀀉'

swu.symbolRotate

Function that rotates a symbol

swu.symbolRotate(swuSym: string, clockwise: boolean): string
Parameters
swuSym (string) an SWU symbol with optional coordinate and style string
clockwise (boolean = true) rotate the symbol clockwise
Returns
string: rotated SWU symbol
Example
swu.symbolRotate('񀀁')

return '񀀈'

swu.symbolFlop

Function that changes the fill of a symbol

swu.symbolFlop(swuSym: string, positive: boolean): string
Parameters
swuSym (string) an SWU symbol with optional coordinate and style string
positive (boolean = true) increase the symbol fill
Returns
string: SWU symbol with changed fill
Example
swu.symbolFlop('񀀁')

return '񀀑'

swu.symbolScroll

Function that changes the base of a symbol

swu.symbolScroll(swuSym: string, positive: boolean): string
Parameters
swuSym (string) an SWU symbol with optional coordinate and style string
positive (boolean = true) increase the symbol base
Returns
string: SWU symbol with changed base
Example
swu.symbolScroll('񀀁')

return '񀁡'

swu.signSvgBody

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

swu.signSvgBody(swuSign: string): string
Parameters
swuSign (string) an SWU sign with optional style string
Returns
string: body of SVG for sign
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): string
Parameters
swuSign (string) an SWU sign with optional style string
Returns
string: SVG for sign
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): string
Parameters
swuSign (string) an SWU sign with optional style string
Returns
string: png image for sign as data url
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): string
Parameters
swuSign (string) an SWU sign with optional style string
Returns
string: normalized SWU sign
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...']

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

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<string>?) : 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<string>

    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

QueryObject

Object of query elements with regular expression identification.

QueryObject

Type: object

Properties
query (boolean) : required true for query object
prefix (object?) : an object for prefix elements
signbox (Array<(QuerySignboxSymbol | QuerySignboxRange | QuerySignboxOr)>?) : array of objects for symbols, ranges, and list of symbols or ranges, with optional coordinates
variance (number?) : amount that x or y coordinates can vary and find a match, defaults to 20
style (boolean?) : boolean value for including style string in matches

QuerySignboxSymbol

QuerySignboxSymbol

Type: object

Properties
symbol (string) : a symbol
coord (Array<number>?) : an optional coordinate

QuerySignboxRange

QuerySignboxRange

Type: object

Properties
range (Array<string>) : an array of two symbols
coord (Array<number>?) : an optional coordinate

QuerySignboxOr

QuerySignboxOr

Type: object

Properties
or (Array<(string | Array<string>)>) : an array of symbol strings and range arrays
coord (Array<number>?) : an optional coordinate

SegmentInfo

SegmentInfo

Type: object

Properties
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"
zoom (number) : the zoom size of the segment

SymbolObject

The elements of a symbol string

SymbolObject

Type: object

Properties
symbol (string?) : symbol identifier
coord (Array<number>?) : x,y coordinate
style (string?) : style string

SignObject

The elements of a sign string

SignObject

Type: object

Properties
sequence (Array<string>?) : array of symbols
box (string?) : signbox marker or lane
max (Array<number>?) : preprocessed x,y coordinate
spatials (Array<{symbol: string, coord: Array<number>}>?) : array of symbols with coordinates
style (string?) : style string