frond

TypeScript 的 EPUB 渲染函式庫。直排與橫排並重,在 Chromium、Firefox 與 WebKit 三家上實證驗證。

把 EPUB 拖進這裡

或者

你會看到什麼

  • ——書排出來的樣子。直排或橫排由書自己決定, 翻頁、跳章、字級、行高、邊界、單欄雙欄、主題都可以改。
  • 檢查——frond 從這本書讀到的事實。EPUB 版本、頁面推進方向、目錄讀自哪一份導覽文件、封面用哪種寫法宣告、 manifest 裡有哪幾項其實不在包裡。

這一頁是純瀏覽器 client 實作:整個流程跑在這個分頁裡,沒有伺服器 參與。EpubBook.open() 收的是位元組,frond 本身沒有任何下載或上傳的程式碼路徑。

用起來長這樣

<div id="viewer" style="height: 100dvh"></div>

<script type="module">
  import { EpubBook } from "./frond/epub/index.js";
  import { Renderer } from "./frond/renderer/index.js";

  const book = await EpubBook.open(await file.arrayBuffer());
  const renderer = await Renderer.attach(
    book,
    document.getElementById("viewer"),
    { on: { relocate: (at) => console.log(at.page, at.pageCount) } },
  );
</script>

沒有打包器、沒有執行期相依。這一頁本身就是這段程式碼跑起來的樣子 ——app.js 是它的完整版。