BB eBooks Banner

Packaging HTML Files into a Thai EPUB

Posted on 2012-Aug-13

by BB eBooks Staff

Having carefully followed the technical guidance on the BB eBooks developer page, I was trying to create a Thai EPUB. The guide successfully enabled me to package all the content files into one EPUB file but the story did not end there. Thai font display on EPUB was one of the biggest challenges in the entire process. Before going into greater details, I would like to share a step by step demonstration of how the EPUB packaging works in practice.


Please refer to our guideline how to create HTML files and CSS stylesheets. With Notepad++, the advanced text editor did recognize whatever extension names I threw at it very well. It colorfully coded my tags in different colors to differentiate one set of elements from another. Be it .XML, .HTML, or .CSS, this software gave me the freedom to explore, adjust, recheck, and verify all the backbreaking codes. My little excitement started when I used the Metapad to obtain the required metadata.

UTF-8 Encoding and Rote Memorization

With the encoding set to UTF-8, Thai language can be rendered on the screen successfully. My decision to choose an ideal Thai eBook was greatly inspired by my secondary school experience. I clearly remembered some of the best rhymes we learned through rote memorization. Rote lessons work well in literature study when students automatically absorb the knowledge without rejecting or questioning its word formation. The simplicity of oral dictation and storytelling allowed me to appreciate the descriptive features in the poems and remember to this date.

Sunthorn Phu’s Poems

Sunthon Phu was my ideal choice for our first Thai materials. The three poems were chosen to represent the beauty in Thai language in terms of figures of speech, moral lesson, and representation of Thai rural life. Side by side translation is not provided because I believe it would ruin the beauty of the language; however, I summarized the poems and discussed the general background for your understanding of Thai context. The eBook of these Thai poems can be downloaded on our Free eBooks page. You are very welcome to visit the links at the end of each poem for your further study of society.

Finding Royalty-free Images on Public Domain

Having made progress beyond typing Thai text in HTML content files, I created additional files and folders – toc.ncx, htmltoc.html, content.opf, META-INF, images etc. – based on the tutorial to make the EPUB readable. Finding the right images for my book, I sought help from Wikimedia Commons to avoid getting in trouble with copyright issues. There are other sources that offer free alternatives on the public domain but beware of their condition. Links to the source files are provided to thank the provider per the Creative Commons licensing process.

Command Line Prompts

Moving on to the command line prompt, being born in the eighties where DOS still existed and dominated the computer industry really helped familiarize me with the white text and dark background. Working at the command prompt relies on keyboard rather than mouse. The real pain was to zip all the necessary files in DOS as it contradicts my drag-and-drop WinRAR habit. My compression process was difficult to perform and it took me a while to figure out that I downloaded the wrong file (Unzip.exe rather than zip.exe). Immediately reworking with zip.exe, I was on my way. To make sure that all files will be correctly displayed on the screen without errors, I validated each content files on W3C Markup Validation Service by directly inputting my HTML source.

Validating Software

Apart from the minor errors such as displaying incorrect special characters (i.e. &), I changed them to the HTML characters based on this reference from W3Schools. Once HTML files pass validation, I correctly zipped them (this time) and ran EPUBCheck in Java to produce and validate the complete EPUB file. EPUB file as a finished product is not the real product per se; it needs to be compiled by KindleGen to be ultimately readable on any Kindle eReading device. I became nervous and nearly shocked at the number of errors popped up in the validating window. Encountering minor ones is so typical that they could be your capitalized filename and accidental typos in your codes and tags here and there.

Faulty Display of Thai Fonts

At this stage of production, I had a hard-earned EPUB file in my hand of which would be ready for Adobe Digital Editions. Earlier, we mentioned about the latest version of the software that reads Thai characters properly. I tried it and this was what appeared on my screen.

ADE Trouble
Incorrect EPUB display of Thai Fonts on Adobe Digital Editions 1.8.3

