การลดรอยหยัก 101

เกริ่นนำ

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

หน้าจอทั้งหมดของเราประกอบด้วยพิกเซลอย่างที่เราทุกคนรู้จัก ซึ่งเป็นตารางบล็อกขนาดยักษ์ โดยแต่ละบล็อกมีส่วนประกอบเป็นสีแดง เขียว และน้ำเงิน (RGB) เราจะเห็นรูปภาพ ข้อความ และไอคอนจากระยะไกล แต่จริงๆ แล้วเราเห็นตารางกริดของคอมโพเนนต์ RGB และองค์ประกอบต่างๆ ที่ประกอบขึ้น

การลดรอยหยัก

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

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

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

การแสดงข้อความ

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

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

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

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

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

ก้าวเข้าสู่โลกแห่งการไล่ล่า

การเปลี่ยนแปลงนี้ส่งผลอย่างไรต่อเราในฐานะนักพัฒนาแอป จากมุมมองของ Chrome อย่างน้อยก็มีการลดรอยหยักของทั้งโทนสีเทาและพิกเซลย่อยที่ใช้ในการแสดงผลข้อความ และอันไหนที่คุณได้รับจะขึ้นอยู่กับเกณฑ์ 2-3 อย่าง แต่ก่อนอื่น เราต้องทำความเข้าใจเกี่ยวกับเลเยอร์สักเล็กน้อย เพราะนี่เป็นเกณฑ์หลักในการเล่น หากคุณยังไม่เห็นเลเยอร์ต่างๆ และวิธีการที่ Chrome ใช้เป็นการภายในได้ Tom Wiltzius ได้เขียนบทนำที่น่าสนใจเกี่ยวกับหัวข้อนี้ที่คุณควรอ่านก่อน

หากคุณคุ้นเคยกับเลเยอร์ดีหรือเพิ่งอ่านมา ก็มาดูกันต่อเลย หากเปิดใช้การรวมฮาร์ดแวร์สำหรับหน้าเว็บและคุณมีเนื้อหาข้อความในเลเยอร์ที่ไม่ใช่เลเยอร์รูท ระบบจะแสดงผลโดยใช้การลบรอยหยักโทนสีเทาโดยค่าเริ่มต้น นักพัฒนาซอฟต์แวร์มักสังเกตเห็นว่าหากใช้การแฮ็กกับองค์ประกอบเพื่อใส่ลงในเลเยอร์ของตนเอง (ไม่ใช่รูท) (เช่น การใช้ translateZ) พวกเขาจะเห็นข้อความที่แสดงผลแตกต่างออกไป บ่อยครั้งที่นักพัฒนาซอฟต์แวร์ใช้ทริกเกอร์ "เลเยอร์ใหม่" ทันทีผ่าน JavaScript หรือ CSS ซึ่งทำให้การแสดงผลข้อความเปลี่ยนจากพิกเซลย่อยเป็นโทนสีเทา ผู้ใช้อาจสับสนได้หากคุณไม่ทราบว่าสิ่งใดทำให้การแสดงผลมีการเปลี่ยนแปลง อย่างไรก็ตาม หากข้อความของคุณอยู่ในเลเยอร์ราก ก็ควรจะแสดงผลด้วยการลบรอยหยักพิกเซลย่อย ซึ่งจะทำให้ข้อความอ่านได้ชัดเจนขึ้น

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

1. เลเยอร์มีสีพื้นหลังที่ทึบแสงทั้งหมด การใช้ border-radius หรือค่า background-clip ที่ไม่ใช่ค่าเริ่มต้นจะทำให้ระบบจัดการเลเยอร์ให้เป็นแบบไม่ทึบแสงและการแสดงผลข้อความจะเปลี่ยนกลับไปเป็นการลบรอยหยักโทนสีเทา
2. เลเยอร์สามารถใช้การเปลี่ยนอัตลักษณ์หรือการแปลปริพันธ์กับเลเยอร์อย่างใดอย่างหนึ่งเท่านั้น ปริพันธ์เราหมายถึงค่าที่ปัดเศษ เช่น translate(20.2px, 30px) จะทำให้มีการลบรอยหยักโทนสีเทาเนื่องจากคอมโพเนนต์ x 20.2px ไม่ใช่ปริพันธ์ การเปลี่ยนรูปแบบข้อมูลประจำตัวหมายความว่าจะไม่มีการใช้การหมุน การแปล หรือการปรับขนาดเพิ่มเติมนอกเหนือจากค่าเริ่มต้น
3. เลเยอร์มีความทึบแสง 1.0 การเปลี่ยนแปลงความทึบแสงจะเปลี่ยนการลบรอยหยักจากพิกเซลย่อยเป็นโทนสีเทา

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

และนั่นคือทั้งหมดของ Chrome สำหรับเบราว์เซอร์อื่นๆ ที่ Opera จะเปลี่ยนมาใช้ Chromium ก็ควรจะสอดคล้องกับลักษณะการทำงานของ Chrome มากที่สุด ดูเหมือนว่า Internet Explorer จะใช้การลบรอยหยักพิกเซลย่อยกับข้อความเกือบทั้งหมด (แน่นอนว่าถ้าคุณเปิดใช้ClearType ก็) แม้ว่าดูเหมือนว่าจะไม่ได้อยู่ในโหมด Metro ของ Windows 8 ก็ตาม Safari เนื่องจาก WebKit อยู่ใกล้กับ Blink และทำงานคล้ายกับ Chrome มากแม้ว่าจะไม่มีการปรับปรุงใหม่ๆ เหล่านี้ซึ่งจะช่วยให้สามารถลบรอยหยักพิกเซลย่อยได้มากขึ้น Firefox ส่วนใหญ่ทำงานในลักษณะเดียวกับ Internet Explorer ตราบเท่าที่ใช้การลบรอยหยักพิกเซลย่อยกับข้อความทั้งหมด แน่นอนว่านี่ไม่ใช่รายการที่ครอบคลุม และอาจมีบางกรณีที่เบราว์เซอร์ทั้งหมดมีการใช้การลบรอยหยักในโทนสีเทาแทนพิกเซลย่อย แต่การใช้การลบรอยหยักพิกเซลย่อยนั้นนิยมใช้กันอย่างแพร่หลายในชุดเบราว์เซอร์หลัก

บทสรุป

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

• โปรแกรมป้องกันนามแฝงสีเทาขนาด 48 พิกเซลแบบอัตโนมัติ ไม่สามารถลบล้างได้
• การแสดงแบบอักษรที่น่ากลัวด้วย Google Web Fonts ใน Chrome สำหรับ Windows)
• การสนับสนุน DirectWrite

แหล่งข้อมูลและข้อมูลอ้างอิง

• การแสดงผลพิกเซลย่อยใน Wikipedia
• Darel Rex Finley ในการแสดงข้อความ Subpixel
• วิธีการทำงานของการแสดงผล Subpixel
• พร็อพเพอร์ตี้ CSS ที่ส่งผลต่อการแสดงผลประเภท