-
Notifications
You must be signed in to change notification settings - Fork 74
/
Copy pathindex.html
265 lines (221 loc) · 17.1 KB
/
index.html
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flatland</title>
<link rel="stylesheet" href="flatland-single.css"/>
</head>
<body>
<div id="info">
<h1>TeX Hyphenation & Justification on the Web</h1>
<p>This text has been set using <a href="http://www.bramstein.com/projects/typeset/">Typeset</a> as an implementation of the Knuth and Plass line breaking algorithm. Uses <a href="https://github.com/bramstein/Hypher/">Hypher</a> for hyphenation. Text and images are from <a href="http://books.google.com/books?vid=0PO8Zb8GuSvhGZx2&id=u8HOxy7lQYUC&printsec=titlepage">Edwin Abbott's Flatland</a>.</p>
</div>
<div id="typeset">
<div class="section">
<h1>Flatland.</h1>
<hr/>
<h3>PART I.</h3>
<h2>THIS WORLD.</h2>
<h3>§ I. — <span>Of the Nature of Flatland.</span></h3>
<p>I call our world Flatland, not because we call it so, but to make its nature clearer to you, my happy readers, who are privileged to live in Space.</p>
<p>Imagine a vast sheet of paper on which straight Lines, Triangles, Squares, Pentagons, Hexagons, and other figures, instead of remaining fixed in their places, move freely about, on or in the surface, but without the power of rising above or sinking below it, very much like shadows — only hard and with luminous edges — and you will then have a pretty correct notion of my country and countrymen. Alas, a few years ago, I should have said "my universe;" but now my mind has been opened to higher views of things.</p>
<p>In such a country, you will perceive at once that it is impossible that there should be anything of what you call a "solid" kind; but I dare say you will suppose that we could at least distinguish by sight the Triangles, Squares, and other figures, moving about as I have described them. On the contrary, we could see nothing of the kind, not at least so as to distinguish one figure from another. Nothing was visible, nor could be visible, to us, except Straight Lines; and the necessity of this I will speedily demonstrate.</p>
<p>Place a penny on the middle of one of your tables in Space; and leaning over it, look down upon it. It will appear a circle.</p>
<p>But now, drawing back to the edge of the table, gradually lower your eye (thus bringing yourself more and more into the condition of the inhabitants of Flatland), and you will find the penny becoming more and more oval to your view; and at last when you have placed your eye exactly on the edge of the table (so that you are, as it were, actually a Flatlander) the penny will then have ceased to appear oval at all, and will have become, so far as you can see, a straight line.</p>
<p>The same thing would happen if you were to treat in the same way a Triangle, or Square, or any other figure cut out of pasteboard. As soon as you look at it with your eye on the edge on the table, you will find that it ceases to appear to you a figure, and that it becomes in appearance a straight line. Take for example an equilateral Triangle — who represents with us a Tradesman of the respectable class. Fig. 1 represents the Tradesman as you would see him while you were bending over him from above; figs. 2 and 3 represent the Tradesman, as you would see him if your eye were close to the level, or all but on the level of the table; and if your eye were quite on the level of the table (and that is how we see him in Flatland) you would see nothing but a straight line.</p>
<img src="Figure-1.png" alt="views of a triangle"/>
<p>When I was in Spaceland I heard that your sailors have very similar experiences while they traverse your seas and discern some distant island or coast lying on the horizon. The far-off land may have bays, forelands, angles in and out to any number and extent; yet at a distance you see none of these (unless indeed your sun shines bright upon them revealing the projections and retirements by means of light and shade), nothing but a grey unbroken line upon the water.</p>
<p>Well, that is just what we see when one of our triangular or other acquaintances comes toward us in Flatland. As there is neither sun with us, nor any light of such a kind as to make shadows, we have none of the helps to the sight that you have in Spaceland. If our friend comes closer to us we see his line becomes larger; if he leaves us it becomes smaller: but still he looks like a straight line; be he a Triangle, Square, Pentagon, Hexagon, Circle, what you will — a straight Line he looks and nothing else. You may perhaps ask how under these disadvantageous circumstances we are able to distinguish our friends from one another: but the answer to this very natural question will be more fitly and easily given when I come to describe the inhabitants of Flatland. For the present let me defer this subject, and say a word or two about the climate and houses in our country.</p>
</div>
<div class="section">
<h3>§ 2. — <span>Of the Climate and Houses in Flatland</span></h3>
<p>As with you, so also with us, there are four points of the compass North, South, East, and West.</p>
<p>There being no sun nor other heavenly bodies, it is impossible for us to determine the North in the usual way; but we have a method of our own. By a Law of Nature with us, there is a constant attraction to the South; and, although in temperate climates this is very slight — so that even a Woman in reasonable health can journey several furlongs northward without much difficulty — yet the hampering effect of the southward attraction is quite sufficient to serve as a compass in most parts of our earth. Moreover, the rain (which falls at stated intervals) coming always from the North, is an additional assistance; and in the towns we have the guidance of the houses, which of course have their side-walls running for The most part North and South, so that the roofs may keep off the rain from the North. In the country, where there are no houses, the trunks of the trees serve as some sort of guide. Altogether, we have not so much difficulty as might be expected in determining our bearings.</p>
<p>Yet in our more temperate regions, in which the southward attraction is hardly felt, walking sometimes in a perfectly desolate plain where there have been no houses nor trees to guide me, I have been occasionally compelled to remain stationary for hours together, waiting till the rain came before continuing my journey. On the weak and aged, and especially on delicate Females, the force of attraction tells much more heavily than on the robust of the Male Sex, so that it is a point of breeding, if you meet a Lady in the street, always to give her the North side of the way — by no means an easy thing to do always at short notice when you are in rude health and in a climate where it is difficult to tell your North from your South.</p>
<p>Windows there are none in our houses: for the light comes to us alike in our homes and out of them, by day and by night, equally at all times and in all places, whence we know not. It was in old days, with our learned men, an interesting and oft-investigated question, "What is the origin of light?" and the solution of it has been repeatedly attempted, with no other result than to crowd our lunatic asylums with the would-be solvers. Hence, after fruitless attempts to suppress such investigations indirectly by making them liable to a heavy tax, the Legislature, in comparatively recent times, absolutely prohibited them. I — alas; I alone in Flatland — know now only too well the true solution of this mysterious problem; but my knowledge cannot be made intelligible to a single one of my countrymen; and I am mocked at — I, the sole possessor of the truths of Space and of the theory of the introduction of Light from the world of three Dimensions — as if I were the maddest of the mad! But a truce to these painful digressions: let me return to our houses.</p>
<p>The most common form for the construction of a house is five-sided or pentagonal, as in the annexed figure. The two Northern sides RO, OF, constitute the roof, and for the most part have no doors; on the East is a small door for the Women; on the West a much larger one for the Men; the South side or floor is usually doorless.</p>
<img src="Figure-2.png" alt="Pentagonal house"/>
<p>Square and triangular houses are not allowed, and for this reason. The angles of a Square (and still more those of an equilateral Triangle,) being much more pointed than those of a Pentagon, and the lines of inanimate objects (such as houses) being dimmer than the lines of Men and Women, it follows that there is no little danger lest the points of a square or triangular house residence might do serious injury to an inconsiderate or perhaps absent-minded traveller suddenly therefore, running against them: and as early as the eleventh century of our era, triangular houses were universally forbidden by Law, the only exceptions being fortifications, powder-magazines, barracks, and other state buildings, which it is not desirable that the general public should approach without circumspection.</p>
<p>At this period, square houses were still everywhere permitted, though discouraged by a special tax. But, about three centuries afterwards, the Law decided that in all towns containing a population above ten thousand, the angle of a Pentagon was the smallest house-angle that could be allowed consistently with the public safety. The good sense of the community has seconded the efforts of the Legislature; and now, even in the country, the pentagonal construction has superseded every other. It is only now and then in some very remote and backward agricultural district that an antiquarian may still discover a square house.</p>
</div>
</div>
<script type="text/javascript" src="../../src/linked-list.js"></script>
<script type="text/javascript" src="../../src/linebreak.js"></script>
<script type="text/javascript" src="../../lib/hypher.js"></script>
<script type="text/javascript" src="../../lib/en-us.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function ($) {
var lineLength = 0,
lineHeight = 0,
lineLengths = [],
tmp, ruler,
h = new Hypher(Hypher.en),
cache = {};
var linebreak = Typeset.linebreak;
function measureString(str) {
if (!cache[str]) {
ruler[0].firstChild.nodeValue = str;
cache[str] = ruler[0].offsetWidth;
}
return cache[str];
}
lineLength = $('#typeset').width();
ruler = $('<div class="ruler"> </div>').css({
visibility: 'hidden',
position: 'absolute',
top: '-8000px',
width: 'auto',
display: 'inline',
left: '-8000px'
});
$('body').append(ruler);
var space = {
width: 0,
stretch: 0,
shrink: 0
},
hyphenWidth = measureString('-'),
hyphenPenalty = 100;
// Calculate the space widths based on our font preferences
space.width = ruler.html(' ').width();
space.stretch = (space.width * 3) / 6;
space.shrink = (space.width * 3) / 9;
lineHeight = parseFloat(ruler.html('Hello World').css('lineHeight'));
$('#typeset .section').each(function () {
$(this).find('p, img').each(function (index, element) {
var paragraph,
nodes = [],
breaks = [],
output = [],
lines = [],
words,
carryOver = null,
i, point, r, lineStart,
iterator,
token, hyphenated;
if (element.nodeName.toUpperCase() === 'P') {
paragraph = $(element);
if (index !== 0) {
nodes.push(linebreak.box(30, ''));
}
words = paragraph.text().split(/\s/);
words.forEach(function (word, index, array) {
var hyphenated = [];
if (word.length > 6) {
hyphenated = h.hyphenate(word, 'en');
}
if (hyphenated.length > 1) {
hyphenated.forEach(function (part, partIndex, partArray) {
nodes.push(linebreak.box(measureString(part), part));
if (partIndex !== partArray.length - 1) {
nodes.push(linebreak.penalty(hyphenWidth, hyphenPenalty, 1));
}
});
} else {
nodes.push(linebreak.box(measureString(word), word));
}
if (index === array.length - 1) {
nodes.push(linebreak.glue(0, linebreak.infinity, 0));
nodes.push(linebreak.penalty(0, -linebreak.infinity, 1));
} else {
nodes.push(linebreak.glue(space.width, space.stretch, space.shrink));
}
});
// Perform the line breaking
breaks = linebreak(nodes, lineLengths.length !== 0 ? lineLengths : [lineLength], {tolerance: 1});
// Try again with a higher tolerance if the line breaking failed.
if (breaks.length === 0) {
breaks = linebreak(nodes, lineLengths.length !== 0 ? lineLengths : [lineLength], {tolerance: 2});
// And again
if (breaks.length === 0) {
breaks = linebreak(nodes, lineLengths.length !== 0 ? lineLengths : [lineLength], {tolerance: 3});
}
}
// Build lines from the line breaks found.
for (i = 1; i < breaks.length; i += 1) {
point = breaks[i].position,
r = breaks[i].ratio;
for (var j = lineStart; j < nodes.length; j += 1) {
// After a line break, we skip any nodes unless they are boxes or forced breaks.
if (nodes[j].type === 'box' || (nodes[j].type === 'penalty' && nodes[j].penalty === -linebreak.infinity)) {
lineStart = j;
break;
}
}
lines.push({ratio: r, nodes: nodes.slice(lineStart, point + 1), position: point});
lineStart = point;
}
lines.forEach(function (line, lineIndex, lineArray) {
var indent = false,
spaces = 0,
totalAdjustment = 0,
wordSpace = line.ratio * (line.ratio < 0 ? space.shrink : space.stretch),
integerWordSpace = Math.round(wordSpace),
adjustment = wordSpace - integerWordSpace,
integerAdjustment = adjustment < 0 ? Math.floor(adjustment) : Math.ceil(adjustment),
tmp = [];
// Iterate over the nodes in each line and build a temporary array containing just words, spaces, and soft-hyphens.
line.nodes.forEach(function (n, index, array) {
// normal boxes
if (n.type === 'box' && n.value !== '') {
if (tmp.length !== 0 && tmp[tmp.length - 1] !== ' ') {
tmp[tmp.length - 1] += n.value;
} else {
tmp.push(n.value);
}
// empty boxes (indentation for example)
} else if (n.type === 'box' && n.value === '') {
output.push('<span style="margin-left: 30px;"></span>');
// glue inside a line
} else if (n.type === 'glue' && index !== array.length - 1) {
tmp.push(' ');
spaces += 1;
// glue at the end of a line
} else if (n.type === 'glue') {
tmp.push(' ');
// hyphenated word at the end of a line
} else if (n.type === 'penalty' && n.penalty === hyphenPenalty && index === array.length - 1) {
tmp.push('­');
// Remove trailing space at the end of a paragraph
} else if (n.type === 'penalty' && index === array.length - 1 && tmp[tmp.length - 1] === ' ') {
tmp.pop();
}
});
totalAdjustment = Math.round(adjustment * spaces);
// If the line ends at a soft hyphen we need to do something special as Webkit doesn't properly handle <span>hy­</span><span>phen</span>.
if (tmp[tmp.length - 1] === '­') {
if (totalAdjustment !== 0) {
output.push('<span style="word-spacing: ' + (integerWordSpace + integerAdjustment) + 'px;">' + (carryOver ? carryOver : '') + tmp.slice(0, Math.abs(totalAdjustment) * 2).join('') + '</span>');
output.push('<span style="word-spacing: ' + integerWordSpace + 'px;">' + tmp.slice((Math.abs(totalAdjustment) * 2), -2).join('') + '</span>');
} else {
output.push('<span style="word-spacing: ' + integerWordSpace + 'px;">' + (carryOver ? carryOver : '') + tmp.slice(0, -2).join('') + "</span>");
}
carryOver = tmp.slice(-2).join('');
} else {
if (totalAdjustment !== 0) {
output.push('<span style="word-spacing: ' + (integerWordSpace + integerAdjustment) + 'px;">' + (carryOver ? carryOver : '') + tmp.slice(0, Math.abs(totalAdjustment) * 2).join('') + '</span>');
output.push('<span style="word-spacing: ' + integerWordSpace + 'px;">' + tmp.slice(Math.abs(totalAdjustment) * 2).join('') + '</span>');
} else {
output.push('<span style="word-spacing: ' + integerWordSpace + 'px;">' + (carryOver ? carryOver : '') + tmp.join('') + "</span>");
}
carryOver = null;
}
});
paragraph.empty();
paragraph.append(output.join(''));
currentWidth = lineLength;
lineLengths = lineLengths.slice(lines.length);
} else {
tmp = (lineLength - $(element).outerWidth(true));
for (i = 0; i < Math.ceil($(element).outerHeight(true) / lineHeight); i += 1) {
lineLengths.push(tmp);
}
lineLengths.push(lineLength);
}
});
});
});
</script>
</body>
</html>