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

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

ลำดับชั้นของ 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 แจ้งไว้ว่าเอกสารนี้เป็นภาษา อังกฤษ

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

จุดสำคัญที่ต้องคำนึงถึงในส่วนนี้คือไม่สามารถใช้ 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="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;}