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

Formal SignWriting Web Components

<fsw-components /> use Formal SignWriting in ASCII (FSW) characters.

fsw-symbol

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

fsw-symbol

<fsw-symbol symbol="S10000"></fsw-symbol>

fsw-symbol with style string

<fsw-symbol symbol="S10020" styling="-CZ2"></fsw-symbol>

Properties

Property Attribute Description Type Default
styling styling Style String for symbol string undefined
symbol symbol FSW key for symbol string undefined

Dependencies

Used by

Graph

graph TD;
  fsw-vp --> fsw-symbol

fsw-sign

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

fsw-sign

<fsw-sign sign="AS10011S10019S2e704S2e748M525x535S2e748483x510S10011501x466S2e704510x500S10019476x475"></fsw-sign>

fsw-sign with style string

<fsw-sign sign="AS10011S10019S2e704S2e748M525x535S2e748483x510S10011501x466S2e704510x500S10019476x475" styling="-CZ2"></fsw-sign>

Properties

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

Dependencies

Used by

Graph

graph TD;
  fsw-vp --> fsw-sign

fsw-vp

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

fsw-vp

<fsw-vp vp="AS10011S10019S2e704S2e748M525x535S2e748483x510S10011501x466S2e704510x500S10019476x475 AS15a21S15a07S21100S2df04S2df14M521x538S15a07494x488S15a21498x489S2df04498x517S2df14497x461S21100479x486 AS1f010S10018S20600M519x524S10018485x494S1f010490x494S20600481x476 S38800464x496 AS10e00M507x515S10e00492x485 AS15d41S15a36S21100S26505M535x521S15d41464x479S15a36474x503S21100507x491S26505522x508 S38700463x496 AS10020M508x515S10020493x485 AS10011S28108S30a00M540x519S30a00482x482S10011519x489S28108519x461 AS10e00S10e08S20500S27100S2711cS20500S2fc00S30006S30002M544x527S10e08470x497S10e00516x497S30006482x482S20500519x484S20500471x484S27100504x464S2711c451x463S30002482x482S2fc00491x453 S38700463x496 AS10e20M508x515S10e20493x485 AS10011S28108S30a00M540x519S30a00482x482S10011519x489S28108519x461 AS10120S15a3aS26a02S20e00M529x518S15a3a502x506S20e00487x495S10120507x483S26a02471x491 AS10020S2df04S10000M527x516S10000512x486S10020473x486S2df04489x485 AS10012S19205S22a04S20e00M529x525S10012499x477S20e00499x491S19205472x476S22a04499x510 S38800464x496 AS15a21S2a20cS15a01S15a07M538x518S15a21515x483S15a07463x482S15a01466x483S2a20c493x490 AS10011S10019S2eb04S2eb48M523x536S2eb48485x504S10011502x463S2eb04507x497S10019477x472 AS19a00S19a08S22a04S22a14S2fb04M534x521S22a14475x503S19a00506x479S19a08467x479S22a04514x504S2fb04493x515 S38800464x496 AS1eb20S15a37S26507S26507S15a10S15a18S22b04S22b14M530x550S15a37470x456S15a10515x523S15a18481x523S1eb20490x468S22b14479x488S26507504x450S22b04514x489S26507516x460 AS1d117S26505S1d417M539x531S1d117460x468S1d417514x506S26505491x492 M517x522S1000a487x507S10041483x479 S38700463x496 AS20320S22e04M509x519S20320493x481S22e04492x501 S38800464x496 M532x516S1ce20469x485S20320495x500S18620514x486 S38700463x496 M533x538S1f110504x523S34d00482x482 M554x518S1920a481x484S19202501x484S26606524x483S26612446x483S20500496x507 S38700463x496 AS15d02S15d0aS20e00S22f00M522x524S22f00487x477S15d02495x500S15d0a479x505S20e00493x493 AS11500S20308S20e00S26a02S34600M525x562S20308503x547S11500510x515S20e00495x531S26a02478x525S34600482x482 S38700463x496 M551x542S1dc2f448x465S1dc01482x459S26605502x488S26615467x490S1e101526x509S1e12f488x510 AS18040S18048S2eb08S2eb4cS2fb00M532x538S18040501x523S18048467x511S2eb4c477x470S2eb08506x483S2fb00494x462 S38800464x496 M532x516S1ce20469x485S20320495x500S18620514x486 AS19a00S19a08S22a04S22a14S2fb04M534x521S22a14475x503S19a00506x479S19a08467x479S22a04514x504S2fb04493x515 S38700463x496 AS10011S10019S2eb04S2eb48M523x536S2eb48485x504S10011502x463S2eb04507x497S10019477x472 AS1eb20S15a06S29b0bM516x531S15a06484x468S1eb20492x483S29b0b484x496 AS20350S20358S22f04S22f14S30114M528x565S20350508x530S20358477x530S22f04503x551S22f14471x551S30114482x477 S38800464x496"></fsw-vp>

