Print

Print


For all those interested in SignWriting Fonts,

Up until now creating an SVG signwriting document involves adding all of 
the shapes that make us a symbol each time a symbol appeared in a 
document.  A more efficient way is possible by creating a definition of 
the shapes and referring to them each time  a symbol appears in the 
document, this is also known as linking.  The SVG Refactored fonts were 
created so that the symbols would be in a suitable format to do this.

Also the previous SVG Refinement font was analyzed to only keep each 
shape once, then apply the translation (sliding) or rotation necessary 
to get the shape required for the symbol.  Translation and rotation of 
shapes is done anyways in the SVG Refinement font.  There is still room 
for improvement as identical shapes are showing in different positions 
that were not identified by the simplification algorithm.  The font can 
be hand tweaked at a latter time to achieve this. So far an 54% 
improvement on space the font takes up has been achieved.

There are three versions of the font.

Given a list of symbols in a document, a query can get and compose a 
definition of all the pieces and how the symbols are put together.  This 
definition is put in the Defs section of the SVG document.  Then the 
document itself has references to each of the symbol definitions which 
in turn reference each of the shapes making up the symbol.

Take for example the FWS of M518x529S14c20481x471S27106503x489 
M518x533S1870a489x515S18701482x490S20500508x496S2e734500x468 S38800464x496

With the ISWA 2010 SVG Refinement font and the glyphogram to do the 
layout it creates this SVG document.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg  version="1.0"xmlns="http://www.w3.org/2000/svg"width="230"height="1200">
<metadata>M230x1200S14c2096x20S27106118x38S1870a104x165S1870197x140S20500123x146S2e734115x118S3880079x203</metadata>
<g  transform="translate(96,20)" ><g  transform="scale(0.986 1)">
   <path  id="base"d="M 11,9 6,14 6,31 16,31 16,14 11,9 z"fill="#000000"/>
   <path  id="index"d="M 4 4 L 2.28125 5 L 6.9375 13.0625 L 8.40625 11.59375 L 4 4 z"fill="#000000"/>
   <path  id="middle"d="M 10 0 L 10 10 L 11 9 L 12 10 L 12 0 L 10 0 z"fill="#000000"/>
   <path  id="ring"d="M 18 4 L 13.59375 11.59375 L 15.0625 13.0625 L 19.71875 5 L 18 4 z"fill="#000000"/>
   <path  id="baby"d="M 21.65625,10.5 16,16.1875 16,19 23.0625,11.9375 21.65625,10.5 z"fill="#000000"/>
   <path  id="thumb"d="M 1.40625 17.59375 L 0 19 L 6 25 L 6 22.1875 L 1.40625 17.59375 z"fill="#000000"/>
</g></g>
<g  transform="translate(118,38)" ><g  transform="translate(15 0) rotate(90)">
   <path  id="path2818"d="M 7,0 0,7 14,7 7,0 z"fill="#000000"/>
   <path  id="path2831"d="M 6,7 8,7 8,14 6,14 6,7 z"fill="#000000"/>
   <path  id="path2915"d="M 20,15 13,8 27,8 20,15 z"fill="#000000"/>
   <path  id="path2917"d="m 19,8 2,0 0,-7 -2,0 0,7 z"fill="#000000"/>
   <path  id="path2923"d="M 33,0 26,7 40,7 33,0 z"fill="#000000"/>
   <path  id="path2925"d="m 32,7 2,0 0,7 -2,0 0,-7 z"fill="#000000"/>
