HTML: <wbr> - tag ดี ๆ ที่หลายคนมองข้ามไป

Web Jul 23, 2020

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

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

โดย HTML Tag ที่สำคัญที่จะมาช่วยเราในกรณีนี้ก็คือ <wbr> นั่นเอง ถึงแม้ว่ามันจะหน้าตาคล้าย ๆ <br> Tag ที่ใช้สำหรับการบอก Break line หรือขึ้นบรรทัดใหม่ แต่การทำงานก็ไม่เหมือนกันซะทีเดียว

<wbr> เป็น Tag ที่ใช้ในการบอก Web Browser ว่าจุดไหนในประโยคเป็นจุดที่เป็นโอกาสสำหรับ Web Browser หากต้องการแบ่งบรรทัด (Word Break Opportunity) ซึ่งมักจะถูกใช้ในกรณีที่หน้าจอที่นำเว็บไซต์ไปแสดงผลมีพื้นที่ไม่เพียงพอให้แสดงผลทั้งประโยคในบรรทัดเดียว เช่น

<p>สวัสดี<wbr>ชาวโลก</p>

ถ้าหากหน้าจอที่แสดงผลไม่เพียงให้แสดงผลทั้งข้อความ (สวัสดีชาวโลก) และต้องมีการแบ่งบรรทัด แทนที่เราจะปล่อยให้ Web Browser ตัดสินใจเอง ซึ่งอาจะได้ผลลัพธ์เป็น สวัสดีชาว/โลก เราจะได้เป็น สวัสดี/ชาวโลก แทนนั่นเอง

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

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


📚 Hope you enjoy reading! 📚


Tags

Pittawat Taveekitworachai

A CS student who passionate about web and mobile technology with the belief that technology can enhance people's life.

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.