1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
// need max length of strings to determine offsets
function max_string_length(a)
{
max = -1;
for (i = 0; i < a.length; i++) {
l = a[i].length
if (l > max) max = l;
}
return max;
};
//TODO data
var fr = ["Michael", "geht", "davon", "aus", ",", "dass", "er", "im", "Haus", "bleibt", "."]
var en = ["Michael", "assumes", "that", "he", "will", "stay", "in", "the", "house", "."]
var a = {0:[0], 1:[1,2,3], 2:[5], 3:[6], 4:[9], 5:[9], 6:[7], 7:[7], 8:[8], 9:[10]};
//var fr = ['das', 'ist', 'ein', 'kleiner', 'test', '.'];
//var en = ['this', 'test', 'is', 'a', 'little', '.'];
//var a = {0:[0], 1:[4], 2:[1], 3:[2], 4:[3], 5:[5]};
//var fr = ['Versandhandel'];
//var en = ['mail', 'order'];
//var a = {0:[0], 1:[0]};
var alignment_matrix = function (en, fr, a)
{
// vars
top = true; // false = fr at the bottom (Arabic?)
max_en = max_string_length(en); // offset left
max_fr = max_string_length(fr); // offset top/bottom
char_size = 10; // font width
margin = -10; // margin text to matrix
block_width = 24; // height and width of a rect in the matrix
block_height = 24; // ^
x_offset = max_en*char_size; // offset left
if (top) {
y_offset = (max_fr*char_size+(-margin));
} else {
y_offset = 0;
}
paper_width = max_en*char_size + en.length*block_width + 4*block_width; //FIXME +4*block_width ?
paper_height = max_fr*char_size + (-margin) + fr.length*block_height + 4*block_width; // ^
// collect rectangles for later manipulation
a_rect = []
var paper = Raphael("holder", paper_width, paper_height);
for (var row = 0; row < en.length; row += 1) {
// leftmost col: en
if (top) {
var t = paper.text(x_offset + margin, y_offset + row*block_height + block_height/2, en[row]);
} else {
var t = paper.text(x_offset + margin, row*block_height + block_height/2, en[row])
}
t.attr({'font-size': 12, 'font-family': 'Courier', 'text-anchor': 'end'});
a_rect.push([]);
for (var col = 0; col < fr.length; col += 1) {
var r = paper.rect(x_offset + block_width*col, y_offset + block_height*row, block_width, block_height);
r.attr({stroke:"black", fill:"white"});
a_rect[row].push(r);
r.node.onclick = function () { // something useful?
var this_rect = r;
return function () {
this_rect.attr({fill:"#aaa"});
}
}();
}
}
// top/bottom row: fr
x_start = block_height*en.length + (-margin);
for (i = 0; i < fr.length; i++) {
for (j = 0; j < fr[i].length; j++) {
if (top) {
y_start = max_fr*char_size;
var ch = paper.text(x_offset + i*block_width + block_width/4, y_start - j*6.5, fr[i][j]).rotate(270); // j*6.5 = letter spacing
} else {
var ch = paper.text(x_offset + i*block_width + block_width/2, x_start+ j*6.5, fr[i][j]).rotate(90);
}
ch.attr({'font-size': 12, 'font-family': 'Courier', 'text-anchor': 'start'})
}
}
// fill alignment rectangles
for (i = 0; i < en.length; i++) {
for (j = 0; j < a[i].length; j++) {
a_rect[i][a[i][j]].attr({fill:"#000"});
}
}
};
$(document).ready(function() {
$("#holder").fadeIn();
});
|
