ก่อนหน้านี้มีเขียนถึงวิธีการเพิ่มฟีเจอร์ Word Wise ลงในไฟล์ e-book เพื่อใช้ใน Kindle ด้วย WordDumb แล้ว แต่วิธีดังกล่าวนั้นจะใช้งานได้แค่ในเครื่อง Kindle เท่านั้น ไม่สามารถใช้ฟีเจอร์บนแอปอื่นหรืออุปกรณ์อื่นได้เลย
ถ้าอยากให้ไฟล์ ePUB มีฟีเจอร์นี้บนอุปกรณ์อื่นๆ ก็ต้องฝังตัวคำศัพท์ Word Wise ลงไปใน ePUB ก่อน เลย มีคนทำไลบรารี่ Word Wise Creator ก็พอใช้แก้ขัดไปได้ (เขียนไว้นานมากแล้ว ตั้งแต่ปี 2020)
ตัวโปรแกรมยังขาดฟังก์ชันจัดการ word variations (lemma รากคำ) อย่างเช่นใน Kindle จะมีคำอธิบายของทั้งคำว่า ambition และ ambitions (**ไปเจอฐานข้อมูล lemma มา ใส่เพิ่มใน reference ด้านล่างแล้ว**)
ผมอ่านวิธีการใช้แล้วงงๆ อยู่ แต่ที่ต้องการก็คือตัวข้อมูลชุดคำศัพท์ (wordwise-dict.csv) ได้ตัวนี้มาก็จะเอามาเขียนโปรแกรมเพื่อจัดการเองได้
โปรแกรมนี้ใช้วิธีครอบแท็ก data-tooltip ให้กับคำศัพท์ เช่น I have <span data-tooltip="to pretend to feel">feigned</span> sleep เลยส่งผลว่าถ้าไฟล์ไหนมีการใช้ span ครอบคำศัพท์ที่ใส่ word wise ก็จะเกิดอาการ span ซ้อน span เป็นความผิดพลาดขึ้นมาได้
และด้วยความที่มีการจัด css เพื่อจัดการตำแหน่งของ word wise เลยมีจุดที่ต้องตรวจแก้กันพอสมควรในกรณีที่การแสดงผลเพี้ยนไปเยอะ
มาจดบันทึกเก็บไว้ก่อน ยังใช้งานโปรแกรมไม่เป็น ไม่แน่ใจว่าต้องสั่งทำงานจาก terminal หรือเปล่า
※※※
การปรับแก้ css เพื่อจัดรูปแบบให้แสดงคำศัพท์คล้ายกับ Word Wise บน Kindle แต่การจัดรูปแบบนี้ ถ้าพื้นหลังไม่ใช่สีขาว ตรงที่หยักตรงกลางมันจะเป็นสี่เหลี่ยมข้าวหลามตัดเด่นมาก
ตัวอย่าง html
<p>confidences were unsought-frequently I have <span data-tooltip="to pretend to feel">feigned</span> sleep, <span data-tooltip="thing that deserves attention">preoccupation</span>, or a hostile <span data-tooltip="a lack of serious behavior">levity</span></p>
css
body {
font-size:22px;
}
[data-tooltip] {
position:relative;
display:inline-block;
margin-top:20px;
border-top:1px solid gray;
}
[data-tooltip]:before {
content:attr(data-tooltip);
font-size:12px;
position:absolute;
display:inline-block;
white-space:nowrap;
/* left:0; */
margin-top:-20px;
}
[data-tooltip]:after {
content:"";
display:block;
width:6px;
height:6px;
border-top:1px solid gray;
border-right:1px solid gray;
transform:rotate(-45deg);
position:absolute;
left:50%;
margin-left:-3px;
top:-4px;
background:#fff;
}
[data-tooltip].left:before {
left: 0 !important;
}
[data-tooltip].right:before {
right: 0 !important;
}
[data-tooltip].center:before {
left: 50% !important;
transform:translateX(-50%);
}
หรือปรับแก้ขนาดให้เล็กลง
[data-tooltip]:after {
content:"";
display:block;
width: 2px;
height: 2px;
border-top:1px solid gray;
border-right:1px solid gray;
transform:rotate(-45deg);
position:absolute;
left:50%;
margin-left:-3px;
top:-2px;
background:#fff;
}
※※※
[ Reference ]
https://www.mobileread.com/forums/showthread.php?t=328091
https://jsfiddle.net/fgnp07ty/1/ (จัดรูปแบบคำศัพท์ให้คล้ายกับ Word Wise บน Kindle)
https://github.com/michmech/lemmatization-lists สำหรับ lemma ของคำ
※※※
[ Keywords ]
ebook, epub, word wise, kindle
ไม่มีความคิดเห็น:
แสดงความคิดเห็น