การก้าวสู่ระดับสากล

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

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

คุณสมบัติทางตรรกะ

ภาษาอังกฤษเขียนจากซ้ายไปขวาและบนลงล่าง แต่บางภาษาไม่ได้เขียนด้วยวิธีนี้ บางภาษา เช่น อาหรับและฮีบรูจะอ่านจากขวาไปซ้าย และแบบอักษรของญี่ปุ่นบางแบบจะอ่านในแนวตั้งแทนแนวนอน เพื่อให้เหมาะกับโหมดการเขียนเหล่านี้ เราได้เปิดตัวคุณสมบัติเชิงตรรกะใน CSS

หากคุณเขียน CSS คุณอาจเคยใช้คีย์เวิร์ดที่เป็นทิศทาง เช่น "ซ้าย" "ขวา" "บน" และ "ล่าง" คีย์เวิร์ดเหล่านั้นหมายถึงเลย์เอาต์ของอุปกรณ์ผู้ใช้

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

ในขณะที่คุณสมบัติแบบทิศทาง margin-left จะหมายถึงขอบด้านซ้ายของช่องเนื้อหาเสมอ คุณสมบัติเชิงตรรกะ margin-inline-start หมายถึงขอบด้านซ้ายของช่องเนื้อหาในภาษาจากซ้ายไปขวา และระยะขอบด้านขวาของช่องเนื้อหาในภาษาที่อ่านขวาไปซ้าย

หลีกเลี่ยงคุณสมบัติที่ช่วยกำหนดทิศทางเพื่อให้งานออกแบบของคุณปรับให้เข้ากับโหมดการเขียนต่างๆ ได้ โปรดใช้คุณสมบัติทางตรรกะแทน

ไม่ควรทำ
.byline {
  text-align: right;
}
ควรทำ
.byline {
  text-align: end;
}

เมื่อ CSS มีค่าทิศทางที่เจาะจง เช่น left หรือ right จะมีพร็อพเพอร์ตี้เชิงตรรกะที่ตรงกัน ซึ่งเมื่อก่อนเรามี margin-left ตอนนี้เรามี margin-inline-start ด้วย

ในภาษาอย่างเช่น อังกฤษ ข้อความไหลจากซ้ายไปขวา inline-start ตรงกับ "ซ้าย" และ inline-end ตรงกับ "ขวา"

ในทำนองเดียวกัน ในภาษาอย่างเช่นภาษาอังกฤษ ซึ่งมีการเขียนข้อความจากบนลงล่าง block-start จะตรงกับ "top" และ block-end คือ "bottom"

ภาษาละติน ฮีบรู และญี่ปุ่นแสดงข้อความตัวยึดตำแหน่งภายในเฟรมอุปกรณ์ ลูกศรและสีตามข้อความเพื่อช่วยเชื่อมโยง 2 ทิศทางของบล็อกและแทรกในบรรทัด

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

เทคนิคการจัดวาง CSS สมัยใหม่ เช่น grid และ flexbox จะใช้คุณสมบัติเชิงตรรกะโดยค่าเริ่มต้น หากคิดในแง่ของ inline-start และ block-start แทนที่จะเป็น left และ top คุณจะพบว่าเทคนิคสมัยใหม่เหล่านี้เข้าใจได้ง่ายขึ้น

ใช้รูปแบบทั่วไป เช่น ไอคอนถัดจากข้อความ หรือป้ายกำกับข้างช่องแบบฟอร์ม แทนที่จะคิดว่า "ป้ายกำกับควรมีระยะขอบด้านขวา" ให้คิดว่า "ป้ายกำกับควรมีระยะขอบที่ปลายแกนในบรรทัด" แทน

ไม่ควรทำ
label {
  margin-right: 0.5em;
}
ควรทำ
label {
  margin-inline-end: 0.5em;
}

หากหน้านั้นมีการแปลเป็นภาษาที่อ่านจากขวาไปซ้าย ก็ไม่จำเป็นต้องอัปเดตรูปแบบ คุณเลียนแบบผลลัพธ์ของการดูหน้าเว็บในภาษาที่อ่านจากขวาไปซ้ายได้โดยใช้แอตทริบิวต์ dir ในองค์ประกอบ html ค่า ltr หมายถึง "จากซ้ายไปขวา" ค่า "rtl" หมายถึง "ขวาไปซ้าย"

หากต้องการทดสอบการเรียงสับเปลี่ยนทิศทางของเอกสาร (แกนบล็อก) และโหมดการเขียน (แกนแทรก) ทั้งหมด โปรดดูการสาธิตแบบอินเทอร์แอกทีฟ

ระบุภาษาหน้าเว็บ

คุณควรระบุภาษาของหน้าเว็บโดยใช้แอตทริบิวต์ lang ในองค์ประกอบ html

<html lang="en">

ตัวอย่างนี้เป็นตัวอย่างของหน้าเว็บที่เป็นภาษาอังกฤษ คุณสามารถระบุอย่างเจาะจงยิ่งขึ้นได้ วิธีประกาศว่าหน้าเว็บใช้ภาษาอังกฤษ (สหรัฐอเมริกา) มีดังนี้

<html lang="en-us">

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

แอตทริบิวต์ lang สามารถอยู่ในองค์ประกอบ HTML ใดก็ได้ ไม่ใช่แค่ html หากคุณเปลี่ยนภาษาในหน้าเว็บ ให้บ่งชี้ถึงการเปลี่ยนแปลงนั้น ในกรณีนี้ มีคำเดียวเป็นภาษาเยอรมัน

