זהו פוסט המשך לפוסט הקודם, אשר שייך לסדרת הפוסטים בנושא UI . בפוסט זה אסקור מספר טכניקות ציור פונטים עם/ללא החלקה.
(מכאן והילך אעשה שימוש במושג: "Rasterization" = ראסטריזציה = הפיכת תמונה ממוחשבת למפת סיביות)
טכנולוגיות ציור פונטים (Font Rendering)
ראסטריזציה פשוטה, ללא החלקה
זהוי צורה הכי בסיסית של ראסטריזציה, ציור פשוט של קוי התווים ללא החלקה מסוג כלשהו. שיטה זו הכי מהירה (כי זה דורש פחות חישובים למיקום הטקסט על המסך). גישה זו בעלת חיסרון, כאשר מדובר בפונטים קטנים, חלק מן התווים יהיה קשה לזהות. מספר גדול של גופנים (בעיקר מסוג True-Type או Script) כוללים בתוכם אזורי תווים עם "רמזים" שעוזרים למערכת ראסטר להחליט איכן הם המקומות הבעייתיים בתצוגה של פונטים קטנים, כאן ייעשה שימוש בחלופות כמו תמונות קטנות (small bitmaps) של אותם תווים בעייתיים (גופנים שבנויים מתמונות בד"כ משתייכים ל- system fonts).
ראסטריזציה עם החלקה, ללא רמזים
זו גישה יותר מורכבת מהקודמת, אך סטנדרטית ומגיעה מתוכנות גראפיקה מסורתיות. אלגוריתם החלקה עובר על כל פיקסל בחלק החיצוני של האות ומשנה לו דרגת שקיפות (ללא קשר להשתייכותו לקו אופקי, אנכי או אלכסוני), בנוסף מוסיף לידו פיקסל נוסף שמקבל צבע שלו עם דרגה יותר גבוהה של שקיפות. למשל: כאשר מצוייר אות שחור על גבי רקע לבן, אז כל פיקסל צריך להיות מלא באופן אידיאלי בצבע שחור עם שקיפות של 50% (ז"א אפור), לכן אנו רואים מן מסגרת אפורה מסביב לכל אות. פעולה פשוטה כמו זו מביאה לתוצאות לא כ"כ איכותיות, מתקבלים תווים עם מריחה (אפקט זה גם מתקבל בתמונות דחוסות כמו פורמט JPEG). בעיה נוספת קיימת באותיות בעלות קוים אלכסוניים ברוחב של פיקסל בלבד, אבל בגלל הזוית הוא נופל בדיוק בין שני פיקסלים, אז על המסך נראה אותיות עם קוים אלכסוניים בעובי של שני פיקסלים עם מספר פיקסלים אפורים נוספים מסביב. תופעות אלה גרמו לפיתוח שיטות החלקה חילופיות ואיכותיות יותר.
ראסטריזציה עם החלקה, ועם רמזים
שיטת החלקה שפותחה בעקבות הכישלון של השיטה הקודמת. גם היא עובדת על הוספת פיקסלים נוספים ושינוי צבע של פיקסלים קיימים. אבל, כאן נעשה שימוש ב"רמזים". "רמזים" אלה פיסות מידע ששמורות בגופנים שנעשה בהם שימוש, פיסות מידע אלה כוללות אינפורמציה לגבי איזורים בעיתיים בכל תו של פונט, איזורים אלה יעברו החלקה. אם גופן לא מכיל רמזים אז אלגוריתם יתעלם מפיקסלים ששייכים לקוים אנכים ואופקיים ויטפל רק בקוים אלכסוניים ובקשתות.
ראסטריזציה בשיטת מיפוי "sub-pixel" עבור מסכי LCD
מרבית מסכי המחשב כוללים פיקסלים אשר בנויים מתתי פיקסלים (בד"כ כל אחד מייצג צבע בסיס כמו אדום, ירוק וכחול; שלשתם מורכבים יחד כדי להפיק את כל המגוון של צבעים - מודל של RGB). במקרים מסויימים (כמו במסכים דקים - LCD או אחרים) אפשר לנצל עובדה זאת, להדליק רק צבע מסויים של הפיקסל מאשר את כולו, זה יכול להגדיל משמעותית רזולוציה אפקטיבית של המסך. טכניקה זאת נקראת Sub-Pixel Rendering; מיקרוסופט מיישמת אותה באלגוריתם של Clear-Type (גם סימן מסחרי רשום).
בתמונה מימין ניתן לראות חלק מוגדל של מסך LCD שעליו מצויירת מילה "sample" ע"י שימוש ב-sub-pixel rendering. אם נתרחק מן התמונה אז נראה שצבע האותיות נהפך ללבן, כך המסך עובד - שילוב של מספר צבעים שסמוכים אחד לשני מפורשים על ידינו כצבע מסויים. עובדה זו מנוצלת גם בהחלקת פונטים. בשיטה זאת אין צורך להוסיף פיקסלים נוספים, כאן משנים צבע של תת-פיקסל וכך עובי הקו נשמר קבוע. טכניקה זו יותר אלגנטית מהקודמות. ניתן לציין שלא כל המסכים עם פיקסלים שמורכבים משלש תתי-פיקסלים מתאימים, ישנם מסכי LCD שבנוים מגבישים מלבניים (מסכים אלה בד"כ נועדו לשימוש כסטנדים - לוחות מידע), כאן ההחלקה לא תראה באופן איכותי; במקרה זה ייעשה שימוש בטכניקות החלקה אחרות.
קטע טקסט ללא החלקה:
קטע טקסט עם החלקה:
החלקת פונטים במערכות הפעלה שונות:
(כאן ניתן לראות בהגדלה איך בוצעה ההחלקה של מילה "bnet")
ראו בהמשך פוסט על "סקירת האלגוריתמים להחלקת גופנים", אשמח לקבל הערות/תיקונים לגבי הפוסט. לרשימת הפוסטים של הסדרה לחצו כאן.
