SignWriting Stack 2015
-
Upload
stephen-slevinski -
Category
Technology
-
view
30 -
download
1
Transcript of SignWriting Stack 2015
![Page 1: SignWriting Stack 2015](https://reader036.fdocuments.in/reader036/viewer/2022062515/55d2246bbb61eb021f8b465f/html5/thumbnails/1.jpg)
The SignWriting Stack 2015
Presented at the SignWriting Symposium on July 21stby Stephen E Slevinski Jr
in association with the Center for Sutton Movement Writing
http://www.signwriting.org/symposium/presentation0043.html
![Page 2: SignWriting Stack 2015](https://reader036.fdocuments.in/reader036/viewer/2022062515/55d2246bbb61eb021f8b465f/html5/thumbnails/2.jpg)
The SignWriting Stack
the collection of technologies working together that makes it
possible to use SignWriting on desktops, tablets, and
phones.
![Page 3: SignWriting Stack 2015](https://reader036.fdocuments.in/reader036/viewer/2022062515/55d2246bbb61eb021f8b465f/html5/thumbnails/3.jpg)
The SignWriting Stack 2015
iOSWindows Linux Android OS X
Explorer FireFox Chrome Safari Opera
TrueType Fonts (TTF)
Scalar Vector Graphics (SVG)
Cascading Style Sheets (CSS)
JavaScript (JS)
International SignWriting Alphabet 2010 (ISWA 2010)
Formal SignWriting (FSW)
Regular Expressions (Regex)
![Page 4: SignWriting Stack 2015](https://reader036.fdocuments.in/reader036/viewer/2022062515/55d2246bbb61eb021f8b465f/html5/thumbnails/4.jpg)
The SignWriting Stack 2015
A. The Bottom Layers: Fonts, Browser, and OS
B. The Middle Layers: JS, CSS, and SVG
C. The Top Layers: FSW, ISWA 2010, and Regex
D. The Flow of the System
E. Case Studies
1. SignWriting 2010 JavaScript Library
2. SignWriting Character Viewer
3. SignMaker
![Page 5: SignWriting Stack 2015](https://reader036.fdocuments.in/reader036/viewer/2022062515/55d2246bbb61eb021f8b465f/html5/thumbnails/5.jpg)
The SignWriting Stack 2015
iOSWindows Linux Android OS X
Explorer FireFox Chrome Safari Opera
TrueType Fonts (TTF)
The Bottom Layers
• Font Technology • Modern Browser• Operating System
![Page 6: SignWriting Stack 2015](https://reader036.fdocuments.in/reader036/viewer/2022062515/55d2246bbb61eb021f8b465f/html5/thumbnails/6.jpg)
Font Technology
TrueType Fonts (TTF)
Reserved Font Names• SignWriting 2010• SignWriting 2010 Filling
Font Installation• System Install• CSS font-face remote
http://slevinski.github.io/sw10js/guide.html#ttf
https://github.com/Slevinski/signwriting_2010_fonts
![Page 7: SignWriting Stack 2015](https://reader036.fdocuments.in/reader036/viewer/2022062515/55d2246bbb61eb021f8b465f/html5/thumbnails/7.jpg)
Modern Browser
Today’s Technology• Newer Phones• Every browser
Tomorrow’s Technology• Vertical Writing Mode: non-Gecko based
browser
Explorer FireFox Chrome Safari Opera
https://incubator.wikimedia.org/wiki/Wp/ase• 2D Font with GPOS Layout: Graphite &
FireFoxhttp://www.signwriting.org/symposium/presentation0019.html
http://slevinski.github.io/sw10js/tests/
![Page 8: SignWriting Stack 2015](https://reader036.fdocuments.in/reader036/viewer/2022062515/55d2246bbb61eb021f8b465f/html5/thumbnails/8.jpg)
iOSWindows Linux Android OS X
Operating System
Supported Systems
Minimal System Requirements• Reasonable TrueType font support
Font Installation• CSS font-face remote for all• System install for all but Android
![Page 9: SignWriting Stack 2015](https://reader036.fdocuments.in/reader036/viewer/2022062515/55d2246bbb61eb021f8b465f/html5/thumbnails/9.jpg)
The SignWriting Stack 2015
Scalar Vector Graphics (SVG)
Cascading Style Sheets (CSS)
JavaScript (JS)
The Middle Layers
• Programming Environment
• Presentation Styling• 2-Dimensional
Placement
![Page 10: SignWriting Stack 2015](https://reader036.fdocuments.in/reader036/viewer/2022062515/55d2246bbb61eb021f8b465f/html5/thumbnails/10.jpg)
Programming Environment
Any Programming Language• Prefer JavaScript without dependancies• Other Programming languages can be
used
http://slevinski.github.io/sw10js/api.html
JavaScript (JS)
http://slevinski.github.io/sw10js/
SignWriting 2010 JavaScript Library
• micro-library, less than 6 KB zipped• Supports images, searching, and more
![Page 11: SignWriting Stack 2015](https://reader036.fdocuments.in/reader036/viewer/2022062515/55d2246bbb61eb021f8b465f/html5/thumbnails/11.jpg)
Presentation StylingCSS Usage
• font-face statement to conditionally load fonts
• set fill for text to adjust color• text-shadow and animations
http://slevinski.github.io/sw10js/guide.html#css
Cascading Style Sheets (CSS)
![Page 12: SignWriting Stack 2015](https://reader036.fdocuments.in/reader036/viewer/2022062515/55d2246bbb61eb021f8b465f/html5/thumbnails/12.jpg)
iOS
2-Dimensional Placement
SVG is a widely supported standardthat is available in most environments with a variety of options. 2-Dimensional placement is supported with cartesian coordinates.
Scalar Vector Graphics (SVG)
![Page 13: SignWriting Stack 2015](https://reader036.fdocuments.in/reader036/viewer/2022062515/55d2246bbb61eb021f8b465f/html5/thumbnails/13.jpg)
The SignWriting Stack 2015
International SignWriting Alphabet 2010 (ISWA 2010)
Formal SignWriting (FSW)
Regular Expressions (Regex)
The Top Layers
• Names as Strings• The Alphabet• Universal Processing
![Page 14: SignWriting Stack 2015](https://reader036.fdocuments.in/reader036/viewer/2022062515/55d2246bbb61eb021f8b465f/html5/thumbnails/14.jpg)
Names as StringFormal SignWriting (FSW)
https://tools.ietf.org/html/draft-slevinski-signwriting-text-05#section-2
According to Wikipedia, "In mathematics, computer science, and linguistics, a formal language is a set of strings of symbols that may be constrained by rules that are specific to it."
Sign as Word• Mathematical ASCII name
• Optional time for sorting• Mandatory space for
visual
![Page 15: SignWriting Stack 2015](https://reader036.fdocuments.in/reader036/viewer/2022062515/55d2246bbb61eb021f8b465f/html5/thumbnails/15.jpg)
The Alphabet
International SignWriting Alphabet 2010 (ISWA 2010)
https://tools.ietf.org/html/draft-slevinski-signwriting-text-05#appendix-B
The International SignWriting Alphabet 2010 is an ordered collection of visually iconic symbols that exists in a layered hierarchy. The ISWA 2010 is a product of the collaboration between SignWriting inventor, Valerie Sutton, and SignWriting encoder Stephen E Slevinski Jr.
stable since the initial release on October 20th, 2010
http://www.movementwriting.org/symbolbank/
• symbols represent meaning• symbols combine in 2-dimension
arrangements
![Page 16: SignWriting Stack 2015](https://reader036.fdocuments.in/reader036/viewer/2022062515/55d2246bbb61eb021f8b465f/html5/thumbnails/16.jpg)
Universal Processing
Regular Expressions (Regex)
A regular expression is used to examine text and identify strings that match a stated pattern. A regular expression is written in a concise and flexible formal language.
Formal SignWriting is a heuristic model initially created in 2008 based on regular expression processing. After several generations of refactored data, the model has been optimized for common usage and processing. The model has been stable since January 12th, 2012.• FSW strings are defined with regular expressions
• Query strings are used to search FSW strings• FSW strings transform into several variety of query string• Query strings transform into regular expressions 15+ times
larger
https://en.wikipedia.org/wiki/Regular_expression
https://tools.ietf.org/html/draft-slevinski-signwriting-text-05#section-3
![Page 17: SignWriting Stack 2015](https://reader036.fdocuments.in/reader036/viewer/2022062515/55d2246bbb61eb021f8b465f/html5/thumbnails/17.jpg)
The SignWriting Stack 2015
iOSWindows Linux Android OS X
Explorer FireFox Chrome Safari Opera
TrueType Fonts (TTF)
Scalar Vector Graphics (SVG)
Cascading Style Sheets (CSS)
JavaScript (JS)
International SignWriting Alphabet 2010 (ISWA 2010)
Formal SignWriting (FSW)
Regular Expressions (Regex)
![Page 18: SignWriting Stack 2015](https://reader036.fdocuments.in/reader036/viewer/2022062515/55d2246bbb61eb021f8b465f/html5/thumbnails/18.jpg)
Formal SignWriting
Regular Expressions
Query Strings
The Flow of the System
SVG
PUA Plane 15
Graphite Font
Unicode 8 PUA Plane 16TTF
10% to 50% reduction
15 to 50 times expansion
process million of characters per second
search results
15 times expansion
single character per symbolligatures of 1 to 3 characters
twice the size
cartesian coordinates with GPOS
CSSstyle text
Isomorphic
JS
![Page 19: SignWriting Stack 2015](https://reader036.fdocuments.in/reader036/viewer/2022062515/55d2246bbb61eb021f8b465f/html5/thumbnails/19.jpg)
Series10 KB
70 KB140 KB210 KB280 KB350 KB420 KB490 KB560 KB630 KB700 KB
Testing: CSS, JS, and HTMLAssets: Logo and I-D ReferenceBootstrap CSSPages: Index, Guide, and APILibrary: sw10.min.js
Case Study 1
http://slevinski.github.io/sw10js
Code Breakdown
SignWriting 2010 JavaScript Library
![Page 20: SignWriting Stack 2015](https://reader036.fdocuments.in/reader036/viewer/2022062515/55d2246bbb61eb021f8b465f/html5/thumbnails/20.jpg)
Series10 KB
10 KB
20 KB
30 KB
40 KB
50 KB
60 KB
110 KB in Single File
Messages: User Interface and NamesLibraries: Mithril JS and SW10 JSCustom: HTML, JS, and CSS
Case Study 2
http://signbank.org/SignWriting_Character_Viewer.html
Code Breakdown
![Page 21: SignWriting Stack 2015](https://reader036.fdocuments.in/reader036/viewer/2022062515/55d2246bbb61eb021f8b465f/html5/thumbnails/21.jpg)
Case Study 3
http://www.signbank.org/signmaker.html
Code BreakdownSignMaker 2015
Series10 KB7 KB
14 KB21 KB28 KB35 KB42 KB49 KB56 KB63 KB70 KB
ConfigurationSupport LibrariesCustom HTML, JS, and CSS
![Page 22: SignWriting Stack 2015](https://reader036.fdocuments.in/reader036/viewer/2022062515/55d2246bbb61eb021f8b465f/html5/thumbnails/22.jpg)
The SignWriting Stack 2015by Stephen E Slevinski Jr
http://www.signwriting.org/symposium/presentation0043.html
SignWriting Symposium 2015
http://slevinski.github.io
https://twitter.com/slevinski