付費限定

寫給電子書製作的自學者:去認識css與html碼!

更新 發佈閱讀 9 分鐘
raw-image

一直要到很久很久後,我才摸起了電子書的製作流程。除了想自己出版之外,最重要的是我已經習慣使用電子閱讀器(或iPad閱讀)且認為「紙本書」根本是使我生活沒有品質的東西。(我沒有巨大的屋子可以放書,我又不想要家裡連伸展的空間都沒有。特別是像我這樣又弄手工又在家裡工作的人,沒有大一點的房子,很容易讓家裡連走動的地方都沒有。)

我依然迷戀「紙本書」在裝幀設計上的用紙、油墨,但若是關於「吸收知識」或是「閱讀世界」,我會選擇對我來說比較不吃重的電子書。當然,最終的目的多半還是期待「學會它,它能成為我的收入來源。」

這之中研究過幾個轉換電子書的軟體,從排版好手我常用的indesign到sigil,坦白說,這些轉換、製作電子書的軟體,有太多細節都不適用於中文(當然,這是幾年前開始實作的心得)在與其他人就電子書製作的討論裡,我才知道原來epub檔是由html碼與css樣式組合而成的,這⋯⋯這⋯⋯這⋯⋯不是,不是我早年做網頁吃飯的技能嗎?這麼不難的東西,為什麼我等到那麼久以後才開始實作?(也應當是在那之前,沒有到沒工作有時間研究。)

我製作電子書的工具只有幾種:1,文字編輯器(修改standard.opf)、2,dreamweaver(編寫html)、3,EPUB-Checker

打開瀏覽校看格式對不對的:Mac的書籍(從前叫iBook)、mooink S、iPad readmoo app、電腦版的Chrome上的readmoo書櫃。

在副檔名.epub的EPUB書籍檔案改成.zip之後,就能解壓縮看到如下的檔案

raw-image

檔案備妥後再使用EPUB-Checker來驗證,如果沒有錯就會將檔案打包成EPUB檔

raw-image

若有錯它也會告訴你錯在哪裡,讓你回原檔案除錯。

關於EPUB的製作,在台灣 EPUB 3 製作指引已經將基本規則寫得很清楚了,並且連結裡還附上幾個EPUB的範本供大眾使用。

如果看得懂非常基本的html和css,比起用轉檔工具,你可以很輕鬆的修改、打造自己的樣式,呈現自己想要的畫面。

以純文字書來說,電子書的組成有:封面、書名頁、目錄、篇名頁、內文(內文又分:大標、小標、引文/摘文、內文、注釋⋯⋯)版權頁。

封面、書名頁、篇名頁、版權頁,都可以用html內抓取它們的圖檔(如下),那麼你就必須知道,哪裡是設定書籍大小、圖片連結。這裡需要改的只有1444與2048這兩個數字(書籍長寬,同一本書的書籍長寬是一樣的)其他頁面只要照本宣科改掉cover.jpg這個檔案名稱,以及拿掉<body epub:type="cover">這裡面的epub:type="cover"即可。*你只要稍稍邏輯好一點,打開檔案看是可以很容易看得懂的。

raw-image
注:<title>封面</title>(在<title></title>中間的字多半應該放上「書名」)

接著內文進到比較複雜的css。在台灣 EPUB 3 製作指引提供的範本裡css的樣式表(如下) ,還一一標明「它是用來控制什麼」讓你一看就知道這些指令控制的是文字的什麼?但你要知道「怎麼使用」。

raw-image

以下圖舉例說明,在html碼中該如何標式如下列的樣式:

raw-image

在每個class=""中間那些,就是在樣式表裡的設定。

raw-image

標題「意外喜愛。」有段落的段尾與後段離0.5em(bottom-0em50) ,字級則是1.5em(font-1em50)

對應在css檔案裡的樣式則為:
.hltr .bottom-0em50 { margin-bottom: 0.50em; }
.vrtl .bottom-0em50 { margin-left: 0.50em; }

(因為直式與橫式所控制的上下左右不一樣,所以必須設一個.hltr橫式與一個.vrtl直式的。)

字級樣式:
.font-1em50 { font-size: 1.50em; }


副標「──第一次前往首爾」則有與大標縮排對齊兩個個字元則由「font-1em50加兩個全形空白」,字級為1.2em(font-1em20)。

對應在css檔案裡的樣式則為:
.font-1em50 { font-size: 1.50em; }
.font-1em20 { font-size: 1.20em; }


