Formal SignWriting

1.1.1. Formal SignWriting in ASCII (FSW)

FSW uses ASCII characters: A, B, L, M, R, S, 0-9, a-f, x. Released in January 2012, it has been stable since.¶

1.1.2. SignWriting in Unicode (SWU)

SWU, published in October 2016 and submitted to the Unicode Technical Committee in July 2017, is an experimental encoding using the Sutton SignWriting block and plane 4 for symbols. It is not part of the Unicode standard but is supported by Sutton SignWriting resources.¶

1.2.1. Regular Expressions

Regular expressions define the grammar for Formal SignWriting strings.¶

Regular Expression Basics¶

1.2.2. Token Patterns

Formal SignWriting uses 11 tokens, grouped into four layers: structural markers (A, B, L, M, R), base symbols (u, w, s, P), modifiers (i, o), and numbers (n).¶

Tokens of Formal SignWriting¶

1.2.3. Symbols

Symbols are defined by three tokens: base symbol (w, s, P), fill modifier (i), and rotation modifier (o), based on the International SignWriting Alphabet 2010 (ISWA 2010).¶

Symbol Tokens¶

There are a variety of symbol types that are used for different purposes.¶

Symbol Types and Descriptions¶

Symbol types occur in specific ranges depending on the characters involved.¶

Symbol Types and Ranges¶

1.2.4. Numbers

The numbers encode the ruler principle with characters. The ruler principle is built in automatically for scripts written sequentially in one dimension. The number characters are needed to specify the spatial relationship between symbols.¶

Both FSW and SWU use a restricted range of 500 numbers between 250 and 749.¶

Cartesian Coordinates can be described with 2 tokens: number and number. These numbers represent the X and Y coordinates respectively.¶

Coordinate Tokens¶

1.3.1. Temporal Prefix

The temporal prefix is a one-dimensional sequence of symbols (writing, null, or detailed location) starting with "A", enabling sorting via binary string comparison.¶

Temporal Prefix Tokens¶

1.3.2. Spatial Signbox

The spatial signbox is a two-dimensional cluster of writing symbols with Cartesian coordinates for top-left placement. Symbol order affects overlap (earlier symbols are underneath).¶

Spatial Signbox Tokens¶

1.4.1. Entire Sign

There are several options for styling an entire sign.¶

C

Colorize¶

P

Padding¶

G

Background¶

D

Detail colors¶

Z

Zoom level¶

1.4.2. Individual Symbols

There is one option for styling individual symbols. Individual symbols are identified by a two-digit number, which identifies the order the symbol appears in the Signbox.¶

D

Detail colors¶

1.4.3. SVG Class Names and ID

When using SVG, there are two additional styling options of class names and ID.¶

{class names}!

SVG Class Names¶

{ID}!

SVG ID¶

Both class names and ID use a restricted ASCII subset.¶

class names

-?[_a-zA-Z][_a-zA-Z0-9-]{0,100}( -?[_a-zA-Z][_a-zA-Z0-9-]{0,100})*¶

ID

[a-zA-Z][_a-zA-Z0-9-]{0,100}¶

Each SVG can be created with a list of class names separated by spaces, ending in an exclamation (!) mark. After the class names exclamation mark, an ID can be written followed by another exclamation mark.¶

1.5.1. Major Sections

There are three major sections of the query string: the prefix, the signbox, and the styling string.¶

Query Language Sections¶

A query string always starts with the query marker (Q), followed by an optional prefix marker (P), followed by an optional signbox marker (X), followed by an optional styling string marker (Y).¶

Full query string definition:

QP?X?Y?¶

1.5.2. Common Elements

There are several common elements used for searching the prefix and the signbox.¶

Query Common Elements¶

Common definitions used in the temporal prefix and the spatial signbox.¶

Symbol definition:

S = Bfr¶

Range definition:

RBB¶

Item definition:

I = (S|RBB)¶

List definition:

L = I(OI)*¶

1.5.3. Searching the Temporal Prefix

Searching the temporal prefix requires two additional tokens.¶

Prefix Elements¶

Definition of temporal prefix searching.¶

Prefix searching definition:

P = ((AL+)?T)?¶

1.5.4. Searching the Spatial Signbox

Searching the spatial signbox requires two additional tokens.¶

Signbox Elements¶

Definition of spatial signbox searching.¶

Signbox searching definition:

X = (LC?)*V?¶

1.5.5. Regular Expressions

1.6.1. Formal SignWriting to Query String

Formal SignWriting strings have several natural transformations to query string. The transformation can use the temporal prefix and/or the spatial signbox. For each symbol, the query can include the exact symbol key, or the query can use a general symbol key where the fill and rotation modifiers are not explicitly defined. Consider the Formal SignWriting string "AS14c20S27106M518x529S14c20481x471S27106503x489".¶

Exact Temporal Prefix Symbols:

QAS14c20S27106T¶

General Temporal Prefix Symbols:

QAS14cuuS271uuT¶

Exact Spatial Signbox Symbols:

