Refactored fonts
Jonathan Duncan
duncanjonathan at YAHOO.CA
Sat Apr 27 01:41:02 UTC 2013
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
<script type="text/javascript"
src="Scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="Scripts/q.min.js"></script>
<script type="text/javascript"
src="Scripts/SignWriterLayoutEngine.js"></script>
<script 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: duncanjonathan at yahoo.ca <mailto:duncanjonathan at yahoo.ca>
joyoduncan at gmail.com <mailto:joyoduncan at gmail.com>
Cel Honduras: (504)3141-1171
Tel USA: (347)875-8442
Skype: yojoduncan
SignWriter Studio <http://www.signwriterstudio.com/>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listserv.linguistlist.org/pipermail/sw-l/attachments/20130426/c8850d3f/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/png
Size: 1136 bytes
Desc: not available
URL: <http://listserv.linguistlist.org/pipermail/sw-l/attachments/20130426/c8850d3f/attachment.png>
More information about the Sw-l
mailing list