ผมกำลังจะ
present อะไร

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

ข้อแรกของ skill ให้ตรวจแหล่งที่มาและชื่อภาพ โดยยก OpenStax และ Wikimedia Medical Commons เป็นตัวอย่าง พร้อมหลีกเลี่ยงภาพสมุดจดและภาพที่ยืนยันไม่ได้ ต่อมาข้อ 18 เพิ่มวิธีใช้ภาพจาก PDF ตำราต้นฉบับ หลักที่เชื่อมกันคือเลือกภาพให้ตรงวัตถุประสงค์ พร้อมเก็บแหล่งอ้างอิงและตรวจสิทธิ์การใช้

ถ้า HTML อ้างภาพจากเว็บไซต์ภายนอก การ export อาจเกิดขึ้นก่อนภาพโหลดเสร็จ หรือภาพอาจเข้าไม่ถึงในสภาพแวดล้อมที่ใช้สร้าง PDF วิธีใน skill คือเตรียมภาพความละเอียดสูงไว้ก่อน แล้วแปลงเป็น Base64 เพื่อฝังข้อมูลภาพลงใน HTML โดยตรง

เมื่อข้อมูลภาพเดินทางไปกับเอกสาร การเรนเดอร์จึงลดการพึ่งพา URL และเครือข่ายในจังหวะสำคัญ อย่างไรก็ตาม Base64 ไม่ได้เพิ่มความคมชัดให้ภาพเล็ก ต้องเลือกต้นฉบับให้เหมาะกับขนาดพิมพ์ก่อน และยอมรับว่าไฟล์ HTML จะใหญ่ขึ้น

ระบบสีช่วยบอกว่าผู้อ่านกำลังอยู่ในกลุ่มเนื้อหาใด skill จึงกำหนดสีระดับบท เช่น แดง–ทองสำหรับหลอดเลือด เขียว–ฟ้าสำหรับการอักเสบ ม่วง–ชมพูสำหรับเนื้องอก และอำพัน–น้ำเงินสำหรับพันธุศาสตร์

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

ปกเป็นหน้าที่แยกจากเนื้อหาและมีหน้าที่ชัดเจน: บอกชื่อบท แหล่งอ้างอิง ขอบเขตเนื้อหา และผู้อ่านเป้าหมาย โครงสร้างตัวอย่างใน skill แบ่งพื้นที่เป็นส่วนหัว ชื่อเรื่อง และข้อมูลสรุป เพื่อให้รู้ว่าเอกสารนี้คืออะไรตั้งแต่หน้าแรก

ปกต้องจบเป็นหน้าแรกจริง ไม่ปล่อยให้ย่อหน้าแรกของเนื้อหาไหลมาต่อท้าย จึงมีการกำหนด page break หลังปก ส่วนข้อ 23 เพิ่มวิธีให้ปกใช้ระยะขอบต่างจากหน้าภายใน โดยไม่กระทบพื้นที่อ่านของหน้าที่เหลือ

ปัญหาเล็กอย่างจุด bullet หลุดออกนอกกรอบ หรือมีวันที่และพาธไฟล์ของ browser ติดมาบนหน้า ทำให้เอกสารดูไม่เรียบร้อย ข้อนี้จึงเริ่มจากควบคุมการพิมพ์ของ browser และกำหนด padding ของเนื้อหา รายการ และกล่องให้ชัดเจน

แนวทางช่วงแรกใช้ PDF margin เป็นศูนย์แล้วให้ container จัดพื้นที่ด้านใน พร้อมเพิ่ม padding-left ให้รายการ ต่อมาเมื่อเนื้อหาไหลหลายหน้า ข้อ 23 เปลี่ยนไปใช้ @page เพื่อรักษาขอบทุกหน้า จึงควรอ่านสองข้อนี้เป็นพัฒนาการของวิธีจัดหน้า ไม่ใช่นำ margin ทั้งสองวิธีมาบวกกัน

สูตรที่อ่านง่ายบนพื้นมืดอาจกลายเป็นตัวอักษรสีอ่อนบนกระดาษขาว และ KaTeX สร้างองค์ประกอบย่อยหลายชั้น การเปลี่ยนสีเพียงกล่องแม่จึงอาจไม่พอ skill ใช้ @media print เปลี่ยนสีของสูตรและองค์ประกอบย่อยให้เข้มอย่างชัดเจน