QS14c20S27106¶

General Spatial Signbox Symbols:

QS14cuuS271uu¶

Exact Spatial Signbox Symbols with Location:

QS14c20481x471S27106503x489¶

General Spatial Signbox Symbols with Location:

QS14cuu481x471S271uu503x489¶

1.6.2. Query String to Regular Expression

The query language to regular expressions generator uses the following regular expression structures as building blocks.¶

Temporal Prefix Structure:

(A(S[123][0-9a-f]{2}[0-5][0-9a-f])+)¶

Spatial Signbox Structure:

[BLMR]([0-9]{3}x[0-9]{3})¶

Spatial Symbols:

(S[123][0-9a-f]{2}[0-5][0-9a-f][0-9]{3}x[0-9]{3})*¶

The Temporal Prefix Structure is a structural marker followed by one or more symbols. For the query string "QT", the prefix is required. For the general "Q", the prefix is optional so "?" is appended to the Temporal Prefix Structure regular expression.¶

The Spatial Signbox Structure is a combination of structural marker and preprocessed maximum coordinate. Every constructed regular expression will include the Spatial Signbox Structure.¶

The Spatial Symbols are zero or more symbol definitions and associated coordinates. The Spatial Symbols regular expression is used for every search. For both "Q" and "QT", it is the only symbol matching used. When searching for specific symbols and ranges, the general Spatial Symbols definition will sandwich the specific search definitions.¶

Searching for number ranges with regular expressions requires a unique technique. This technique requires five steps.¶

Find a number between 122 and 455¶

1) 10s don't match and the min 1s are not zero ( last number to 9):

Match 12[2-9]¶

2) Bring up the 10s if hundreds are different:

Match 1[3-9][0-9]¶

3) Bring up the 100s if different:

Match [2-3][0-9][0-9]¶

4) Bring up the 10s:

Match 4[0-4][0-9]¶

5) Bring up the 1s:

Match 45[0-5]¶

Final Match (12[2-9]|1[3-9][0-9]|[2-3][0-9][0-9]|4[0-4][0-9]|45[0-5])¶

For the styling string regular expression, see Section 1.4.¶

2.1.1. Windows, Linux, and Mac

Installation is straight forward for Windows, Linux and Mac. Simply download the TrueType fonts and install as usual.¶

Sutton SignWriting Line TrueType Font [SWFontLine]¶

Sutton SignWriting Fill TrueType Font [SWFontFill]¶

Sutton SignWriting One-D TrueType Font [SWFontOneD]¶

2.1.2. Mac and iOS

Installation is possible for Mac OS X and iOS with a configuration profile. The Sutton SignWriting Symbol configuration profile includes 2 fonts for SVG: SuttonSignWritingLine and SuttonSignWritingFill. The Sutton SignWriting One configuration profile includes the font SuttonSignWritingOneD. With the configuration profile installed, the SignWriting in Unicode (SWU) characters can be used throughout the operating system, even as file and folder names.¶

Sutton SignWriting Symbol Configuration Profile [SWFontSymbol]¶

Sutton SignWriting One Configuration Profile [SWFontOne]¶

2.1.3. Android

Android can not install the fonts directly onto the system. The CSS declarations below will install the fonts in the browser cache.¶

2.3.1. Font Based SVG

The conversion of Formal SignWriting to Scalable Vector Graphics requires three parts: header, text, and symbols. Consider the FSW string "M518x533S1870a489x515S18701482x490S20500508x496S2e734500x468".¶

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
  width="36" height="65" viewBox="482 468 36 65">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
  viewBox="482 468 36 65">

<text style="font-size:0%;">
M518x533S1870a489x515S18701482x490S20500508x496S2e734500x468
</text>

  <g transform="translate(489,515)">...</g>
  <g transform="translate(482,490)">...</g>
  <g transform="translate(508,496)">...</g>
  <g transform="translate(500,468)">...</g>

<text class="sym-fill"
 style="font-family:'SuttonSignWritingFill';font-size:30px;fill:white;">
 {plane 16 codepoint}
</text>
<text class="sym-line"
 style="font-family:'SuttonSignWritingLine';font-size:30px;fill:black;">
 {plane 15 codepoint}
</text>

2.3.2. Stand Alone SVG

It is possible to create stand-alone SVG images from @sutton-signwriting/font-db. These SVG graphics do not use the TrueType Fonts. The SVG images use path elements to define the symbol lines and curves.¶

The SVG header and SVG text for the server-side images are the same as the standard FSW to SVG transformation. See Section 2.3.1¶

Within stand-alone SVG, multiple SVG elements are used. Each SVG elements uses X and Y coordinates to place the symbols. Consider the FSW string "M518x533S1870a489x515S18701482x490S20500508x496S2e734500x468".¶

Symbol 1:

S1870a 489x515¶

Symbol 2:

S18701 482x490¶

Symbol 3:

S20500 508x496¶

Symbol 4:

S2e734 500x468¶

