付費限定

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

更新於 發佈於 閱讀時間約 8 分鐘
一直要到很久很久後,我才摸起了電子書的製作流程。除了想自己出版之外,最重要的是我已經習慣使用電子閱讀器(或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之後,就能解壓縮看到如下的檔案
檔案備妥後再使用EPUB-Checker來驗證,如果沒有錯就會將檔案打包成EPUB檔
若有錯它也會告訴你錯在哪裡,讓你回原檔案除錯。
關於EPUB的製作,在台灣 EPUB 3 製作指引已經將基本規則寫得很清楚了,並且連結裡還附上幾個EPUB的範本供大眾使用。
如果看得懂非常基本的html和css,比起用轉檔工具,你可以很輕鬆的修改、打造自己的樣式,呈現自己想要的畫面。
以純文字書來說,電子書的組成有:封面、書名頁、目錄、篇名頁、內文(內文又分:大標、小標、引文/摘文、內文、注釋⋯⋯)版權頁。
封面、書名頁、篇名頁、版權頁,都可以用html內抓取它們的圖檔(如下),那麼你就必須知道,哪裡是設定書籍大小、圖片連結。這裡需要改的只有1444與2048這兩個數字(書籍長寬,同一本書的書籍長寬是一樣的)其他頁面只要照本宣科改掉cover.jpg這個檔案名稱,以及拿掉<body epub:type="cover">這裡面的epub:type="cover"即可。*你只要稍稍邏輯好一點,打開檔案看是可以很容易看得懂的。
注:<title>封面</title>(在<title></title>中間的字多半應該放上「書名」)
接著內文進到比較複雜的css。在台灣 EPUB 3 製作指引提供的範本裡css的樣式表(如下) ,還一一標明「它是用來控制什麼」讓你一看就知道這些指令控制的是文字的什麼?但你要知道「怎麼使用」。
以下圖舉例說明,在html碼中該如何標式如下列的樣式:
在每個class=""中間那些,就是在樣式表裡的設定。

標題「意外喜愛。」有段落的段尾與後段離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 則留言,僅發佈於自己、工作、經營自媒體、書籍設計你目前無法檢視以下內容,可能因為尚未登入,或沒有該房間的查看權限。
你的見面禮 Premium 閱讀權限 只剩下0 小時 0
avatar-img
13.7K會員
866內容數
自由工作者、上班族究竟要用什麼樣的心態去面對呢?來看線線怎麼說;業餘的時候,也來跟線線一起看劇看電影及看書;有空的話一起來學做出版、編輯和電子書吧!
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
換日線的沙龍 的其他內容
你得把這些微不足道,一項一項做好,在這過程中,你會越來越駕輕就熟,你會越來越游刃有餘,你會做得比別人快,你會做得比別人好,你會花最少的時間去完成這些微不足道,最後你可能賺不了太多錢,但那些錢也足夠你往人生下一階段攀爬、前進。
去懂得自己合作上會遇到其他職務的細節是件必然的事!也因為懂得與理解,那些龜毛難搞的堅持與固執,才能有更好的磨合,工作起來順暢、合作起來愉快,才不會花大把的時間在抱怨工作、厭世人生!(工作快快做好,快點去玩不好嗎?)
不要抱怨加班加到死了!去找找自己工作上是不是缺少了什麼專業知識拖垮自己拿來生活的時間;去想想還能把什麼東西學起來連同工作步驟流程都做有邏輯的整併,讓自己在工作之餘還有很多餘裕去做想做的事,你就不會覺得工作是一件多麼厭世的事!
用對方法工作,你就不會那麼討厭工作;思考如何提升效率,你才會有更多時間生活!(時間,都是自己找出來的,共勉之!)
希望年輕一輩有志想成為編輯的青年們,可以把細節留意進去,讓自己成為更專業的人!編輯本來就不是只會寫字,只會把用字用精準而已。
不要老問別人工作上怎麼那麼龜毛,或是到底為什麼要知道這些細節⋯⋯人生不要花太多時間在工作上的最重要的一件事,就是「無論如何讓自己越來越專業,並留意別人不會注意的細節,不需要到吹毛求疵的地步,但要讓自己朝更專業的方向前進!越專業的人,越不容易花時間去除錯或是善後。」(加班或事情做不完有時候是自找的!)
你得把這些微不足道,一項一項做好,在這過程中,你會越來越駕輕就熟,你會越來越游刃有餘,你會做得比別人快,你會做得比別人好,你會花最少的時間去完成這些微不足道,最後你可能賺不了太多錢,但那些錢也足夠你往人生下一階段攀爬、前進。
去懂得自己合作上會遇到其他職務的細節是件必然的事!也因為懂得與理解,那些龜毛難搞的堅持與固執,才能有更好的磨合,工作起來順暢、合作起來愉快,才不會花大把的時間在抱怨工作、厭世人生!(工作快快做好,快點去玩不好嗎?)
不要抱怨加班加到死了!去找找自己工作上是不是缺少了什麼專業知識拖垮自己拿來生活的時間;去想想還能把什麼東西學起來連同工作步驟流程都做有邏輯的整併,讓自己在工作之餘還有很多餘裕去做想做的事,你就不會覺得工作是一件多麼厭世的事!
用對方法工作,你就不會那麼討厭工作;思考如何提升效率,你才會有更多時間生活!(時間,都是自己找出來的,共勉之!)
希望年輕一輩有志想成為編輯的青年們,可以把細節留意進去,讓自己成為更專業的人!編輯本來就不是只會寫字,只會把用字用精準而已。
不要老問別人工作上怎麼那麼龜毛,或是到底為什麼要知道這些細節⋯⋯人生不要花太多時間在工作上的最重要的一件事,就是「無論如何讓自己越來越專業,並留意別人不會注意的細節,不需要到吹毛求疵的地步,但要讓自己朝更專業的方向前進!越專業的人,越不容易花時間去除錯或是善後。」(加班或事情做不完有時候是自找的!)
你可能也想看
Google News 追蹤
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
將Word文件導出為EPUB格式並保持其原始格式是一項重要的任務,尤其是對於需要在不同設備上閱讀電子書的用戶。本文將詳細介紹幾種方法,幫助您在不丟失格式的情況下,將Word文檔成功轉換為EPUB格式,並推薦一些實用工具。
Thumbnail
從如何選擇電子書閱讀平臺到不同平臺的特色比較,作者分享了自己的使用心得,並提供了一些選擇平臺的建議。文章也提到了電子書平臺的回饋方案和累積點數的優缺點,以及在選擇平臺時需要考慮是否使用電子紙閱讀器等因素。
Thumbnail
作為一個 29 歲的 Kindle 愛好者,我花了很多時間探索不同的電子書格式。兩種最受歡迎的電子書格式是 EPUB 和 Mobi。每種格式都有其優勢和劣勢,尤其是在 Kindle 上閱讀時。
Thumbnail
也許有些人在猶豫要不要使用電子書,這篇文章會分享電子書與紙本書的優缺點。電子書的優點是隨時都可閱讀、不佔空間、購買後不用等待等。紙本書的優點是可以賣二手書、有書本擁有權、可以在書店試閱整本書等。
Thumbnail
早期,在我出紙本書的年代,已經開始有人在講電子書的事情了,不過當時的我並沒有很在意。一來,對它不夠熟悉;再來,當時網路還是撥接的年代,誰會在網路上看書?我心底打很大的問號。隔了這麼多年,隨著網路的躍升、軟硬體設備的改善,加上各家平台興起,「電子書」不再只是網路上看的書,還有閱讀器的誕生。
Thumbnail
雖然電子書流行已久,但我個人依然偏愛實體書。我喜歡翻閱實體書的感覺,以及書本帶給我的獨特氛圍。儘管如此,我也瞭解到電子書的便利和節省空間的優勢,因此正考慮開始使用電子書。在比較不同品牌和價格後,我將做出我的決定。
Thumbnail
紙本書還是電子書?兩者各有優缺點,紙本書帶來物理感受,獨特氣味,而電子書則輕巧、方便存放。本篇文章提供兩種閱讀方式之利弊與觀點,並分享作者重新發現電子書的日常經驗。
Thumbnail
用閱讀器看書讓我的閱讀速度大爆發,雖然過年前已經累積了一些看到一半的書,但目前為止電子書的閱讀速度還是偏快,讓我相信我可以一年讀 250本書! (笑)
Thumbnail
EPUB-Checker 是一個實用的小工具,可以幫助你驗證 EPUB 電子書檔案,並找出其中的錯誤語法。本文將詳細介紹 EPUB-Checker 的使用步驟,讓你能夠輕鬆對 EPUB 檔案進行校對。
Thumbnail
電子書閱讀器 (電子紙) 比平板有更多優點。它使用 E-Ink 電子紙作為顯示器,能夠保護眼睛,提高閱讀專注力,體積小且電量足。你有相關的使用經驗嗎?也可以試著讓更多人瞭解這個優秀的閱讀工具。
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
將Word文件導出為EPUB格式並保持其原始格式是一項重要的任務,尤其是對於需要在不同設備上閱讀電子書的用戶。本文將詳細介紹幾種方法,幫助您在不丟失格式的情況下,將Word文檔成功轉換為EPUB格式,並推薦一些實用工具。
Thumbnail
從如何選擇電子書閱讀平臺到不同平臺的特色比較,作者分享了自己的使用心得,並提供了一些選擇平臺的建議。文章也提到了電子書平臺的回饋方案和累積點數的優缺點,以及在選擇平臺時需要考慮是否使用電子紙閱讀器等因素。
Thumbnail
作為一個 29 歲的 Kindle 愛好者,我花了很多時間探索不同的電子書格式。兩種最受歡迎的電子書格式是 EPUB 和 Mobi。每種格式都有其優勢和劣勢,尤其是在 Kindle 上閱讀時。
Thumbnail
也許有些人在猶豫要不要使用電子書,這篇文章會分享電子書與紙本書的優缺點。電子書的優點是隨時都可閱讀、不佔空間、購買後不用等待等。紙本書的優點是可以賣二手書、有書本擁有權、可以在書店試閱整本書等。
Thumbnail
早期,在我出紙本書的年代,已經開始有人在講電子書的事情了,不過當時的我並沒有很在意。一來,對它不夠熟悉;再來,當時網路還是撥接的年代,誰會在網路上看書?我心底打很大的問號。隔了這麼多年,隨著網路的躍升、軟硬體設備的改善,加上各家平台興起,「電子書」不再只是網路上看的書,還有閱讀器的誕生。
Thumbnail
雖然電子書流行已久,但我個人依然偏愛實體書。我喜歡翻閱實體書的感覺,以及書本帶給我的獨特氛圍。儘管如此,我也瞭解到電子書的便利和節省空間的優勢,因此正考慮開始使用電子書。在比較不同品牌和價格後,我將做出我的決定。
Thumbnail
紙本書還是電子書?兩者各有優缺點,紙本書帶來物理感受,獨特氣味,而電子書則輕巧、方便存放。本篇文章提供兩種閱讀方式之利弊與觀點,並分享作者重新發現電子書的日常經驗。
Thumbnail
用閱讀器看書讓我的閱讀速度大爆發,雖然過年前已經累積了一些看到一半的書,但目前為止電子書的閱讀速度還是偏快,讓我相信我可以一年讀 250本書! (笑)
Thumbnail
EPUB-Checker 是一個實用的小工具,可以幫助你驗證 EPUB 電子書檔案,並找出其中的錯誤語法。本文將詳細介紹 EPUB-Checker 的使用步驟,讓你能夠輕鬆對 EPUB 檔案進行校對。
Thumbnail
電子書閱讀器 (電子紙) 比平板有更多優點。它使用 E-Ink 電子紙作為顯示器,能夠保護眼睛,提高閱讀專注力,體積小且電量足。你有相關的使用經驗嗎?也可以試著讓更多人瞭解這個優秀的閱讀工具。