ส่วนตารางกำหนดหัวตาราง พื้นเซลล์ เส้นแบ่ง และมุมโค้งให้ทำงานร่วมกัน เช่น ใช้ border-collapse: separate เมื่อต้องการมุมโค้ง ในโหมดพิมพ์ยังปิดเงา เอฟเฟกต์ และ transition ที่ไม่ช่วยการอ่าน ผลลัพธ์ที่ต้องการคือเนื้อหาครบและแยกชั้นข้อมูลได้ ไม่ใช่คัดลอกหน้าจอทุกอย่างลงกระดาษ

บางเอกสารไม่ได้ต้องการภาพสำเร็จ แต่ต้องการพื้นที่ให้ผู้เรียนติดภาพ วาด หรือเขียนอธิบายเพิ่ม ข้อนี้กำหนดกรอบเส้นปะขนาดพอใช้งานไว้ใต้ชื่อภาพ เพื่อให้ช่องว่างมีหน้าที่ชัดเจนและมีตำแหน่งสม่ำเสมอ

กรอบกับคำอธิบายควรถูกจัดให้อยู่ด้วยกัน ไม่ถูกตัดข้ามหน้า หลักนี้ใช้กับใบงานหรือ figure study guide ที่ตั้งใจให้เติมเอง ไม่ได้หมายความว่าตำราฉบับสมบูรณ์ควรปล่อยภาพที่ยังโหลดไม่ได้เป็น placeholder

เมื่อสร้าง HTML ผ่าน Python ข้อความ LaTeX บางส่วนอาจถูกตีความเป็นอักขระควบคุม เช่น backslash ตามด้วย t กลายเป็น tab หรือ backslash ตามด้วย r กลายเป็นการคืนตำแหน่งบรรทัด สูตรจึงเสียก่อนส่งถึง KaTeX แม้หน้าตาข้อความในต้นแบบจะดูถูกต้อง

skill เสนอ raw string เพื่อคง backslash และใช้การแทน placeholder เมื่อต้องแทรกข้อมูล ข้อนี้แก้เรื่อง escape sequence โดยเฉพาะ ส่วนปัญหาวงเล็บปีกกาของ CSS และ LaTeX ชนกับ f-string แยกอธิบายในข้อ 20

แทนการกดพิมพ์ด้วยมือทุกครั้ง ตัวอย่างใน skill เปิด HTML ด้วย Chromium ผ่าน Playwright รอหน้าและฟอนต์พร้อม แล้วส่งออกเป็น PDF ขนาด A4 พร้อมพื้นหลังและค่าระยะขอบที่กำหนดไว้

การเขียนกระบวนการเป็นสคริปต์ช่วยลดความต่างจากการตั้งค่าด้วยมือ แต่ยังต้องตรวจว่าทรัพยากรที่จำเป็น เช่น ภาพ ฟอนต์ และสูตร พร้อมจริงก่อน export การสร้างไฟล์สำเร็จจึงเป็นเพียงจุดเริ่มของการตรวจงาน ไม่ใช่หลักฐานว่าหน้าทั้งหมดสมบูรณ์

รายการตรวจรวมสิ่งที่มักตกหล่นจากหลายหัวข้อไว้ด้วยกัน ตั้งแต่ปก สีประจำบท ความหมายของภาพ ระยะขอบ bullet ไปจนถึงสีสูตรและการแบ่งตาราง ช่วยให้การทบทวนไม่ขึ้นอยู่กับการนึกออกทีละเรื่อง

การตรวจควรตอบได้ทั้งว่าองค์ประกอบมีอยู่ และมันแสดงผลถูกต้องหรือไม่ เช่น มีรูปไม่ได้แปลว่ารูปไม่ถูกตัด มีหัวข้อไม่ได้แปลว่าหัวข้ออยู่กับเนื้อหา ข้อ 26 จึงมาต่อยอดด้วยการตรวจโครงสร้างและเลือกตรวจส่วนที่เปลี่ยน

