緩慢更新
已知的epub閱讀器:Edge舊版UWP、Calibre(僅限PC平台)、Lithium、Moon+ Reader、PocketBook、ePub Reader for Android、FBReader;FullReader、eReader Prestigio、ReadEra |
支持 常用文字css: Calibre、EdgeUWP(部分支持)、Lithium、PocketBook、ePub Reader for Android。 |
支持 serif系統字體css: Calibre、EdgeUWP、Lithium、Moon+ Reader、PocketBook、ePub Reader for Android、FBReader(部分支持)。 |
支持 安卓alias字體名稱: Lithium、PocketBook、ePub Reader for Android。 (根據安卓fonts.хml裡的alias系統字體名稱,範例為:Arial調用Roboto,Times New Roman調用Noto Serif,Courier New調用Cutive Mono,sans-serif-condensed調用Roboto Condensed) |
支持 字重css: Calibre、EdgeUWP、Lithium、Moon+ Reader、PocketBook、ePub Reader for Android。 |
支持載入epub自帶字體文件: Calibre、EdgeUWP、Lithium、Moon+ Reader、PocketBook、ePub Reader for Android、FBReader。 |
支持載入epub自帶woff字體: Calibre、EdgeUWP、Lithium、PocketBook、ePub Reader for Android。 |
支持載入epub自帶Еmoji字體:Calibre、Lithium、PocketBook(只支持CBDT)、Moon+ Reader(只支持CBDT和COLRv0)。 |
支持用@font-face載入設備系統字體:Calibre、EdgeUWP、Lithium |
支持 RWD圖片css: Calibre、EdgeUWP、ePub Reader for Android(有嚴重的bug)。 |
支持 SVG圖片: Calibre、EdgeUWP、Lithium、Moon+ Reader、PocketBook、ePub Reader for Android。 |
支持 偽元素css: Calibre、EdgeUWP、Lithium、PocketBook、ePub Reader for Android。 |
支持 text-indent css(開頭空兩個):Calibre、EdgeUWP、Lithium、PocketBook、ePub Reader for Android。 |
支持直書: Calibre、Lithium。(ePub Reader for Android顯示直書但無法往下滑動閱讀) |
註1:css圖片有拉伸可以用
object-fit: contain;解決,但可能仍然會有佔用空間的bug
https://www.mobileread.com/forums/showthread.php?t=332190註2:Calibre支持的CSS比Sigil還多,比如list-style-type: japanese-formal;、@counter-style和COLRv1彩色字體
註3:FBReader只有顯示Еmojione color 2.27版字體,而且只有數字,其他的Еmoji很多變成文字X
Еmoji格式介紹
正文開始:
EPUB是用xhtml和css的組成一個壓縮檔案的電子書,你可以在裡面用網頁格式製作書本內容,我有時候也會拿來當有css的記事本
總而言之,你會基本的html和css,大概就能製作電子書
但是給你Calibre的編輯器要你手搓html格式輸入書本內容,大概是惡夢一場,我不知道那些會做電子書的是有自己的編輯工具還是真的手搓html,如果是後者,我只能說很勇,浪費時間的那種
我自己是用Sigil和PageEdit,一定要有裝後者,不然就真的要手搓html了
以下我直接默認看這篇的人都懂html和css的基礎知識
如果不懂,請自己用notepad++或是vscode手搓html慢慢學如何製作網頁,雖然不需要在epub裡面全程手搓,但不代表能完全不懂html和css
А.第一次Sigil環境設置
打開Sigil後,默認是製作epub2.0版本,需要去編輯>偏好設定>>一般設定>基本
然後選擇版本3,當然如果你覺得epub2.0無所謂,那也可以用
接下來下面有個選項叫做外部xhtml編輯器,點選瀏覽選擇PageEdit的exe位置
你也可以偷懶直接填路徑C:/Program Files/PageEdit/PageEdit.exe,如果路徑一致的話
偏好設定>>語言 可以改Sigil界面語言
偏好設定>>外貌>代碼檢視 可以改原始碼的字體,雖然那邊看起來只能選一種字體,但實際上可以像VS code那樣填入Font Family,以下是個例子
'Cascadia Code','Menlo','Consolas','Courier New','Apple Color Emoji','Noto Color Emoji','Segoe UI Emoji','PingFang TC','Microsoft JhengHei','Hiragino Kaku Gothic ProN','Yu Gothic','Meiryo','Segoe UI Symbol',monospace
不過畢竟Sigil本身界面沒有預料到我也這樣亂玩,所以你下次打開偏好設定是顯示成預設字體,但原始碼的字體實際上還是顯示你的Font Family排序字體
如果你再次點開偏好設定,那麼預設的Courier New又會被套用,必須重新設置字體
Б.設置CSS
在開始寫入電子書內容之前,先設置CSS
想要讓所有內容格式一致(例如:每行開頭空兩格),除了用最簡單的自己空格法之外,還可以用CSS控制html的效果,只要連接一個CSS檔案,每個xhtml的格式就瞬間一致,連字型都可以跟著tagname一次統一,省去非常多的麻煩,剩下要做的事情只剩下看要不要設定class和用class調整圖片這樣。
這裡不講解CSS的各種細節規則,我直接貼一些事先寫好常用的CSS,需要什麼就貼什麼
最左邊有個書本瀏覽器,在底下的Styles右鍵>新增空白樣式,就可以看到一個Style0001.css
不過在寫入CSS內容之前,我先潑個冷水,並不是所有的安卓epub閱讀器都會支持你寫的CSS,有些安卓閱讀器壓根不管你的CSS,具體我測過的閱讀器支援能力我已經放在最上面了。
總之,變成我們大概要假設電子書的顯示有兩個效果:支援很多CSS和根本沒載入CSS
像Calibre支持最多的CSS格式,而有的安卓閱讀器大概就是完全不管CSS,連設置serif這種系統字體名稱都不認的那種
但不管怎麼說,Sigil預覽的還是看得到CSS的效果
以下會放置CSS代碼和解釋使用效果,只需要複製貼進Style0001.css裡就行,如果懂一點CSS的還可以微調測試,找出適合自己的數據
每行開頭空兩格,兩個不同的代碼但效果基本一樣,我推測第一個語法應該支援的比較好
p{margin-bottom: -0.5em;}
p::before{content: " ";}
讓所有內文字體按照以下規則套用顯示字體,依序是拼音文字字體>表情字體>漢字字體>符號字體>系統字體(等寬)
因為漢字字體通常會包含無色彩的表情字體,所以必須放在後面
表情字體因為很多可能直接把0到9顯示彩色表情符號,而且空格一堆還用全形尺寸,所以必須放在拼音文字字體後面
其他還有一些細節就是epub的自帶字體顯示在系統字體前面,讓自帶字體優先使用
(字體名稱用底線_的就是epub自己放置進去的自帶字體)
如果閱讀器找不到或是無法載入字體,才會使用列表後面的字體
body{font-family: 'Noto-Sans-Mono','Menlo','Consolas','Liberation Mono','color-emoji-epub','Noto-Sans-TC','Noto-Sans-JP','PingFang TC','Noto Sans CJK TC','Microsoft JhengHei','Hiragino Kaku Gothic ProN','Yu Gothic','symbol-epub','emoji-fallback',monospace;}
h1到h4的標題文字置中
h1,h2,h3,h4{text-align: center;}
h1到h6的標題文字用細字體字重400
h1,h2,h3,h4,h5,h6{font-weight: 400;}
斜體和其他tagName用細字體字重300
i,kbd,samp,.author{font-weight: 300;}
限制圖片大小的CSS,這個非常複雜就不解釋了,還牽涉到閱讀器的段落裁切
img{max-width: 95%;max-height: 99vh;object-fit: contain;}
如果是用輕小說那種圖片的,那限制圖片大小的CSS用這個
img{max-width: 95%;max-height: 85vh;object-fit: contain;}
日文漢字上,振り仮名的字體大小和粗細的CSS
rt,rb{font-size: 0.75rem;font-weight: 300;}
圖片CSS相關,第一個是圖片置中,後面small和medium是控制圖片最大寬度
p.img,div.img{text-align: center;}
p.img{max-height: 99vh;}
img.small{max-width: 30%;}
img.medium{max-width: 75%;}
img.width_0_45{width: 45%;}
除錯CSS,顯示多數常用的html物件的邊界,當EPUB完成後,這行CSS可以移除
p,h1,h2,h3,h4,div,img,rt{border-style: dotted;border-color: #707070; border-width: 1px;border-radius: 4px;}
載入要帶進去epub的字體文件,這裡是用Noto字體做範例
font-family 是設定自訂的字型名稱,src 則是字型檔案的路徑。
@font-face{font-family: 'Noto-Sans-Mono';src: url('../Fonts/Noto/NotoSansMono-Regular.ttf');}
@font-face{font-family: 'Noto-Sans-JP';font-weight: 400;src: url('../Fonts/Noto/noto-sans-jp-japanese-400-normal.woff2');}
@font-face{font-family: 'Noto-Sans-JP';font-weight: 300;src: url('../Fonts/Noto/noto-sans-jp-japanese-300-normal.woff2');}
@font-face{font-family: 'Noto-Sans-TC';font-weight: 400;src: url('../Fonts/Noto/noto-sans-tc-chinese-traditional-400-normal.woff2');}
@font-face{font-family: 'Noto-Sans-TC';font-weight: 300;src: url('../Fonts/Noto/noto-sans-tc-chinese-traditional-300-normal.woff2');}
@font-face{font-family: 'Noto-Sans-SC';font-weight: 400;src: url('../Fonts/Noto/noto-sans-sc-chinese-simplified-400-normal.woff2');}
@font-face{font-family: 'Noto-Sans-SC';font-weight: 300;src: url('../Fonts/Noto/noto-sans-sc-chinese-simplified-300-normal.woff2');}
@font-face{font-family: 'color-emoji-epub';src: local('Apple Color Emoji'),local('Noto Color Emoji'),url('../Fonts/Emoji/TwemojiMozillaCBDT.ttf'),local('Segoe UI Emoji');}
@font-face{font-family: 'emoji-fallback';src: local('Noto Color Emoji');}
@font-face{font-family: 'symbol-epub';src: url('../Fonts/Noto/NotoSansSymbols2-Regular.ttf');}
@font-face{font-family: 'NotoEmoji';font-weight: 400;src: url('../Fonts/Noto/NotoEmoji-Regular.ttf');}
@font-face{font-family: 'NotoEmoji';font-weight: 300;src: url('../Fonts/Noto/NotoEmoji-Light.ttf');}
@font-face{font-family: 'NotoSansSymbols-2';src: url('../Fonts/Noto/NotoSansSymbols2-Regular.ttf');}
如果你不介意漢字TTF文件那每一個6MB的大小,可以用這個路徑
@font-face{font-family: 'Noto-Sans-JP';font-weight: 400;src: url('../Fonts/Noto/NotoSansJP-Regular.ttf');}
@font-face{font-family: 'Noto-Sans-JP';font-weight: 300;src: url('../Fonts/Noto/NotoSansJP-Light.ttf');}
@font-face{font-family: 'Noto-Sans-TC';font-weight: 400;src: url('../Fonts/Noto/NotoSansTC-Regular.otf');}
@font-face{font-family: 'Noto-Sans-TC';font-weight: 300;src: url('../Fonts/Noto/NotoSansTC-Light.otf');}
以下是對閱讀器的段落裁切的CSS,比如Calibre,手機閱讀器我無能為力
避免標題和下面內文分離
h1,h2,h3,h4,h5,h6{break-after: avoid;}
避免段落和列表元素裡面的文字被裁切
p,body>ol,body>ul{break-inside: avoid;}
確保段落和前面的段落(其實主要是標題)不被裁切,確保圖片和前面的一行字不被分離
p.img,div.img{text-align: center;break-before: avoid;}
В.添加字體文件或是圖片文件
CSS設置完成後,還需要向epub添加自己想要的字體文件
一樣,書本瀏覽器,在底下的Fonts右鍵>增加已存在的檔案
成功後,你會看到出現/Fonts/NotoSansMono-Regular.ttf
但是,通常文件越多,就會越雜亂,這個時候你需要移動文件到子資料夾(也有排序的功能)
在OTF文件上右鍵,選擇移動,這個時候選擇資料夾的選項
裡面只有OEBPS/Fonts,這裡只能手動輸入你要的資料夾名稱
比如我在後面添加文字,變成OEBPS/Fonts/Noto,和上面CSS範例一致,才能正確載入字體
注意這裡有區分大小寫的排序
打錯大小寫又要改的話,就要把所有文件移出去,儲存重啟epub,然後再移回來正確的名稱
圖片添加進epub也是同理,另外移動文件的話,Sigil會自動修改所有在xhtml和CSS裡有正確引用到圖片和字體文件的路徑,使用者不需要煩惱這個問題
Noto非漢字字體可以在github下載,這裡面才有那種ExtraCondensed窄字體的版本
Еmoji字體的部分可以直接借用firefox的字體文件
實測發現,多數的閱讀器不支持COLR格式,Sigil能正常顯示Еmoji字體不代表手機的閱讀器能顯示
TwemojiMozilla和ЕmojiOneMozilla在手機閱讀器會顯示空白,Tossface的COLR字體則顯示成破損的黑白符號
安卓的CBDT格式是支持,但字體文件通常會非常大,小文件的CBDT字體能選的不多
TwemojiMozilla有人弄出3.3MB大小的CBDT字體
Еmojione2.2.7這種舊版字體的大小則是3.4MB
一般來說我希望epub的大小極限在8MB以下,最大不要超過25MB
不過有些電子書必須放一堆圖片導致一定會超過25MB的話,直接乾脆放飛自我塞東西了
Г.添加封面
這一步非常很簡單,只要點工具>新增封面
選擇剛剛前面之前添加好的圖片,直接產生一個cover.xhtml
Д.填寫正文
可能有人直接拉到這裡了,第一次開Sigil,會已經自動產生一個Section0001.xhtml
在寫入內容之前,要先連接之前打好的CSS
書本瀏覽器,Section0001.xhtml右鍵>連結樣式表
"勾選"Style0001.css並按下確定,Section0001.xhtml就有加載到CSS
這樣右邊的預覽就也會出現CSS效果
然後在上面圖示工具列找到一個叫做"執行外部Xhtml編輯器"的按鈕,如果你第一步就有設置好PageEdit,那現在應該會看到一個編輯彈窗,而且這個編輯彈窗是有CSS效果的
每一行開頭都有CSS設置的空兩格,設置h1h2標題會自動置中(注意h1h2這些是和epub目錄有關的功能)
接下來你要的文字內容可以直接從記事本複製貼上進去編輯器了,在編輯器每次儲存後,你輸入的文字都會自動轉換成html格式
注意h1h2這些標題格式是和epub目錄有關的功能
我通常是h2用章節名稱,h1用卷名稱/第幾卷
然後如果一個xhtml有多個h1h2標題,它會產生sigil_toc_id_1之類的id,這句是說給強迫症的人
如果要產生下一頁,書本瀏覽器>Text,右鍵>新增空白HTML檔
就可以產生Section0002.xhtml
然後接下來你要讓Section0001.xhtml當簡介,Section0002.xhtml當第一章
還是Section0001.xhtml直接當第一章,然後外部添加自己慣用的模板文件Section0000.xhtml拖動到第一個,作為書籍簡介也可以
然後這些xhtml在裡面的路徑也是可以移動的
你可以把第一卷移動到OEBPS/Text/A,第二卷到OEBPS/Text/B
可以利用這種方式在不改名文件的方式一目了然知道哪個文件屬於那個卷
但請注意,請確保不是移動空的xhtml(通常直接快速大量新增xhtml都是空的)
至少要確保xhtml是有連接到CSS,然後再移動
舉個例子,如果你先移動了xhtml,到時候你再每個xhtml裡面快速貼上腳本產生的模板文檔
你貼上的資料的CSS相對路徑是../Styles/Style0001.css,但你已經從/Text移動到/Text/A
那正確路徑應該是../../Styles/Style0001.css,除非你能修改你使用的腳本,不然CSS無法連結
正確的流程是1.大量新增xhtml 2.貼上腳本產生的文檔 3.移動xhtml
這個時候移動的話,xhtml裡面有CSS相對路徑,會隨著移動而更新成新路徑
警告:如果你是要大量添加腳本生成的xhtml,建議全部添加完後再移動
因為Sigil添加文件完全不會問你加入到那個路徑
如果你打算添加到OEBPS/Text,但因為你之前有建立過OEBPS/Text/A而大量文件添加到這
而你裡面的CSS相對路徑指向前者,那接下來是一場CSS連結錯誤的災難
目前沒有找到更改路徑選單順序的地方,腳本的玩法只能最後再去移動路徑
一般會用的HTML的tagName
h1~h6
p / hr / ol / ul / li / div
b / i / u / s
ruby / rt / rp / span
Е.產生目錄
單純產生目錄的話很簡單,只要有用到h1h2這些標題格式就可以讓Sigil自行產生目錄
按鈕位置在工具>目錄>產生目錄,或是上面圖示工具列找到一個叫做"產生目錄"的按鈕
產生後的目錄都在nav.xhtml這裡,如果你無聊也想要把這個連結CSS也行
預設就有連結sgc-nav.css,不過為了一致性,可以多增加原本寫好的Style0001.css的連結
Ё.中繼資料編輯器(書本名稱/作者)
這裡是epub的資訊頁,主要是要讓這本書在書櫃的時候顯示出該書名稱和作者的
按鈕位置在工具>中繼資料編輯器
必填的大概就是4項,比如:語言、標題、描述、作者/製作者
其他比較次要的項目就是:類型、主題(tags)、出版商、來源、創作日期
以下敘述是指content.opf的html內容
我們將在下一節中簡要定義和描述所有 12 個可選元素。我們從EPUB Publications 3.0.1 (2014) 規範中添加的五個元素開始 。
<dc:creator> 用於代表一個人或組織的名稱,負責 EPUB 出版物內容的智力創作。<meta> 元素提供了一種機制來細化此信息,提供諸如創建者的角色或其名稱的替代形式等詳細信息。
<dc:contributor> 用於表示個人或組織名稱,在 EPUB 出版物內容的創建中具有次要角色。
<dc:date> 用於定義 EPUB 出版物的出版日期。建議按照 ISO 8601:2004 (2004) 國際標準的 W3CDTF 配置文件來表示該元素值。例如 2016-03-17T12:10:04Z。
<dc:source> 用於標識作為派生 EPUB 出版物基礎的相關出版物。例如,該元素可以應用於 EPUB 數字出版物之前的印刷出版物。
<dc:type> 用於指示 EPUB 出版物從性質和類型的角度來看屬於特定類型。EPUB Publications 3.0.1 (2014) 規範將作者引用到出版物類型註冊表以填寫 <dc:type> 元素(EPUB 出版物類型註冊表, 2014)。應該指出的是,在撰寫本文時,該註冊表中的許多值仍處於草稿階段。
<dc:coverage> 標識資源的地理或時間範圍、其適用的地理或管轄空間。建議分配來自受控詞彙表的值。
<dc:description> 包括資源內容的綜合。描述可以包括但不限於 資源的摘要、目錄、圖形表示或摘要。
<dc:format> 標識文件格式、物理介質和資源維度(物理度量和持續時間)。建議分配來自受控詞彙表的值。
<dc:publisher> 標識負責資源可用性的個人、組織或服務。
<dc:relation> 標識相關資源,例如另一種格式的版本、翻譯等。
<dc:rights> 包括資源的適用權限的信息,例如版權。
<dc:subject> 標識資源主題。建議分配來自受控詞彙表的值。