Properties

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

Dependencies

Depends on

Graph

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

fsw-button

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

Basic Example

<fsw-button symbol="S10000"></fsw-button>

Properties

Property Attribute Description Type Default
sign sign FSW string for sign string undefined
svg svg SVG icon string undefined
symbol symbol FSW key for symbol string undefined

Dependencies

Used by

Graph

graph TD;
  fsw-palette --> fsw-button

fsw-palette-symbol

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

Basic Example

<fsw-palette-symbol symbol="S10000"></fsw-palette-symbol>

Properties

Property Attribute Description Type Default
symbol symbol FSW key 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;
  fsw-palette --> fsw-palette-symbol
  style fsw-palette-symbol fill:#f9f,stroke:#333,stroke-width:4px

fsw-palette

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

Basic Example

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

Properties

Property Attribute Description Type Default
alphabet alphabet set of symbols object | string { "S10000": ["S10000", "S10110", "S10210", "S10310", "S10410", "S10510", "S10610", "S10710", "S10810", "S10910", "S10a10", "S10b10", "S10c10", "S10d10"], "S10e00": ["S10e00", "S10f10", "S11010", "S11110", "S11210", "S11310", "S11410", "S11510", "S11610", "S11710", "S11810", "S11910", "S11a10", "S11b10", "S11c10", "S11d10"], "S11e00": ["S11e00", "S11f10", "S12010", "S12110", "S12210", "S12310", "S12410", "S12510", "S12610", "S12710", "S12810", "S12910", "S12a10", "S12b10", "S12c10", "S12d10", "S12e10", "S12f10", "S13010", "S13110", "S13210", "S13310", "S13410", "S13510", "S13610", "S13710", "S13810", "S13910", "S13a10", "S13b10", "S13c10", "S13d10", "S13e10", "S13f10", "S14010", "S14110", "S14210", "S14310"], "S14400": ["S14400", "S14510", "S14610", "S14710", "S14810", "S14910", "S14a10", "S14b10"], "S14c00": ["S14c00", "S14d10", "S14e10", "S14f10", "S15010", "S15110", "S15210", "S15310", "S15410", "S15510", "S15610", "S15710", "S15810", "S15910", "S15a10", "S15b10", "S15c10", "S15d10", "S15e10", "S15f10", "S16010", "S16110", "S16210", "S16310", "S16410", "S16510", "S16610", "S16710", "S16810", "S16910", "S16a10", "S16b10", "S16c10", "S16d10", "S16e10", "S16f10", "S17010", "S17110", "S17210", "S17310", "S17410", "S17510", "S17610", "S17710", "S17810", "S17910", "S17a10", "S17b10", "S17c10", "S17d10", "S17e10", "S17f10", "S18010", "S18110", "S18210", "S18310", "S18410", "S18510"], "S18600": ["S18600", "S18710", "S18810", "S18910", "S18a10", "S18b10", "S18c10", "S18d10", "S18e10", "S18f10", "S19010", "S19110", "S19210", "S19310", "S19410", "S19510", "S19610", "S19710", "S19810", "S19910", "S19a10", "S19b10", "S19c10", "S19d10", "S19e10", "S19f10", "S1a010", "S1a110", "S1a210", "S1a310"], "S1a400": ["S1a400", "S1a510", "S1a610", "S1a710", "S1a810", "S1a910", "S1aa10", "S1ab10", "S1ac10", "S1ad10", "S1ae10", "S1af10", "S1b010", "S1b110", "S1b210", "S1b310", "S1b410", "S1b510", "S1b610", "S1b710", "S1b810", "S1b910"], "S1ba00": ["S1ba00", "S1bb10", "S1bc10", "S1bd10", "S1be10", "S1bf10", "S1c010", "S1c110", "S1c210", "S1c310", "S1c410", "S1c510", "S1c610", "S1c710", "S1c810", "S1c910", "S1ca10", "S1cb10", "S1cc10"], "S1cd00": ["S1cd00", "S1ce10", "S1cf10", "S1d010", "S1d110", "S1d210", "S1d310", "S1d410", "S1d510", "S1d610", "S1d710", "S1d810", "S1d910", "S1da10", "S1db10", "S1dc10", "S1dd10", "S1de10", "S1df10", "S1e010", "S1e110", "S1e200", "S1e310", "S1e410", "S1e510", "S1e610", "S1e710", "S1e810", "S1e910", "S1ea10", "S1eb10", "S1ec10", "S1ed10", "S1ee10", "S1ef10", "S1f010", "S1f110", "S1f210", "S1f310", "S1f410"], "S1f500": ["S1f500", "S1f610", "S1f710", "S1f810", "S1f910", "S1fa10", "S1fb10", "S1fc10", "S1fd10", "S1fe10", "S1ff10", "S20010", "S20110", "S20210", "S20310", "S20410"], "S20500": ["S20500", "S20600", "S20700", "S20800", "S20900", "S20a00", "S20b00", "S20c00", "S20d00", "S20e00", "S20f00", "S21000", "S21100", "S21200", "S21300", "S21400", "S21500"], "S21600": ["S21600", "S21700", "S21800", "S21900", "S21a00", "S21b00", "S21c00", "S21d00", "S21e00", "S21f00", "S22000", "S22100", "S22200", "S22300", "S22400", "S22500", "S22600", "S22700", "S22800", "S22900"], "S22a00": ["S22a00", "S22b00", "S22c00", "S22d00", "S22e00", "S22f00", "S23000", "S23100", "S23200", "S23300", "S23400", "S23500", "S23600", "S23700", "S23800", "S23900", "S23a00", "S23b00", "S23c00", "S23d00", "S23e00", "S23f00", "S24000", "S24100", "S24200", "S24300", "S24400", "S24500", "S24600", "S24700", "S24800", "S24900", "S24a00", "S24b00", "S24c00", "S24d00", "S24e00", "S24f00", "S25000", "S25100", "S25200", "S25300", "S25400"], "S25500": ["S25500", "S25600", "S25700", "S25800", "S25900", "S25a00", "S25b00", "S25c00", "S25d00", "S25e00", "S25f00", "S26000", "S26100", "S26200", "S26300", "S26400"], "S26500": ["S26500", "S26600", "S26700", "S26800", "S26900", "S26a00", "S26b00", "S26c00", "S26d00", "S26e00", "S26f00", "S27000", "S27100", "S27200", "S27300", "S27400", "S27500", "S27600", "S27700", "S27800", "S27900", "S27a00", "S27b00", "S27c00", "S27d00", "S27e00", "S27f00", "S28000", "S28100", "S28200", "S28300", "S28400", "S28500", "S28600", "S28700"], "S28800": ["S28800", "S28900", "S28a00", "S28b00", "S28c00", "S28d00", "S28e00", "S28f00", "S29000", "S29100", "S29200", "S29300", "S29400", "S29500", "S29600", "S29700", "S29800", "S29900", "S29a00", "S29b00", "S29c00", "S29d00", "S29e00", "S29f00", "S2a000", "S2a100", "S2a200", "S2a300", "S2a400", "S2a500"], "S2a600": ["S2a600", "S2a700", "S2a800", "S2a900", "S2aa00", "S2ab00", "S2ac00", "S2ad00", "S2ae00", "S2af00", "S2b000", "S2b100", "S2b200", "S2b300", "S2b400", "S2b500", "S2b600"], "S2b700": ["S2b700", "S2b800", "S2b900", "S2ba00", "S2bb00", "S2bc00", "S2bd00", "S2be00", "S2bf00", "S2c000", "S2c100", "S2c200", "S2c300", "S2c400", "S2c500", "S2c600", "S2c700", "S2c800", "S2c900", "S2ca00", "S2cb00", "S2cc00", "S2cd00", "S2ce00", "S2cf00", "S2d000", "S2d100", "S2d200", "S2d300", "S2d400"], "S2d500": ["S2d500", "S2d600", "S2d700", "S2d800", "S2d900", "S2da00", "S2db00", "S2dc00", "S2dd00", "S2de00", "S2df00", "S2e000", "S2e100", "S2e200"], "S2e300": ["S2e300", "S2e400", "S2e500", "S2e600", "S2e700", "S2e800", "S2e900", "S2ea00", "S2eb00", "S2ec00", "S2ed00", "S2ee00", "S2ef00", "S2f000", "S2f100", "S2f200", "S2f300", "S2f400", "S2f500", "S2f600"], "S2f700": ["S2f700", "S2f800", "S2f900", "S2fa00", "S2fb00", "S2fc00", "S2fd00", "S2fe00"], "S2ff00": ["S2ff00", "S30000", "S30100", "S30200", "S30300", "S30400", "S30500", "S30600", "S30700", "S30800", "S30900"], "S30a00": ["S30a00", "S30b00", "S30c00", "S30d00", "S30e00", "S30f00", "S31000", "S31100", "S31200", "S31300", "S31400", "S31500", "S31600", "S31700", "S31800", "S31900", "S31a00", "S31b00", "S31c00", "S31d00", "S31e00", "S31f00", "S32000", "S32100", "S32200", "S32300", "S32400", "S32500", "S32600", "S32700", "S32800", "S32900"], "S32a00": ["S32a00", "S32b00", "S32c00", "S32d00", "S32e00", "S32f00", "S33000", "S33100", "S33200", "S33300", "S33400", "S33500", "S33600", "S33700", "S33800", "S33900", "S33a00"], "S33b00": ["S33b00", "S33c00", "S33d00", "S33e00", "S33f00", "S34000", "S34100", "S34200", "S34300", "S34400", "S34500", "S34600", "S34700", "S34800", "S34900", "S34a00", "S34b00", "S34c00", "S34d00", "S34e00", "S34f00", "S35000", "S35100", "S35200", "S35300", "S35400", "S35500", "S35600", "S35700", "S35800"], "S35900": ["S35900", "S35a00", "S35b00", "S35c00", "S35d00", "S35e00", "S35f00", "S36000", "S36100", "S36200", "S36300", "S36400", "S36500", "S36600", "S36700", "S36800", "S36900", "S36a00", "S36b00", "S36c00"], "S36d00": ["S36d00", "S36e00", "S36f00", "S37000", "S37100", "S37200", "S37300", "S37400", "S37500"], "S37600": ["S37600", "S37700", "S37800", "S37900", "S37a00", "S37b00", "S37c00", "S37d00", "S37e00"], "S37f00": ["S37f00", "S38000", "S38100", "S38200", "S38300", "S38400", "S38500", "S38600"], "S38700": ["S38700", "S38800", "S38900", "S38a00", "S38b00"] }
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;
  fsw-palette --> fsw-button
  fsw-palette --> fsw-palette-symbol

fsw-signbox

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

Basic Example

<fsw-signbox></fsw-signbox>