【用寫網頁的方式排版小說本：Paged.js】

我這次排版本本用的是超超超超冷門的工具 Paged.js。

本來沒有想分享的，因為覺得會像我這樣想不開的人可能不多吧？不過從前陣子大家分享職業 & 最近 RWRB 神秘的圖書館館長來看，發現使用語法很 OK 的噗友好像其實蠻多的，就來分享一下……順便也是給自己留個紀錄，未來可以參考。

做本本的murmur

為什麼用做網頁的方式排本本

最主要的原因：因為 AO3 支援一些基本的 HTML 和 CSS，所以我在 AO3 發文時手賤用語法玩了一些特殊排版。

最讓我苦惱的是這種聊天室排版：



我不知道用 Word 或 InDesign 要怎麼復刻這種對話框、也懶得研究，所以做本本的想法就一直擱著。我本來想，哪天要是真想不開決定出本的話，這部份應該會乾脆用圖檔、或是改成純文字吧？

直到我偶然間發現了 Paged.js 這個 JavaScript 函式庫！

有了 Paged.js 後，我做本本的流程基本上是「把本本用 HTML 和 CSS 排版成一張超長的網頁，然後用 Chrome 瀏覽器的『另存為PDF』的功能『列印』一整本 PDF」。

這完全解決了我不知道怎麼用 Word 或 InDesign 復刻對話框的痛點，因為都是用一樣的寫網頁的語法啊！

為了列印與排版，我當然還是有不少微調，例如在頁面上設定寬度 7cm 以符合我自己手機的真實螢幕寬度。但整個編修過程都在我的舒適圈內。我終於可以盡量還原本來在 AO3 上閱讀的感覺，好感動。最後排出來的效果：

Paged.js 可以做到什麼

因為本質上就是做網頁，所以視覺方面，你能靠 HTML & CSS 做出的畫面都做得到。做成網頁還有個好處是：瀏覽器顯示中文時預設就會避頭點，不用擔心標點符號出現在行首的問題。XD

排版上常見的需求也大都 OK，我個人用到的有：

1. 在書眉顯示作品名與章節名
2. 左右頁的書眉不同格式（一邊作品名一邊章節名）
3. 章節起始頁用不同設計（例如只留頁碼、不寫作品章節名，以免版面太花）
4. 特定頁面不同設計（例如書名頁、目錄頁、版權頁不顯示頁眉，並插入特殊底圖）
5. 自動更新目錄頁的章節頁碼

進階用法

雖然整體功能比 InDesign 這類專業排版軟體陽春，但對於習慣使用 HTML & CSS 語法的人，好處是你想要什麼介面就可以自己刻。

例如我有點龜毛，希望左右頁面的行高要對齊，所以就用 CSS 漸層語法畫出青色的橫線底圖：



這種格線功能好像 InDesign 內建就有（淚），不過沒關係，會寫語法的話自己在網頁上刻也很快滴。

另外我還有用 CSS 語法去自動標示哪些段落我有偷調字距跟間距，方便最後校稿時快速確認。像下面那張圖，標黃底字的段落都是我有偷偷微調上下間距、讓該行和橫線對齊：

我目前觀察到 Paged.js 的缺點

1. 學習曲線頗陡

要說 Paged.js 的最大缺點，就是網路上學習資源不多。製作過程如果遇到問題，不像 Word 或 Illustrator、InDesign 有非常多前人的經驗分享可以參考。

官網的文件其實寫得很不錯，但對於沒有很習慣寫 HTML & CSS 語法、又不習慣閱讀英文文件的人而言，上手可能會非常吃力。

甚至我自己送試印前也很忐忑，因為我不確定這樣輸出的 PDF 檔的字體有沒有成功嵌入。尤其我發現 Chrome 輸出成 PDF 有時候會直接把字體轉曲線、有時候不會，而且這部份我無法控制……

我超怕沒轉曲線的部份在印刷廠那邊會因為字體沒成功嵌入而出問題，一直到收到樣書、看到字體都 OK 才比較放心。

2. 沒辦法做註解

很多書會在內文中先塞一個 [1] 這樣的註解編號，然後在頁邊列出對應的註解說明。這個就我目前看來用 Paged.js 應該是完全做不到。（還好我的本本內容知識含量不高、沒有需要用這種格式下註解……）

3. 不確定直書好不好排

理論上用 CSS 的 writing-mode 應該可以排豎排文字，但剛好我本來就只想排橫排，所以我就沒研究了……如果有同好成功排出豎排文字歡迎分享啊！