</g></g>
<g  transform="translate(104,165)" ><g  transform="scale(0.967 1) translate(30 18) rotate(90) scale(-1,1)">
   <path  id="base"d="M 9 14 C 4.581722 14 1 17.581722 1 22 C 1 26.418278 4.581722 30 9 30 C 13.418278 30 17 26.418278 17 22 C 17 17.581722 13.418278 14 9 14 z"fill="#000000"/>
   <path  id="fill"d="M 9 16 C 5.6862915 16 3 18.686292 3 22 C 3 25.313708 5.6862915 28 9 28 C 12.313708 28 15 25.313708 15 22 C 15 18.686292 12.313708 16 9 16 z"fill="#ffffff"/>
   <path  id="index"d="M 16.59375,6.40625 8,15 10.8125,15 18,7.8125 16.59375,6.40625 z"fill="#000000"/>
   <rect  id="middle"x="8"y="0"width="2"height="15"fill="#000000"/>
   <path  id="ring"d="M 1.40625,6.40625 0,7.8125 7.1875,15 10,15 1.40625,6.40625 z"fill="#000000"/>
</g></g>
<g  transform="translate(97,140)" ><g  transform="scale(0.973 0.973) translate(-5.333 7.333) rotate(315)">
   <path  id="base"d="M 9 14 C 4.581722 14 1 17.581722 1 22 C 1 26.418278 4.581722 30 9 30 C 13.418278 30 17 26.418278 17 22 C 17 17.581722 13.418278 14 9 14 z"fill="#000000"/>
   <path  id="fill"d="M 9 16 C 5.6862915 16 3 18.686292 3 22 C 3 25.313708 5.6862915 28 9 28 C 12.313708 28 15 25.313708 15 22 C 15 18.686292 12.313708 16 9 16 z"fill="#ffffff"/>
   <path  id="index"d="M 16.59375,6.40625 8,15 10.8125,15 18,7.8125 16.59375,6.40625 z"fill="#000000"/>
   <rect  id="middle"x="8"y="0"width="2"height="15"fill="#000000"/>
   <path  id="ring"d="M 1.40625,6.40625 0,7.8125 7.1875,15 10,15 1.40625,6.40625 z"fill="#000000"/>
</g></g>
<g  transform="translate(123,146)" ><g  transform="scale(0.909 1)">
   <path  id="rect2815"d="m 4.75,0 0,4.1875 L 1.125,2.09375 0.375,3.40625 4,5.5 0.375,7.59375 1.125,8.90625 4.75,6.8125 4.75,11 l 1.5,0 0,-4.1875 3.625,2.09375 0.75,-1.3125 L 7,5.5 10.625,3.40625 9.875,2.09375 6.25,4.1875 6.25,0 4.75,0 z"fill="#000000"/>
</g></g>
<g  transform="translate(115,118)" ><g>
   <path  id="path3279"d="M 5.5,16.5 0,11 11,11 5.5,16.5 z"fill="#000000"/>
   <path  id="path3299"d="M 9.5,25 C 7.1955445,25 5.326766,21.718612 5.0625,17.5 l 1.96875,0 C 7.1967286,21.160966 8.2342976,24 9.5,24 10.880712,24 12,20.642136 12,16.5 l 0,-8 C 12,4.357864 10.880712,1 9.5,1 8.1192881,1 7,4.357864 7,8.5 L 7,10 5,10 5,8.5 C 5,3.80558 7.0147186,0 9.5,0 l 2,0 C 13.985281,0 16,3.80558 16,8.5 l 0,8 c 0,4.69442 -2.014719,8.5 -4.5,8.5 l -2,0 z"fill="#000000"/>
</g></g>
<g  transform="translate(79,203)" ><g>
   <path  id="rect2815"d="M 0,0 72,0 72,8 0,8 0,0 z"fill="#000000"/>
</g></g>
</svg>


Whereas with a refactored font we get this.

svg version="1.1" id="svg2" height="4800" width="744.09448819" 
xmlns:xlink="http://www.w3.org/1999/xlink" 
xmlns:svg="http://www.w3.org/2000/svg">
   <defs id="defs1">
     <style type="text/css">.nw {fill: white; } .nb {fill: black ;}</style>
   </defs>
   <defs data-bind="html: details" id="defs4">
     <path id="p7329_1" class="nb" d="M 11,9 6,14 6,31 16,31 16,14 11,9 z"/>
     <path id="p7329_2" class="nb" d="M 4 4 L 2.28125 5 L 6.9375 13.0625 
