การปรับให้เป็นสากลและการแปล

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

ตรวจสอบว่าแบบฟอร์มใช้งานได้ในหลายภาษา

มาดูกันว่าคุณจะตรวจสอบว่าแบบฟอร์มของคุณทำงานกับหลายภาษาได้อย่างไร

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

<html lang="en-us">

ดูข้อมูลเพิ่มเติมเกี่ยวกับแอตทริบิวต์ lang

สมมติว่าคุณแปลแบบฟอร์มเป็นภาษาเยอรมัน คุณจะแน่ใจได้อย่างไรว่าเครื่องมือค้นหาและเบราว์เซอร์รู้จักเวอร์ชันที่แปลแล้ว คุณเพิ่มองค์ประกอบ <link> ใน <head> ของเว็บไซต์เพื่ออธิบายเวอร์ชันทางเลือกได้

<link rel="alternate" title="The form element"
  href="https://example.com/en/form" hreflang="en">
<link rel="alternate" title="Das Formularelement"
  href="https://example.com/de/form" hreflang="de">

ช่วยให้ผู้ใช้ที่พูดภาษาอื่นใช้แบบฟอร์มของคุณได้

คุณไม่สามารถแปลแบบฟอร์มของคุณในทุกภาษา แต่คุณมั่นใจได้ว่าเครื่องมือแปลภาษา จะแปลเนื้อหานั้นให้คุณได้

เพื่อให้เครื่องมือแปลภาษาแปลข้อความทั้งหมดในแบบฟอร์ม ตรวจดูให้แน่ใจว่าข้อความทั้งหมดกำหนดไว้ใน HTML และมองเห็นได้ เครื่องมือบางอย่างยังทำงานกับเนื้อหาที่กำหนดไว้ใน JavaScript ได้ด้วย แต่เพื่อปรับปรุงความเข้ากันได้ ให้พยายามใส่ข้อความให้มากที่สุดใน HTML

ตรวจสอบว่าแบบฟอร์มของคุณทำงานร่วมกับระบบการเขียนแบบต่างๆ ได้

ภาษาต่างๆ ใช้ระบบการเขียนและชุดอักขระที่แตกต่างกัน บางสคริปต์เขียนจากซ้ายไปขวา และบางสคริปต์เขียนจากขวาไปซ้าย

เว้นระยะห่างจากระบบการเขียน

เพื่อให้แบบฟอร์มของคุณทำงานได้กับระบบการเขียนแบบต่างๆ คุณจะใช้คุณสมบัติเชิงตรรกะของ CSS ได้

ข้อมูลที่ป้อนมีความหนา 1px ทุกด้าน ยกเว้นด้านซ้ายที่เส้นขอบหนา 4px แก้ไข CodePen และเปลี่ยนระบบการเขียนจากขวาไปซ้าย โดยเพิ่ม dir="rtl" ลงในองค์ประกอบ <main>

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

input {
  border-inline-start-width: 4px;
}

ดูข้อมูลเพิ่มเติมเกี่ยวกับพร็อพเพอร์ตี้เชิงตรรกะ

ตรวจสอบว่าแบบฟอร์มของคุณสามารถจัดการชื่อรูปแบบต่างๆ ได้

สมมติว่าคุณมีแบบฟอร์มที่ให้ผู้ใช้กรอก คุณจะเพิ่มช่องในแบบฟอร์มอย่างไร

คุณสามารถเพิ่มช่องสำหรับชื่อและอีก 1 ช่องสำหรับนามสกุลได้ แต่ชื่อจะต่างกัน จากรอบโลก ตัวอย่างเช่น บางคนไม่มีนามสกุล - เขาควรกรอก ฟิลด์นามสกุล

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับชื่อส่วนตัว

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

อนุญาตรูปแบบที่อยู่ที่หลากหลาย

สำนักงานใหญ่ของ Google อยู่ที่ 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States

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

วิธีหนึ่งก็คือการใช้อินพุตทั่วไป

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีอื่นๆ ในการทำงาน ที่อยู่ระหว่างประเทศ

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

ทดสอบความรู้ด้านการปรับให้เป็นสากลและการแปล

คุณเรียกใช้การออกเสียงที่ถูกต้องสำหรับโปรแกรมอ่านหน้าจออย่างไร

มีแอตทริบิวต์ lang
🎉
มีแอตทริบิวต์ hreflang
ลองอีกครั้งนะ
เพิ่มคำอธิบายพร้อมภาษาที่ใช้
ลองอีกครั้งนะ
มีแอตทริบิวต์ language
ลองอีกครั้งนะ

คุณสามารถเปลี่ยนระบบการเขียนในเว็บไซต์ของคุณได้อย่างไร

มีแอตทริบิวต์ direction
ลองอีกครั้งนะ
มีแอตทริบิวต์ dir
🎉
การใช้คุณสมบัติเชิงตรรกะ CSS
ลองอีกครั้งนะ
การใช้องค์ประกอบ <link>
ลองอีกครั้งนะ

แหล่งข้อมูล