Although the links, Western text, and image looked fine, the Thai fonts were in X square marks everywhere. I tried many times to toy with encoding in Notepad++. To no avail, the Thai font display still looks the same on Adobe Digital Editions 1.8.3.

Our Solution

That was when I realized I needed a professional help from my colleague, Paul. With our own web-based invention, the home-brewed software breaks down individual files and compiled them into one EPUB file. The software allows me to re-upload images, HTML, CSS files to our web-based template in order to automatically create a Table of Contents file.

Web-based Compatibility

Our first experiment was to get it open on the web browsers – Firefox, Chrome, and Internet Explorer – and see if the Thai content is properly rendered or not. Web-based reading experience was flawless since the web browsers are advanced enough to handle non-Western texts. Our next step is to target the Kindle devices for its compatibility.

Kindle Previewer

It took a while for the packaged MOBI/KF8 file to be fully parsed by the Kindle Previewer. The reason could be Thai text recognition. Minor errors happened along the way as usual. For example, we had to delete Thai headings in toc.ncx because the NCX system structure did not originally welcome Thai very well. Once we get rid of all bugging errors, it was the laudable moment to preview a true Thai eBook.

Our First Thai Material

The moment of truth shines through our brand new Sunthorn Phu’s poems in our free eBooks section. With the clickable cover image of the UNESCO-honored poet seated on the altar, you are directed to the navigational chapters as shown in the screenshots below. The comparison between the two screens ensures the reader that Thai fonts look great on two platforms i.e. web browser and Kindle. Nevertheless, we are still working on how to implementing EPUB format with embedding Thai fonts.

Web Based eReading
Web-based eBook

Thai Translation Website

Please take your time to explore our Thai poems collection. If you have any questions regarding the translation, I’d like to personally recommend Thai2English as it provides accurate translation. Their transliteration service can also facilitate your Thai reading pleasure to appreciate the rhyme scheme as well. We hope you will enjoy reading the poems and you are always welcome to share your thoughts or poems with us.

การรวบรวมไฟล์ HTML ให้เป็นไฟล์ EPUB ภาษาไทย

หลังจากลองอ่านตามขั้นตอนการทำอีบุ๊คโดยอ้างอิงถึง คู่มือทางด้านเทคนิค ของหน้า “นักพัฒนา” จากเว็บไซท์บีบี อีบุ๊คส์แล้ว ก็ถึงเวลาลองทำอีบุ๊คฉบับภาษาไทยจริง ๆ กัน คู่มือนี้ช่วยให้ผมสามารถรวบรวมไฟล์ที่เป็นเนื้อหาสำคัญหลายๆ ไฟล์เป็นไฟล์ EPUB หนึ่งไฟล์ แต่เรื่องไม่ได้จบเพียงเท่านั้น การแสดงผลตัวอักษรภาษาไทยในไฟล์ EPUB ยังเป็นหนึ่งในความท้าทายหลัก ๆ ในกระบวนการการทำอีบุ๊คภาษาไทย ก่อนที่จะนำเข้าสู่รายละเอียดไปมากกว่านี้ ผมอยากแบ่งปันการสาธิตที่แสดงให้เห็นว่าการรวบรวมไฟล์ทำงานอย่างไรจากการปฏิบัติจริง

การใช้โปรแกรม Notepad++