<p>I felt some <span lang="de">schadenfreude</span>.</p>

ระบุภาษาของเอกสารที่ลิงก์

มีแอตทริบิวต์อีกรายการชื่อ hreflang ซึ่งใช้ในลิงก์ได้ hreflang จะใช้สัญกรณ์รหัสภาษาเดียวกับแอตทริบิวต์ lang และอธิบายภาษาของเอกสารที่ลิงก์ หากมีการแปลหน้าเว็บทั้งหน้าเป็นภาษาเยอรมัน ให้ลิงก์ไปยังหน้านั้นดังนี้

<a href="/path/to/german/version" hreflang="de">German version</a>

หากคุณใช้ข้อความภาษาเยอรมันเพื่ออธิบายลิงก์ไปยังเวอร์ชันภาษาเยอรมัน ให้ใช้ทั้ง hreflang และ lang ซึ่งจะมีมาร์กอัปข้อความ "เวอร์ชันเยอรมัน" ว่าเป็นภาษาเยอรมัน และลิงก์ปลายทางจะมีมาร์กอัปเป็นภาษาเยอรมันด้วย ดังนี้

<a href="/path/to/german/version" hreflang="de" lang="de">Deutsche Version</a>

หรือจะใช้แอตทริบิวต์ hreflang ในองค์ประกอบ link ก็ได้ ข้อความนี้จะอยู่ใน head ของเอกสาร:

<link href="/path/to/german/version" rel="alternate" hreflang="de">

แต่ hreflang จะใช้ได้กับองค์ประกอบ a และ link เท่านั้น ซึ่งต่างจากแอตทริบิวต์ lang ที่นำไปใช้ในองค์ประกอบใดก็ได้

คำนึงถึงการปรับให้เป็นสากลในการออกแบบ

เมื่อคุณออกแบบเว็บไซต์ที่จะแปลเป็นภาษาอื่นๆ และโหมดการเขียนอื่นๆ ให้คำนึงถึงปัจจัยต่อไปนี้

  • บางภาษา เช่น ภาษาเยอรมัน มีคำยาวๆ ที่ใช้กันโดยทั่วไป อินเทอร์เฟซของคุณต้องปรับให้เข้ากับคำเหล่านี้ ดังนั้นหลีกเลี่ยงการออกแบบคอลัมน์ที่แคบ คุณยังใช้ CSS เพื่อนำขีดกลางสั้นมาใช้ได้ด้วย
  • ตรวจสอบว่าค่า line-height รองรับอักขระ เช่น เครื่องหมายเน้นเสียงและเครื่องหมายกำกับการออกเสียงอื่นๆ ได้ บรรทัดข้อความที่ดูดีในภาษาอังกฤษอาจทับซ้อนกันในภาษาอื่น
  • หากคุณใช้แบบอักษรของเว็บ ดูให้แน่ใจว่าแบบอักษรนั้นมีจำนวนอักขระที่กว้างพอที่จะครอบคลุมภาษาที่คุณจะแปล
  • อย่าสร้างรูปภาพที่มีข้อความอยู่ ในกรณีนี้ คุณต้องสร้างรูปภาพแยกกันสำหรับแต่ละภาษา แต่ให้แยกข้อความและรูปภาพ แล้วใช้ CSS เพื่อวางซ้อนข้อความในรูปภาพแทน

คิดคอนเทนต์แบบสากล

แอตทริบิวต์อย่าง lang และ hreflang ทำให้ HTML มีความหมายมากขึ้นสำหรับการปรับให้เป็นสากล ในทำนองเดียวกัน คุณสมบัติเชิงตรรกะจะช่วยให้ CSS ปรับเปลี่ยนได้ง่ายขึ้น

หากคุณคุ้นเคยกับ top, bottom, left และ right คุณอาจเริ่มนึกถึง block start, block end, inline start และ inline end แทนได้ยาก แต่มันก็คุ้มค่า คุณสมบัติทางตรรกะเป็นกุญแจสำคัญในการสร้างเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์อย่างแท้จริง

ตรวจสอบความเข้าใจของคุณ

ทดสอบความรู้ของคุณการปรับให้เป็นสากล

ในภาษาอังกฤษ ด้านจริงของกล่อง right คือด้านใดเชิงตรรกะ

block-start
ลองอีกครั้งนะ ในภาษาอังกฤษ นี่คือ top
block-end
ลองอีกครั้งนะ ในภาษาอังกฤษ นี่คือ bottom
inline-start
ลองอีกครั้งนะ ในภาษาอังกฤษ นี่คือ left
inline-end
🎉

คุณควรเพิ่มแอตทริบิวต์ใดลงใน HTML เพื่อให้มีความหมายมากขึ้นสำหรับการปรับให้เป็นสากล

english
ลองอีกครั้งนะ
lang
🎉 ระบบจะส่งสัญญาณให้เบราว์เซอร์ทราบว่าเอกสารใช้ภาษาใด ซึ่งจะช่วยตั้งค่าโหมดการเขียน ทิศทางของเอกสาร และการแปล
language
ลองอีกครั้งนะ
i18n
ลองอีกครั้งนะ

ต่อไป คุณจะได้ดูวิธีใช้เลย์เอาต์ระดับหน้า หรือที่เรียกว่าเลย์เอาต์มาโคร