L 8.40625 11.59375 L 4 4 z "/>
     <path id="p7329_3" class="nb" d="M 10 0 L 10 10 L 11 9 L 12 10 L 12 
0 L 10 0 z "/>
     <path id="p7329_4" class="nb" d="M 18 4 L 13.59375 11.59375 L 
15.0625 13.0625 L 19.71875 5 L 18 4 z "/>
     <path id="p7329_5" class="nb" d="M 21.65625,10.5 16,16.1875 16,19 
23.0625,11.9375 21.65625,10.5 z"/>
     <path id="p7329_6" class="nb" d="M 1.40625 17.59375 L 0 19 L 6 25 L 
6 22.1875 L 1.40625 17.59375 z "/>
     <path id="p34273_1" class="nb" d="M 7,0 0,7 14,7 7,0 z"/>
     <path id="p34753_2" class="nb" d="M 6,7 8,7 8,14 6,14 6,7 z"/>
     <path id="p35425_3" class="nb" d="M 20,15 13,8 27,8 20,15 z"/>
     <path id="p35425_4" class="nb" d="m 19,8 2,0 0,-7 -2,0 0,7 z"/>
     <path id="p35233_5" class="nb" d="M 33,0 26,7 40,7 33,0 z"/>
     <path id="p35233_6" class="nb" d="m 32,7 2,0 0,7 -2,0 0,-7 z"/>
     <path id="p12961_1" class="nb" d="M 9 14 C 4.581722 14 1 17.581722 
1 22 C 1 26.418278 4.581722 30 9 30 C 13.418278 30 17 26.418278 17 22 C 
17 17.581722 13.418278 14 9 14 z "/>
     <path id="p12961_2" class="nw" d="M 9 16 C 5.6862915 16 3 18.686292 
3 22 C 3 25.313708 5.6862915 28 9 28 C 12.313708 28 15 25.313708 15 22 C 
15 18.686292 12.313708 16 9 16 z "/>
     <path id="p12865_3" class="nb" d="M 16.59375,6.40625 8,15 
10.8125,15 18,7.8125 16.59375,6.40625 z"/>
     <rect id="p2017_4" class="nb" height="15" width="2" y="0" x="8"/>
     <path id="p12865_5" class="nb" d="M 1.40625,6.40625 0,7.8125 
7.1875,15 10,15 1.40625,6.40625 z"/>
     <path id="p25057_1" class="nb" d="m 4.75,0 0,4.1875 L 1.125,2.09375 
0.375,3.40625 4,5.5 0.375,7.59375 1.125,8.90625 4.75,6.8125 4.75,11 l 
1.5,0 0,-4.1875 3.625,2.09375 0.75,-1.3125 L 7,5.5 10.625,3.40625 
9.875,2.09375 6.25,4.1875 6.25,0 4.75,0 z"/>
     <path id="p46805_1" class="nb" d="M 5.5,16.5 0,11 11,11 5.5,16.5 z"/>
     <path id="p46805_2" class="nb" d="M 9.5,25 C 7.1955445,25 
