index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rollpie Hongo</title>
<style>
html, body {
	height: 100%;
}

body {
	margin: 0;
	color: #1f1f1f;
	background: #fff;
	font-family: system-ui, -apple-system, sans-serif;
	font-size: 14px;
}

[hidden] {
	display: none !important;
}

.page {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.bar {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 10px 20px;
}

h1 {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
}

.state {
	flex: 1;
	overflow: hidden;
	color: #767676;
	font-size: 12px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

button {
	padding: 7px 16px;
	color: #fff;
	background: #1f1f1f;
	border: 0;
	border-radius: 3px;
	font-family: inherit;
	font-size: 13px;
	cursor: pointer;
}

.wrong {
	margin: 0;
	padding: 10px 20px;
	color: #a33;
	background: #fcf4f4;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	line-height: 1.7;
	white-space: pre-wrap;
	word-break: break-all;
}

.split {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(0, 1fr);
	min-height: 0;
}

.source {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 16px 20px;
	color: #1f1f1f;
	background: #fff;
	border: 0;
	outline: none;
	resize: none;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px;
	line-height: 1.75;
}

.view {
	overflow: auto;
	padding: 20px;
	background: #f4f4f4;
}

.sheet {
	max-width: 820px;
	margin: 0 auto 20px;
	color: #000;
	background: #fff;
}

.sheet svg {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 760px) {
	.split {
		grid-template-columns: 1fr;
		grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
	}
}
</style>
</head>
<body>
<div class="page">
	<div class="bar">
		<h1>Rollpie Hongo</h1>
		<span id="state" class="state"></span>
		<button id="save" type="button">PDF を保存</button>
		<a id="download" download="hongo.pdf" hidden></a>
	</div>
	<pre id="wrong" class="wrong" hidden></pre>
	<div class="split">
		<textarea id="source" class="source" spellcheck="false" aria-label="原稿"></textarea>
		<div id="view" class="view"></div>
	</div>
</div>
<script id="sample" type="text/plain">
\documentclass[a4paper]{article}

\title{A Sample of hongo}
\author{hongo}
\date{Typeset in the browser}

\begin{document}

\maketitle

\section{Introduction}

Write LaTeX on the left, and the pages appear on the right.
They are typeset again whenever you stop typing\footnote{Footnotes go to the bottom of the page.}.

\begin{itemize}
\item Headings, lists, tables and footnotes
\item Math set by suki, and chemical structures set by lina
\end{itemize}

\section{Math}

Inline math such as $e^{i\pi} + 1 = 0$ sits in the text, and display math stands on its own line.

\begin{equation}
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
\end{equation}

\begin{align}
(a+b)^2 &= a^2 + 2ab + b^2 \\
\sum_{k=1}^{n} k &= \frac{n(n+1)}{2}
\end{align}

\section{Chemistry}

\chemname{\chemfig{*6(-=-=-=)}}{benzene}

\section{Tables}

\begin{tabular}{|l|r|}
\hline
Name & Value \\
\hline
Word space & 0.333 em \\
Line spacing & 1.7 \\
\hline
\end{tabular}

\end{document}
</script>
<script id="worker" type="text/plain">
	let hongo = null

	const encoder = new TextEncoder()

	const decoder = new TextDecoder()


	function writeBytes(bytes) {
		const pointer = hongo.hongoAllocate(bytes.length) >>> 0

		new Uint8Array(hongo.memory.buffer, pointer, bytes.length).set(bytes)

		return pointer
	}


	function readResult() {
		const pointer = hongo.hongoResultPointer() >>> 0
		const length = hongo.hongoResultLength() >>> 0

		return new Uint8Array(hongo.memory.buffer, pointer, length).slice()
	}


	async function start(wasm, math, japanese) {
		const instance = await WebAssembly.instantiate(wasm, {env: {now: () => Date.now() / 1000}})

		hongo = instance.exports

		const mathPointer = writeBytes(math)
		const japanesePointer = japanese.length > 0 ? writeBytes(japanese) : 0
		const status = hongo.hongoLoadFonts(mathPointer, math.length, japanesePointer, japanese.length)

		hongo.hongoDeallocate(mathPointer, math.length)

		if (japanesePointer !== 0) hongo.hongoDeallocate(japanesePointer, japanese.length)

		postMessage({kind: 'ready', ok: status === 0, text: decoder.decode(readResult())})
	}


	function run(kind, source) {
		const bytes = encoder.encode(source)
		const pointer = writeBytes(bytes)
		const status = kind === 'pdf' ? hongo.hongoPdf(pointer, bytes.length) : hongo.hongoTypeset(pointer, bytes.length)

		hongo.hongoDeallocate(pointer, bytes.length)

		const result = readResult()

		if (status !== 0) {
			postMessage({kind: 'wrong', text: decoder.decode(result)})

			return
		}

		if (kind === 'pdf') {
			postMessage({kind: 'pdf', data: result}, [result.buffer])

			return
		}

		const part = decoder.decode(result).split('\0')

		postMessage({kind: 'pages', missing: part[0], page: part.slice(1)})
	}


	async function receive(event) {
		const message = event.data

		try {
			if (message.kind === 'start') {
				await start(message.wasm, message.math, message.japanese)

			} else {
				run(message.kind, message.source)
			}

		} catch (reason) {
			postMessage({kind: 'broken', text: String(reason)})
		}
	}


	addEventListener('message', receive)
</script>
<script src="hongo.js"></script>
<script src="font.js"></script>
<script>
	const source = document.getElementById('source')

	const view = document.getElementById('view')

	const state = document.getElementById('state')

	const wrong = document.getElementById('wrong')

	const save = document.getElementById('save')

	const download = document.getElementById('download')

	const storageKey = 'hongo-source'

	const waitTime = 200

	const giveUpTime = 5000

	let workerAddress = ''

	let wasmModule = null

	let mathBytes = null

	let japaneseBytes = null

	let worker = null

	let ready = false

	let busy = false

	let pending = null

	let wantPdf = false

	let shown = []

	let startedAt = 0

	let inputTimer = 0

	let giveUpTimer = 0


	function decode(text) {
		const binary = atob(text)
		const bytes = new Uint8Array(binary.length)

		for (let index = 0; index < binary.length; index++) {
			bytes[index] = binary.charCodeAt(index)
		}

		return bytes
	}


	function readStored() {
		try {
			return localStorage.getItem(storageKey)

		} catch {
			return null
		}
	}


	function store(text) {
		try {
			localStorage.setItem(storageKey, text)

		} catch {
			return
		}
	}


	function showWrong(text) {
		wrong.textContent = text
		wrong.hidden = false
	}


	function startWorker() {
		ready = false
		busy = false
		worker = new Worker(workerAddress)
		worker.addEventListener('message', receive)
		worker.postMessage({kind: 'start', wasm: wasmModule, math: mathBytes, japanese: japaneseBytes})
	}


	function stopWorker() {
		clearTimeout(giveUpTimer)

		if (worker !== null) worker.terminate()

		worker = null
		ready = false
		busy = false
	}


	function restart(text) {
		stopWorker()
		showWrong(text)
		startWorker()
	}


	function post(message) {
		busy = true
		giveUpTimer = setTimeout(giveUp, giveUpTime)
		worker.postMessage(message)
	}


	function send() {
		if (worker === null || !ready || busy) return

		if (wantPdf) {
			wantPdf = false
			post({kind: 'pdf', source: source.value})

			return
		}

		if (pending === null) return

		const text = pending

		pending = null
		startedAt = performance.now()
		post({kind: 'typeset', source: text})
	}


	function request() {
		pending = source.value
		send()
	}


	function giveUp() {
		restart(`組版が ${giveUpTime / 1000} 秒たっても終わらないので止めました。原稿を直すと組み直します。`)
	}


	function showPages(page, missing) {
		const sheet = view.children

		for (let index = 0; index < page.length; index++) {
			if (shown[index] === page[index]) continue

			if (index < sheet.length) {
				sheet[index].innerHTML = page[index]

			} else {
				view.insertAdjacentHTML('beforeend', `<div class="sheet">${page[index]}</div>`)
			}
		}

		while (view.children.length > page.length) {
			view.lastElementChild.remove()
		}

		shown = page
		wrong.hidden = true

		const time = Math.round(performance.now() - startedAt)
		const lack = missing.length > 0 ? ` / 書体にない字: ${missing}` : ''

		state.textContent = `${page.length} ページ / ${time} ミリ秒${lack}`
	}


	function savePdf(data) {
		const address = URL.createObjectURL(new Blob([data], {type: 'application/pdf'}))

		download.href = address
		download.click()
		setTimeout(() => URL.revokeObjectURL(address), 60000)
	}


	function receive(event) {
		const message = event.data

		if (message.kind === 'ready') {
			ready = message.ok

			if (!ready) {
				showWrong(message.text)

				return
			}

			send()

			return
		}

		if (message.kind === 'broken') {
			if (!ready) {
				stopWorker()
				showWrong(`読み込めませんでした: ${message.text}`)

				return
			}

			restart(`組版の途中で止まりました: ${message.text}`)

			return
		}

		clearTimeout(giveUpTimer)
		busy = false

		if (message.kind === 'pages') {
			showPages(message.page, message.missing)

		} else if (message.kind === 'pdf') {
			savePdf(message.data)

		} else {
			showWrong(message.text)
			state.textContent = '組めません'
		}

		send()
	}


	async function boot() {
		const stored = readStored()
		const sample = document.getElementById('sample').textContent.replace(/^\n/, '')

		source.value = stored === null ? sample : stored

		if (typeof hongoWasm === 'undefined' || typeof mathFont === 'undefined') {
			showWrong('hongo.js と font.js がありません。cargo run --example web で書き出してください。')

			return
		}

		state.textContent = '読み込んでいます'
		workerAddress = URL.createObjectURL(new Blob([document.getElementById('worker').textContent], {type: 'text/javascript'}))
		wasmModule = await WebAssembly.compile(decode(hongoWasm))
		mathBytes = decode(mathFont)
		japaneseBytes = decode(japaneseFont)
		pending = source.value
		startWorker()
	}


	source.addEventListener('input', () => {
		store(source.value)
		clearTimeout(inputTimer)
		inputTimer = setTimeout(request, waitTime)
	})

	save.addEventListener('click', () => {
		wantPdf = true
		send()
	})

	boot().catch((reason) => showWrong(String(reason)))
</script>
</body>
</html>