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

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

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

คุณสมบัติเชิงตรรกะ

ภาษาอังกฤษจะอ่านจากซ้ายไปขวาและบนลงล่าง แต่ไม่ใช่ทุกภาษาที่จะเขียนในลักษณะนี้ บางภาษา เช่น อาหรับและฮีบรูอ่านจากขวาไปซ้าย และแบบอักษรภาษาญี่ปุ่นบางอย่างจะอ่านในแนวตั้งแทนที่จะอ่านแนวนอน เพื่อรองรับโหมดการเขียนเหล่านี้ มีการใช้คุณสมบัติเชิงตรรกะใน 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 ตรงกับ "ด้านบน" และ block-end เท่ากับ "ต่ำสุด"

ละติน ฮิบรู และญี่ปุ่นจะแสดงข้อความตัวยึดตำแหน่งภายในเฟรมของอุปกรณ์ ลูกศรและสีจะเคลื่อนไปตามข้อความเพื่อช่วยเชื่อมโยง 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">

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

พิจารณาการปรับให้เป็นสากลในงานออกแบบของคุณ

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

  • บางภาษา เช่น ภาษาเยอรมัน มีคำยาวที่ใช้กันโดยทั่วไป อินเทอร์เฟซของคุณต้องปรับเปลี่ยนตามคำเหล่านี้ ดังนั้นให้หลีกเลี่ยงการออกแบบคอลัมน์ที่แคบ นอกจากนี้ คุณยังใช้ 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
ลองอีกครั้งนะ

ถัดไป คุณจะได้เรียนรู้วิธีจัดวางเลย์เอาต์ระดับหน้าเว็บ ซึ่งเรียกอีกอย่างว่าเลย์เอาต์มาโคร