การจัดการ font ในเอกสาร XHTML โดยใช้ CSS

จากบทความของ: Richard Rutter, 20 พฤศจิกายน 2550

แปล เรียบเรียง: radiz

เป็นที่ทราบกันอยู่แล้วว่าขนาด default ของ font ในแต่ละ browser เวลาที่เรากด small, smaller, medium, larger และ largest นั้นอยู่ในหน่วย % คือ 90%, 100%, 110% และ 120% แต่ขนาด zoom นั้นจะเป็นเอกลักษณ์ของแต่ละ browser ส่วนขนาด font ปกติ ในหน่วย px ที่ browser ทุกตัวกำหนดมาเลยคือ 16px ที่ขนาดปกติ (โดยที่ไม่มีการ apply CSS ต่าง ๆ เข้ามาใช้กับตัวเอกสาร) และ เชื่อว่าหลาย ๆ ท่านคงมีความเห็นเดียวกันที่ว่า ณ ขนาด 16px นั้นใหญ่เกินไปสำหรับการใช้ในส่วนของ body ของเอกสารเพราะฉะนั้นแน่นอนต้องมีการกำหนดขนาด font กันขึ้นมาใหม่ และ หน่วยที่นิยมกันอย่างแพร่หลายก็จะมีอยู่ดังนี้ 1. แบบ pixel 2. แบบ ems และ สุดท้าย 3. แบบ percentage (%)

ถึงตอนนี้ผมมีคำถามว่า ทราบกันหรือไม่ว่า browser แต่ละตัวที่คุณใช้นั้นทำงานร่วมกับหน่วยการแสดงผลใดบ้าง?

browser ที่ผมจะพูดถึงในที่นี้ คือ Safari 2, Firefox 2, Opera (Krestel) 9.5a, IE6 และ IE7 มาดูการทดสอบการทำงานของการกำหนดขนาด font ในหน่วยต่าง ๆ กับ browser ที่ผมกล่าวไว้ข้างบน โดย Richard Rutter โดยเขาได้ทำการทดสอบเป็นส่วน ๆ ดังที่ผมจะกล่าวต่อไปนี้ มาพิสูจน์ทฤษฎีด้วยกัน

การทดสอบที่ 1 การกำหนดในหน่วย Pixel (px)

ถ้าเรากำหนดขนาด font ให้กับ body ในขนาด 14px และ พวก sidebar ต่าง ๆ ในขนาด 12px ผลการทดสอบจะเป็นอย่างไร

.bodytext p {font-size: 14px;} และ .sidenote {font-size: 12px;}

ผลการทดสอบ โดยใช้การกดการขยายขนาด text ในแถบ view ที่ออกมาก็คือ Safari และ FireFox ขยายขนาดได้ตามปกติแต่ Opera, IE6 และ IE7 ไม่ขยายขนาดให้ Opera และ IE7 จะขยายก็ต่อเมื่อมีการกด zoom page เท่านั้น ซึ่งเหมือนเรากด zoom ภาพใน Adobe Photoshop หรือ ACDSee ซึ่งเป็นการขยายขึ้นมาทั้งหมด

การทดสอบที่ 2 การกำหนดขนาดในหน่วย ems (em)

หน่วย ems เป็นหน่วยที่ W3C กำหนดขึ้นมาเพื่อใช้ในการกำหนดขนาดของ font ในการใช้งานกับ Web Page ด้วยสาเหตุที่ IE6 ยังเป็นที่นิยมกันแพร่หลาย และ การกำหนด font แบบ pixel นั้นจะไม่สามารถย่อขยายใดใด ได้เลยใน IE6 ฉะนั้นหน่วย ems จึงถูกกำหนดขึ้นมาเพื่อเป็นทางออกนี้ ในกรณีที่ user มีปัญหาทางสายตาจะสามารถย่อขยายได้โดยอิสระ และ ก็เริ่มมีคนนำมาใช้กันมากขึ้นแล้วเพราะเป็นหน่วยที่เป็น standard มากกว่า และ ยืดหยุ่นในการนำไปใช้ได้มากกว่า

การทำงานกับขนาดมาตรฐาน 16px ใน browser คำนวณ ดังนี้ ถ้าเราต้องการจะกำหนดขนาด font 14px ในหน่วย ems เราต้องหาตัวเลขทศนิยมที่นำมาคูณกับ 16 แล้วได้ผลลัพธ์เท่ากับ 14 ก็คือเอา 14/16 นั่นเอง ผลลัพท์ที่ได้คือ 0.875 ในทางเดียวกันถ้าเราต้องการกำหนด font ขนาด 12px ในหน่วย ems เราก็ทำการคำนวณในแบบเดียวกัน คือ 12/16 จะได้ผลลัพธ์เท่ากับ 0.75 เพราะฉะนั้นจะนำไปเขียนเป็น Style ได้ดังนี้

.bodytext p {font-size: 0.875em;} และ .sidenote {font-size: 0.75em;}

ผลการทดสอบ ทุก ๆ  browser ขยายขนาด font รวมไปถึง IE6 และ IE7 ด้วย ส่วน Opera นั้นจะใช้การ Zoom เท่านั้น แต่ขนาด font ใน IE นั้นจะมีขนาดบิดเบือนความเป็นจริงไปเล็กน้อย

การทดสอบที่ 3 การกำหนดขนาดในหน่วย percentage (%)

