Read Me | Using the Components | <sgnw-components /> | <fsw-components /> | Change Log

Sutton SignWriting Web Components

<sgnw-components /> use SignWriting in Unicode (SWU) characters.

sgnw-symbol with additional examples
sgnw-sign with additional examples
sgnw-vp with additional examples
sgnw-button with additional examples
sgnw-palette-symbol with additional examples
sgnw-palette with additional examples
sgnw-signbox with additional examples

sgnw-symbol

The sgnw-symbol component can be used to create a symbol image

sgnw-symbol

<sgnw-symbol symbol="񄵡"></sgnw-symbol>

sgnw-symbol with style string

<sgnw-symbol symbol="񄵡" styling="-CZ2"></sgnw-symbol>

Properties

Property	Attribute	Description	Type	Default
`styling`	`styling`	Style String for symbol	`string`	`undefined`
`symbol`	`symbol`	SWU character for symbol	`string`	`undefined`

Dependencies

Used by

sgnw-vp

Graph

graph TD;
  sgnw-vp --> sgnw-symbol

sgnw-sign

The sgnw-sign component can be used to create a sign image

sgnw-sign

<sgnw-sign sign="𝠀񁳴񁳶񉌍񉌕񁳲񁳸𝠃𝤭𝤩񁳼𝣭𝣤񁳴𝤉𝣤񉌍𝤡𝣺񉌕𝣠𝣺񁳺𝣭𝤑񁳲𝤉𝤑"></sgnw-sign>

sgnw-sign with style string

<sgnw-sign sign="𝠀񁳴񁳶񉌍񉌕񁳲񁳸𝠃𝤭𝤩񁳼𝣭𝣤񁳴𝤉𝣤񉌍𝤡𝣺񉌕𝣠𝣺񁳺𝣭𝤑񁳲𝤉𝤑" styling="-CZ2"></sgnw-sign>

Properties

Property	Attribute	Description	Type	Default
`sign`	`sign`	SWU string for sign	`string`	`undefined`
`styling`	`styling`	Style String for sign	`string`	`undefined`

Dependencies

Used by

sgnw-vp

Graph

graph TD;
  sgnw-vp --> sgnw-sign

sgnw-vp

The sgnw-vp component can be used to create a sign text paragraph

sgnw-vp