4. ……應該還有很多其他缺點，但不才在下用過的其他專業排版軟體不多，所以我不知道以一個專業排版工具而言 Paged.js 還缺什麼 XD 至少它排我的本本夠用了 XD

Paged.js 的優點

1. 完全免費的開放原始碼 JavaScript 函式庫
2. 熟悉 HTML & CSS 語法的人可以很快上手，而且排版自由度頗高

參考資料

1. Paged.js 官方使用說明：我覺得官方文件就寫得蠻清楚的，大推
2. Made with paged.js：國外用 Paged.js 排版的成品（我就是看了這裡，想說那麼複雜的圖文都排得出來，我這幾乎純文字的小說本應該沒問題吧……就跳坑了）
3. Paged Design：一些別人已經做好的 Paged.js 佈景主題（我是從這邊的範例學到怎麼做出會自動更新頁碼的目錄頁的）

---

---

---

哇嗚，這個酷欸 👍💕💕
話說你都做到這樣了，等於電子書版本也完成了吧 😆😆😆

ㄚ梅. : 沒耶，還沒研究 epub 格式 好像可以用 Calibre 做？

ㄚ梅. : 是有想玩 epub，但同時又有「AO3 上直接下載就有，自己做的意義是什麼」的糾結XD

跳跳 : 你都辛苦排版了，就差轉檔了啊 😆
也是有直接把 pdf 當電子書的做法。
話說我之前在 FB 有看過滿好的教學，但剛剛想搜尋沒找到……

ㄚ梅. : 但如果要做電子書版的話我會想挑戰流式排版而不是直接傳 PDF
因為我的閱讀器才7吋，讀A5頁面的 PDF 雖然勉強可以但不太舒服

跳跳 : 我也是 🤣 我知道 InDesign 可以轉，但其他工具就不知道了

ㄚ梅. : 之前有看到這個軟體感覺很厲害，但超貴 XDDDD 對專業作家是一筆划算投資，但對同人出本出興趣的人而言不是……T_T

Vellum. Create beautiful books.

跳跳 : 我記得都還有看到人討論怎麼用 word 轉 epub, 所以應該還是有不用花大錢的方法，否則我也不會考慮了 😶

ㄚ梅. : 但我已經好幾年沒用 word，已不熟 T____T

搜尋了一下有這個

【Sigil 教學】初階 01 — 不懂語法，也能輕鬆自製 EPUB 電子書﹙提供練習素材﹚｜方格子 v...

瞄兩眼當參考，我離這步還有八千里路很不急 🤣

ㄚ梅. : 哇嗚這篇好詳細喔讚讚

字距過寬檢查

雖然我沒有 ID 也沒有 Word，但可以土炮硬刻想要的功能……

因為我內文選左右對齊，加上穿插英文、避頭點等等，一個不好很容易有一行的字距被拉特別寬的狀況。為了美觀我會修改內文讓字距正常。

最近檢查字距檢查到眼睛快脫窗，突然才想到我可以自己做輔助工具啊：



原理：畫一條紅直線在 27.5 字元左右的位置（這位置視版心寬度而定，每本書不一樣）。靠左對齊時，如果那一行的字沒有超過這條紅線，那左右對齊時字距一定會看起來過寬。

……做完這工具後發現我很多已經校過的稿還是有字距過寬的問題，之前眼殘漏看，可惡XD 我怎麼會沒想到早點做這工具呢

跳跳 : 我以為左右對齊就會處理掉這問題了說，原來不會嗎？ 🤣🤣🤣

ㄚ梅. : 一般軟體我不知道，但網頁上的左右對齊真的就只是硬幫你對齊而已
舉個極端例子：
　
在 Catherine 的名字中間換行很怪，但不換的話字距就直接被拉超寬啊啊啊啊！
後來這段我直接重寫……

跳跳 : 我跟你說，雖然這對你沒用，畢竟關係到專業，但是，網頁上會注意這點的人絕對絕對比不注意的人少太多，如果你有其他比這重要的事情，就放下……🤣🤣🤣

ㄚ梅. : 網頁上可能還好，但印出來超明顯的耶 XDDDD

跳跳 : 所以我說網頁不在意對啊 🤣 印出來是不是真的會很明顯我存疑，但是印刷本就會想盡量調整齊沒錯

ㄚ梅. : 其實我覺得網頁也滿明顯的，所以我在網頁上很少用左右對齊，覺得過大的字距很讓人出戲……xd

跳跳 : 前提是你有放在需要自己排版的網頁上？

ㄚ梅. : 嗯啊，之前有段時間很愛弄個人網站（但維護太累都後繼無力就是了）

跳跳 : 😆😆😆😆 其實我也有一個，但是更早放棄了……