อ้างอิงถึง คู่มือการสร้างไฟล์ที่ใช้การเชื่อมโยมลิงค์ (HTML) และ ชุดคำสั่งเพื่อกำหนดการแสดงผลข้อมูลหน้าเว็บ (CSS) จากของเว็บบีบี อีบุ๊คส์ โปรแกรม Notepad++ เป็นโปรแกรมแจกฟรีที่ทำงานได้อย่างดีโดยรู้จักแทบ ทุกนามสกุลไฟล์ไม่ว่าผู้ใช้ต้องการบันทึกเป็นนามสกุลอะไรก็ตาม เช่น HTML, .CSS, .XML โปรแกรมสามารถแยกแยะแท็กตามสีต่าง ๆ เพื่อแยกประเภทชุดคำสั่ง (Element) โปรแกรมนี้ยังช่วยให้เกิดอิสระในการสำรวจ ปรับแก้ ตรวจสอบใหม่ และยืนยันความถูกต้องสำหรับทุก ๆ ชุดคำสั่งที่ล้วนเป็นเรื่องเหนื่อยใจ ความรู้สึกตื่นเต้นเริ่มขึ้นเมื่อได้ลองใช้ โปรแกรมโน้ตแพดระดับสูง (Metapad) ของทางเว็บ เพื่อช่วยกำหนดข้อมูลที่สำคัญของอีบุ๊ค เช่น ชื่อเรื่อง ผู้แต่ง สำนักพิมพ์ ฯลฯ

การแสดงผลภาษาไทยโดยใช้รหัส UTF-8 และการเรียนรู้แบบท่องจำ

ผู้ใช้สามารถเลือกให้โปรแกรมแสดงผล ภาษาไทยโดยตั้งค่าการแสดงผล (Encoding) ให้เป็นรหัส UTF-8 เพื่อทำให้ภาษาไทยสามารถแสดงผลบนหน้าจอได้อย่างไม่ผิดเพี้ยน ในการตัดสินใจเลือกไฟล์อีบุ๊คภาษาไทยฉบับแรกของเว็บเรานั้น ผมได้เลือกหนังสือจากหนึ่งในบทเรียนวิชาวรรณคดีสมัยมัธยม ผมยังจำหนึ่งในกลอน ที่มีสัมผัสที่ไพเราะที่สุดที่เรียนผ่านระบบท่องจำได้ดี บทเรียนการท่องจำช่วยในวิชาวรรณคดีได้ดีเมื่อนักเรียนสามารถซึมซับความรู้โดยอัตโนมัติโดยไม่ได้ปฏิเสธหรือตั้งคำถามการสร้างคำเหล่านั้น ความเรียบง่ายของการเขียนสะกดและ ท่องรวมถึงการเล่าเรื่องช่วยให้เกิดความ ประทับใจในลักษณะการพรรณาของกลอนทำ ให้สามารถจำบางวรรคบางตอนจนทุกวันนี้


กวีเอกสุนทรภู่เป็นตัวเลือกที่ยอดเยี่ยมสำหรับอีบุ๊คภาษาไทยฉบับแรกของผม กลอนทั้งสามนั้นล้วนเลือกขึ้นมาเพื่อแสดงถึงความงามในภาษาไทยในเรื่องของภาพพจน์ คติสอนใจ และการดำเนินชีวิตในชนบท เนื่องจากเชื่อว่าการแปลกลอนเป็นภาษาอังกฤษโดยขนาบข้างภาษาไทยนั้นจะเป็นตัวทำลายอรรถรสของภาษาต้นฉบับ ผมจึงไม่ได้แปลกลอนทั้งหมด อย่างไรก็ดี ผมได้สรุปใจความและกล่าวถึงความเป็นมาคร่าว ๆ ของเรื่องราวที่เกิดขึ้นในกลอนเพื่อสร้างบริบทประกอบความเข้าใจของผู้อ่าน ผู้อ่านสามารถดาวน์โหลดกลอนได้ที่หน้าอีบุ๊คแจกฟรีของเว็บ และสามารถอ่านเสริมข้อมูลประกอบกลอนในช่วงท้ายหน้าของแต่ละกลอนได้


