-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
522 lines (472 loc) · 25.5 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
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
<!--biReader Parallel Reading System
Copyright (C) 2018 Carson Wilson
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.-->
<!doctype html>
<html class="no-js" lang="">
<!--Need to put this here because otherwise browser may fail and never reach this test due to CSS or other language exceptions: -->
<script>
var browserOK = true;
/* try {
new Function("(y => y)");
}
catch (err) {
browserOK = false;
console.log("Browser does not support arrows.")
}*/
try {
new Function("let y = 1; const m = 5");
}
catch (err) {
browserOK = false;
console.log("Browser does not support let and/or const.")
}
var d = document.documentElement.style
if (!(('flexWrap' in d) || ('WebkitFlexWrap' in d) || ('msFlexWrap' in d))) {
browserOK = false;
console.log("Browser does not support FlexBox.")
}
if (!browserOK) {
document.querySelector('html').innerHTML =
'<body style="margin: 20%; color: red; font-size: 2em; font-weight: bold; font-family: sans-serif">' +
'Sorry, biReader is not compatible with your browser. Please use a recent version of Chrome, Edge, Safari, or Firefox instead.' +
'</body>';
document.execCommand('Stop');
}
</script>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>biReader Parallel Reading System</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Chrome: allow "home screen" on tablet: -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="manifest" href="site.webmanifest">
<!--<link rel="apple-touch-icon" href="icon.png">-->
<!-- Place favicon.ico in the root directory -->
<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.css" rel="stylesheet"/>-->
<!--<link rel="stylesheet" type="text/css" href="css/ss-style.css"/>-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!--<link rel="stylesheet" href="css/andadaFont.css">-->
<!--<link rel="stylesheet" href="css/VollkornFont.css">-->
<link rel="stylesheet" href="css/merriweatherFont.css">
<link rel="stylesheet" href="css/fontawesome-all.css">
<link rel="stylesheet" href="css/jquery.selectBox.css" type="text/css"/>
<!--<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">-->
<!--<script src="js/syncscroll.js"></script>-->
</head>
<body>
<audio preload="auto" id="buttonClick">
<source src="audio/click1a.ogg" type="audio/ogg">
<source src="audio/click1a.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<!--biReader splash screen-->
<div id="biReaderSplash" class="md-modal md-effect-1">
<div class="md-content">
<img src="img/bireader2f.png" style="width: 40%;
max-width: 705px;min-width: 12rem;margin-left: 6%; margin-bottom:10px;">
<div class="md-scroll-box">
<h3>Welcome to the <a href="http://bireader.com">biReader</a> Parallel Reading System.</h3>
<h3><a href="#quickStart">Quick Start</a>
<a href="#features">Features</a>
<a href="#loading">Loading content</a>
<a href="#requirements">Requirements</a>
<a href="#inspiration">Inspiration</a>
</h3>
Designed to facilitate foreign language learning by comparative reading, biReader
allows you to compare <b>any</b> two texts in its synchronized side-by-side
display. Where supported, biReader will also <b>read texts aloud</b> in different
languages and <b>look up meanings of words</b> in your native language.
<h3><a name="quickStart">Quick Start:</a></h3>
Click <i title="Load files from online library"
class="helpIcon fas fa-cloud-download-alt"></i> and follow the prompts;
click <i title="Help"
class="helpIcon fas fa-question"></i> for help.
<h3><a name="features">Features:</a></h3>
<ul>
<li>Synchronized reading of left and right panes</li>
<li>Automatic vertical scaling of left and right panes</li>
<li>Click or tap a sentence to hear it read aloud</li>
<li>Click-and-drag over multiple sentences to hear them read aloud</li>
<li>Click-and-hold (tablet: long-tap) a word to hear it and see its definition</li>
<li>Adjustable font size, weight, and speaking speed</li>
</ul>
<h3><a name="loading">Loading content:</a></h3>
<ul>
<li>Download texts from cloud library</li>
<li>Open files from local storage</li>
<li>Drag-and-drop files, or</li>
<li>Paste text to right and/or left pane</li>
</ul>
<h3><a name="requirements">Requirements:</a></h3>
A recent release of Chrome, Firefox, Safari, or Edge running on:
<ul>
<li>Desktop (Windows, Mac, Linux)</li>
<li>Tablet (Android, iPad)</li>
<li>Phone (Android, iPhone)</li>
</ul>
<h3><a name="inspiration">Inspiration:</a></h3>
biReader was inspired by my experiences of reading of two languages in parallel
in magazines like <a href="https://france-amerique.com">France-Amerique</a> and
books like those published by the <a href="http://www.hup.harvard.edu/collection.php?cpk=1031#">
Loeb Classical Library</a>, in which the text of a piece in its original language
is juxtaposed with the same text in your native tongue. Many find this a practical means
of acquiring advanced understanding of foreign language syntax, usage, and vocabulary,
while at the same time enjoying the content of a piece.
<p>
However, when reading a printed parallel text I always wondered how the foreign language
would be pronounced. At first I set out to find a tablet-based parallel reader that
would pronounce a sentences or words on demand. I found a few promising systems, but they
had their shortcomings. Most only included texts from centuries past, and many did not
read texts aloud.
<p>
One major difficulty was that the tablet readers relied on "alignment:" their input
had to have each passage prematched with its corresponding sentence in the
other language. This would seem a simple task for automation, but in reality automation is
not fully possible because translators (rightly or wrongly) often do not translate a text
one sentence at a time.
<p>
Having struggled with this issue for several years, I realized that the printed texts
I enjoyed did not have sentence alignment yet I was still able to use them. So in
biReader I dispense with sentence alignment and rely instead on line spacing and
synchronized scrolling to display corresponding sections of two texts in parallel.
<p>
While at first this may seem like a step backwards, it actually encourages me to look
beyond words to sentences and paragraphs as elements of meaning. I find it gives me a
greater grasp of the translation than systems which spoon-feed me a sentence at a time.
<p>
It also allows a greater range of source material since texts do not need to be aligned
before use. Hence biReader allows users to select, drag-and-drop, or paste material of their
own choosing into its reading panes for immediate use.
<p>
If you find biReader enjoyable, or have suggestions for improvement,
let me know at <a href="mailto:info@code-read.com">info@code-read.com</a>.
<p>
biReader is currently an open source project, found at:
https://github.com/code-read/biReader.
</div>
<button id=noSplashButton class="myButton leftBottomButton">Do not show this again</button>
<i id="closeSplash" title="Close Splash Screen" class="closeIcon fas fa-window-close"></i>
</div>
</div>
<!-- CONTROL PANEL: -->
<div id="controlsBackground" class="md-modal md-effect-1">
<div class="md-content" style="font-family: sans-serif;">
<h3 style="text-align: center; background-color: lightsalmon; margin-top: 0px;
margin-bottom: 7px; border-radius: 4px 4px 0px 0px;">Controls</h3>
<div>
<label for="speakSpeed">Speaking rate:</label>
<span id="currentSpeakSpeed" class="rangeLabel"></span>
<input id="speakSpeed" class=lbSlider type="range" min="0.1" max="5" step="0.1">
</div>
<br>
<div>
<label for="textSize">Text size:</label>
<span id="currentTextSize" class="rangeLabel"></span>
<input id="textSize" class=lbSlider type="range" min="7" max="50" value="17" step="1">
</div>
<p id="sampleText" style="text-align:center; margin-top:0; display:inline-block;
background-color:#ffffeb; border:1px dotted lightslategrey;">Sample text</p>
<!--todo: change landscape button to a toggle here:-->
<div id="fullScreenControls">
<button class="myButton" onclick="launchFullscreen(document.documentElement);">
Go fullscreen landscape
</button>
<br><br>
<label for="FSPromptCB"><input id="FSPromptCB" type="checkbox"> Full screen landscape prompt at
startup</label>
<br><br>
</div>
<label for="boldCB"><input id="boldCB" type="checkbox" class="lbCheckbox"> Bold font</label>
<label for="splashCB"><input id="splashCB" type="checkbox" class="lbCheckbox"> Show splash screen at
startup</label>
<i id="closeControls" title="Apply Changes & Close Control Screen" class="closeIcon fas fa-window-close"></i>
</div>
</div>
<div id="fullScreenDialog" class="md-modal md-effect-1">
<div class="md-content">
For best performance with mobile devices, try full screen landscape mode:
<br>
<br>
<button class="myButton" onclick="launchFullscreen(document.documentElement);">
Go fullscreen landscape
</button>
<br>
<br>
<button class="myButton" id=noFullScreenButton>No thanks</button>
<button class="rightButton myButton" id=noFSpromptButton>Do not show this again</button>
</div>
</div>
<!--HELP SCREEN:-->
<div id="Help" class="md-modal md-effect-1">
<div class="md-content">
<img src="img/bireader2f.png" style="width: 40%;
max-width: 705px;min-width: 12rem;margin-left: 6%; margin-bottom:10px;">
<!--<div style="margin-left: 6%; margin-right: 6%; margin-top: 2%; overflow: auto; height: 60vh">-->
<div class="md-scroll-box">
<h1>biReader Help</h1>
<h3><a href="#usage">Usage</a>
<a href="#controls">Controls</a>
<a href="#hints">Hints</a>
<a href="#problems">Problems</a>
</h3>
<h3><a name="usage">Usage</a></h3>
<ul>
<li>Load two corresponding texts to the left and right panels by:
<ul>
<li>Using biReader's online library of parallel texts
(<i title="Load files from online library"
class="helpIcon fas fa-cloud-download-alt"></i>)
</li>
<li>Pasting text to either or both panels</li>
<li>Dragging and dropping file(s) to either or both panels</li>
<li>Clicking on
<span style="color: #428bca; background-color: #9dbfb8; text-align:center;
font-family:sans-serif; font-size:14px; font-weight:bold; text-shadow:none;">
title areas</span> to load files from your computer.
</li>
</ul>
</li>
<li>Scroll the left or right panel and the other panel
scrolls to its corresponding location. This is designed to facilitate
parallel reading (normally, each panel shows the same text in a different language).
</li>
<li>Click on a sentence to have it read aloud in its native language.
If your browser does not support the language a warning will appear.
</li>
<li>Click-and-hold on a word to see its definition in the window at the
bottom of the screen.
</li>
<h3><a name="controls">Controls</a></h3>
<table>
<tbody>
<tr>
<td align="right"><i title="Load files from online library"
class="helpIcon fas fa-cloud-download-alt"></i></td>
<td> </td>
<td>Load files from biReader's online library of parallel texts.</td>
</tr>
<tr></tr>
<tr>
<td align="right"><i title="Save files to computer" class="helpIcon fas fa-save"></i></td>
<td> </td>
<td>Save contents of left and right panels to files on your computer.</td>
</tr>
<tr></tr>
<tr>
<td align="right"><i title="Settings" class="helpIcon fas fa-cogs"></i></td>
<td> </td>
<td>Alter settings such as font size and text-to-speech speed.</td>
</tr>
<tr></tr>
<tr>
<td align="right"><i title="Information" class="helpIcon fas fa-info"></i></td>
<td> </td>
<td>Show information about current system status such as voices available, files loaded,
your native language.
</td>
</tr>
<tr></tr>
<tr>
<td align="right"><i title="Help" class="helpIcon fas fa-question"></i></td>
<td> </td>
<td>This help screen.</td>
</tr>
<tr></tr>
<tr>
<td style="color: #428bca; background-color: #9dbfb8; text-align:center;
font-family:sans-serif; font-size:14px; font-weight:bold; text-shadow:none;">
Click on title areas
</td>
<td> </td>
<td>Load files from your computer</td>
</tr>
</tbody>
</table>
<h3><a name="hints">Hints</a></h3>
<ul>
<li>biReader works best with Google Chrome.
Mobile works best with Google Chrome's "Add to Home screen" option.
Desktop works best with Chrome or Firefox.
</li>
<li>
You may provide texts of the same article in different languages by pasting them
to the two panels, or drag-and-drop files to the panels, or click on the "load"
buttons to select files from your computer. Or click on "Load Files from Online Library" to
choose an existing pairing from the online library.
</li>
<!--
todo: update this description and show it when the user opens the file selection dialogue:
The files should contain <strong>plain text,
using UTF-8 encoding</strong>,
of the same article or story
but written in two different languages (e.g., left = English and right = German).
Text should consist of paragraphs separated by double returns (control characters
CR,LF,CR,LF, which is 0D, 0A, 0D, 0A when shown as hexadecimal codes).
-->
<li>
biReader will attempt to present the two texts
as equal height, synchronously scrolling panels, and to pronounce a sentence
in its native language
when you click on it or a series of sentences when you click-and-drag over them.
</li>
<li>
It will also attempt to show a definition of a word if you click-and-hold (tablet: long-tap)
on it. Note that you may also click-and-hold on portions of the resulting
definition to "drill down" further.
</li>
<li>For purposes of clicking on a sentence to have it spoken aloud, a
sentence is any text starting with:
<ul>
<li>The beginning of the text</li>
<!-- <li>The first alphanumeric character after a newline followed by a space
character-->
</li>
<li>The first alphanumeric character following a sentence end (below)</li>
</ul>
And ending with:
<ul>
<li>A sentence ending character like .?! followed by a space character</li>
<li>A double newline</li>
<li>A sentence separator character like 。</li>
<li>The end of the text</li>
</ul>
(You may also click-and-drag over multiple sentences to have them spoken aloud).
</li>
<li>Note that you may search using the browser's native search function(s)</li>
</ul>
<h3><a name="problems">Problems</a></h3>
<ul>
<li>Missing voices. On some platforms, you may be able to install more voices for
your browser to use.
<ul>
<li>For Microsoft Edge, see
https://www.groovypost.com/howto/install-change-languages-windows-10
</li>
<li>For Android, see
https://www.androidauthority.com/google-text-to-speech-multiple-male-female-voices-673214
</li>
</ul>
</li>
<li>On tablets and phones, long-tapping a word brings up Google Chrome's lookup
function. This may be disabled via settings, or avoided by using Chrome's
"Add to Home screen" option.
</li>
</ul>
PLEASE NOTE: biReader easily fails on invalid file
input as no input validity checks are yet in place. Please load only <b>plain text</b>
files to the left or right panel.
</div>
<i id="helpCloseButton" title="Close Help Screen" class="closeIcon fas fa-window-close"></i>
</div>
</div>
<div id="Info" class="md-modal md-effect-1">
<div class="md-content">
<img src="img/bireader2f.png" style="width: 40%;
max-width: 705px;min-width: 12rem;margin-left: 6%; margin-bottom:10px;">
<div class="md-scroll-box">
<!--<div style="margin-left: 6%; margin-right: 6%; margin-top: 2%; overflow: auto; height: 60vh">-->
<h2>biReader version <span id="brVersion"></span></h2>
<hr>
Your native language:
<span id="userLang"></span>
<hr>
Voices currently supported by your browser:
<span id="vList"></span>
<hr>
Source URL:
<span id="fileURL"></span>
<!--<span id=closeInfo class="modal-close">×</span>-->
<!--<i id="closeInfo" title="Close Info Screen" class="modal-close iconButton fas fa-window-close"></i>-->
<!--Keep close button within modal:-->
<br><br><br><br>
<br>
<br>
</div>
<i id="closeInfo" title="Close Info Screen" class="closeIcon iconButton fas fa-window-close"></i>
</div>
</div>
<input type="file" id="leftFileChoice" style="display: none"/>
<input type="file" id="rightFileChoice" style="display: none"/>
<div id="fileChooserModal" class="md-modal md-effect-1">
<!--Filled in at runtime:-->
<div id="leftFilePopup">
<select id="leftFileSelect">
</select>
</div>
<div id="rightFilePopup">
<select id="rightFileSelect">
</select>
</div>
</div>
<!--todo: make "responsive" (use CSS formulae?):-->
<div class="vertContainer">
<!--todo: if landscape, show buttons on left side of screen rather than top:-->
<div id="topRowButtons" class="horizContainer">
<i id="libraryLoadButton" title="Load files from online library"
class="iconButton fas fa-cloud-download-alt"></i>
<i id="saveButton" title="Save files to computer" class="iconButton fas fa-save"></i>
<i id="controlsButton" title="Settings" class="iconButton fas fa-cogs"></i>
<i id="infoButton" title="Information" class="iconButton fas fa-info"></i>
<i id="helpButton" title="Help" class="iconButton fas fa-question"></i>
</div>
<div id=columnHeaders class="horizContainer">
<label id=leftColumnHeader class="myColumnHeader" for="leftFileChoice" title="Load left file from disc">
Load left file from computer
</label>
<label id=rightColumnHeader class=myColumnHeader for="rightFileChoice" title="Load right file from disc">
Load right file from computer</label>
</div>
<div class="horizContainer" id="textColumns">
<div id=leftColumn class="myColumn frame">
<p id=leftPara class="clickable myPara">
<span class=colInstructions>Drag-and-drop a file, or paste text here.</span>
</p>
</div>
<div id=rightColumn class="myColumn frame">
<p id=rightPara class="clickable myPara">
<span class=colInstructions>Drag-and-drop a file, or paste text here.</span>
</p>
</div>
</div>
<div id=vocab class="horizContainer frame" style="margin: 2%">
<span id="glosbeBuf" class="clickable" style="height: 10vh; margin: 10px">
<span class="vocabInstructions">Click-and-hold a word for definition here.</span>
</span>
<span style="position: absolute; bottom: 0; right: 5px; font-size: x-small">
Translations provided by <a href="https://glosbe.com/" target="_blank">Glosbe</a>.</span></div>
</div>
<div id=mdOverlay class="md-overlay"></div>
<!--<script src="js/vendor/modernizr-3.5.0.min.js"></script>-->
<script src="js/browserTest.js"></script>
<!--<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>-->
<script src="js/vendor/jquery-3.2.1.min.js"></script>
<script src="js/guessLang/_languageData.js"></script>
<script src="js/guessLang/guessLanguage.js"></script>
<script src="js/ISOmap.js"></script>
<script src="js/jquery.selectBox.js" type="text/javascript"></script>
<!--<script src="js/node_modules/google-translate-api"></script>-->
<!--<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>-->
<!--<script src="js/plugins.js"></script>-->
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<!--<script>-->
<!--window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;-->
<!--ga('create','UA-XXXXX-Y','auto');ga('send','pageview')-->
<!--</script>-->
<!--<script src="https://www.google-analytics.com/analytics.js" async defer></script>-->
</body>
</html>