Accesskey n ใช้เพื่อข้ามไปยัง หน้าในของ navigation. ข้ามไปยังส่วนเริ่มต้นของเนื้อหา

เอกสารฉบับนี้เป็นเอกสารฉบับแปลในกรณีที่มีข้อมูลไม่ตรงกันหรือมีข้อบกพร่อง เอกสารดั้งเดิมฉบับภาษาอังกฤษ จะถือว่าเป็นฉบับที่เป็นทางการ ลิขสิทธิ์ดั้งเดิม เป็นของ W3C, ดังที่แสดงไว้ข้างล่าง

ผู้แปล: ลาวัณย์ นันทโววาทย์ (Lawan Nuntavovat), WebStarThai

s_gotoW3cHome Internationalization
 

การใส่สไตล์โดยใช้ attribute lang

กลุ่มเป้าหมาย: ผู้เขียนโคด XHTML/HTML (โดยใช้โปรแกรมหรือการเขียน script), ผู้เขียน script เช่น PHP หรือ JSP, ผู้เขียนโคด CSS, และใครก็ตามที่ต้องการใช้ข้อมูลเกี่ยวกับภาษาในการนำมาใช้กับการใส่สไตล์ CSS ให้กับโคด

Note: Changes have been made to the English original since this document was translated. See the change log.

คำถาม

วิธีการใดเป็นวิธีการที่เหมาะสมที่สุดในการใส่สไตล์ CSS กับข้อความในบางภาษาในเอกสาร XHTML/HTML ที่มีหลายภาษา?

พื้นหลัง

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

หน้านี้จะเป็นการกล่าวถึงทางเลือกที่เป็นไปได้สำหรับวิธีการดังกล่าวอย่างมีประสิทธิภาพ

คำตอบ

มีวิธีการ 4 วิธีในการนำมาใช้กับสไตล์ที่แตกต่างกันให้กับภาษาที่ต่างกันในเอกสารที่มีหลากหลายภาษาที่มีการใช้ CSS2 วิธีการดังกล่าวเขียนเรียงตามลำดับความนิยมใช้ได้ดังนี้

  1. ใช้ :lang() ซึ่งเป็น pseudo-class selector
  2. ใช้ [lang |= "..."] selector ที่เหมาะสมกับส่วนเริ่มต้นของค่า value ของ language attribute
  3. ใช้ [lang = "..."] selector ที่เหมาะสมกับส่วนเริ่มต้นของค่า value ของ language attribute อย่างพอเหมาะพอเจาะ
  4. ใช้ class หรือ id selector ทั่วๆไป

ในขณะที่เขียนบทความนี้ Firefox 1.0 Mozilla 1.7.2 Netscape 8.0 และ Opera 8.0.2* support selector เหล่านี้แล้ว แต่น่าเสียดายที่เวลานำ selector เหล่านี้ไปใช้จริง Internet Explorer ไม่สามารถ support ได้ นั่นหมายความว่าผู้อ่าน จำนวนมากไม่สามารถเห็นการแสดงผลได้ตามที่ต้องการถ้านำ selector เหล่านี้ไปใช้ ทำให้เราต้องใช้ class หรือ id selector ทั่วไปกับทุก tag ที่ต้องการจะใส่สไตล์แทน สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเรื่องการ support selector เหล่านี้ ให้ดูได้ในส่วน ผลของการทดสอบ

* ยกเว้น Bugs ที่เกิดจากการอ่านค่าของสำหรับ selector [lang |= "..."] สำหรับโคดภาษาทีี่มี tag ย่อย (ดูได้ในส่วน ผลของการทดสอบ)

ส่วนที่เหลือของหน้านี้จะอธิบายและแจกแจงตัวอย่างของวิธีที่แตกต่างของการใช้ selector

ลำดับชั้นของ language values

ความแตกต่างที่สำคัญระหว่างการใช้ :lang และวิธีอื่นๆนั้นคือการใช้ :lang นั้นสามารถจดจำภาษาของ element ใน content ได้แม้ว่าการประกาศค่าภาษาจะอยู่ส่วนนอกของ element ที่เกี่ยวข้องก็ตาม

