1<!DOCTYPE html>
2<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
3<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
4<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
5<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
6    <head>
7        <meta charset="utf-8">
8        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9        <title>Text Alignment Test</title>
10
11        <script src="../bower_components/jquery/dist/jquery.min.js"></script>
12        <script src="../bower_components/lodash/dist/lodash.min.js"></script>
13
14        <script src="../bower_components/snap.svg/dist/snap.svg.js"></script>
15        <script src="../bower_components/bower-webfontloader/webfont.js"></script>
16
17        <script type="text/javascript">
18
19            $(document).ready(function(){
20                var paper = Snap("#svg");
21
22                var RECT = {
23                    'stroke': '#000000',
24                    'stroke-width': 1,
25                    'fill': "none"
26                };
27
28                function draw_cross(x, y) {
29                    var SIZE = 25;
30                    paper.line(x, y - SIZE, x, y + SIZE).attr(RECT);
31                    paper.line(x - SIZE, y, x + SIZE, y).attr(RECT);
32                    draw_coord(x, y);
33
34                }
35
36                function draw_coord(x, y) {
37                    var p = paper.text(x, y, x.toFixed(0) + "," + y.toFixed(0));
38                    p.attr({'font-size': 10});
39                }
40
41                function draw_bb(bb) {
42                    paper.rect(bb.x, bb.y, bb.width, bb.height).attr(RECT);
43
44                    draw_coord(bb.x, bb.y);
45                    draw_coord(bb.x + bb.width, bb.y);
46                    draw_coord(bb.x, bb.y + bb.height);
47                    draw_coord(bb.x + bb.width, bb.y + bb.height);
48                }
49
50                function draw_text(x, y, text, font) {
51                    // TODO We can share code between this and draw_text
52                    text = _.invoke(text.split("\n"), 'trim');
53                    var t = paper.text(x, y, text);
54                    t.attr(font || {});
55
56                    // Every row after the first, set tspan to be 1.2em below the previous line
57                    t.selectAll("tspan:nth-child(n+2)").attr({
58                        dy: "1em",
59                        x: x
60                    });
61
62                    return t;
63                }
64
65                var font = {'font-size': '64px'};
66
67                //////////
68                draw_cross(100, 100);
69                var p = paper.text(100, 100, "Text\n100,100\nThird");
70                p.attr(font);
71                draw_bb( p.getBBox() );
72
73                console.log(p.getBBox());
74
75                //////////
76                draw_cross(100, 200);
77                var p = draw_text(100, 200, "Text\n100,100\nThird", font);
78                draw_bb( p.getBBox() );
79
80                console.log(p.getBBox());
81                console.log(p.getBBox().height / 3);
82
83                /*
84                var font = paper.getFont('daniel')
85                var p = paper.print(100, 300, "Print\n100,300\nThird", font, 32, 'baseline');
86
87                draw_bb( p.getBBox() );
88
89                //////////
90                draw_cross(100, 500);
91                var font = paper.getFont('daniel')
92                var p = paper.print_center(100, 500, "MyPrint\n100,500\nThird", font, 32);
93
94                draw_bb( p.getBBox() );
95                */
96            });
97        </script>
98    </head>
99    <body>
100        <svg id="svg" width="800" height="600"></svg>
101
102    </body>
103