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