ตัวอย่างเช่นสมมติว่าในอนาคตเอกสารภาษาอังกฤษที่มีข้อความภาษาญี่ปุ่นที่คุณต้องการใส่สไตล์ในการเน้นข้อความ ภาษาญี่ปุ่นโดยใช้ property ภาษาพิเศษในกลุ่มเอเชียใน CSS3 แทนที่จะใช้ตัวเอียง (ซึ่งใช้ไม่ดีเสมอไปกับตัวอักษร ในภาษาญี่ปุ่นที่มีความสลับซับซ้อน) คุณอาจจะต้องใส่กฏต่อไปนี้ใน stylesheet

em           { font-style: italic; }
em:lang(ja)  { font-style: normal; font-emphasize: dot before; }

ตอนนี้สมมติว่าคุณมีเนื้อหาต่อไปนี้ที่ browser สามารถ support :lang ได้และ htmltag แจ้งไว้ว่าเอกสารนี้เป็นภาษา อังกฤษ

<p>This is <em>English</em>, but <span lang="ja" xml:lang="ja">これは<em>日本語</em>です。</span></p>

คุณอาจจะคาดว่าคุณจะเห็นคำภาษาอังกฤษที่ต้องการเน้นเป็นตัวเอียงแต่คำภาษาญี่ปุ่นที่ต้องการเน้นนั้นเป็นตัวอักษร แบบธรรมดาโดยมีจุดเล็กๆอยู่ด้านบนของตัวอักษรแต่ละตัว ดังนี้

ภาพที่่ใช้สำหรับข้อความที่ได้อธิบายไว้

จุดสำคัญที่ต้องคำนึงถึงในส่วนนี้คือไม่สามารถใช้ selector [lang|="..."] หรือ [lang="..."] ได้ หากต้องการที่จะใช้ คุณจะต้องประกาศค่าให้ชัดเจนใน em tag ที่ใช้กับตัวอักษรญี่ปุ่นแต่ละตัวเสียก่อน

ส่วนนี้เป็นความแตกต่างที่สำคัญระหว่างการใช้ selector ที่แตกต่างเหล่านี้ให้เป็นประโยชน์

การใช้ :lang() pseudo-class selector

ส่วนของ XHTML

<p>It is polite to welcome people in their own language:</p>
<ul>
    <li xml:lang="zh-Hans" lang="zh-Hans">欢迎</li>
    <li xml:lang="zh-Hant" lang="zh-Hant">歡迎</li>
    <li xml:lang="el" lang="el">Καλοσωρίσατε</li>
    <li xml:lang="ar" lang="ar">اهلا وسهلا</li>
    <li xml:lang="ru" lang="ru">Добро пожаловать</li>
    <li xml:lang="din" lang="din">Kudual</li>
</ul>

สามารถใส่สไตล์ดังต่อไปนี้ได้

body 		{font-family: "Times New Roman", serif;}
:lang(ar) 	{font-family: "Traditional Arabic", serif; font-size: 1.2em;}
:lang(zh-Hant) 	{font-family: PMingLiU,MingLiU, serif;}
:lang(zh-Hans) 	{font-family: SimSum-18030,SimHei, serif;}
:lang(din) 	{font-family: "Doulos SIL", serif;}

ควรจำไว้ว่าภาษากรีกและภาษารัสเซียจะใช้สไตล์ในส่วน element body

นี่เป็นแบบแผนในการใส่สไตล์ให้กับส่วนของภาษาเนื่องจากมีเพียง selector เท่านั้นที่สามารถใสไตล์ให้กับเนื้อหาใน element ได้เมื่อได้มีการประกาศค่าภาษาในเนื้อหานั้นก่อนหน้านี้แล้วในหน้าเอกสาร

กฏสำหรับ :lang(zh) จะสอดคล้องกันกับ element ซึ่งใช้ค่า value ภาษาเป็นzhนอกจากนี้ยังสอดคล้องกับภาษาที่ มีลักษณะเฉพาะมากยิ่งขึ้นเช่น zh-Hant zh-Hans และ zh-HK