นอกเหนือจากพิมพ์ภาษาไทยในไฟล์เนื้อหา HTML แล้วนั้น ผมได้สร้างไฟล์และแฟ้มที่สำคัญอื่น ๆ ซึ่งเป็นหัวใจหลักของการทำให้อีบุ๊คภาษาไทยทำงานอย่างราบรื่น ไฟล์สารบัญ toc.ncx, htmltoc.html, แฟ้ม META-INF และแฟ้มภาพเป็นต้น โดยอ้างอิงจาก คู่มือการสร้างอีบุ๊ค เพื่อทำให้แสดงผลได้อย่างถูกต้อง การนำภาพมาประกอบหนังสือถือเป็นส่วนสำคัญซึ่งผมได้ขอความช่วยเหลือจากเว็บ Wikimedia Commons เพื่อหลีกเลี่ยงปัญหาเกี่ยวกับลิขสิทธิ์ มีเว็บอีกหลายแห่งที่นำเสนอทางเลือกที่ไม่ต้องเสียค่าสิทธิบนเว็บสาธารณะแต่พึงระวังเงื่อนไขเฉพาะด้วย ผมได้เขียนลิงค์ที่นำไปสู่ไฟล์ที่ได้ใช้ เพื่อเป็นการขอบคุณผู้ผลิตเนื้อหาตามขั้นตอนการให้อนุญาตของ Creative Commons


ขั้นตอนต่อไปของการสร้างอีบุ๊คคือการปฏิบัติงานผ่านคำสั่งที่เป็นข้อความ การเกิดทันในยุคปี 80 เมื่อโปรแกรม DOS ยังเฟื่องฟูและครองอุตสาหกรรมคอมพิวเตอร์ได้ช่วยให้ผมคุ้นเคยกับการพิมพ์ชุดคำสั่งที่ประกอบไปด้วยข้อความสีขาวบนพื้นหลังสีดำ การใช้ชุดคำสั่งต้องพึ่งแป้นพิมพ์มากกว่าเมาส์ ความท้าทายเกิดขึ้นในขั้นตอนของการบีบอัดไฟล์ซึ่งขัดแย้งกับนิสัยการ “ลากและวาง” ในโปรแกรม Winrar บนระบบปฏิบัติการรุ่นหลัง ขั้นตอนการบีบอัดไฟล์บน DOS ของผมกลายเป็นเรื่องยากและทำให้เสียเวลาค้นหาสาเหตุของปัญหาดังกล่าว พบว่าดาวน์โหลดผิดไฟล์เป็น Unzip.exe แทน Zip.exe จึงไม่สามารถบีบอัดได้ ทันทีที่แก้ไขปัญหาดังกล่าว ผมก็เริ่มคลำถูกทาง เพื่อให้แน่ใจว่าไฟล์ทั้งหมดจะสามารถแสดงผลอย่างถูกต้องบนหน้าจอโดยที่ไม่มีข้อผิดพลาด ผมต้องตรวจสอบไฟล์เนื้อหาแต่ละตัวผ่าน W3C Markup Validation Service โดยเลือกพิมพ์ชุดรหัสคำสั่ง HTML โดยตรงทั้งหมดในช่องว่าง (Validate by Direct Input)


นอกเหนือจากข้อผิดพลาดเล็ก ๆ น้อย ๆ เช่นการแสดงตัวอักษรพิเศษต่าง ๆ (เช่น & แทนเครื่องหมาย &) ผมยังต้องเปลี่ยนตัวอักษรพิเศษเหล่านั้นให้เป็นตัวอักษรที่ HTML สามารถแสดงผลได้ตาม คู่มือ นี้จาก W3Schools เมื่อไฟล์ HTML ผ่านการตรวจสอบแล้ว ครั้งนี้ผมได้บีบอัดไฟล์อย่างถูกต้องและรันโปรแกรม EPUBCheck โดยใช้โปรแกรม Java เพื่อสร้างและตรวจสอบไฟล์ ไฟล์ EPUB เมื่อเป็นผลงานที่เสร็จสมบูรณ์แล้วยังไม่ได้สมบูรณ์ในตัวมันเอง ยังต้องอาศัยโปรแกรม KindleGen เพื่อทำให้สามารถอ่านบนอุปกรณ์การอ่าน Kindle ในที่สุด ผมรู้สึกตื่นเต้นและตกใจในขณะเดียวกันกับปริมาณข้อผิดพลาดมากมายที่ปรากฏบนหน้าต่างที่ตรวจสอบความถูกต้อง การพบข้อผิดพลาดเล็ก ๆ น้อย ๆ เป็นเรื่องปรกติซึ่งอาจเกิดได้โดยอาจเป็นการตั้งชื่อไฟล์หรือแฟ้มโดยใช้ตัวอักษรอังกฤษใหญ่และการพิมพ์รหัสหรือแท็กผิดในบางบรรทัด


