1<html>
2    <head>
3        <title>Raphael Font Test</title>
4		<style type="text/css">
5            .container {
6                width: 1600px;
7                height: 700px;
8                border: 1px solid #aaa;
9            }
10
11	        @font-face {
12	            font-family: 'daniel';
13	            src: url('../fonts/daniel/danielbd.woff2') format('woff2'),
14	                 url('../fonts/daniel/danielbd.woff') format('woff'),
15	                 url('../fonts/daniel/danielbd.otf') format('opentype');
16	            font-weight: normal;
17	            font-style: normal;
18	        }
19
20        </style>
21
22        <script src="../bower_components/raphael/raphael.js"></script>
23	    <script src="../fonts/daniel/daniel_700.font.js"></script>
24
25        <script src="../bower_components/snap.svg/dist/snap.svg.js"></script>
26        <script src="../bower_components/bower-webfontloader/webfont.js"></script>
27
28        <script type="text/javascript">
29
30			/**
31			 * Prints, but aligns text in a similar way to text(...)
32			 */
33			Raphael.fn.print_center = function(x, y, string, font, size, letter_spacing) {
34				var path = this.print(x, y, string, font, size, 'baseline', letter_spacing);
35				var bb = path.getBBox();
36
37				// Translate the text so it's centered.
38				var dx = (x - bb.x) - bb.width / 2;
39				var dy = (y - bb.y) - bb.height / 2;
40
41				// Due to an issue in Raphael 2.1.0 (that seems to be fixed later)
42				// we remap the path itself, instead of using a transformation matrix
43				var m = new Raphael.matrix();
44				m.translate(dx, dy);
45				return path.attr('path', Raphael.mapPath(path.attr('path'), m));
46
47				// otherwise we would do this:
48				//return path.transform("t" + dx + "," + dy);
49			};
50
51			var font_obj;
52
53			function drawRaphaelChart(container, font_name) {
54	        	var cols = 32;
55	        	var x_spacing = 48;
56	        	var y_spacing = 84;
57	        	var y_gap = 38;
58
59				var font = {
60					'font-size': 32,
61					//'font-family': 'daniel'
62				};
63
64	        	var canvas = document.getElementById(container)
65	        	var paper = new Raphael(canvas);
66				font_obj = paper.getFont(font_name); // Store this outside our scope, to use the glyth names in the drawSnap...
67
68				/*
69				// Print all chars in range
70				for (var c = 32; c < 256; c++) {
71					var x = (c % cols) * x_spacing + x_spacing/2;
72					var y = Math.floor((c-32) / cols) * y_spacing + y_spacing/2;
73					var t = paper.text(x, y, String.fromCharCode(c));
74					t.attr(font);
75
76					paper.print_center(x, y + y_gap, String.fromCharCode(c), font_obj, font['font-size']);
77				}
78				*/
79
80				// Print all chars supported by font
81				keys = Object.keys(font_obj.glyphs).sort();
82				for (var i = 0; i < keys.length; i++) {
83					var c = keys[i];
84					var x = (i % cols) * x_spacing + x_spacing/2;
85					var y = Math.floor(i / cols) * y_spacing + y_spacing/2;
86
87					// Normal font
88					paper.text(x, y, c).attr(font);
89
90					// Hand drawn font
91					paper.print_center(x, y + y_gap, c, font_obj, font['font-size']);
92				}
93			}
94
95			function drawSnapChart(container, font_name) {
96	        	var cols = 32;
97	        	var x_spacing = 48;
98	        	var y_spacing = 84;
99	        	var y_gap = 38;
100
101				var font = {
102					'font-size': 32,
103				};
104
105				var font2 = {
106					'font-size': 32,
107					'font-family': font_name
108				};
109
110	        	var canvas = document.getElementById(container)
111	            var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
112	            canvas.appendChild(svg);
113
114	        	var paper = Snap(svg);
115	        	paper.addClass("container");
116
117				// Print all chars supported by font
118				keys = Object.keys(font_obj.glyphs).sort();
119				for (var i = 0; i < keys.length; i++) {
120					var c = keys[i];
121					var x = (i % cols) * x_spacing + x_spacing/2;
122					var y = Math.floor(i / cols) * y_spacing + y_spacing/2;
123
124					// Normal font
125					paper.text(x, y, c).attr(font);
126
127					// Hand drawn font
128					//paper.print_center(x, y + y_gap, c, font_obj, font['font-size']);
129					paper.text(x, y + y_gap, c).attr(font2);
130				}
131			}
132
133	        window.onload = function() {
134	        	drawRaphaelChart('raphael_container', 'daniel');
135				drawSnapChart('snap_container', 'daniel')
136	        }
137        </script>
138    </head>
139    <body>
140        <div id="raphael_container" class="container"></div>
141        <div id="snap_container" class="container"></div>
142    </body>
143</html>