-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
429 lines (425 loc) · 25.3 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
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Isinglass</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link href="main.css" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Lato&family=Libre+Baskerville:ital@0;1&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div id="main-container">
<div id="intro-row" class="row">
<div class="filler"></div>
<div id="intro">
<p>This is an experiment in how to augment a text with annotations without cluttering it.</p>
<p>
Click anything you don't understand: if it has a note, it will show
up. You can also press <code>T</code> to toggle all the highlights.
</p>
<p>
<span style="background-color: #ffff0075">Yellow</span> highlights
are definitions.
<span style="background-color: #c070e075">Lavender</span> highlights
are references.
<span style="background-color: #00ffff75">Cyan</span> highlights are
other comments.
</p>
<p>
Heavily inspired by
<a href="http://www.powermobydick.com/" target="_blank"
>Power Moby-Dick</a
>. Text taken from
<a
href="https://standardebooks.org/ebooks/herman-melville/moby-dick"
target="_blank"
>Standard Ebooks</a
>. Most definitions come from <a href="https://en.wiktionary.org/" target="_blank">Wiktionary</a>.
<div id="small-screen-container">
This doesn't really work on small screens yet. Soon! Maybe!
</div>
</p>
</div>
<div id="settings">
<div style="font-weight: bold">Settings</div>
<div>
<input type="checkbox" id="show-definitions" checked />
<label for="show-definitions">Show definitions</label>
</div>
<div>
<input type="checkbox" id="show-references" checked />
<label for="show-references">Show references</label>
</div>
<div>
<input type="checkbox" id="show-other-comments" />
<label for="show-other-comments">Show other comments</label>
</div>
</div>
</div>
<div id="text-row" class="row">
<div class="filler"></div>
<div id="text-container">
<h2>
Chapter I<br /><span data-ig-kind="dict" data-ig-key="loom"
>Loomings</span
>
</h2>
<p>
<span data-ig-kind="comment" data-ig-key="call-me-ishmael"
>Call me Ishmael</span
>. Some years ago—never mind how long precisely—having little or
no money in my purse, and nothing particular to interest me
<span data-ig-kind="dict" data-ig-key="on-shore">on shore</span>, I
thought I would sail about a little and see the watery part of the
world. It is a way I have of driving off the
<span data-ig-kind="dict" data-ig-key="spleen">spleen</span> and
regulating the circulation. Whenever I find myself growing <span data-ig-kind="dict" data-ig-key="grim">grim</span>
about the mouth; whenever it is a <span data-ig-kind="dict" data-ig-key="damp">damp</span>,
<span data-ig-kind="dict" data-ig-key="drizzle">drizzly</span> November in my soul;
whenever I find myself involuntarily pausing before coffin
warehouses, and <span data-ig-kind="dict" data-ig-key="bring-up-the-rear">bringing up the rear</span> of every funeral I meet; and
especially whenever my
<span data-ig-kind="dict" data-ig-key="hypo">hypos</span> get such
an upper hand of me, that it requires a strong moral principle to
prevent me from deliberately stepping into the street, and
methodically knocking people’s hats off—then, I account it high
time to get to sea as soon as I can. This is my substitute for
<span data-ig-kind="comment" data-ig-key="pistol-and-ball">pistol and <span data-ig-kind="dict" data-ig-key="ball">ball</span></span
>. With a philosophical <span data-ig-kind="dict" data-ig-key="flourish">flourish</span>
<span data-ig-kind="reference" data-ig-key="cato">Cato</span> throws
himself upon his sword; I quietly take to the ship. There is nothing
surprising in this. If they but knew it, almost all men in their
degree, some time or other, cherish very nearly the same feelings
towards the ocean with me.
</p>
<p>
There now is your insular
<span data-ig-kind="dict" data-ig-key="city-of-the-manhattoes"
>city of the Manhattoes</span
>, belted round by <span data-ig-kind="dict" data-ig-key="wharf">wharves</span> as Indian isles by coral reefs—commerce
surrounds it with her
<span data-ig-kind="dict" data-ig-key="surf">surf</span>. Right and
left, the streets take you
<span data-ig-kind="dict" data-ig-key="waterward">waterward</span>.
Its extreme downtown is the
<span data-ig-kind="comment" data-ig-key="battery">battery</span>,
where that noble <span data-ig-kind="dict" data-ig-key="mole">mole</span> is washed by waves, and cooled by breezes,
which a few hours previous were out of sight of land. Look at the
crowds of water-gazers there.
</p>
<p>
<span data-ig-kind="dict" data-ig-key="circumambulate"
>Circumambulate</span
>
the city of a dreamy
<span data-ig-kind="dict" data-ig-key="sabbath">Sabbath</span>
afternoon. Go from <span data-ig-kind="reference" data-ig-key="corlears-coenties-whitehall">Corlears Hook to Coenties Slip, and from thence,
by Whitehall, northward</span>. What do you see?—Posted like silent
sentinels all around the town, stand thousands upon thousands of
mortal men fixed in ocean
<span data-ig-kind="dict" data-ig-key="reverie">reveries</span>.
Some leaning against the
<span data-ig-kind="dict" data-ig-key="spile">spiles</span>; some
seated upon the
<span data-ig-kind="dict" data-ig-key="pier-head">pier-heads</span>;
some looking over the
<span data-ig-kind="dict" data-ig-key="bulwark">bulwarks</span> of
ships from China; some high
<span data-ig-kind="dict" data-ig-key="aloft">aloft</span> in the
<span data-ig-kind="dict" data-ig-key="rigging">rigging</span>, as
if striving to get a still better seaward
<span data-ig-kind="dict" data-ig-key="peep">peep</span>. But these
are all landsmen; of week days
<span data-ig-kind="dict" data-ig-key="pent-up">pent up</span> in
<span data-ig-kind="dict" data-ig-key="lath-and-plaster"
>lath and plaster</span
>—tied to counters, nailed to benches, clinched to desks.
How then is this? Are the green fields gone? What do they
here?
</p>
<p>
But look! here come more crowds, pacing straight for the water, and
seemingly bound for a dive. Strange! Nothing will content them but
the extremest limit of the land;
<span data-ig-kind="dict" data-ig-key="loiter">loitering</span>
under the shady
<span data-ig-kind="dict" data-ig-key="lee">lee</span> of
<span data-ig-kind="dict" data-ig-key="yonder-adjective"
>yonder</span
>
warehouses will not <span data-ig-kind="dict" data-ig-key="suffice">suffice</span>. No. They must get just as
<span data-ig-kind="dict" data-ig-key="nigh">nigh</span> the water
as they possibly can without falling in. And there they stand—miles
of them—leagues. Inlanders all, they come from lanes and alleys,
streets and avenues—north, east, south, and west. Yet here they all
unite.
Tell me, does the magnetic virtue of the needles of the compasses
of all those ships attract them <span data-ig-kind="dict" data-ig-key="thither">thither</span
>?
</p>
<p>
Once more. Say you are in the country; in some high land of lakes.
Take almost any path you please, and ten to one it carries you down
in a
<span data-ig-kind="dict" data-ig-key="dale">dale</span>, and leaves
you there by a pool in the stream. There is magic in it. Let the
most absentminded of men be <span data-ig-kind="dict" data-ig-key="plunge">plunged</span> in his deepest <span data-ig-kind="dict" data-ig-key="reverie">reveries</span>—stand
that man on his legs, set his feet a-going, and he will infallibly
lead you to water, if water there be in all that region. Should you
ever be
<span data-ig-kind="dict" data-ig-key="athirst">athirst</span> in
the great American desert, try this experiment, if your caravan
happen to be supplied with a metaphysical professor. Yes, as
everyone knows, meditation and water are wedded forever.
</p>
<p>
But here is an artist. He desires to paint you the dreamiest,
shadiest, quietest, most enchanting bit of romantic landscape in all
the valley of the
<span data-ig-kind="dict" data-ig-key="saco">Saco</span>. What is
the chief element he employs? There stand his trees, each with a
hollow trunk, as if a <span data-ig-kind="dict" data-ig-key="hermit">hermit</span> and a crucifix were within; and here
sleeps his <span data-ig-kind="dict" data-ig-key="meadow">meadow</span>, and there sleep his cattle; and up from
<span data-ig-kind="dict" data-ig-key="yonder-adjective"
>yonder</span
>
cottage goes a sleepy smoke. Deep into distant woodlands <span data-ig-kind="dict" data-ig-key="wind-verb-travel">winds</span> a
<span data-ig-kind="dict" data-ig-key="maze">mazy</span> way, reaching to overlapping <span data-ig-kind="dict" data-ig-key="spur">spurs</span> of mountains bathed in their
hillside blue. But though the picture lies thus tranced, and though
this pine-tree shakes down its sighs like leaves upon this
shepherd’s head, yet all were vain, unless the shepherd’s eye were
fixed upon the magic stream before him. Go visit <span data-ig-kind="comment" data-ig-key="the-prairies-in-june">the Prairies in
June</span>, when for scores on scores of miles you <span data-ig-kind="dict" data-ig-key="wade">wade</span> knee-deep among
<span data-ig-kind="dict" data-ig-key="tiger-lily">Tiger-lilies</span>—what is the one charm
<span data-ig-kind="dict" data-ig-key="want">wanting</span
>?—Water—there is not a drop of water there! Were
<span data-ig-kind="reference" data-ig-key="niagara">Niagara</span>
but a cataract of sand, would you travel your thousand miles to see
it? Why did
<span data-ig-kind="reference" data-ig-key="poor-poet-of-tennessee"
>the poor poet of Tennessee</span
>, upon suddenly receiving two handfuls of silver, deliberate
whether to buy him a coat, which he sadly needed, or invest his
money in a pedestrian trip to Rockaway Beach? Why is almost every
robust healthy boy with a robust healthy soul in him, at some time
or other crazy to go to sea? Why upon your first voyage as a
passenger, did you yourself feel such a mystical vibration, when
first told that you and your ship were now out of sight of land? Why
did <span data-ig-kind="comment" data-ig-key="persians-sea-holy">the old Persians hold the sea holy</span>? Why did the Greeks give it
<span
data-ig-kind="reference"
data-ig-key="a-separate-deity-for-the-sea"
>a separate deity</span>, and own brother of
<span data-ig-kind="reference" data-ig-key="jove">Jove</span>?
Surely all this is not without meaning. And still deeper the meaning
of that story of
<span data-ig-kind="reference" data-ig-key="narcissus"
>Narcissus</span
>, who because he could not grasp the tormenting, mild image he saw
in the fountain, <span data-ig-kind="dict" data-ig-key="plunge">plunged</span> into it and was drowned. But that same
image, we ourselves see in all rivers and oceans. It is the image of
the ungraspable phantom of life; and this is the key to it all.
</p>
<p>
Now, when I say that I am in the habit of going to sea whenever I
begin to grow <span data-ig-kind="dict" data-ig-key="hazy">hazy</span> about the eyes, and begin to be over conscious of
my lungs, I do not mean to have it inferred that I ever go to sea as
a passenger. For to go as a passenger you
<span data-ig-kind="dict" data-ig-key="must-needs">must needs</span>
have a purse, and a purse is but a
<span data-ig-kind="dict" data-ig-key="rag">rag</span> unless you
have something in it. Besides, passengers get seasick—grow
<span data-ig-kind="dict" data-ig-key="quarrelsome">quarrelsome</span>—don’t sleep of nights—do not enjoy themselves much, as
a general thing;—no, I never go as a passenger; nor, though I am
something of a
<span data-ig-kind="dict" data-ig-key="salt">salt</span>, do I ever
go to sea as a Commodore, or a Captain, or a Cook. I abandon the
glory and distinction of such offices to those who like them. For my
part, I abominate all honorable respectable <span data-ig-kind="dict" data-ig-key="toil">toils</span>,
<span data-ig-kind="dict" data-ig-key="trial">trials</span>, and
<span data-ig-kind="dict" data-ig-key="tribulation">tribulations</span> of every kind whatsoever. It is quite as much as I can
do to take care of myself, without taking care of ships, <span data-ig-kind="dict" data-ig-key="barque">barques</span>,
<span data-ig-kind="dict" data-ig-key="brig">brigs</span>,
<span data-ig-kind="dict" data-ig-key="schooner">schooners</span>, and whatnot. And as for going as cook—though I
confess there is considerable glory in that, a cook being a sort of
officer on shipboard—yet, somehow, I never fancied <span data-ig-kind="dict" data-ig-key="broil">broiling</span>
<span data-ig-kind="dict" data-ig-key="fowl">fowls</span>;—though
once broiled, judiciously buttered, and judgmatically salted and
peppered, there is no one who will speak more respectfully, not to
say reverentially, of a broiled fowl than I will. It is out of the
idolatrous <span data-ig-kind="dict" data-ig-key="doting">dotings</span> of the old Egyptians upon broiled
<span data-ig-kind="dict" data-ig-key="ibis">ibis</span> and roasted
<span data-ig-kind="dict" data-ig-key="river-horse"
>river horse</span
>, that you see the mummies of those creatures in their huge
bake-houses the pyramids.
</p>
<p>
No, when I go to sea, I go as a simple sailor, right before the
mast, plumb down into the forecastle,
<span data-ig-kind="dict" data-ig-key="aloft">aloft</span> there to
the royal masthead. True, they rather order me about some, and make
me jump from <span data-ig-kind="dict" data-ig-key="spar">spar</span> to spar, like a grasshopper in a May meadow. And
at first, this sort of thing is unpleasant enough. It touches one’s
sense of honor, particularly if you come of an old established
family in the land, the
<span data-ig-kind="reference" data-ig-key="van-rensselaers"
>Van Rensselaers, or Randolphs, or Hardicanutes</span
>. And more than all, if just previous to putting your hand into the
<span data-ig-kind="dict" data-ig-key="tar">tar-pot</span>, you have
been lording it as a country schoolmaster, making the tallest boys
stand in awe of you. The transition is a keen one, I assure you,
from a schoolmaster to a sailor, and requires a strong decoction of
<span data-ig-kind="reference" data-ig-key="seneca-and-the-stoics"
>Seneca and the Stoics</span
>
to enable you to <span data-ig-kind="dict" data-ig-key="grin">grin</span> and bear it. But even this wears off in time.
</p>
<p>
What of it, if some old
<span data-ig-kind="dict" data-ig-key="hunks">hunks</span> of a
sea-captain orders me to get a broom and sweep down the decks? What
does that indignity amount to, weighed, I mean, in the scales of the
New Testament? Do you think the archangel Gabriel thinks anything
the less of me, because I promptly and respectfully obey that old
hunks in that
particular instance? Who ain’t a slave? Tell me that. Well, then,
however the old sea-captains may order me about—however they may
<span data-ig-kind="dict" data-ig-key="thump">thump</span> and punch me about, I have the satisfaction of knowing that it
is all right; that everybody else is one way or other served in much
the same way—either in a physical or metaphysical point of view,
that is; and so the universal thump is passed round, and all hands
should rub each other’s shoulder-blades, and be content.
</p>
<p>
Again, I always go to sea as a sailor, because they make a point of
paying me for my trouble, whereas they never pay passengers a single
penny that I ever heard of. On the contrary, passengers themselves
must pay. And there is all the difference in the world between
paying and being paid. The act of paying is perhaps the most
uncomfortable infliction that
<span data-ig-kind="reference" data-ig-key="orchard-thieves"
>the two orchard thieves</span
>
entailed upon us. But <em>being paid</em>—what will compare with
it? The urbane activity with which a man receives money is really
marvellous, considering that we so earnestly believe money to be the
root of all earthly ills, and that on no account can a monied man
enter heaven. Ah! how cheerfully we consign ourselves to perdition!
</p>
<p>
Finally, I always go to sea as a sailor, because of the wholesome
exercise and pure air of the forecastle deck. For as in this world,
head winds are far more prevalent than winds from
<span data-ig-kind="dict" data-ig-key="astern">astern</span> (that
is, if you never violate
<span data-ig-kind="reference" data-ig-key="pythagorean-maxim"
>the Pythagorean maxim</span
>), so for the most part the Commodore on the quarterdeck gets his
atmosphere at second hand from the sailors on the forecastle. He
thinks he breathes it first; but not so. In much the same way do the
<span data-ig-kind="dict" data-ig-key="commonalty">commonalty</span> lead their leaders in many other things, at the same time
that the leaders little suspect it. But <span data-ig-kind="dict" data-ig-key="wherefore">wherefore</span> it was that after
having repeatedly smelt the sea as a merchant sailor, I should now
take it into my head to go on a whaling voyage; this the invisible
police officer of the Fates, who has the constant surveillance of
me, and secretly <span data-ig-kind="dict" data-ig-key="dog-verb-follow">dogs</span> me, and influences me in some unaccountable
way—he can better answer than anyone else. And, doubtless, my going
on this whaling voyage, formed part of the grand programme of
Providence that was drawn up a long time ago. It came in as a sort
of brief interlude and solo between more extensive performances. I
take it that this part of the <span data-ig-kind="dict" data-ig-key="bill-poster">bill</span> must have run something like
this:
</p>
<blockquote>
<p>
<em
>“Grand Contested Election for the Presidency of the United
States.</em
>
</p>
<p style="font-variant: small-caps; font-size: small">
“Whaling voyage by one Ishmael.
</p>
<p style="font-variant: small-caps; font-size: large">
“Bloody battle in Afghanistan.”
</p>
</blockquote>
<p>
Though I cannot tell why it was exactly that those stage managers,
the Fates, put me down for this <span data-ig-kind="dict" data-ig-key="shabby">shabby</span>
<span data-ig-kind="dict" data-ig-key="part">part</span> of a
whaling voyage, when others were set down for magnificent parts in
high tragedies, and short and easy parts in genteel comedies, and
jolly parts in farces—though I cannot tell why this was exactly;
yet, now that I recall all the circumstances, I think I can see a
little into the springs and motives which being cunningly presented
to me under various disguises, induced me to set about performing
the part I did, besides <span data-ig-kind="dict" data-ig-key="cajole">cajoling</span> me into the delusion that it was a
choice resulting from my own unbiased free-will and discriminating
judgment.
</p>
<p>
Chief among these motives was the overwhelming idea of the great
whale himself. Such a portentous and mysterious monster roused all
my curiosity. Then the wild and distant seas where he rolled his
island <span data-ig-kind="dict" data-ig-key="bulk">bulk</span>; the undeliverable, nameless <span data-ig-kind="dict" data-ig-key="peril">perils</span> of the whale; these,
with all the attending marvels of a thousand
<span data-ig-kind="dict" data-ig-key="patagonia">Patagonian</span>
sights and sounds, helped to sway me to my wish. With other men,
perhaps, such things would not have been <span data-ig-kind="dict" data-ig-key="inducement">inducements</span>; but as for me,
I am tormented with an everlasting <span data-ig-kind="dict" data-ig-key="itch">itch</span> for things remote. I love to
sail forbidden seas, and land on barbarous coasts. Not ignoring what
is good, I am quick to perceive a horror, and could still be social
with it—would they let me—since it is but well to be on friendly
terms with all the inmates of the place one <span data-ig-kind="dict" data-ig-key="to-lodge">lodges</span> in.
</p>
<p>
By reason of these things, then, the whaling voyage was welcome; the
great floodgates of the wonder-world swung open, and in the wild
conceits that swayed me to my purpose,
<span data-ig-kind="reference" data-ig-key="two-and-two"
>two and two</span
>
there floated into my inmost soul, endless processions of the whale,
and, mid most of them all,
<span
data-ig-kind="reference"
data-ig-key="one-grand-hooded-phantom"
>one grand hooded phantom, like a snow hill in the air</span
>.
</p>
</div>
<div id="notes-container">
<div id="ig-note" class="hidden"></div>
</div>
</div>
<div id="bottom-row" class="row">
<div class="filler"></div>
<div id="feedback">
<div>Feedback? Comments? <a href="mailto:victorio.franco@gmail.com">Reach out</a>.</div>
</div>
<div class="filler"></div>
</div>
</div>
<script src="main.js"></script>
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-7N26802D9C"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-7N26802D9C");
</script>
</body>
</html>