<svg x="489" y="515">...</svg>
<svg x="482" y="490">...</svg>
<svg x="508" y="496">...</svg>
<svg x="500" y="468">...</svg>

Inside of each sub-SVG element is a group (g) element with one or two path elements. This inside information can be requested from a server or downloaded in a database.¶

  <g transform="translate(0.146473559361,17.7697467366) ... ">
    <path class="sym-fill" fill="white" d="M700 1493 ... "/>
    <path class="sym-line" fill="black" d="M1826 1480 ... "/>
  </g>

2.4.1. Centering and Sizing

It is possible to center a symbol or sign within a div with a few CSS rules. The symbol or sign will automatically shrink in size if the containing div is smaller than the SVG image. Additionally, if the SVG is created with the zoom level of extendable (styling string "-Zx"), the symbol or sign will grow in size to fill as much of the containing div as possible.¶

<div class="centered">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" ...
</div>

div.centered {
  position: relative;
  width: 10%;
  height: 10%;
  border: 1px solid black;
}

div.centered svg {
  position: absolute;
  display: block;
  top:2.5%;
  bottom: 2.5%;
  left: 2.5%;
  right: 2.5%;
  margin: auto;
  max-width: 95%;
  max-height: 95%;
}

2.4.2. Coloring Symbols and Signs

Individual signs can be colored with CSS rules. The individual classes of 'sym-line' and 'sym-fill' can be used to isolate each part of a symbol, both positive and negative spaces, or the classes can be ignored to create the shadow of a symbol that includes both aspects of a symbol.¶

<svg class="primary" ...
<svg class="success" ...
<svg class="info" ...
<svg class="warning" ...
<svg class="danger" ...
<svg class="shadow" ...
<svg class="inverse" ...

svg.primary g text.sym-line { fill: #337ab7 !important; }
svg.success g text.sym-line { fill: #5cb85c !important; }
svg.info g text.sym-line { fill: #5bc0de !important; }
svg.warning g text.sym-line { fill: #f0ad4e !important; }
svg.danger g text.sym-line { fill: #d9534f !important; }
svg.shadow g text { fill: grey !important; }
svg.inverse g text.sym-line { fill: white !important; }
svg.inverse g text.sym-fill { fill: black !important; }

2.4.3. Other Effects

Other CSS rules can be used for other effect. Please note that transform property does not affect the document flow and should not be used for general layout.¶

svg.shadowed {
  text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
}
svg.rotate {
  transform: rotate(0.5turn);
}
svg.bigger {
  transform: scale(2);
}
svg.skewed {
  transform: skewX(30deg);
}

2.4.4. Sentences

SignWriting is written vertically using the vertical writing mode of CSS. To create the center lane and to visually divide the columns of text, several span elements are used. Each sign is contained in a div with a width and height that matches the enclosed sign. To properly align each sign with the center of its lane, the containing div will either use "margin-right" or "border-left". With "border-left", the rule must include "solid transparent" after the size.¶

<div class="signtext">
 <span class="outside"><span class="middle"><span class="inside">
  <div style="width:42px;height:77px;margin-right:2px;"><svg ...
  <div style="width:38px;height:48px;margin-right:2px;"><svg ...
  <div style="width:25px;height:9px;border-left:7px solid transparent;">

div.signtext {
  -webkit-writing-mode: vertical-lr;
  writing-mode: vertical-lr;
  font-size: 0%;
  border-left: 1px solid blue;
  height: 100%;
}

span.outside { border-left: 1px solid blue; vertical-align: top; }
span.middle { vertical-align: bottom; }
span.inside { border-left: 1px dashed red; }

div.signtext div {
  writing-mode: horizontal-tb;
  display: inline-block;
  vertical-align: middle;
  padding: 20px;
  box-sizing: content-box;
}

2.5.1. @sutton-signwriting/core

a javascript package for node and browsers that supports general processing of the Sutton SignWriting script¶

Source [SSWCoreSrc]¶

Documentation [SSWCoreDoc]¶

Distribution [SSWCoreDist]¶

npm install @sutton-signwriting/core

2.5.2. @sutton-signwriting/font-ttf

a javascript package for the web components and browser that generates SVG and PNG images for individual symbols and complete signs¶

Source [SSWTTFSrc]¶

Documentation [SSWTTFDoc]¶

Distribution [SSWTTFDist]¶

npm install @sutton-signwriting/font-ttf

2.5.3. @sutton-signwriting/font-db

a javascript package for node that generates SVG and PNG images for individual symbols and complete signs¶

Source [SSWFontDBSrc]¶

Documentation [SSWFontDBDoc]¶

Distribution [SSWFontDBDist]¶

npm install @sutton-signwriting/font-db

2.5.4. @sutton-signwriting/sgnw-components

a javascript package of Web Components for use with the SignWriting script¶

Source [SSWSgnwSrc]¶

Documentation [SSWSgnwDoc]¶

Distribution [SSWSgnwDist]¶

npm install @sutton-signwriting/sgnw-components