5.326766,21.718612 5.0625,17.5 l 1.96875,0 C 7.1967286,21.160966 
8.2342976,24 9.5,24 10.880712,24 12,20.642136 12,16.5 l 0,-8 C 
12,4.357864 10.880712,1 9.5,1 8.1192881,1 7,4.357864 7,8.5 L 7,10 5,10 
5,8.5 C 5,3.80558 7.0147186,0 9.5,0 l 2,0 C 13.985281,0 16,3.80558 
16,8.5 l 0,8 c 0,4.69442 -2.014719,8.5 -4.5,8.5 l -2,0 z"/>
     <path id="p62209_1" class="nb" d="M 0,0 72,0 72,8 0,8 0,0 z"/>
     <g id="b7329" transform="scale(0.986 1)">
       <use xlink:href="#p7329_1"/>
       <use xlink:href="#p7329_2"/>
       <use xlink:href="#p7329_3"/>
       <use xlink:href="#p7329_4"/>
       <use xlink:href="#p7329_5"/>
       <use xlink:href="#p7329_6"/>
     </g>
     <g id="b35425">
       <use xlink:href="#p34273_1"/>
       <use xlink:href="#p34753_2"/>
       <use xlink:href="#p35425_3"/>
       <use xlink:href="#p35425_4"/>
       <use xlink:href="#p35233_5"/>
       <use xlink:href="#p35233_6"/>
     </g>
     <g id="b12961" transform="scale(1 0.967)">
       <use xlink:href="#p12961_1"/>
       <use xlink:href="#p12961_2"/>
       <use xlink:href="#p12865_3"/>
       <use xlink:href="#p2017_4"/>
       <use xlink:href="#p12865_5"/>
     </g>
     <g id="b25057" transform="scale(0.909 1)">
       <use xlink:href="#p25057_1"/>
     </g>
     <g id="b46805">
       <use xlink:href="#p46805_1"/>
       <use xlink:href="#p46805_2"/>
     </g>
     <g id="b62209">
       <use xlink:href="#p62209_1"/>
     </g>
     <g id="c7329" transform="scale(0.986 1)">
       <use xlink:href="#b7329"/>
     </g>
     <g id="c35431" transform="translate(15 0) rotate(90)">
       <use xlink:href="#b35425"/>
     </g>
     <g id="c12971" transform="scale(0.967 1) translate(30 18) 
rotate(90) scale(-1,1)">
       <use xlink:href="#b12961"/>
     </g>
     <g id="c12962" transform="scale(0.973 0.973) translate(-5.333 
7.333) rotate(315)">
       <use xlink:href="#b12961"/>
     </g>
     <g id="c25057" transform="scale(0.909 1)">
       <use xlink:href="#b25057"/>
     </g>
     <g id="c46805">
       <use xlink:href="#b46805"/>
     </g>
     <g id="c62209">
       <use xlink:href="#b62209"/>
     </g>
   </defs>
   <g id="svgDoc">
     <g transform="translate(61,0)">
       <use xlink:href="#c7329" transform="translate (0,0)"/>
       <use xlink:href="#c35431" transform="translate (22,18)"/>
     </g>
     <g transform="translate(62,73)">
       <use xlink:href="#c12971" transform="translate (7,47)"/>
       <use xlink:href="#c12962" transform="translate (0,22)"/>
       <use xlink:href="#c25057" transform="translate (26,28)"/>
       <use xlink:href="#c46805" transform="translate (18,0)"/>
     </g>
     <g transform="translate(44,153)">
       <use xlink:href="#c62209" transform="translate (0,0)"/>
       <use xlink:href="#c62209" transform="translate (0,0)"/>
     </g>
     <g transform="translate(580,176)"/>
   </g>
</svg>

A Defs section where shapes and symbols are only defined once and a 
SvgDoc area where each symbols is positioned for layout.  For such a 
short document both are quite similar but for a document in which many 
shapes and symbols are used in many signs, the document with the 
refactored font will be smaller (less bytes). It can also be styled with 
CSS.

The first two, *ISWA 2010 SVG Refinement  and ISWA 2010 SVG Refinement  
Tiny*, are contained in SQLite databases and are intended for use in 
Desktop Program, or Web Servers.   The difference between the two is 
that common string pieces were removed from the SVG text and added back 
in when reading to minimize space taken up with a slight tradeoff of 
slightly increased in computational cost.

