สรุปปัญหา html2canvas กับข้อความภาษาไทย

&NewLine;<figure class&equals;"wp-block-video"><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">html2canvas คือ html5 javascript library ที่ถูกพัฒนาขึ้นมาเพื่อใช้งานสำหรับการแปลงข้อมูลในภาษา html ให้กลายเป็นข้อมูลรูปภาพ png&comma; jpg&comma; pdf <&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">ตัว library สามารถทำงานได้อย่างดีกับข้อความในภาษาอังกฤษเมื่อต้องแปลงข้อมูลใน html div เป็นรูปภาพ แต่จะมีปัญหากับภาษาแบบ Non-Latin เช่น ภาษาไทย จีน ญี่ปุ่น เป็นต้น ปัญหาที่เกิดขึ้นมีอะไรบ้าง จากที่ได้ทดสอบ สรุปไว้ดังนี้ครับ<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<div style&equals;"height&colon;50px" aria-hidden&equals;"true" class&equals;"wp-block-spacer"><&sol;div>&NewLine;&NewLine;&NewLine;&NewLine;<h4 class&equals;"wp-block-heading">html2canvas ปัญหาการแสดงผลภาษาไทย สระเพี้ยน ข้อความซ้อนทับกัน<&sol;h4>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>แสดงสระภาษาไทยไม่สมบูรณ์ ทั้ง Safari และ Google Chrome<ul><li>html2canvas v 0&period;5&period;0-beta4<&sol;li><li>text-align&colon; justify&nbsp&semi;<&sol;li><li>contenteditable &equals; false<&sol;li><&sol;ul><&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;09&sol;safari&lowbar;1-940x210&period;png" alt&equals;"" class&equals;"wp-image-5480" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;09&sol;safari&lowbar;1&period;png" data-full-size&equals;"2206x492" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;09&sol;chrome&lowbar;1-940x213&period;png" alt&equals;"" class&equals;"wp-image-5481" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;09&sol;chrome&lowbar;1&period;png" data-full-size&equals;"2214x502" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<div style&equals;"height&colon;50px" aria-hidden&equals;"true" class&equals;"wp-block-spacer"><&sol;div>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>ปัญหาสระเพี้ยนด้านบนเป็น Bug ของ html2canvas เวอร์ชั่นใหม่ ๆ พอจะแก้ปัญหาเรื่องสระได้ด้วยการใช้เวอร์ชั่นที่ต่ำกว่า<ul><li>html2canvas v 0&period;4&period;1<&sol;li><li>text-align&colon; justify&nbsp&semi;<&sol;li><li>contenteditable &equals; true<&sol;li><&sol;ul><&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;09&sol;safari&lowbar;2-940x210&period;png" alt&equals;"" class&equals;"wp-image-5485" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;09&sol;safari&lowbar;2&period;png" data-full-size&equals;"2220x496" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;09&sol;chrome&lowbar;2-940x212&period;png" alt&equals;"" class&equals;"wp-image-5486" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;09&sol;chrome&lowbar;2&period;png" data-full-size&equals;"2210x498" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<div style&equals;"height&colon;50px" aria-hidden&equals;"true" class&equals;"wp-block-spacer"><&sol;div>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>html2canvas v 0&period;4&period;1 เหมือนจะแก้ปัญหาได้ แต่ก็มีปัญหาอย่างอื่นเพิ่มมา กรณีที่เรากำหนดความกว้าง Width ให้กับเนื้อหา จะมี bug คือ ข้อความภาษาไทยจะซ้อนทับกันเมื่อแปลงเป็นรูปภาพ<ul><li>html2canvas v 0&period;4&period;1<&sol;li><li>text-align&colon; justify&nbsp&semi;<&sol;li><li>contenteditable &equals; true<&sol;li><&sol;ul><&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;09&sol;safariandgooglechrome-940x427&period;png" alt&equals;"" class&equals;"wp-image-5488" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;09&sol;safariandgooglechrome&period;png" data-full-size&equals;"1698x772" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<div style&equals;"height&colon;50px" aria-hidden&equals;"true" class&equals;"wp-block-spacer"><&sol;div>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>ปัญหาตัวหนังสือภาษาไทยซ้อนทับกัน ถ้าเรากำหนดความกว้างของ container จะเกิดก็ต่อเมื่อเนื้อหามีการจัดบรรทัดระหว่างคำ หรือประโยคที่ติดกัน วิธีแก้ปัญหาคือ มีมีการกำหนด Space ของข้อความ หรือ เมื่อข้อความไปชนกับความกว้างของ container ก่อนขึ้นบรรทัดใหม่จะต้องใส่ tag เว้นบรรทัด คือ &bsol;n หรือ br เสมอ<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;09&sol;safariandgooglechrome2-940x594&period;png" alt&equals;"" class&equals;"wp-image-5491" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;09&sol;safariandgooglechrome2&period;png" data-full-size&equals;"1482x936" &sol;><&sol;figure>&NewLine;