<sgnw-vp vp="𝠀񀀒񀀚񋚥񋛩𝠃𝤟𝤩񋛩𝣵𝤐񀀒𝤇𝣤񋚥𝤐𝤆񀀚𝣮𝣭 𝠀񂇢񂇈񆙡񋎥񋎵𝠃𝤛𝤬񂇈𝤀𝣺񂇢𝤄𝣻񋎥𝤄𝤗񋎵𝤃𝣟񆙡𝣱𝣸 𝠀񅨑񀀙񆉁𝠃𝤙𝤞񀀙𝣷𝤀񅨑𝣼𝤀񆉁𝣳𝣮 񏌁𝣢𝤂 𝠀񀕁𝠃𝤍𝤕񀕁𝣾𝣷 𝠀񂌢񂇷񆙡񈗦𝠃𝤩𝤛񂌢𝣢𝣱񂇷𝣬𝤉񆙡𝤍𝣽񈗦𝤜𝤎 񏊡𝣡𝤂 𝠀񀀡𝠃𝤎𝤕񀀡𝣿𝣷 𝠀񀀒񉁩񌏁𝠃𝤮𝤙񌏁𝣴𝣴񀀒𝤙𝣻񉁩𝤙𝣟 𝠀񀕁񀕉񆇡񈩡񈩽񆇡񋺁񌀇񌀃𝠃𝤲𝤡񀕉𝣨𝤃񀕁𝤖𝤃񌀇𝣴𝣴񆇡𝤙𝣶񆇡𝣩𝣶񈩡𝤊𝣢񈩽𝣕𝣡񌀃𝣴𝣴񋺁𝣽𝣗 񏊡𝣡𝤂 𝠀񀕡𝠃𝤎𝤕񀕡𝣿𝣷 𝠀񀀒񉁩񌏁𝠃𝤮𝤙񌏁𝣴𝣴񀀒𝤙𝣻񉁩𝤙𝣟 𝠀񀂁񂇻񈟃񆕁𝠃𝤣𝤘񂇻𝤈𝤌񆕁𝣹𝤁񀂁𝤍𝣵񈟃𝣩𝣽 𝠀񀀡񋎥񀀁𝠃𝤡𝤖񀀁𝤒𝣸񀀡𝣫𝣸񋎥𝣻𝣷 𝠀񀀓񃛆񆿅񆕁𝠃𝤣𝤟񀀓𝤅𝣯񆕁𝤅𝣽񃛆𝣪𝣮񆿅𝤅𝤐 񏌁𝣢𝤂 𝠀񂇢񉳍񂇂񂇈𝠃𝤬𝤘񂇢𝤕𝣵񂇈𝣡𝣴񂇂𝣤𝣵񉳍𝣿𝣼 𝠀񀀒񀀚񋠥񋡩𝠃𝤝𝤪񋡩𝣷𝤊񀀒𝤈𝣡񋠥𝤍𝤃񀀚𝣯𝣪 𝠀񃧁񃧉񆿅񆿕񋸥𝠃𝤨𝤛񆿕𝣭𝤉񃧁𝤌𝣱񃧉𝣥𝣱񆿅𝤔𝤊񋸥𝣿𝤕 񏌁𝣢𝤂 𝠀񅡁񂇸񈗨񈗨񂇑񂇙񇀥񇀵𝠃𝤤𝤸񂇸𝣨𝣚񂇑𝤕𝤝񂇙𝣳𝤝񅡁𝣼𝣦񇀵𝣱𝣺񈗨𝤊𝣔񇀥𝤔𝣻񈗨𝤖𝣞 𝠀񄹸񈗦񄾘𝠃𝤭𝤥񄹸𝣞𝣦񄾘𝤔𝤌񈗦𝣽𝣾 𝠃𝤗𝤜񀀋𝣹𝤍񀁂𝣵𝣱 񏊡𝣡𝤂 𝠀񆅁񇅅𝠃𝤏𝤙񆅁𝣿𝣳񇅅𝣾𝤇 񏌁𝣢𝤂 𝠃𝤦𝤖񄵡𝣧𝣷񆅁𝤁𝤆񃉡𝤔𝣸 񏊡𝣡𝤂 𝠃𝤧𝤬񅩱𝤊𝤝񍳡𝣴𝣴 𝠃𝤼𝤘񃛋𝣳𝣶񃛃𝤇𝣶񈙇𝤞𝣵񈙓𝣐𝣵񆇡𝤂𝤍 񏊡𝣡𝤂 𝠀񂋣񂋫񆕁񇆡𝠃𝤜𝤞񇆡𝣹𝣯񂋣𝤁𝤆񂋫𝣱𝤋񆕁𝣿𝣿 𝠀񀟡񆄩񆕁񈟃񍩁𝠃𝤟𝥄񆄩𝤉𝤵񀟡𝤐𝤕񆕁𝤁𝤥񈟃𝣰𝤟񍩁𝣴𝣴 񏊡𝣡𝤂 𝠃𝤹𝤰񅊰𝣒𝣣񅊂𝣴𝣝񈙆𝤈𝣺񈙖𝣥𝣼񅑢𝤠𝤏񅒐𝣺𝤐 𝠀񃁁񃁉񋠩񋡭񋸡𝠃𝤦𝤬񃁁𝤇𝤝񃁉𝣥𝤑񋡭𝣯𝣨񋠩𝤌𝣵񋸡𝤀𝣠 񏌁𝣢𝤂 𝠃𝤦𝤖񄵡𝣧𝣷񆅁𝤁𝤆񃉡𝤔𝣸 𝠀񃧁񃧉񆿅񆿕񋸥𝠃𝤨𝤛񆿕𝣭𝤉񃧁𝤌𝣱񃧉𝣥𝣱񆿅𝤔𝤊񋸥𝣿𝤕 񏊡𝣡𝤂 𝠀񀀒񀀚񋠥񋡩𝠃𝤝𝤪񋡩𝣷𝤊񀀒𝤈𝣡񋠥𝤍𝤃񀀚𝣯𝣪 𝠀񅡁񂇇񉨬𝠃𝤖𝤥񂇇𝣶𝣦񅡁𝣾𝣵񉨬𝣶𝤂 𝠀񆅱񆅹񇆥񇆵񌁵𝠃𝤢𝥇񆅱𝤎𝤤񆅹𝣯𝤤񇆥𝤉𝤹񇆵𝣩𝤹񌁵𝣴𝣯 񏌁𝣢𝤂"></sgnw-vp>