The third one, *ISWA 2010 SVG Refinement JSON*, is for use in the web 
browser and for offline web applications.  It has the same SignWriting 
symbol information  as ISWA 2010 SVG Refinement but the SVG parts are 
stored in JSON for processing with Javascript.  The JSON SVG information 
is read by Javascript such as the SignWriter LayoutEngine which saves it 
to an IndexedDb browser database once.   Then the SignWriter 
LayoutEngine gets the symbols and shapes from the local IndexedDb and 
does not require to retrieve the symbols over the internet anymore.  It 
will quite useful for use offline web applications or for saving power 
on cell phones and other hand held devices than run their battery down 
fast when continuously connecting to the Internet.

The IndexedDB does not permit webpages from different websites to access 
it so it will have to load a copy for each website it is used on.  For 
casual browsing, the font from the web server may be a better option but 
for websites where a user will be using a lot of SignWriting,  users 
could opt to use the ISWA 2010 SVG Refinement JSON font.

The other con is that IndexedDB is only available in FireFox 19.0 and 
up, Internet Explorer 10.0 and up, Chrome 23.0 and up, Chrome for 
Android 25.0 and up, Firefox for Android 19.0 and up. For most of the 
other web browsers another javascript library knows as shim or polyfill 
has to be used to simulate the IndexedDb. 
http://nparashuram.com/IndexedDBShim/ This should also make it available 
for Safari 5.1 and up, Opera 12.1 and up iOS Safari 3.2 and up, 
BlackBerry Browser 7.0 and up. For any other browsers, they would have 
to be connected to the internet and constantly get the symbols from the 
web server.

I have uploaded a sample of s JSON SVG font and the SignWriter Layout 
Engine to 
http://www.signwriterstudio.com/SignWriterLayoutEngine/SignWritingViewer.html.
Click on the Load ISWA to load the all of the SignWriting symbols into 
your browser.  This may take well over a minute.  If you have your own 
website, you should consider enabling Gzip to minimize the bandwith and 
the page load time.  When finished, it will display "Font in database 
tested out OK."
Then click on the Show SignWriting. Which will show one column of 
SignWriting from the FSW in the input area above it.

How to use SignWriterLayoutEngine on your website
unzip SignWriterLayoutEngine.zip in your folder
add
      <!cript type="text/javascript" 
src="Scripts/jquery-1.8.3.min.js"></script>
     <!cript type="text/javascript" src="Scripts/q.min.js"></script>
     <!cript type="text/javascript" 
src="Scripts/SignWriterLayoutEngine.js"></script>
     <!cript type="text/javascript" src="Scripts/CreateISWA.js"></script>

to your web page.

add
<input id="Button2" type="button" value="Load ISWA" 
onclick="ISWALoader.LoadISWA();" multiple="multiple" /><br/>
to load the font into the IndexedDb datatabse in the user's browser.

add
<div id="svg1"></div>
to your web page.

call the
ISWAClient.LoadSymbol(<FSW goes here>);

from javascript to put the SVG document into the svg1 DIV.



The SignWriterLayoutEngine is released under the MIT Open Source License 
so it can be modified by other people to split column into several or 
display the symbols horizontally if needed.  The source code is 
available in CoffeeScript and Javascript.  It has dependencies on 
JQuery, and Q(promises) only.
It can be downloaded from 
http://www.signwriterstudio.com/download/SignWriterLayoutEngine.zip

The ISWA 2010 SVG Refinement  and ISWA 2010 SVG Refinement  Tiny and 
ISWA 2010 SVG Refinement JSON or licensed under the MIT Open Source License.

Can be downloaded at the bottom of this page 
http://www.signwriterstudio.com/download.htm

These fonts have been part of an effort to include SVG fonts in 
SignWriter Studio.

Well you if you any other questions.  Please let me know and I will do 
my best to answer them.

Jonathan

-- 

email: [log in to unmask] <mailto:[log in to unmask]>
[log in to unmask] <mailto:[log in to unmask]>
Cel Honduras: (504)3141-1171
Tel USA: (347)875-8442
Skype: yojoduncan

SignWriter Studio <http://www.signwriterstudio.com/>