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

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

sgnw-symbol

񄵡-G_transparent_D_24292f,ffffff_Z0.5333333333333333 􄵡 󴵡 

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

sgnw-symbol with style string

񄵡-CG_transparent_D_24292f,ffffff_Z1.0666666666666667 􄵡 󴵡 

<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

Graph

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

sgnw-sign

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

sgnw-sign

𝠀񁳴񁳶񉌍񉌕񁳲񁳸𝠃𝤭𝤩񁳼𝣭𝣤񁳴𝤉𝣤񉌍𝤡𝣺񉌕𝣠𝣺񁳺𝣭𝤑񁳲𝤉𝤑-G_transparent_D_24292f,ffffff_Z0.5333333333333333 􁳼 󱳼 􁳴 󱳴 􉌍 󹌍 􉌕 󹌕 􁳺 󱳺 􁳲 󱳲 

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

sgnw-sign with style string

𝠀񁳴񁳶񉌍񉌕񁳲񁳸𝠃𝤭𝤩񁳼𝣭𝣤񁳴𝤉𝣤񉌍𝤡𝣺񉌕𝣠𝣺񁳺𝣭𝤑񁳲𝤉𝤑-CG_transparent_D_24292f,ffffff_Z1.0666666666666667 􁳼 󱳼 􁳴 󱳴 􉌍 󹌍 􉌕 󹌕 􁳺 󱳺 􁳲 󱳲 

<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

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

Depends on

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

񄵡-G_transparent_D_424242,d3d3d3_Zx 􄵡 󴵡 

<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

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

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

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>