Refactored fonts
Valerie Sutton
signwriting at MAC.COM
Sat Apr 27 14:59:19 UTC 2013
SignWriting List
April 27, 2013
Thank you, Jonathan, for this extensive and interesting report - I am so happy with this new development which is very unique and I hope it provides the world with another tool for using SignWriting … I am glad to see it available for download on your Downloads page...
http://www.signwriterstudio.com/download.htm
Val ;-)
------
On Apr 26, 2013, at 6:41 PM, Jonathan Duncan <duncanjonathan at yahoo.ca> wrote:
> 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
> joyoduncan at gmail.com
> Cel Honduras: (504)3141-1171
> Tel USA: (347)875-8442
> Skype: yojoduncan
>
> SignWriter Studio
>
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listserv.linguistlist.org/pipermail/sw-l/attachments/20130427/5a41485f/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Mail Attachment.png
Type: image/png
Size: 1136 bytes
Desc: not available
URL: <http://listserv.linguistlist.org/pipermail/sw-l/attachments/20130427/5a41485f/attachment.png>
More information about the Sw-l
mailing list