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