The selector :lang(zh-Hant) จะสอดคล้องกับ element ที่มีค่า value ภาษาเป็น zh-Hant เท่านั้นหรือมีค่า value ภาษา ที่เป็นลำดับชั้นต่อเนื่องกัน ถ้ากฏการใช้ CSS มีการระบุ:lang(zh-HK)กฏดังกล่าวจะไม่สอดคล้องกันกับย่อหน้าตัวอย่าง ของเรา

selector [lang|="..."] ที่สอดคล้องกันกับค่า value เริ่มต้นของ attribute

สำหรับตัวอย่างโคดที่กล่าวมา สามารถเขียน stylesheet ได้ดังนี้

body 		   {font-family: "Times New Roman", serif;}
*[lang|="ar"] 	   {font-family: "Traditional Arabic", serif; font-size: 1.2em;}
*[lang|="zh-Hant"] {font-family: PMingLiU,MingLiU, serif;}
*[lang|="zh-Hans"] {font-family: SimSum-18030,SimHei, serif;}
*[lang|="din"]     {font-family: "Doulos SIL", serif;}

selector สำหรับภาษาจีนใช้ค่า value ที่เฉพาะเจาะจงและจะสอดคล้องกันกับค่า value ที่กำหนดมาให้เท่านั้น ในขณะที่ attribute selector ของภาษาอื่นใช้ได้กว้างกว่า ตัวอย่างเช่น [lang|="en"] สามารถใช้ร่วมกันกับ en-NZได้อย่างไม่มีปัญหา

ตัวอย่างดังกล่าวนี้และ selector ถัดไปจะสามารถทำงานได้ตราบใดที่คุณได้ประกาศค่าภาษาของ element ที่คุณต้องการ ใส่สไตล์ให้กับตัว element เองซึ่งไม่เหมือนกัน :lang

มีความแตกต่างที่สำคัญยิ่งระหว่าง [lang="en"] และ [lang|="en"]selector ในภาษาแรกนั้นจะสอดคล้องกับ element ที่มี attribute ของภาษาเท่ากับ enเท่านั้นในขณะที่ selector ที่สองจะสอดคล้องกันกับทุก element ใดๆที่มี attribute ของภาษาที่ขึ้นต้นด้วย en ดังนั้น selector ที่สองจะสอดคล้องกันได้กับ en-US en-HK หรือ en-CAความเป็นจริงแล้ว lang(en) เป็นรูปแบบที่เท่าเทียมกันกับ [lang|="en"]

selector [lang="..."] ที่สอดคล้องกันกับค่า value ของ attribute

วิธีที่สามในการกำหนดกฏคือการใช้ attribute selector ที่สอดคล้องกันกับ attribute value อย่างพอเหมาะพอเจาะ

สำหรับตัวอย่างโคดที่กล่าวมา สามารถเขียน stylesheet ได้ดังนี้

body 		    {font-family: "Times New Roman", serif;}
*[lang="ar"] 	    {font-family: "Traditional Arabic", serif; font-size: 1.2em;}
*[lang="zh-Hant"]   {font-family: PMingLiU,MingLiU, serif;}
*[lang="zh-Hans"]   {font-family: SimSum-18030,SimHei, serif;}
*[lang="din"] 	    {font-family: "Doulos SIL", serif;}

ควรจำไว้ว่าการใช้วิธีดังกล่าวกับ en จะไม่สอดคล้องกับ en-AU เนื่องจากจะต้องมีความสอดคล้องกันอย่างพอเหมาะ พอเจาะ

class หรือ id selector โดยทั่วไป

ปัจจุบันวิธีที่ support ได้ดีที่สุดคือการใช้ class หรือ id selector ตามปกติ

วิธีการนี้ใช้ได้กับ browser ส่วนใหญ่ที่ support CSS แต่มีข้อเสียก็คือการเพิ่ม class attribute นั้นทำให้ใช้เวลา และ bandwidth มากขึ้น

ตัวอย่างที่กล่าวมาข้างต้นทำให้เราต้องเปลี่ยน XHTML โคดโดยเพิ่ม class attribute ดังต่อไปนี้

<p>It is polite to welcome people in their own language:</p>
<ul>
    <li class="zhs" xml:lang="zh-Hans" lang="zh-Hans">欢迎</li>
    <li class="zht" xml:lang="zh-Hant" lang="zh-Hant">歡迎</li>
    <li xml:lang="el" lang="el">Καλοσωρίσατε</li>
    <li class="ar" xml:lang="ar" lang="ar">اهلا وسهلا</li>
    <li xml:lang="ru" lang="ru">Добро пожаловать</li>
    <li class="din" xml:lang="din" lang="din">Kudual</li>
