付費限定
寫給電子書製作的自學者：去認識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 .bottom-0em50 { margin-bottom: 0.50em; }
.vrtl .bottom-0em50 { margin-left: 0.50em; }
（因為直式與橫式所控制的上下左右不一樣，所以必須設一個.hltr橫式與一個.vrtl直式的。）
字級樣式：
.font-1em50 { font-size: 1.50em; }
.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; }
.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 .start-2em { margin-left: 2.00em; }
.vrtl .start-2em { margin-top: 2.00em; }
（因為直式與橫式所控制的上下左右不一樣，所以必須設一個.hltr橫式與一個.vrtl直式的。）
字體樣式：
.hltr .sfont,
.vrtl .sfont {
font-family: fang-song;
}
.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%;
}
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;
}
.tcy {
-webkit-text-combine: horizontal;
-epub-text-combine: horizontal;
}
字級樣式：
.font-1em30 { font-size: 1.30em; }
.font-1em30 { font-size: 1.30em; }
斜體「滿好的。」（italic）
對應在css檔案裡的樣式則為：
.italic {
font-style: italic;
}
.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及圖片配置的能力。
圖文書會有其他的規則，要做一本流式，不以pdf的固定版面來呈現，也考驗使用html與css及圖片配置的能力。
圖：20230303內惟藝術中心，Canon EOSM50，以及電腦截圖（老天鵝寫這個也要很有邏輯的排列。）
以行動支持創作者！付費即可解鎖
本篇內容共 3282 字、0
則留言，僅發佈於自己、工作、經營自媒體、書籍設計你目前無法檢視以下內容，可能因為尚未登入，或沒有該房間的查看權限。
你的見面禮 Premium 閱讀權限
只剩下0 小時 0 分
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
作者 Only 分享自己投資心法，透過公式，讓你了解投資的本質，建構自己的投資哲學 ，但是投資還有一個不可控的因素，那就是運氣，系統性要解決運氣的問題，就是靠資產配置，但是作者更希望呼籲的是，我們成功致富後，心有餘力的去幫助他人，那帶來的成就感，遠遠不是一點財富可以衡量的！
正男生日的時候，我們收到了來自聖誕老公公的生日快樂影片，這也提醒了我們，要開始寫信給聖誕老公公了。今年，正男妮妮想要用小腳印「畫信」，本來妮妮是想要做一顆蘋果樹的，印反了，正男哥哥索性幫忙剪星星和樹幹，倒成了一棵好可愛的小腳丫聖誕樹！媽媽也幫妮妮寫下她想對聖誕老公公說的話，這是2012年聖誕節前夕，
2014年，為紀念金馬50，由楊力州執導推出的紀錄片《 我們的那時此刻 》(與書同名)。
剪接多部經典華語電影、訪談多達十人以上的影人，為華語電影留下半世紀的見證。
這是一本屬於我們的書，關於「那時」電影的榮光
故事就發生在茱麗葉的家鄉，浪漫古城義大利的「維洛納」，傳統的地中海氣候，這時應該正值乾季，石砌的房舍、哥德式的建物，眼底都是充滿熱情的橘黃色調，好像到處都飄著麵包和葡萄酒的香氣。所謂的「故鄉」、「茱麗葉的家」，其實是這座城市的包裝，覆上一層經典愛情故事的濾鏡，給了旅人們心生嚮往的理由。
台灣文青人口，密度之高，令人匪夷所思。不管在車站、路上、捷運、書店，都隨時會巧遇這群天之驕子。荒謬的是，新冠病毒慢慢退散，但潛伏三四十年的文青病毒依然代代相傳，寫作人大多難以免疫。藥廠老闆或高幹，大多是理工出身，跟文青風馬牛不相及。建議他們砸下大筆經費，以開發消除文青病毒的疫苗，商機無限！
前幾天在
創作帶給我連結、話題、影響力。將創作成果發佈在各平台，被看到引起興趣，就產生連結；有創作就可跟人介紹創作，就有話題；別人更加認識我，就有機會找我提供服務，就創造影響力。我的創作：水利技師書：考生必讀，得版稅，成就感。風雨成長自傳：激勵人心，利輔導，歸屬感。50多國內外專利：世界舞臺，獲名譽，榮譽感。
法國文學家羅蘭・巴特在《戀人絮語》中說過，每個沉浸在愛情的人，都有如一部熱情的機器，拚命地製造符號。而約會正是戀人製造符號，定義愛情的私密儀式。有趣的是，不管在世界的哪個角落，「看電影約會」都成了約定俗成的必要符號。我們約會時看電影，那麼，有沒有想過，電影裡的人又是怎樣約會，拚命製造屬於自己的符號呢
我先說結論，現在當然可以買台積電，但不要期待會一路反彈到600元，連5月31日爆大量收在560元，都很難越過，而且我也不相信它會站上1000元。套在600元以上的朋友，該怎麼辦呢？
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
作者 Only 分享自己投資心法，透過公式，讓你了解投資的本質，建構自己的投資哲學 ，但是投資還有一個不可控的因素，那就是運氣，系統性要解決運氣的問題，就是靠資產配置，但是作者更希望呼籲的是，我們成功致富後，心有餘力的去幫助他人，那帶來的成就感，遠遠不是一點財富可以衡量的！
正男生日的時候，我們收到了來自聖誕老公公的生日快樂影片，這也提醒了我們，要開始寫信給聖誕老公公了。今年，正男妮妮想要用小腳印「畫信」，本來妮妮是想要做一顆蘋果樹的，印反了，正男哥哥索性幫忙剪星星和樹幹，倒成了一棵好可愛的小腳丫聖誕樹！媽媽也幫妮妮寫下她想對聖誕老公公說的話，這是2012年聖誕節前夕，
2014年，為紀念金馬50，由楊力州執導推出的紀錄片《 我們的那時此刻 》(與書同名)。
剪接多部經典華語電影、訪談多達十人以上的影人，為華語電影留下半世紀的見證。
這是一本屬於我們的書，關於「那時」電影的榮光
故事就發生在茱麗葉的家鄉，浪漫古城義大利的「維洛納」，傳統的地中海氣候，這時應該正值乾季，石砌的房舍、哥德式的建物，眼底都是充滿熱情的橘黃色調，好像到處都飄著麵包和葡萄酒的香氣。所謂的「故鄉」、「茱麗葉的家」，其實是這座城市的包裝，覆上一層經典愛情故事的濾鏡，給了旅人們心生嚮往的理由。
台灣文青人口，密度之高，令人匪夷所思。不管在車站、路上、捷運、書店，都隨時會巧遇這群天之驕子。荒謬的是，新冠病毒慢慢退散，但潛伏三四十年的文青病毒依然代代相傳，寫作人大多難以免疫。藥廠老闆或高幹，大多是理工出身，跟文青風馬牛不相及。建議他們砸下大筆經費，以開發消除文青病毒的疫苗，商機無限！
前幾天在
創作帶給我連結、話題、影響力。將創作成果發佈在各平台，被看到引起興趣，就產生連結；有創作就可跟人介紹創作，就有話題；別人更加認識我，就有機會找我提供服務，就創造影響力。我的創作：水利技師書：考生必讀，得版稅，成就感。風雨成長自傳：激勵人心，利輔導，歸屬感。50多國內外專利：世界舞臺，獲名譽，榮譽感。
法國文學家羅蘭・巴特在《戀人絮語》中說過，每個沉浸在愛情的人，都有如一部熱情的機器，拚命地製造符號。而約會正是戀人製造符號，定義愛情的私密儀式。有趣的是，不管在世界的哪個角落，「看電影約會」都成了約定俗成的必要符號。我們約會時看電影，那麼，有沒有想過，電影裡的人又是怎樣約會，拚命製造屬於自己的符號呢
我先說結論，現在當然可以買台積電，但不要期待會一路反彈到600元，連5月31日爆大量收在560元，都很難越過，而且我也不相信它會站上1000元。套在600元以上的朋友，該怎麼辦呢？