<br /> 為空行,傳統在html裡,多有人寫<br>但在EPUB規則裡是<br />


引文:「一直不是一個迷戀韓風的人,初次提起「去韓國旅行」還有一點抗拒⋯⋯」左邊縮排兩個字元(start-2em),字體宋體(sfont)

對應在css檔案裡的樣式則為:
.hltr .start-2em { margin-left: 2.00em; }
.vrtl .start-2em { margin-top: 2.00em; }

(因為直式與橫式所控制的上下左右不一樣,所以必須設一個.hltr橫式與一個.vrtl直式的。)

字體樣式:
.hltr .sfont,
.vrtl .sfont {
font-family: fang-song;
}

(字體多以Readmoo讀墨電子書製作準則為規則設,但在其他像是Mac中的書籍可能就出不來。)


<hr/> 為分隔線。我在css語法裡有另外設定它的長度(依畫面比例左右空40%,margin:1em 40%;)、線條的粗細(border-width: 0.5px;)、線條的顏色(border-color: #c0c0c0;)。

對應在css檔案裡的樣式則為:
hr {
border-width: 0.5px;
border-color: #c0c0c0;
margin:1em 40%;
}


「0」標號數字直排,給轉直的讀者不用橫著看,字級1.3em(font-1em30 tcy)

對應在css檔案裡的樣式則為:
.tcy {
-webkit-text-combine: horizontal;
-epub-text-combine: horizontal;
}

字級樣式:
.font-1em30 { font-size: 1.30em; }


斜體「滿好的。」(italic)

對應在css檔案裡的樣式則為:
.italic {
font-style: italic;
}


只要你有一點點(真的只要有一點點)html和css的基礎,並且有很好的「段落格式與樣式」的邏輯,那麼,不用用軟體轉檔,你都可以輕鬆用html和css寫出一本格式漂亮的電子書。

*之所以強調「段落格式與樣式」的邏輯,原因無它,就「排版」的角度看,一本五萬到十萬字的書,會有統一的格式,重要的是將「段落格式與樣式」設定好,跟做美術設計的邏輯不太一樣就是了。

至於html與css的基礎該從何開始?坊間買本基礎書籍或網路上應該都有人寫最基本的如何開始。從開始寫一個html的網頁開始去試,變化其中的css,熟稔後,做一本電子書不是難事!比你用軟體轉檔的自由度更高,也比不是以中文為主要開發語言的轉檔軟體做出來的更符合中文的閱讀。

當然。我相信以AI近程的發展,以後,你不用自己寫html或css,你只要知道怎麼告訴AI,你要的是什麼版面它就會幫你寫了;不過,前提還是,你要有具備下指令的知識,而那多半來自於你對文字編輯與書籍版面的純熟度!

來吧!把它學好來,自己從無到有不用依賴轉檔做出一本電子書,真的,不是,難事!

其他html與css以外的設定如standard.opf,在「台灣 EPUB 3 製作指引」或以google搜尋,也都可以找到解答。

P.S
圖文書會有其他的規則,要做一本流式,不以pdf的固定版面來呈現,也考驗使用html與css及圖片配置的能力。

圖:20230303內惟藝術中心,Canon EOSM50,以及電腦截圖(老天鵝寫這個也要很有邏輯的排列。)










以行動支持創作者!付費即可解鎖
本篇內容共 3282 字、0 則留言,僅發佈於自己、工作、經營自媒體、書籍設計你目前無法檢視以下內容,可能因為尚未登入,或沒有該房間的查看權限。
留言
avatar-img
留言分享你的想法!
avatar-img
換日線的沙龍
21.0K會員
923內容數
自由工作者、上班族究竟要用什麼樣的心態去面對呢?來看線線怎麼說;業餘的時候,也來跟線線一起看劇看電影及看書;有空的話一起來學做出版、編輯和電子書吧!
換日線的沙龍的其他內容
2025/02/24
看到一個推理故事用一本書來講這種關於版面與閱讀之間的關係,雖然故事我沒有特別喜歡,我也會力薦所有做書的人都應該讀這本書!
Thumbnail
2025/02/24
看到一個推理故事用一本書來講這種關於版面與閱讀之間的關係,雖然故事我沒有特別喜歡,我也會力薦所有做書的人都應該讀這本書!
Thumbnail
2025/01/06
自出版,是一件非常有意思的事!做書也是。但完全的先決條件就是「你想做,你去找方法做,你去學習怎麼做,你要非常的積極!」自己做不來,找人做,找人做之前,把「你該做的部分做好!」積極的!沒有人應該為了你想做的事替你積極,如果你都意興闌珊了,誰在意你呢!
Thumbnail
2025/01/06
自出版,是一件非常有意思的事!做書也是。但完全的先決條件就是「你想做,你去找方法做,你去學習怎麼做,你要非常的積極!」自己做不來,找人做,找人做之前,把「你該做的部分做好!」積極的!沒有人應該為了你想做的事替你積極,如果你都意興闌珊了,誰在意你呢!
Thumbnail
2024/09/28
不要邊抱怨自己工作要死要活、加班加得昏天暗地,老闆還在那邊靠北自己的產值不夠,又邊用蠢方法工作,然後覺得自己社畜得要死,好像全天下只有自己忙得要死要活還沒人感謝。嗯,有時候只得說:用錯的方法工作,加班,真的是,自找的!
Thumbnail
2024/09/28
不要邊抱怨自己工作要死要活、加班加得昏天暗地,老闆還在那邊靠北自己的產值不夠,又邊用蠢方法工作,然後覺得自己社畜得要死,好像全天下只有自己忙得要死要活還沒人感謝。嗯,有時候只得說:用錯的方法工作,加班,真的是,自找的!
Thumbnail
看更多
你可能也想看
Thumbnail
在小小的租屋房間裡,透過蝦皮購物平臺採購各種黏土、模型、美甲材料等創作素材,打造專屬黏土小宇宙的療癒過程。文中分享多個蝦皮挖寶地圖,並推薦蝦皮分潤計畫。
Thumbnail
在小小的租屋房間裡,透過蝦皮購物平臺採購各種黏土、模型、美甲材料等創作素材,打造專屬黏土小宇宙的療癒過程。文中分享多個蝦皮挖寶地圖,並推薦蝦皮分潤計畫。
Thumbnail
小蝸和小豬因購物習慣不同常起衝突,直到發現蝦皮分潤計畫,讓小豬的購物愛好產生價值,也讓小蝸開始欣賞另一半的興趣。想增加收入或改善伴侶間的購物觀念差異?讓蝦皮分潤計畫成為你們的神隊友吧!
Thumbnail
小蝸和小豬因購物習慣不同常起衝突,直到發現蝦皮分潤計畫,讓小豬的購物愛好產生價值,也讓小蝸開始欣賞另一半的興趣。想增加收入或改善伴侶間的購物觀念差異?讓蝦皮分潤計畫成為你們的神隊友吧!
Thumbnail
作為一個 29 歲的 Kindle 愛好者,我花了很多時間探索不同的電子書格式。兩種最受歡迎的電子書格式是 EPUB 和 Mobi。每種格式都有其優勢和劣勢,尤其是在 Kindle 上閱讀時。
Thumbnail
作為一個 29 歲的 Kindle 愛好者,我花了很多時間探索不同的電子書格式。兩種最受歡迎的電子書格式是 EPUB 和 Mobi。每種格式都有其優勢和劣勢,尤其是在 Kindle 上閱讀時。
Thumbnail
就閱讀的考量,電子書肯定不全然等於紙本書,它是另一個文字/書籍呈現的形式,除了epub的規則得遵守之外(才能生成檔案),它還有許多在「使用上」需要去思考的地方,也就必然會在「使用」的細節上,會再去思考更多的可能!
Thumbnail
就閱讀的考量,電子書肯定不全然等於紙本書,它是另一個文字/書籍呈現的形式,除了epub的規則得遵守之外(才能生成檔案),它還有許多在「使用上」需要去思考的地方,也就必然會在「使用」的細節上,會再去思考更多的可能!
Thumbnail
EPUB-Checker 是一個實用的小工具,可以幫助你驗證 EPUB 電子書檔案,並找出其中的錯誤語法。本文將詳細介紹 EPUB-Checker 的使用步驟,讓你能夠輕鬆對 EPUB 檔案進行校對。
Thumbnail
EPUB-Checker 是一個實用的小工具,可以幫助你驗證 EPUB 電子書檔案,並找出其中的錯誤語法。本文將詳細介紹 EPUB-Checker 的使用步驟,讓你能夠輕鬆對 EPUB 檔案進行校對。
Thumbnail
你知道嗎?你在發Blogger文章時,其實就已經完成80%的epub電子書。 我原來是不知道的。因為列印輸出的檔案,還是多以pdf為主。雖會看epub的電子書,卻重未想過存成epub的檔案格式。而且,開始寫小說,也只是因為看了很多網路小說。出書什麼,想也沒想過,反倒想過會『撲街』! 也確實『撲街
Thumbnail
你知道嗎?你在發Blogger文章時,其實就已經完成80%的epub電子書。 我原來是不知道的。因為列印輸出的檔案,還是多以pdf為主。雖會看epub的電子書,卻重未想過存成epub的檔案格式。而且,開始寫小說,也只是因為看了很多網路小說。出書什麼,想也沒想過,反倒想過會『撲街』! 也確實『撲街
Thumbnail
寫這個好像沒什麼人要看XD,不過我九月的書被借閱了好多次,有九百多塊收入,我還是覺得做電子書是門好生意XDDD
Thumbnail
寫這個好像沒什麼人要看XD,不過我九月的書被借閱了好多次,有九百多塊收入,我還是覺得做電子書是門好生意XDDD
Thumbnail
感謝AI和線上免費軟體的幫忙,讓我完成了第一本英文繪本童書並且在Amazon上架。這系列文章要手把手地把我的經驗分享給大家,讓大家一起加入創作者的行列。 前言 我一直很想要做一本英文繪本送給我的孩子,但我只有小學繪畫程度(非美術班),英文讀了很多年仍是略懂略懂,但要自己創作一篇完整的故事還會常常搞不
Thumbnail
感謝AI和線上免費軟體的幫忙,讓我完成了第一本英文繪本童書並且在Amazon上架。這系列文章要手把手地把我的經驗分享給大家,讓大家一起加入創作者的行列。 前言 我一直很想要做一本英文繪本送給我的孩子,但我只有小學繪畫程度(非美術班),英文讀了很多年仍是略懂略懂,但要自己創作一篇完整的故事還會常常搞不
Thumbnail
來吧!把它學好來,自己從無到有不用依賴轉檔做出一本電子書,真的,不是,難事!
Thumbnail
來吧!把它學好來,自己從無到有不用依賴轉檔做出一本電子書,真的,不是,難事!
Thumbnail
嚷了許久的電子書進度,終於在所有案子告一個段落,又開始心慌沒有收入的時候,繼續動工了。前篇有提到〈用製作網頁邏輯做電子書,而不是用紙本書的邏輯!〉這篇繼續筆記後續遇到的問題與困惑。 既然都走入數位化的電子書模式,不能搜尋不就只是「為了做電子書而做電子書」而忽略閱讀者及時代的改變嗎?
Thumbnail
嚷了許久的電子書進度,終於在所有案子告一個段落,又開始心慌沒有收入的時候,繼續動工了。前篇有提到〈用製作網頁邏輯做電子書,而不是用紙本書的邏輯!〉這篇繼續筆記後續遇到的問題與困惑。 既然都走入數位化的電子書模式,不能搜尋不就只是「為了做電子書而做電子書」而忽略閱讀者及時代的改變嗎?
Thumbnail
前陣子工作之餘比較有時間,開始積極閱讀 non-fiction。於是本文紀錄一下自己這一陣子重新探索閱讀的心路歷程,包括: 1)為什麼我愛上電子書 2)我看電子書用什麼設備/平台—順便聊聊厲害的微信讀書 3)中文讀者閱讀翻譯書的困境
Thumbnail
前陣子工作之餘比較有時間,開始積極閱讀 non-fiction。於是本文紀錄一下自己這一陣子重新探索閱讀的心路歷程,包括: 1)為什麼我愛上電子書 2)我看電子書用什麼設備/平台—順便聊聊厲害的微信讀書 3)中文讀者閱讀翻譯書的困境
Thumbnail
1。草稿:先使用doc 製作一份draft, 有清楚的標題(如H1,置中),內文,段落、註腳等格式。無論要做epub3還是適合kindle 的azw, mobi,都需要。在相關的發佈平台上,都有對應的文件說明。格式搞好後期可以省下許多麻煩。 2。製作:google doc, sigil, cali
Thumbnail
1。草稿:先使用doc 製作一份draft, 有清楚的標題(如H1,置中),內文,段落、註腳等格式。無論要做epub3還是適合kindle 的azw, mobi,都需要。在相關的發佈平台上,都有對應的文件說明。格式搞好後期可以省下許多麻煩。 2。製作:google doc, sigil, cali
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News