มาถึงขั้นตอนท้าย ๆ ของการสร้างไฟล์อีบุ๊คภาษาไทย ผมได้ครอบครองไฟล์ EPUB ที่ได้มาด้วยความยากลำบากซึ่งพร้อมสำหรับการเปิดอ่านบนโปรแกรม Adobe Digital Editions ก่อนหน้านี้ทางเว็บได้เคยกล่าวถึง โปรแกรมดังกล่าวเวอร์ชั่นล่าสุดซึ่งสามารถอ่านภาษาไทยได้อย่างถูกต้อง หลังจากที่ได้ทดลองดู นี่คือสิ่งที่เกิดขึ้นบนจอ

ADE Trouble
การแสดงผล EPUB ภาษาไทยที่ผิดพลาดบนโปรแกรม Adobe Digital Editions 1.8.3

ถึงแม้ว่าลิงค์ ตัวอักษรอังกฤษ และไฟล์ภาพจะแสดงผลได้อย่างถูกต้องก็ตาม ตัวอักษรไทยปรากฏเป็นตัว X ในสี่เหลี่ยมไม่สามารถอ่านได้ แม้ว่าจะลองแก้ที่ Notepad++ อีกหลายครั้ง ความพยายามก็สูญเปล่าเนื่องจากอักษรไทยยังปรากฏเป็นอักษรประหลาดเช่นเดิมบนโปรแกรม Adobe Digital Editions เวอร์ชั่น 1.8.3

ทางแก้ไขปัญหาของเว็บบีบี อีบุ๊คส์

เมื่อตระหนักดีว่าไม่สามารถแก้ไขปัญหาดังกล่าวได้ ผมจึงขอความช่วยเหลือด้านเทคนิคจากเพื่อนร่วมงาน พอล หนึ่งในสิ่งที่เว็บเราได้สร้างสรรคือโปรแกรมประยุกต์ที่ผลิตเองซึ่งแยกจัดการไฟล์เดี่ยวและรวบรวมไฟล์ที่สำคัญเหล่านั้นเป็นไฟล์ EPUB หนึ่งไฟล์ โปรแกรมประยุกต์ยังช่วยให้สามารถนำภาพ ไฟล์ HTML ชุดคำสั่ง CSS ขึ้นสู่รูปแบบการทำงานสำเร็จรูปผ่านทางเว็บเพื่อสร้างไฟล์สารบัญได้อย่างอัตโนมัติ


การทดลองแรกของเราคือการทำให้อีบุ๊คภาษาไทยสามารถแสดงผลบนโปรแกรมท่องเว็บไซท์ต่าง ๆ เช่น Firefox, Chrome, Internet Explorer และดูว่าเนื้อหาภาษาไทยสามารถแสดงผลได้อย่างถูกต้องหรือไม่ ประสบการณ์การอ่านทางเว็บไร้ที่ติเพราะโปรแกรมเหล่านั้น ถูกพัฒนาในระดับสูงเพียงพอต่อการประมวลผลตัวอักษรที่ไม่ใช่ตะวันตก ก้าวต่อไปคือการทำให้อีบุ๊คภาษาไทยของเราสามารถอ่านบนอุปกรณ์ของ Kindle ได้

การใช้โปรแกรม Kindle Previewer

