本來沒有要搞文字書籍這邊的啦
不過上次搞EPUB 3.0版固定配置圖片格式時
還是有參照其它各版格式來抓規律(要我慢慢看規格文件實在有點痛苦)
所以也是略有了解的程度
然後剛好最近手上有一批資料適合拿來轉檔看看
手癢就花了點時間實作一下
順便寫下這篇做一下筆記，做為未來要用時可以快速參考的依據
我用EPUB 3.3的範例來修改與細部說明
這篇是收錄台灣文學之父賴和的作品，一桿稱仔
https://github.com/dpublishing/epub-specs-tc/tree/master/epub33/EPUB 3.3範本
內容不但是直式文字的右翻書
而且有封面，有目錄索引，有分檔案(這個後面解釋)，有插圖，有超連結
一本電子書該有的基本都有了
要擴充製作，拿這個來參考真的很夠了
以下就慢慢講解
雖然這是3.3的版本
但基本上跟上次的3.0差不多
我分不太出來差異
一樣有mimetype檔案定義這是電子書
一樣要靠META-INF裡的container.xhtml指定主要opf檔的位置
只是這次檔名變成content.opf，不是standard.opf
也不是放item資料夾裡
改放OEBPS(Open eBook Publication Structure的縮寫)裡
這只是改個資料夾，其它的沒差
然後，或許是資料少吧，OEBPS下就沒再建什麼style，image與xhtml的資料夾
全部資料放在同一個資料夾內
可謂一目瞭然
先講最簡單的封面，這其實就跟上次的固定配置圖片格式一樣
因為它通常就是一張圖嘛
所以就是在xhtml檔裡以SVG格式產出畫布並指定圖片大小
並在content.opf裡設定即可
再來就是目錄的部分，範例裡檔名改為簡單的nav.xhtml
格式上沒差很多，只是展示了同檔案還可以有目錄(索引)的功能
像這樣
<li><a href="bodymatter_0_0.xhtml"><span>一桿稱仔</span></a></li>
<li><a href="bodymatter_0_0.xhtml#toc_index_1"><span>後記</span></a></li>
以這本一桿稱仔來說，主文跟後記是寫在同一個檔案的
但可以靠著tag內加id指定位置，從目錄跳到後記的區塊
當然要跳別的檔案也行，像作者介紹就是另一個檔案
<li><a href="bodymatter_0_1.xhtml"><span>賴和簡介</span></a></li>
所以，要所有內容塞一個檔案也行，要像這樣分檔也沒問題
再來就是文字內容的部分了
主格式就是xhtml的，主體就跟一般網頁一樣，放在body裡面
只是body有指定class跟epub的類別，下面這行的固定格式應該不能跑掉
<body class="bodymatter" epub:type="bodymatter">
文字內容範例就是用常用<p>來分段
只是縮排上，它用上了全形的空白這一個通常被程設避用的字元
我有試著用一般的空白，可是看起來似乎沒效果
那要有縮排效果看來就只能乖乖用全形空白了
因為這就是html，所以排板上的技巧，基本上就跟html上的一樣
除了用<p>分段外，當標題大字體的<h1><h2><h3>也都能用
更改字體的<span>自然更是沒問題
文字內容上大概就這樣，包含上面提到的超連結，這更是原本html就有的東西
那就不再詳述了，接下來講插圖
插圖我並沒有研究的很透徹
因為我要做的只是跟範例一樣，插張圖而已
沒有考慮是要文繞圖，還是靠上靠左靠右置中之類的，像雜誌一樣豐富的排板
而且這種排板應該就要用固定式配置，版面才不會亂掉
總之最簡單的插圖法大概就下面這樣寫，用picture標籤，指定來源與圖像寬度
<picture>
<source media="(width:300px)" srcset="laiho.jpg" type="image/jpeg"/>
<img src="laiho.jpg" alt="賴和肖像" style="width:300px;"/>
</picture>
到這裡就差不多完成了
只剩下要到content.opf裡把自己新增的圖片檔，xhtml檔放到裡面來
啊，當然還有改title名稱為自己要的書名
壓成zip檔改檔名為epub，丟到手機上的bookwalker上看
嗯，又完成了一件事
本來應該到此為止
但最近看到bookwalker有在調查字型的事
就又蠢蠢欲動地想再弄這件事
因為我也對bookwalker的字型不是很滿意
而EPUb本來就可以內嵌字型進去
所以我就順便再實作看看
讓自己做的書，可以再看得更順眼一點
簡單地說，要內嵌字型，除了把字型檔放在OEBPS資料內
還至少要做到兩件事
一個就是在opf檔裡面，加上這一行
<meta property="ibooks:specified-fonts">true</meta>
這個EPUB3.3的範例裡就有了
再來就是在css檔案裡，加上字型指定
在EPUB3.0的這個範例裡的font.css有相關的資料
https://github.com/dpublishing/epub3guide/blob/master/practices/03_Embed_Fonts_And_Ruby/
就長這樣
@font-face {
font-family: bopomofo;
src: url('../font/bopomofo.ttf') format('TrueType');
}
@font-face {
font-family: sourcethai;
src: url('../font/notosthai.otf') format('OpenType');
}
可以看到建立字型要命名外，還要確定類別
像上面這樣指定名稱與類別好了後
這樣就能用了
接下來就是看你CSS怎麼寫
這個我其實一直沒有搞得懂過
所以我就乾脆暴力用<span style="font-family: bopomofo;">的語法在xhtml裡去強制指定
我指定的字型是用開源的王漢宗字體，本以為一切正常後
接著就發現中了常見直書時會遇到的字型困擾
標點符號還是橫的...
有沒有用直書後符號還是正確的字型，有，可是都是有版權的
雖然只是自用，只要不流出就不會有事，可是難道沒有更好的解法嗎？
問了一下ChatGPT，它給了我一個漂亮的解法
「在指定字型時，加入指定中日韓的UNICODE範圍」
這樣用這個字型時，只有在中日韓文字時才會有影響
其它的英文數字與符號，通通還是用預設的字型
雖然這樣子，字型會不統一，但至少標點符號的方向是對的
而且符號的字體不統一其實影響沒那麼大
我用範例如下，
@font-face {
font-family: wanghan;
src: url('../wt011.ttf') format('TrueType');
unicode-range: U+4E00–9FFF; /* 中日韓文字範圍 */
}
解決！
這樣書好看多了，不再只有醜醜的細明體。
改個字型就可以這麼好看。
期待之後bookwalker也可以有漂亮的字體可用啊。
沒有留言:
張貼留言