</ul>

หลังจากนั้นเราก็สามารถใส่สไตล์ดังต่อไปนี้ได้

body 	{font-family: "Times New Roman", serif; }
.ar 	{font-family: "Traditional Arabic", serif; font-size: 1.2em;}
.zht 	{font-family: PMingLiU,MingLiU, serif;}
.zhs 	{font-family: SimSum-18030,SimHei, serif;}
.din	{font-family: "Doulos SIL", serif;}

นอกจากนี้

ฉันได้ใช้โคดภาษา "zh-Hant" และ "zh-Hans" โคดภาษาเหล่านี้ไม่ได้เป็นการแสดงภาษาที่เฉพาะเจาะจง "zh-Hant" จะใช้แสดงภาษาจีนที่เขียนใน สคริป ภาษาจีนที่เป็นตัวอักษรแบบดั้งเดิม เช่นเดียวกันกับ “zh-Hans” ที่ใช้แสดง ภาษาจีนที่เขียนในสคริปภาษาจีนที่เป็นตัวอักษรแบบเรียบง่าย ซึ่งสามารถอ้างอิงได้ในภาษาจีนกลางหรือภาษาจีนอื่นๆ

จนกระทั่งเมื่อไม่นานมานี้มีการใช้โคด "zh-TW" และ "zh-CN" เพื่อแสดงรูปแบบการเขียนในภาษาจีนในแบบดังเดิมและ แบบเรียบง่ายตามลำดับ ในความเป็นจริง "zh-TW" ควรจะใช้ในการแสดงภาษาจีนที่ใช้พูดในประเทศไต้หวันแม้ว่าจะมีภาษา จีนมากกว่าหนึ่งที่ใช้พูดในประเทศไต้หวัน เช่นเดียวกันกับ "zh-CN" ที่ใช้แสดงในภาษาจีนที่ใช้พูดในประเทศจีน (สาธารณรัฐ ประชาธิปไตยประชาชนจีน) ซึ่งสามารถใช้อ้างอิงได้ในภาษาจีนกลางและภาษาจีนอื่นๆ

web browser แบบใหม่บางตัวจะใช้การแสดง tag ภาษา "zh-CN" และ "zh-TW" เพื่อเลือกค่า default ของ ฟอนท์ในการแสดง ข้อความเมื่อผู้ออกแบบหน้าเวบไม่ได้ระบุฟอนท์ (อ่านเพิ่มเติมได้ในส่วน ผลของการทดสอบ)

หากคุณต้องการใช้ tag ภาษาเพื่อแยกแยะความแตกต่างระหว่างภาษาจีน ทะเบียนภาษาสำหรับ tag ย่อยของ IANA จะระบุโคด ภาษาไว้ชัดเจนกว่าสำหรับรายชื่อภาษาในภาษาจีน

บอกเราด้วยว่าคุณคิดอย่างไร (ภาษาอังกฤษ)

ลงทะเบียนรับข่าวสาร RSS ฟีด

เว็บใหม่

โฮมเพจรายงานข่าว

Twitter (โฮมเพจรายงานข่าว)

‎@webi18n

อ่านเพิ่มเติม

ผู้แต่ง: Andrew Cunningham, State Library of Victoria ปรับปรุงโดย: Richard Ishida, W3C ผู้แปล: ลาวัณย์ นันทโววาทย์ (Lawan Nuntavovat), WebStarThai

XHTML 1.0!ที่อ่านค่าได้
CSS! ที่อ่านค่าได้
ได้รับการแปลงโคดเป็น UTF-8! แล้ว

แปลมาจากบทความภาษาอังกฤษลงวันที่ 2005-08-03. เวอร์ชั่นแปลฉบับที่เปลี่ยนแปลงลครั้งล่าสุด 2011-02-25 8:07 GMT

สำหรับการเปลี่ยนแปลงเอกสารเก่า, ค้นหา qa-css-lang ในบล๊อก i18n