การแยกข้อความเพื่อฟอร์แม็ท MOBI/KF8 นั้นต้องใช้เวลานานพอสมควรผ่านโปรแกรม Kindle Previewer เหตุผลในการใช้เวลานานอาจเกิดจากการตรวจอักษรไทย ข้อผิดพลาดเล็กน้อยเกิดขึ้นเป็นปรกติระหว่างการแยกข้อมูล เช่น เราต้องลบหัวข้อที่พิมพ์เป็นภาษาไทยในไฟล์ toc.ncx เพราะโครงสร้างระบบ NCX ยังไม่รู้จักภาษาไทยดีนัก เมื่อแก้ข้อผิดพลาดที่น่ารำคาญต่าง ๆ ได้แล้ว ช่วงต่อไปคือเวลาสำคัญในการดูอีบุ๊คภาษาไทยที่แท้จริง

อีบุ๊คภาษาไทยฉบับแรกของบีบี อีบุ๊คส์

และแล้วเวลาแห่งความจริงก็ได้ปรากฏขึ้นผ่านกลอนสุนทรภู่อันใหม่เอี่ยมอ่องในหน้า อีบุ๊คส์ฟรี ของเรา ผู้อ่านสามารถคลิกภาพหน้าปกที่มีรูปขอกวีเอกสุนทรที่รับการยอมรับจากองค์การยูเนสโกซึ่งนั่งบนแท่นในรูป หลังจากที่คลิกรูปหน้าปกแล้ว สารบัญจะปรากฏขึ้นดังเช่นภาพตัวอย่างด้านล่าง การเปรียบเทียบสองหน้าจอทำให้ผู้อ่านมั่นใจว่า ภาษาไทยสามารถแสดงผลได้อย่างดีเยี่ยมทั้งในโปรแกรมท่องเว็บและอุปกรณ์ Kindle แต่กระนั้นก็ตาม เรายังต้องพยายามทำให้ไฟล์ EPUB แสดงผลภาษาไทยให้ได้

Web Based eReading
Web-based eBook


เราขอเชิญผู้อ่านเข้าชมในส่วนกลอนสุนทรภู่ของทางเว็บ หากมีคำถามเกี่ยวกับคำแปล (สำหรับผู้อ่านต่างชาติ) ผมขอแนะนำเว็บแปลไทยเป็นภาษาอังกฤษ Thai2English เนื่องด้วยการแปลที่แม่นยำ ทางเว็บแปลยังได้ช่วยการอ่านภาษาไทยง่ายยิ่งขึ้นเมื่อมีบริการถอดเสียงเพื่อ ทำให้ผู้อ่านต่างชาติเกิดอรรถรสและเข้าใจถึงการเขียนสัมผัสของกวีได้เป็นอย่างดี เราหวังว่าผู้อ่านจะมีความสุข ในการอ่านกลอนและทางเรายินดีเสมอที่จะรับฟังข้อคิดหรืออ่านกลอนที่ผู้อ่านแต่งเอง

เราขอเชิญผู้อ่านเข้าชมในส่วนกลอนสุนทรภู่ของทางเว็บ หากมีคำถามเกี่ยวกับคำแปล (สำหรับผู้อ่านต่างชาติ) ผมขอแนะนำเว็บแปลไทยเป็นภาษาอังกฤษ Thai2English เนื่องด้วยการแปลที่แม่นยำ ทางเว็บแปลยังได้ช่วยการอ่านภาษาไทยง่ายยิ่งขึ้นเมื่อมีบริการถอดเสียงเพื่อ ทำให้ผู้อ่านต่างชาติเกิดอรรถรสและเข้าใจถึงการเขียนสัมผัสของกวีได้เป็นอย่างดี เราหวังว่าผู้อ่านจะมีความสุข ในการอ่านกลอนและทางเรายินดีเสมอที่จะรับฟังข้อคิดหรืออ่านกลอนที่ผู้อ่านแต่งเอง

Label: Technical and Design

comments powered by Disqus