MathJaX ชุดคำสั่งสำหรับแสดงสมการคณิตศาสตร์บนเว็บ

บทความ/จัดพิมพ์ โดย: นาย เจษฏา กานต์ประชา

ปัญหาที่พบในการใช้งาน MathJaX

เว็บเราใช้งาน MathJaX มาได้หลายปีแล้ว พบปัญหาและมีแนวทางแก้ไขดังนี้

1. รูปแบบการแสดงผลแบบ HTML-CSS ผิดเพี้ยน

   เนื่องจากรูปแบบการแสดงผลแบบ HTML-CSS สามารถโดนรบกวนจากการจัดหน้าและรูปแบบของเว็บที่เป็น HTML เหมือนกัน จึงอาจดูผิดเพี้ยนไม่สวยงาม (เส้นแนวนอนไม่ตรง ตัวอักษรเกยกัน ฯลฯ) ดังเช่นตัวอย่างรูปด้านล่าง

   

   วิธีแก้ไข เปลี่ยนไปใช้รูปแบบการแสดงผลแบบ SVG ซึ่งแสดงสมการคณิตศาสตร์ได้ไม่มีผิดเพี้ยนเลย และจากการทดสอบพบว่า สามารถแสดงผลได้เร็วกว่าแบบ HTML-CSS ประมาณ 18% - 34% อีกด้วย เหมาะแก่การใช้แสดงบนหน้าเว็บที่มีสมการคณิตศาสตร์เยอะๆ

   เพิ่มการแสดงผลเป็น "output/SVG" ก่อนการแสดงผลเป็น "output/HTML-CSS"

   MathJax.Hub.Config({
   	...
   	jax: ["input/TeX","output/SVG","output/HTML-CSS"],
   	...
   });
   								

2. สมการคณิตศาสตร์ไม่แสดงผลด้วยสีเดียวกับข้อความรอบข้าง

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

   วิธีแก้ไข ต้องตั้งค่าการแสดงผลสำหรับ SVG เพิ่มเติมให้แสดงผลด้วยสีเดียวกับข้อความรอบข้าง

   MathJax.Hub.Config({
   	...
   	"SVG": {
   		styles: {
   			".MathJax_SVG svg > g, .MathJax_SVG_Display svg > g":  {
   				fill: "currentColor",
   				stroke: "currentColor"
   			}
   		}
   	},
   	...
   });
   								

3. ในกรณีที่ใช้ LaTeX ไม่ถูกต้อง ไม่แสดงข้อความบอกสาเหตุของปัญหา

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

   
   

   วิธีแก้ไข ลบ extensions "TeX/noErrors.js" และ "TeX/noUndefined.js" ออกจากส่วนที่กำหนด extensions (อย่ากำหนดตามตัวอย่างข้างล่าง)

   MathJax.Hub.Config({
   	...
   	extensions: [ ... "TeX/noErrors.js","TeX/noUndefined.js" ... ],
   	...
   });
   								

4. สมการคณิตศาสตร์แสดงชิดขอบขวาของจอภาพ

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

   วิธีแก้ไข เขียนชุดคำสั่งบังคับให้บราวเซอร์ต้องแสดงผล element ในรูปแบบ inline เท่านั้น เช่น

   MathJax.Hub.Config({
   	...
   	"SVG": {
   		styles: {
   			".MathJax_SVG": {
   				display: "inline !important"
   			}
   		}
   	},
   	...
   });
   								