การกำหนดในลักษณะนี้เราต้องใช้ร่วมกับหน่วย ems ด้วย เราจะใช้หน่วย percentage เป็นตัวกำหนดขอบเขตให้ ems ที่เราจะกำหนดใช้ ในที่นี้หมายถึงการกำหนดให้ขนาด default ที่ browser ทุก ๆ ตัวกำหนดมาคือ 16px = 100% ผลลัพธ์ที่ได้คือ IE6 และ IE7 จะมีการแสดงผลที่สมจริงขึ้น (ไม่บิดเบือนขนาดไป) เราสามารถเขียน CSS ได้ดังนี้

body {font-size: 100%;}

.bodytext p {font-size: 0.875em;}

.sidenote {font-size: 0.75em;}

จะเห็นได้ว่าการกำหนดรูปแบบในการทดสอบที่ 3 นั้นจะครอบคลุมการทำงานได้มากกว่า ทีนี้เราก็จะได้การกำหนดขนาด font ที่เป็น มาตรฐานพอในการใช้งานแล้ว ในการเอาไปใช้งานจริง ให้ประยุกต์ไปใช้ตามความเหมาะสม ต่อไปจะพูดถึงการกำหนด line-height ใน CSS ในรูปแบบหน่วยต่าง ๆ สืบเนื่องกันเมื่อเกิดการกำหนดขนาด font ขึ้นระยะห่างระหว่างบรรทัดนั้นก็ต้องสัมพันธ์กับขนาดของ font ด้วย จากการทดลองในลักษณะต่าง ๆ Rutter ได้ผลสรุปมาว่า ขนาดของ line-height ที่เหมาะสมนั้นจะอยู่ที่ 18px เพราะฉะนั้นลองมาดูการกำหนดการทำงานในลักษณะนี้ดูบ้าง

การทดสอบที่ 4 การกำหนดขนาด line-height ในหน่วย pixel (px)

body {font-size: 100%; line-height: 18px;}

ผลการทดสอบ ที่ได้คือ ทุก ๆ browser จะแสดงผลได้ดี แต่มองถึงความเป็นจริงในส่วนของ sidebar ที่เรากำหนดขนาด font เป็น 12px หรือ 0.75ems นั้นมันจะไม่ balance ไปหน่อย อีกอย่าง IE6 และ IE7 นั้น จะไม่ทำการขยายขนาดของ line-height ตามเมื่อมีการขยายขนาดของ font เพราะฉะนั้นเราจะลองใน แบบทดสอบต่อไปโดยเราจะกำหนดขนาดของ line-height ในหน่วย ems

การทดสอบที่ 5 การกำหนดขนาด line-height ในหน่วย ems (em)

จากการทดสอบที่ 4 การกำหนดในแบบ px นั้นเราประสบปัญหาไปแล้วคราวนี้เราจะมาลองในหน่วย ems ดูบ้างว่าจะเป็นอย่างไร

body {font-size: 100%; line-height: 1.125em; /* 16×1.125=18 */}

ผลการทดสอบ ที่ได้คือ แสดงผลได้ดีและใกล้เคียงในทุก browser (ให้ลองทำด้วยตัวคุณเองด้วย อย่าเชื่อในสิ่งที่อ่าน) จะมีการปรับขนาดยืดหยุ่นตามสถานการณ์ที่เรากำหนดขึ้น และ แสดงผลได้ใกล้เคียงกันมากมากในทุก ๆ browser ที่เราทดสอบ

ทีนี้มาพูดถึงปัญหาต่อไปที่ผมเองก็ไม่เคยทราบเหมือนกัน การใช้ text แบบ monospace ใน Safari เราจะพบว่า Safari จะ render text ที่เป็นแบบ fix-width-font นั้นเล็กกว่าปกติ ซึ่ง Safari นั้นจะกำหนดขนาดให้กับเจ้า text ประเภทนี้ในขนาด 13px ซึ่งจะเล็กกว่า browser ทั่ว ๆ ไป การแก้ปัญหานี้ Rutter ก็ได้อธิบายไปแล้วล่ะครับในแบบทดสอบที่ 3 ซึ่งก็คือการกำหนดขนาด font ในแบบ percentage เพราะฉะนั้นถ้าอยากให้ font ใน IE6 และ IE7 สวยงามนั้นคุณต้องกำหนด body font-size เป็นหน่วย px แยกจากกันโดย เขียน condition comment เพิ่มเข้าไป ซึ่งแล้วแต่ใครจะนิยมชมชอบนะครับ ถ้าไม่ได้แคร์ในส่วนนี้มากก็กำหนดเป็นหน่วยเดียวกันไปซะเลย แต่ถ้าแคร์ก็ทำตามตัวอย่างแบบทดสอบนี้ครับ

การทดสอบที่ 6 การแก้ปัญหา monospace text ใน Safari 2

ใน CSS file ให้เขียนคำสั่ง CSS ดังนี้

body { font-size: 100%; line-height: 1.125em; /* 16×1.125=18 */}

.bodytext p {font-size: 0.875em;}

.sidenote {font-size: 0.75em;}

และ ในไฟล์ html ให้เขียน condition comment ดังนี้ครับ

<!– [if  !IE] –>

<style type=”text/css”>

body { font-size: 16px;}

</style>

<!– [endif] –>

สรุป คือ IE6 และ IE7 ยังมีปัญหากับการแสดงผลขนาดของ font ในแบบ ems และ percentage เล็กน้อย เพราะฉะนั้นในการที่จะนำเอาไปใช้นั้น ควรเลือกให้เหมาะสมกับการใช้งาน และ requirement ของลูกค้าของคุณครับ
Thanks for 100 times to Richard Rutter