Properties

Property	Attribute	Description	Type	Default
`colorize`	`colorize`	Colorize flag	`boolean`	`undefined`
`vp`	`vp`	SWU text	`string`	`undefined`

Dependencies

Graph

graph TD;
  sgnw-vp --> sgnw-sign
  sgnw-vp --> sgnw-symbol

sgnw-button

The sgnw-button component can be used to create buttons with symbols, signs, and svg.

Basic Example

<sgnw-button symbol="񄵡"></sgnw-button>

Properties

Property	Attribute	Description	Type	Default
`sign`	`sign`	SWU string for sign	`string`	`undefined`
`svg`	`svg`	SVG icon	`string`	`undefined`
`symbol`	`symbol`	SWU character for symbol	`string`	`undefined`

Dependencies

Used by

sgnw-palette

Graph

graph TD;
  sgnw-palette --> sgnw-button

sgnw-palette-symbol

The sgnw-palette-symbol component is used inside the sgnw-palette.

Basic Example

<sgnw-palette-symbol symbol="񄵡"></sgnw-palette-symbol>

Properties

Property	Attribute	Description	Type	Default
`symbol`	`symbol`	SWU character for symbol	`string`	`undefined`

Events

Event	Description	Type
`paletteSymbolClick`	click event for the symbol palette	`CustomEvent<string>`
`paletteSymbolDrop`	drop event for the signbox and sequence	`CustomEvent<{ encoding: string; symbol: string; x: number; y: number; }>`

Dependencies

Used by

sgnw-palette

Graph

graph TD;
  sgnw-palette --> sgnw-palette-symbol
  style sgnw-palette-symbol fill:#f9f,stroke:#333,stroke-width:4px

sgnw-palette

The sgnw-palette components allows for access to the symbols of the ISWA 2010.

Basic Example

<sgnw-palette orientation="horizontal" size="small"></sgnw-palette>

Properties

Property	Attribute	Description	Type	Default
`alphabet`	`alphabet`	set of symbols	`object \| string`	`iswa2010SWU`
`base`	`base`	mid level symbol selection	`string`	`null`
`group`	`group`	top level symbol selection	`string`	`null`
`lower`	`lower`	flag for small and medium palette	`boolean`	`false`
`more`	`more`	flag for small palette	`boolean`	`false`
`orientation`	`orientation`	orientation of palette	`"horizontal" \| "vertical"`	`"vertical"`
`size`	`size`	size of palette	`"large" \| "medium" \| "small"`	`"small"`

Dependencies

Depends on

sgnw-button
sgnw-palette-symbol

Graph

graph TD;
  sgnw-palette --> sgnw-button
  sgnw-palette --> sgnw-palette-symbol

sgnw-signbox

The sgnw-signbox component is currently a placeholder for future development. It currently listens for the paletteSymbolDrop event and console logs the results.

Basic Example

<sgnw-signbox></sgnw-signbox>