หน่วย rem อ้างอิงขนาดตัวอักษรของ html ไม่ใช่ body ถ้าลด font-size ที่ body ในโหมดพิมพ์ แต่ส่วนย่อยใช้ rem อยู่ ตัวอักษรเหล่านั้นอาจยังใหญ่เท่าเดิม ทำให้หน้าแน่นหรือจำนวนหน้าเปลี่ยนโดยไม่ตรงกับที่คาด

วิธีใน skill คือกำหนดขนาดที่ html พร้อม body ภายใต้ @media print แล้วตรวจ component ที่มีค่า px หรือ rem ของตัวเองอีกครั้ง บทเรียนคือก่อนแก้ด้วยตัวเลขหลายจุด ต้องรู้ก่อนว่าขนาดที่เห็นสืบทอดมาจากที่ใด

ข้อความบนการ์ดมืดมักใช้สีขาว แต่เมื่อพิมพ์แล้วพื้นถูกเปลี่ยนเป็นขาว ข้อความเดิมอาจหายไป ถ้าใช้ inline style กระจายหลายจุด การแก้ให้ครบยิ่งยาก เพราะสีผูกติดกับแต่ละ element

skill แนะนำให้ใช้ class ที่กำหนดสีสำหรับหน้าจอและมี print override เป็นสีเข้มอยู่คู่กัน ทุกครั้งที่เพิ่มข้อความสีอ่อนจึงต้องคิดถึงโหมดพิมพ์ด้วย ข้อนี้เจาะปัญหาข้อความทั่วไป ส่วนสูตรที่มีโครงสร้างซับซ้อนอยู่ในข้อ 6

ชื่อเรื่องแบบไล่สีเกิดจากการใช้พื้นหลังแสดงผ่านรูปทรงตัวอักษร จึงต้องให้ค่าของ background, background-clip และ text fill ทำงานครบชุด หากบางค่าถูก override ระหว่างพิมพ์ ตัวอักษรอาจไม่ได้ออกมาตามที่ตั้งใจ

ข้อนี้ให้กำหนดค่าที่เกี่ยวข้องในโหมดพิมพ์โดยตรง และดูแลการตัดคำของหัวเรื่องยาวด้วย สีไล่ระดับยังควรสัมพันธ์กับ palette ของบท แต่การตรวจว่าข้อความยังครบและอ่านออกต้องมาก่อนความสวยของเอฟเฟกต์

การสั่งขึ้นหน้าใหม่ทุก section อาจสร้างพื้นที่ว่างท้ายหน้าเป็นจำนวนมาก ทั้งที่ยังมีเนื้อหาที่ต่อได้ skill ช่วงนี้จึงเสนอให้ section ไหลต่อโดยอัตโนมัติ แล้วค่อยกันการแตกหน้าที่กลุ่มข้อมูลย่อย

หัวข้อควรติดกับสิ่งที่มันอธิบาย และการ์ดสั้นควรอยู่ครบในหน้าเดียว แต่ข้อ 27 ภายหลังแสดงว่าบางหัวข้อใหญ่ควรเริ่มหน้าใหม่จริง จึงไม่ใช่กฎว่าห้าม page break ทั้งหมด เป็นการเลือกหน่วยแบ่งหน้าให้เหมาะกับขนาดและความสัมพันธ์ของเนื้อหา

ตารางยาวที่รวมหลายหมวดไว้ด้วยกันมีโอกาสถูกตัดกลางแถว หรือหัวตารางแยกจากข้อมูล การแก้โดยย่อทุกอย่างอาจทำให้ตัวอักษรเล็กเกินไป ข้อนี้เริ่มจากแยกข้อมูลเป็นกลุ่มที่มีความหมายก่อน

ตัวอย่างคือแยกโรคหลอดเลือดตามขนาดหลอดเลือด แต่ละหมวดมีหัวข้อและตารางย่อยของตัวเอง จึงย้ายไปหน้าถัดไปได้เป็นชุด วิธีนี้ช่วยทั้งการจัดหน้าและการค้นข้อมูล โดยยังต้องตรวจว่ากลุ่มย่อยไม่สูงเกินหนึ่งหน้า

