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
|
<script lang="ts">
import Spacer from "$lib/Layout/Spacer.svelte";
import { onMount } from "svelte";
import JSZip from "jszip";
let fileInput: HTMLInputElement | null = null;
const handleFileUpload = async () => {
if (!fileInput || !fileInput.files || fileInput.files.length === 0) return;
const file = fileInput.files[0];
const reader = new FileReader();
reader.onload = async (event) => {
const zip = await JSZip.loadAsync(
(event.target as FileReader).result as ArrayBuffer,
);
const newZip = new JSZip();
for (const relativePath in zip.files) {
const zipEntry = zip.files[relativePath];
if (zipEntry.dir) {
newZip.folder(relativePath);
} else if (
relativePath.endsWith(".xhtml") ||
relativePath.endsWith(".html")
) {
newZip.file(
relativePath,
applyBionicReadingToHTML(await zipEntry.async("text")),
);
} else {
newZip.file(relativePath, await zipEntry.async("arraybuffer"));
}
}
downloadEPUB(
await newZip.generateAsync({ type: "blob" }),
`${file.name.split(".epub")[0]}_hayai.epub`,
);
};
reader.readAsArrayBuffer(file);
};
const applyBionicReadingToHTML = (content: string) => {
const contentParser = new DOMParser().parseFromString(content, "text/html");
for (const paragraph of contentParser.getElementsByTagName("p"))
paragraph.innerHTML = applyBionicReadingToString(
paragraph.textContent ?? "",
);
return contentParser.documentElement.outerHTML;
};
const applyBionicReadingToString = (text: string) =>
text
.split(/\s+/)
.map((word) => {
if (/^\W+$/.test(word) || word.length <= 2) return word;
let boldLength: number;
if (word.length <= 4) {
boldLength = 2;
} else if (word.length <= 7) {
boldLength = 3;
} else if (word.length <= 10) {
boldLength = 4;
} else {
boldLength = Math.ceil(word.length * 0.5);
}
return `<strong>${word.slice(0, boldLength)}</strong>${word.slice(boldLength)}`;
})
.join(" ");
const downloadEPUB = (blob: Blob | MediaSource, fileName: string) => {
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = fileName;
link.click();
URL.revokeObjectURL(link.href);
};
onMount(
() => (fileInput = document.getElementById("epub-file") as HTMLInputElement),
);
</script>
<div class="card">
{@html applyBionicReadingToString('Upload an EPUB; receive a "bionic" EPUB.')}
<br />
<small>
{@html applyBionicReadingToString(
"Bionic reading is a method of displaying text that aims to enhance readability and reading speed by guiding the reader's eyes using artificial fixation points."
)}
</small>
<Spacer />
{@html applyBionicReadingToString(
`After selecting an EPUB file, 早い will apply a bionic reading filter over any and all words, and return the newly created "bionic" EPUB file.`
)}
<Spacer />
<input type="file" id="epub-file" accept=".epub" onchange={handleFileUpload} />
</div>
|