5. ขึ้นข้อความ Math Processing Error

   สาเหตุของปัญหานี้เท่าที่พบ เกิดจาก 2 สาเหตุคือ

   1. ดาวน์โหลดไฟล์ Javascript ไม่สำเร็จ

      ปัญหานี้มักพบกับการใช้งานบนอินเตอร์เน็ตความเร็วต่ำ ทำให้ไฟล์ Javascript บางไฟล์ดาวน์โหลดไม่สำเร็จ

      วิธีแก้ไข ต้องมีการปรับแต่งการตั้งค่า MathJaX เพื่อให้ดาวน์โหลด Javascript ไฟล์ได้สำเร็จมากที่สุด ผลจากการทดสอบเล่นบนอินเตอร์เน็ตมือถือ(GPRS/EDGE) พบว่า การดาวน์โหลด Javascript เล็กๆหลายไฟล์พร้อมกัน มีโอกาสที่จะดาวน์โหลดไฟล์สำเร็จมากกว่า การนำ Javascript หลายไฟล์มารวมเป็นไฟล์ใหญ่ไฟล์เดียว สูงมาก จึงควรหลีกเลี่ยงการใช้ไฟล์ตั้งค่าพื้นฐานที่ MathJaX ให้มา หากมีความจำเป็นต้องใช้ ก็ควรสร้างไฟล์ตั้งค่าพื้นฐานขนาดเล็กขึ้นใช้เอง นอกจากนี้ควรจะเพิ่มเวลา Timeout สำหรับการดาวน์โหลดไฟล์ Javascript ให้นานขึ้น (แก้ไขค่า MathJax.Ajax.timeout)

      MathJax.Hub.Config({
      	...
      });
      
      MathJax.Ajax.timeout = 600000;
      										

   2. MahJaX เรียกใช้ชุดคำสั่ง Javascript ของไฟล์ที่ยังดาวน์โหลดไม่สำเร็จ

      ปัญหานี้เป็นปัญหาที่แปลก พบเจอไม่บ่อยครั้งนัก และจะเกิดขึ้นกับบางระบบเท่านั้น พบได้กับการใช้งานบราวเซอร์ Safari บน iOS6 ทั้งบน iPhone และ iPad รวมถึงตัว Simulator ด้วย (ไม่พบปัญหานี้เมื่อใช้บราวเซอร์ Chrome/Dolphin บน iOS6) เมื่อลองตรวจสอบว่าไฟล์ไหนดาวน์โหลดไม่สำเร็จบ้าง ก็ตรวจไม่พบ

      วิธีแก้ไข โมดูลสำคัญๆของ MathJaX ที่ทำให้เกิดปัญหานี้มี 3 โมดูลด้วยกัน คือ

      • Config InputJax ([MathJax]/jax/input/TeX/config.js)
      • InputJax ([MathJax]/jax/input/TeX/jax.js)
      • ElementJax ([MathJax]/jax/element/mml/jax.js)

      ทั้ง 3 โมดูลนี้ทำงานประสานกันอย่างใกล้ชิด ควรรวมให้อยู่ใน Javascript เพียงไฟล์เดียว เพื่อให้เมื่อดาวน์โหลดไฟล์นี้สำเร็จ จะสามารถใช้งานทั้ง 3 โมดูลได้โดยไม่มีข้อผิดพลาด

      โครงสร้างของไฟล์ Javascript ที่รวมทั้ง 3 โมดูลไว้ในไฟล์เดียว

      MathJax.Ajax.Preloading(
      	"[MathJax]/jax/input/TeX/config.js",
      	"[MathJax]/jax/element/mml/jax.js",
      	"[MathJax]/jax/input/TeX/jax.js"
      );
      
      MathJax.Hub.Config({"v1.0-compatible":false});
      
      /* บรรทัดข้างล่างนี้ใส่ Javascript จากไฟล์ [MathJax]/jax/input/TeX/config.js */
      MathJax.InputJax.TeX=MathJax.InputJax( ... ); MathJax.InputJax.TeX.loadComplete("config.js");
      
      /* บรรทัดข้างล่างนี้ใส่ Javascript จากไฟล์ [MathJax]/jax/element/mml/jax.js */
      MathJax.ElementJax.mml=MathJax.ElementJax( ... ); MathJax.ElementJax.mml.loadComplete("jax.js");
      
      /* บรรทัดข้างล่างนี้ใส่ Javascript จากไฟล์ [MathJax]/jax/input/TeX/jax.js */
      ...
      
      MathJax.Ajax.loadComplete("[MathJax]/config/MyConfig.js");
      										

6. การแสดงผลบนอุปกรณ์พกพาขนาดเล็ก

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

   วิธีแก้ไข กำหนดค่าพารามิเตอร์ linebreaks ในทุกเทคนิคการแสดงผล เพื่อให้ MathJaX พยายามตัดสมการคณิตศาสตร์ที่ยาวล้นจอขึ้นบรรทัดใหม่ ตัวอย่างสำหรับ SVG เช่น

   MathJax.Hub.Config({
   	...
   	"SVG": {
   		...
   		linebreaks: {
   			automatic: true,
   			width: "90% container"
   		},
   		...
   	},
   	...
   });
   								

   ตัวเลขเปอร์เซ็นต์หมายถึง ความยาวของสมการคณิตศาสตร์ ให้มีความยาวไม่เกินกี่เปอร์เซ็นต์ของความกว้างของหน้าต่างที่สมการวางอยู่

   อย่างไรก็ตามบางครั้ง MathJaX อาจตัดสมการขึ้นบรรทัดใหม่แล้วเกิดข้อผิดพลาด Math Processing Error ได้ด้วย

   วิธีแก้ไข กำหนด Macros สำหรับชุดคำสั่งที่อาจโดนตัดขึ้นบรรทัดใหม่แล้วเกิดความผิดพลาดขึ้นมาใหม่ เช่น

   MathJax.Hub.Config({
   	...
   	TeX: {
   		...
   		Macros: {
   			bmod: ['\\mathbin{\\rm mod}'],
   			pmod: ['\\,\\,\\,(\\mathop{\\rm mod}\\,#1)',1],
   			mod: ['\\,\\,\\,\\mathop{\\rm mod}\\,#1',1],
   			pod: ['\\,\\,\\,(#1)',1]
   		},
   		...
   	},
   	...
   });