ถ้ากำหนดขนาดหัวเรื่อง หัวข้อ เนื้อหา และคำอธิบายภาพแยกกันโดยไม่มีความสัมพันธ์ ลำดับการอ่านจะไม่ชัด skill จึงเสนออัตราส่วนเทียบกับ body text เช่น ชื่อเรื่องประมาณ 2.4 เท่า และหัวข้อใหญ่กว่าเนื้อหาเล็กน้อย

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

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

กล่องยังมีที่ใช้ แต่สงวนให้ประเด็นที่ควรหยุดมอง เช่น clinical pearl หรือข้อควรจำ ส่วนตารางลดเส้นรอบนอกที่ไม่จำเป็น ผลที่ต้องการคือให้ความสัมพันธ์ของเนื้อหานำสายตา ไม่ใช่ให้กรอบทุกกรอบมีน้ำหนักเท่ากัน

ในขั้นที่มี PDF ต้นฉบับพร้อมแล้ว skill เพิ่มวิธีเลือกบริเวณภาพด้วยพิกัดและเรนเดอร์ที่ความละเอียดเหมาะกับงานพิมพ์ผ่าน PyMuPDF ทำให้เลือกภาพที่สัมพันธ์กับเนื้อหาและรักษารายละเอียดของ micrograph หรือแผนภาพได้

ข้อนี้ระบุไม่ให้ใช้ภาพที่ AI สร้างแทนภาพพยาธิวิทยาที่ต้องอาศัยความถูกต้อง ตรวจขอบภาพไม่ให้ติดข้อความข้างเคียง และนำข้อมูลภาพไปฝังใน HTML ต่อได้ การดึงภาพได้ไม่ได้เปลี่ยนสิทธิ์ของต้นฉบับ จึงต้องเก็บคำบรรยาย แหล่งอ้างอิง และสิทธิ์การใช้อยู่ด้วย

เมื่อเป้าหมายคือดูความต่าง เช่น เนื้อเยื่อปกติกับผิดปกติ การแยกภาพไว้คนละตำแหน่งทำให้ต้องจำภาพแรกเพื่อเทียบกับภาพหลัง ข้อนี้ใช้กริดสองคอลัมน์ให้เห็นทั้งคู่ในจังหวะเดียว

คำบรรยายและขนาดพื้นที่ภาพควรมีความสมดุล เพื่อไม่ให้ข้างหนึ่งดูสำคัญกว่าเพราะใหญ่กว่าโดยบังเอิญ รักษาสัดส่วนภาพด้วย object-fit: contain และให้คำอธิบายบอกว่าควรสังเกตอะไร ภาพคู่จึงเป็นเครื่องมือคิด ไม่ใช่แค่รูปแบบจัดหน้า

HTML ที่มีทั้ง CSS, JavaScript และ LaTeX ใช้วงเล็บปีกกาจำนวนมาก หากนำทั้งเอกสารไปใส่ f-string ของ Python วงเล็บบางส่วนอาจถูกอ่านเป็นคำสั่งแทรกค่า แทนที่จะเป็นข้อความของภาษาเดิม

แนวทางใน skill คือเก็บ template เป็น raw string แล้วตั้ง placeholder ที่มีชื่อชัดเจนสำหรับข้อมูลที่ต้องเปลี่ยน เช่น ภาพ Base64 วิธีนี้ลดการชนกันของรูปแบบภาษา แต่ยังต้องเลือก placeholder ไม่ให้ซ้ำกับเนื้อหา และจัดการการ escape ข้อมูลตามบริบทที่นำไปใส่

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

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

เมื่อพื้นที่ท้ายหน้าไม่พอสำหรับตาราง browser อาจย้ายตารางไปหน้าใหม่ แต่ทิ้งหัวข้อไว้หน้าเดิม การใส่ break-after: avoid ที่หัวข้อเพียงอย่างเดียวอาจยังไม่พอ โดยเฉพาะเมื่อหัวข้อกับตารางอยู่คนละ wrapper

skill จึงห่อทั้งหัวข้อและตารางใน container เดียว แล้วใช้ break-inside: avoid เพื่อย้ายเป็นชุด ผู้อ่านจะพบชื่อเรื่องพร้อมข้อมูลที่มันอธิบาย หากชุดนั้นสูงเกินหน้า ควรกลับไปแบ่งตารางตามข้อ 15 แทนการฝืนให้ทั้งชุดไม่แตก

