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