HTML: <wbr> - tag ดี ๆ ที่หลายคนมองข้ามไป
Published on
Authored by Pete. Pittawat Taveekitworachai.
แน่นอนว่าการพัฒนาเว็บไซต์ในปัจจุบัน เราต้องพัฒนาเว็บไซต์ให้มีความสามารถในการแสดงผลบนทุกอุปกรณ์ได้อย่างเหมาะสม สวยงาม และตอบสนองต่อความต้องการของผู้ใช้ ซึ่งนอกเหนือไปจากเรื่องของการจัดวางองค์ประกอบต่าง ๆ บนหน้าเว็บไซต์แล้ว เนื้อหาของเว็บไซต์เองก็ถือเป็นหนึ่งในสิ่งที่สำคัญเช่นกัน
หนึ่งในปัญหาที่มักพบได้บ่อยในการพัฒนาเว็บไซต์แบบ 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 นี้ ซึ่งถือเป็นความใส่ใจเล็ก ๆ ของคนทำเว็บที่ช่วยให้ผู้ใช้ที่ใช้งานเว็บไซต์ของเราสามารถอ่าน และสแกนข้อความบนเว็บไซต์ได้อย่างไหลลื่นและเป็นธรรมชาติ ไม่ขัดกับความรู้สึกได้ดียิ่งขึ้น