วัน: 31 มกราคม 2020

การนำเสนอเนื้อหาทางวิทยาศาสตร์ เกษตรกรรม หรือข่าวด้านความปลอดภัยของสารเคมีบนเว็บไซต์ สิ่งที่ผู้ดูแลระบบเว็บและนักเขียนมักมองข้ามคือ การจัดรูปแบบสูตรเคมี ตัวอย่างเช่น โพแทสเซียมคลอเรต (KClO₃) หรือแอมโมเนียมไนเตรต (NH₄NO₃) หากพิมพ์เป็นข้อความธรรมดาอย่าง KClO3 หรือ NH4NO3 นอกจากจะไม่ถูกต้องตามหลักสากลแล้ว ยังลดทอนความน่าเชื่อถือของบทความลงอย่างมาก

เทคนิคและแนวทางปฏิบัติในการแสดงผลสูตรเคมีบนเว็บไซต์อย่างเป็นมาตรฐาน แบ่งตามสถาปัตยกรรมของระบบได้ดังนี้

ใช้ Semantic HTML ด้วยแท็ก <sub> (ทางเลือกสากลที่ดีที่สุด)

วิธีพื้นฐานที่ปลอดภัยและเข้ากันได้กับทุกเบราว์เซอร์มากที่สุด คือการใช้แท็ก <sub> (Subscript) สำหรับตัวเลขแสดงจำนวนอะตอมของธาตุ

<!-- โพแทสเซียมคลอเรต -->
KClO<sub>3</sub>

<!-- แอมโมเนียมไนเตรต -->
NH<sub>4</sub>NO<sub>3</sub>

• ข้อดี: ไม่ต้องโหลด JavaScript ภายนอก รองรับระบบอ่านหน้าจอสำหรับผู้พิการ (Screen Readers) และช่วยให้ Search Engine (SEO) ตีความโครงสร้างข้อความได้ถูกต้องสมบูรณ์
• ข้อควรระวังเรื่อง CSS: เบราว์เซอร์บางตัวอาจปรับ line-height ของบรรทัดที่มีแท็ก <sub> ทำให้ระยะห่างระหว่างบรรทัดเพี้ยน แก้ไขได้ง่ายๆ ด้วยการรีเซ็ต CSS:

sub {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  bottom: -0.25em;
}

ใช้ Unicode Subscripts (สำหรับ Title, Meta Tag และ Input Fields)

ในหลายพื้นที่ของระบบเว็บไซต์ แท็ก HTML ไม่ได้รับอนุญาตให้ทำงาน เช่น แท็ก <title>, Meta Description สำหรับ SEO, หรือช่องกรอกข้อมูลฟอร์ม การใช้อักขระตัวเลขห้อยแบบ Unicode คือทางออกที่เหมาะสมที่สุด

• โพแทสเซียมคลอเรต: KClO₃
• แอมโมเนียมไนเตรต: NH₄NO₃
• ตารางอ้างอิงรหัส Unicode:
  • เลข 3 ห้อย: U+2083 (₃)
  • เลข 4 ห้อย: U+2084 (₄)
• ข้อจำกัด: แบบอักษร (Font) รุ่นเก่าบางตัวอาจไม่มี Glyph ของตัวเลขห้อย ทำให้ระบบสลับไปใช้ฟอนต์สำรอง (Fallback font) ซึ่งอาจส่งผลให้ขนาดหรือความหนาของตัวอักษรดูไม่สม่ำเสมอ

ใช้ Math Rendering Engine: KaTeX หรือ MathJax (สำหรับเว็บวิชาการ)

หากเว็บไซต์มีเนื้อหาเชิงลึก การคำนวณสมดุลสมการเคมี หรือต้องการจัดหน้าตามมาตรฐานวารสารวิทยาศาสตร์ การติดตั้งปลั๊กอินหรือไลบรารี KaTeX / MathJax เป็นตัวเลือกที่ให้ผลลัพธ์สวยงามที่สุด

การเขียนด้วย LaTeX ปกติ

$\text{KClO}_3$
$\text{NH}_4\text{NO}_3$

การเขียนด้วยส่วนเสริม mhchem (วิธีที่แนะนำสำหรับสูตรเคมี)

$\ce{KClO3}$
$\ce{NH4NO3}$

หมายเหตุ: แพ็กเกจ mhchem จะแปลงตัวพิมพ์ใหญ่-เล็ก และจัดตัวเลขอัตโนมัติโดยไม่ต้องแทรกเครื่องหมาย _ ให้ยุ่งยาก

สรุปเกณฑ์การเลือกใช้งาน

การเลือกใช้เครื่องมือให้ตรงกับจุดประสงค์ ไม่เพียงช่วยให้สูตรเคมีอย่าง KClO₃ และ NH₄NO₃ ปรากฏอย่างถูกต้องตามหลักวิทยาศาสตร์ แต่ยังยกระดับคุณภาพของโค้ดและการเข้าถึง (Accessibility) ของหน้าเว็บให้มีมาตรฐานสูงสุดอีกด้วย

อ่านเพิ่มเติม

• ปลั๊กอิน WordPress สำหรับเขียนสมการคณิตศาสตร์ด้วย KaTeX และ MathJax