เมื่อเร็วๆ นี้ ผมได้ทดสอบชุด Microsoft Office Online ที่น่าประทับใจและใช้งานง่ายบน Linux ซึ่งแสดงให้เห็นว่าคุณสามารถใช้โปรแกรมสำนักงานมาตรฐานที่แพร่หลายที่สุดได้ใน Linux distro ที่คุณชอบโดยไม่ต้องเปลี่ยนไปใช้ Windows ทั้งหมด ซึ่งเป็นเรื่องสำคัญมาก เนื่องจากมีผลต่อทั้งต้นทุนและมุมมองทางวิชาชีพ
ปัญหาสีพื้นหลังสีเทา
แต่มีสิ่งหนึ่งที่รบกวนผม — คือสีพื้นหลังเอกสารใน Word เวอร์ชันออนไลน์เป็นสีเทา เพื่อให้แม่นยำ มันโปร่งใส แต่เฉดสีเทานั้นทำให้ต 눈이เหนื่อยล้าอย่างมาก ไม่มีตัวเลือกหรือปุ่มใน UI สำหรับเปลี่ยนสิ่งนี้เลย ดังนั้นผมจะแสดงวิธีปรับแต่งชั่วคราวขณะทำงานออนไลน์ นั่นคือ เราจะเปลี่ยนสีพื้นหลังเอกสาร Microsoft Office Online ให้เป็นสีที่คุณต้องการ ติดตามไปเลย
มันคือ HTML
ที่จริงแล้ว ไม่ว่าจะใช้ซอฟต์แวร์ใดขับเคลื่อนแอปในคลาวด์ เบราว์เซอร์ของคุณก็ยังแสดงผลเป็นหน้า HTML อยู่ดี มีองค์ประกอบแบบไดนามิกและสคริปต์ แต่เหล่านี้เพียงทำให้ชิ้นส่วน HTML ต่างๆ เคลื่อนไหวและเชื่อมต่อกันเท่านั้น
สิ่งที่คุณเห็นในเบราว์เซอร์สามารถแปลงเป็น divs, tables, และ paragraphs ได้ ซึ่งทุกอย่างมีแอตทริบิวต์และสไตล์ เช่น สี สีพื้นหลัง น้ำหนักฟอนต์ ขอบ และระยะห่าง หากเปลี่ยนค่าเหล่านี้ ลักษณะการแสดงผลบนหน้าจอก็จะเปลี่ยนไป เบราว์เซอร์สมัยใหม่ทุกตัวอนุญาตให้จัดการหน้า HTML ที่แสดงอยู่โดยคลิกขวา > inspect element คำที่แน่นอนอาจต่างออกไปเล็กน้อย แต่สรุปคือ เปลี่ยนสไตล์ HTML/CSS = เปลี่ยนลักษณะหน้าเว็บ ซึ่งเป็นสิ่งที่เราต้องการทำ แต่…
ไม่มีคลิกขวา!
อืม Microsoft Office Online สงวนสิทธิ์คลิกขวาไว้สำหรับเมนูบริบทของตัวเอง ตามที่เราเห็นในรีวิว คุณสามารถใช้การกระทำนี้เพื่อคัดลอกและวางข้อความ เปลี่ยนภาษา แปลข้อความ เพิ่มความคิดเห็น หรือแก้ไขสไตล์ต่างๆ ของงานได้
นั่นหมายความว่าคุณไม่ได้มีทางเข้าถึงเมนูคลิกขวามาตรฐานของเบราว์เซอร์ ซึ่งเราต้องการเพื่อ inspect องค์ประกอบ HTML ดังนั้นเราจึงต้องการเครื่องมือช่วยเหลือ คุณสามารถปิดใช้งาน JavaScript ในเบราว์เซอร์ด้วยส่วนขยายอย่าง Noscript หรือผ่านการตั้งค่าเบราว์เซอร์ แต่จะทำให้หน้า Microsoft Office Online ทำงานไม่ได้ เราต้องการวิธีที่อ่อนโยนกว่าและรบกวนน้อยกว่า
วิธีทางเลือกคือการสั่งคำสั่ง JavaScript โดยตรงในแถบที่อยู่ของเบราว์เซอร์ อาจทำงานชั่วคราว แต่อาจถูกยกเลิกเมื่อหน้าเว็บรีเฟรชด้วยตัวเอง หากสนใจ ลองใส่คำสั่งต่อไปในแถบที่อยู่:
javascript:void(document.oncontextmenu=null);
javascript:void(window.oncontextmenu=null);
มีส่วนขยายเบราว์เซอร์หลายตัวสำหรับ Chrome และ Firefox ที่ช่วยกู้คืนฟังก์ชันคลิกขวา ตัวอย่างคือ Enable Right Click and Copy ส่วนขยายนี้ไม่ต้องรีสตาร์ทหลังติดตั้ง จึงตั้งค่าและใช้งานได้ง่ายมาก
คลิกขวา เปลี่ยนคุณสมบัติสี
ตอนนี้เรามีเมนูคลิกขวามาตรฐานของเบราว์เซอร์แล้ว ให้ inspect องค์ประกอบพื้นหลังหน้าเอกสาร วางเคอร์เซอร์เมาส์ที่พื้นที่สีเทาของเอกสาร คลิกขวา และมาทำ hacking เบื้องต้นกัน
ส่วนต่อไปอาจดูสับสนสำหรับผู้ที่ไม่คุ้นเคย เมื่อคุณคลิก inspect คุณจะได้เมนูซับซ้อนที่ให้ debug และดูด้านแบ็กเอนด์ของหน้าเว็บ รวมถึงโค้ด HTML จุดที่คุณคลิกจะถูกไฮไลท์ในแถบด้านซ้าย และด้านขวาจะแสดงกฎ CSS ที่ใช้กับองค์ประกอบที่เลือก
ในกรณีนี้ พื้นหลังหน้าถูกกำหนดโดย HTML div คลาส OutlineContent ที่มี background-color ตั้งค่าเป็น transparent สิ่งที่ต้องทำคือ วางเคอร์เซอร์เมาส์ที่ส่วน div.OutlineContent ในแถบขวา คลิกที่บรรทัด background-color: transparent และเปลี่ยนคำว่า transparent เป็น white หรือสีอื่นที่คุณชอบ فورกด Enter สีจะเปลี่ยนทันที
นี่คือการแก้ไขชั่วคราว
สำคัญมาก: นี่ ไม่ใช่ การแก้ไขถาวร รีเฟรชหน้าด้วย F5 และการแก้ไขสไตล์ของคุณจะหายไป ดาวน์โหลดเอกสารและเปิดใน LibreOffice หรือ Microsoft Office จะได้พื้นหลังสีขาวมาตรฐาน ไม่ว่าคุณจะเล่นกับมันอย่างไร นี่เป็นการเปลี่ยนแปลงเพียงระดับการแสดงผล (cosmetic) และมีผลต่อเบราว์เซอร์ของคุณเท่านั้น จนกว่าคุณจะโหลดหน้าใหม่ทั้งหมด สีที่ตั้งค่าไว้จะคงอยู่ หน้าถูกเรนเดอร์ใหม่ การแก้ไขก็จะหายไป
สิ่งนี้ไม่ได้เฉพาะ Microsoft Office Online คุณสามารถทำการเปลี่ยนแปลงนี้บนเว็บไซต์ใดๆ ได้ โดยเฉพาะหากคุณไม่ชอบเลย์เอาต์หรือสีบางอย่าง ค่อนข้างมีประโยชน์หากคุณต้องใช้และโต้ตอบกับเว็บไซต์แต่พบว่าเลเยอร์การนำเสนอ (presentation layer) ยุ่งยาก
หากคุณรู้สึกว่าไม่ต้องการการปรับแต่งอีกต่อไป หรือต้องการคืนเมนูคลิกขวาของแอป ให้ปิดใช้งานส่วนขยายเบราว์เซอร์และโหลดหน้าใหม่ คุณจะกลับสู่สถานะเดิม ง่าย สามารถย้อนกลับได้ ไม่รบกวน และอาจให้คุณเวลาทำงานเพิ่มขึ้นหลายชั่วโมงต่อวัน เนื่องจากตาของคุณไม่เหนื่อยจากการจ้องดูสีเทานั้นอีกต่อไป
สรุป
บทช่วยสอนสั้นๆ นี้สอนสองบทเรียนสำคัญ: 1) ความรู้พื้นฐานเกี่ยวกับ HTML ว่าทำงานอย่างไร หน้าเว็บโหลดและเรนเดอร์อย่างไร และโดยสรุป Web apps ทำงานอย่างไร 2) วิธีง่ายและสง่างามในการปรับลักษณะของ Microsoft Office Online ให้ทำงานและโต้ตอบกับเอกสารได้นานขึ้น โดยใช้สีพื้นหลังสีขาวที่เหมาะสมกับ Ergonomics แทนค่า透明เริ่มต้น
อาจจะมีวันหนึ่ง Microsoft จะเพิ่มตัวเลือกเปลี่ยนสีพื้นหลังใน UI เหมือนเวอร์ชันเดสก์ท็อป จนกว่าจะมีวันนั้น คุณมีหลายวิธีปรับสีตามต้องการ หากคุณใส่ใจต่อตาของตัวเอง คุณควรพิจารณา hack เล็กๆ นี้ที่ดูเหมือนเล็กน้อยแต่สำคัญมาก หวังว่าคุณจะได้เรียนรู้สิ่งใหม่วันนี้ Happy typing!
Cheers.