padding บน container ยาวไม่ได้แปลว่าจะเกิดขอบบนใหม่ทุกครั้งที่เนื้อหาไหลไปหน้ากระดาษถัดไป จึงอาจเห็นหน้าแรกมีพื้นที่ดี แต่หน้าภายในเริ่มชิดขอบบน ข้อนี้แก้ที่ระดับหน้ากระดาษด้วย @page

ตัวอย่างกำหนดขอบหน้าภายใน แล้วใช้ @page :first แยกปกให้ไม่มีขอบ ก่อนลด padding ของ container เพื่อไม่ให้ระยะซ้อนกัน นี่เป็นการต่อยอดจากวิธีตั้ง margin ช่วงแรกในข้อ 5: ให้ระบบพิมพ์รับผิดชอบพื้นที่ของทุก page fragment

ย่อหน้าที่ถูกตัดเหลือเพียงคำหรือบรรทัดสั้น ๆ บนหน้าถัดไปทำให้การอ่านสะดุด ข้อนี้ใช้ widows และ orphans เพื่อขอให้ browser เก็บจำนวนบรรทัดขั้นต่ำไว้ทั้งสองฝั่งของจุดแบ่งหน้า

ในรายการ bullet ยังมีการใช้ break-inside: avoid เพื่อให้ข้อสั้นอยู่ครบด้วยกัน ค่าตัวอย่างคือสามบรรทัด แต่ต้องดูความยาวจริงด้วย เพราะข้อที่ยาวเกินหน้าหรือข้อจำกัดอื่นอาจทำให้ browser แบ่งต่างจากที่ขอได้ จึงยังต้องตรวจผล PDF

แผนภาพที่สูงและแคบมักเสียพื้นที่เมื่อถูกวางเป็นแบนเนอร์เต็มความกว้าง ถ้าจำกัดความสูงมากไป ภาพจะเล็กและมีพื้นที่ว่างสองข้าง แต่ถ้าปล่อยให้สูงเต็มที่ คำอธิบายอาจถูกดันไปหน้าถัดไป

skill ใช้สองคอลัมน์ โดยให้ภาพประมาณ 36–40% และคำอธิบายประมาณ 58–62% พร้อมห่อหัวข้อ ภาพ และข้อความเป็นชุดเดียวกัน วิธีนี้ใช้ความสูงของภาพให้เกิดประโยชน์ ผู้อ่านมองลำดับในแผนภาพแล้วอ่านคำอธิบายข้าง ๆ ได้ทันที

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

สาระสำคัญคือทำให้ feedback loop สั้นลง ไม่ใช่ถือว่าการตรวจพิกัดแทนการอ่านภาพได้ทุกกรณี โปรแกรมตรวจโครงสร้างช่วยจับบางปัญหาได้ แต่ยังไม่ยืนยันว่าภาพถูกความหมาย สูตรอ่านออก หรือความสัมพันธ์ของเนื้อหาถูกต้อง ตัวเลขความเร็วในต้นฉบับเป็นบันทึกของกรณีทดสอบ ไม่ใช่การรับประกันทุกเอกสาร

หลังใช้ continuous flow แล้ว ยังมีกรณีที่หัวข้อใหญ่เริ่มใกล้ท้ายหน้าเกินไป ทำให้เนื้อหาต่อไปแตกเป็นช่วง ๆ ข้อสุดท้ายจึงเลือกบังคับขึ้นหน้าใหม่เฉพาะ section ใหญ่ที่ควรอ่านเป็นชุด และให้ตารางที่ต่อหน้าใหม่มีหัวข้ออธิบายของตัวเอง

ภายในคอลัมน์ยังแก้ช่องว่างที่เกิดจาก justify-content: space-between ให้เรียงจากบนลงล่างด้วย gap และลด bullet ซ้ำกับเลขลำดับ ข้อนี้รวมบทเรียนระดับใหญ่และเล็กเข้าด้วยกัน: คุมจังหวะของทั้งบท พร้อมตรวจระยะและลำดับข้อมูลภายในแต่ละหน้า