UI – פוסט 12: טכנולוגיות תצוגת ממשק משתמש – סקירה

18 באפריל 2008

no comments

זהו פוסט המשך לפוסט הקודם, אשר שייך לסדרת הפוסטים בנושא UI . פוסט זה מתחיל תת-סדרה של פוסטים תחת סדרת פוסטים על UI, תת-סדרה תעסוק בטכנולויגיות שונות לתצוגת ממשק משתמש, הן על צג המחשב והן באמצעיים אחרים (ניתן לקרוא את הפוסט הזה גם ללא קשר לפוסטים הקודמים).






טכנולוגיות תצוגה – סקירה


היסטוריה ומוטיבציה


lcd_vs_crt


כאשר מחשבים חוברו למסכים נוצרו מספר טכנולוגיות לתצוגת מידע טקסטואלי על גבי המסך. מסכי מחשב עד אמצע שנות התשעים היו בעצם מסכי טלויזיה (CRT) ללא היפרבנד (hyperbend – רכיב אלקטרוני המסוגל לאחסן בזיכרון מספר רב של הערוצים עפ"י נתונים שונים, כמו תדר, עוצמה וכו'). באמצע שנות התשעים (יחד עם התפתחות של מחשבים ניידים) החלה חדירה של מסכים בטכנולוגיה שמבוססת על גבישים נוזליים (בדומה ל- LCD).






מתוך ויקיפדיה:


CRT – Cathode ray tube



– שפופרת קרן קתודית, היא מתמר המשמש במסכי צפייה, וממיר אותות חשמליים לתמונה. ממציאה היה קרל פרדיננד בראון, אשר בנה שק"ק לראשונה עוד ב-1897.


מסכי שק"ק נמצאים בשימוש נרחב בטלוויזיות ובמחשבים נייחים. למעשה, עד לשנים האחרונות כמעט כל המסכים לשני מכשירים אלו היו מסוג שק"ק.


שפופרת קתודית הינה צינור ריק הפולט קרני אלקטרונים. בניגוד לצגים דקים (LCD), טכנולוגיה זו מחייבת מרחק רב יחסית בין מקור הירי (ה"תותח") לבין המרקע. מסך שק"ק יכול להגיע עם צג זכוכית שטוח לחלוטין או עם צג מעוגל, הזול יותר ליצור, אך גורם לעיוותים קלים בתמונה.


 


LCD – Liquid crystal display



– תצוגת גביש נוזלי, היא טכנולוגיה לבניית צגים דקים העשויים ממספר מקטעים. בדרך כלל, כל מקטע מהווה מרכיב צבע אחד מפיקסל. יתרונותיו העיקריים, העובי הדק וצריכת חשמל נמוכה, הפכו את הטכנולוגיה למתאימה לשימוש במכשירים אלקטרוניים ניידים המופעלים באמצעות סוללה. יתרונות נוספים של איכות תמונה נותנים לטכנולוגיה עדיפות גם לייצור צגי מחשב וטלוויזיות.


כל מקטע (או תת-פיקסל) בצג מורכב מאוסף מולקולות הגביש הנוזלי, הנתונות בין שתי אלקטרודות שקופות, ובין שני מקטבים אשר בדרך כלל מצויים בקיטוב אנכי זה לזה. ללא מולקולת הגביש, אור שיעבור דרך אחד המקטבים, ייחסם על ידי השני. מולקולות הגביש מסתדרות בסיבוב כך, שאור שיעבור דרכם ישנה את קיטובו בהדרגה ויוכל לעבור דרך המקטב השני.


מולקולות הגביש הן בעלות צד חיובי וצד שלילי מבחינה חשמלית. כאשר מופעל שדה חשמלי (על ידי מתח באלקטרודות) יסתובבו המולקולות כתוצאה מהכוח האלקטרוסטטי. שינוי זווית המולקולות יגרום לשינוי קיטוב האור, כך שחלק מהאור ייחסם במקטב. רמת המתח המופעל באלקטרודה שולטת על מידת האור העובר.


במסכים ראשונים הייתה בעיית רזולוציה נמוכה, ז"א היה ניתן להציג מאט מידע בו-זמנית. יחד עם בעיה של רזולוציה היו קיימים מגבלות חומרה נוספות, שחלקן לא נפתרו עד היום.



קצת סקירה היסטורית (מתוך האתר של אוניברסיטת ת"א – קורס טיפוגראפיה):


הצגת טקסט על מסכי מחשב וטלוויזיה


my laptop resolution


הבעיות שנובעות מרזולוציה נמוכה קשות במיוחד באותיות שמוצגות על מסכי מחשב וטלוויזיה. הרזולוציה של מסכי מחשב היא בסביבות ה-100 פיקסלים לאינץ', תלוי בגודלם וברזולוציה שקובעים להם, והרזולוציה של טלוויזיות נמוכה בהרבה.


החשיבות של קריאות על המסך עלתה מאוד בגלל האינטרנט. לפני מהפכת האינטרנט, אנשים לא קראו טקסטים ארוכים ממסך. רוב הטקסטים הארוכים שטופלו במחשב היו מיועדים להדפסה. גלישה באינטרנט העלתה מאוד את כמות הטקסטים שאנשים קוראים על המסך, ובעקבות זאת את חשיבות הטיפוגרפיה והקריאות עליו.


הרזולוציה הנמוכה מציבה שתי בעיות בפני יצרן הגופנים. ראשית, בגלל המספר הקטן של הפיקסלים בכל אות, המיקום של כל פיקסל חשוב, וטעות בפיקסל בודד עשויה לעוות מאוד את צורת האות. שנית מכיוון שהפיקסלים רבועים, צביעתם בשחור ולבן יוצרת קוים אלכסוניים בעלי "מדרגות", במקום קווים חלקים.


הפתרון הראשון לבעיית מיעוט הפיקסלים היתה שימוש בתבניות פיקסלים קבועות מראש (bitmap fonts). מעצב אותיות פיתח אות לכל גודל דרוש ולכל רזולוציה דרושה, על ידי עריכה ידנית של הפיקסלים בכל אות. לגישה זו חסרונות רבים, כגון העדר גופנים לגדלים אחרים והעבודה הדרושה לעריכת הגופנים ביד. אבל גישה זו לפחות מנעה את הצורך להחליט באופן אוטומטי על הפיקסלים שצריך לצבוע על סמך קווי המתאר; ברזולוציות גבוהות ניתן לבצע החלטות אוטומטיות כאלה בצורה סבירה, אבל לא ברזולוציות נמוכות.


Linux Ubuntu Screen Resolution


הפתרון השני, שנמצא בשימוש גם היום, מבוסס על רמזים (hints). הרמזים הינם מידע אודות צורת האות בנוסף לקווי המתאר שלה. התוכנית במחשב שתפקידה לייצר את תבניות הפיקסלים של אותיות משתמשות במידע הנוסף על מנת לייצר תבניות פיקסלים קרובות יותר לכוונת מעצב האות. בגופני פוסט-סקריפט, שפותחו ראשונים, הרמזים הינם הצהרתיים. מעצב האות מצהיר על תכונות מסויימות של האות, והמחשב משתמש בהצהרות הללו על מנת להציג את האות. למשל, המעצב יכול להכריז ששני החללים הלבנים בתוך האות הלטינית m (או באות העברית "ש" (שין)) צריכים להיות בגודל שווה. הצהרה כזו תגרום למחשב לבחור את רוחב החללים להיות שניהם שני פיקסלים, או שניהם שלושה, אבל לא אחד שניים ואחד שלושה, גם אם השוואתם מביאה לרוחב אות לא נכון.


הרמזים בגופני True-Type שונים לחלוטין. בגופנים כאלה, המעצב, או ליתר דיוק מהנדס הרמזים (בדרך כלל אדם שאינו מעצב האות), כותב תוכנית מחשב שמזיזה את קווי המתאר של האות בהתחשב במספר הפיקסלים באות. כל למשל ניתן להזיז את קווי המתאר של האות וו בעברית כך שיעברו בדיוק על גבולות בין פיקסלים, כך שרוחב הקו יהיה מספר פיקסלים שלם. קיימים כלים גרפיים לתכנון רמזים כאלה, אבל זהו עדיין תהליך מורכב מאוד.


הרמזים בגופני פוסט-סקריפט הם פשוטים להכנה, אבל לא ניתן לשלוט בעזרתם בדיוק בתבנית הפיקסלים שתיווצר בכל גודל. הרמזים בגופני True-Type קשים להכנה, אבל מסוגלים לשלוט בכל פיקסל. התוצאה של מצב זה היא שגופני True-Type טובים נראים על המסך טוב יותר מגופני פוסט-סקריפט, אבל גופני True-Type גרועים (כלומר ללא רמזים קפדניים) נראים פחות טוב על המסך מגופני פוסט-סקריפט.


טכנולוגיה אחרת פותחה על מנת להתמודד עם ה"מדרגות" שקווים אלכסוניים יוצרים כאשר הם מוצגים במספר פיקסלים נמוך. הטכנולוגיה, שנקראת החלקת גופנים (font smoothing או ant-aliasing) מציגה את האות לא רק בשחור ולבן, אלא גם בגווני ביניים. פיקסל שמכוסה כולו על ידי קווי המתאר של האות יצבע בשחור, פיקסל שכולו מחוץ לאות יצבע בלבן. אבל פיקסל רבוע ש-25% ממנו מכוסה על ידי האות יצבע באפור בהיר, ערבוב של 25% שחור עם 75% לבן. באופן מפתיע אולי, הצגה כזו נראית לעין האנושית נכונה יותר מאשר הצגה בשחור ולבן בלבד, למרות שאנו יודעים שהעצם שמוצג הוא שחור על רקע לבן. החלקה כזו משפרת את מראה האות, בייחוד כאשר אין רמזים איכותיים, אבל גם כאשר יש כאלו. מאידך, החלקה הופכת את שולי האות לאפורים והאות נראית לעין מטושטשת. מייקרוסופט, למשל, משתמשת בגופנים שמוחלקים רק מגודל מסויים, בסביבות 11 נקודות. גופנים עם רמזים איכותיים, כמו Arial, מזיזים את קווי המתאר לפני ההחלקה לגבולות של פיקסלים במידת האפשר, ובגופנים כאלה שוליים של קווים אופקיים לחלוטין או אנכיים לחלוטין יוצגו תמיד בשחור ולבן, גווני אפור יחליקו רק קווים אלכסוניים או מעוגלים. זהו המצב האידאלי בהחלקת גופנים.


resolution_in_vista


לאחרונה פותחו טכנולוגיות החלקה מתקדמות יותר עבור מסכי LCD, שבהם כל פיקסל מורכב למעשה משלושה פיקסלים מלבניים קטנים זה לצד זה, אחד ירוק, אחד כחול, ואחד אדום. ניתן לסיים קו אנכי של אות בגבול בין שני תתי פיקסלים כאלה. הפיקסל האחרון של האות, שבו דלוק תת פיקסל אחד או שניים, הוא פיקסל צבעוני, ולא שחור או אפור, אבל על ידי שינוי הצבע של פיקסלים סמוכים ניתן לבטל את תחושת הצבע שהפיקסל הזה מקרין. הטכנולוגיה הזו מגדילה פי שלוש את הרזולוציה בכיוון האופקי, ומאפשרת להשיג תחושת חדות גבוהה לטקסט. במסכי שפופרת קתודות אין הפרדה מרחבית טובה בין הצבעים בכל פיקסל ולא ניתן, ככל הנראה, להשתמש בטכנולוגיה זו. מיקרוסופט כללה טכנולוגיה זו בחלונות XP, תוך שימוש בשם המסחרי Clear-Type, וחברת אדובי כללה את הטכנולוגיה בגרסה 5 של אקרובט.


למגבלות שנובעות מהרזולוציה הנמוכה של מסכים יש השפעה עצומה על האותיות שאנו משתמשים בהן. מיעוט יחסי של גופנים בעלי רמזים מעולים, שנראים טוב על מסך, מצמצם מאוד את מגוון הגופנים שאנשים נוטים להשתמש בהם. הדבר נכון במיוחד בדפי אינטרנט, שמיועדים לקריאה מהמסך ולא להדפסה. הבעיה מתעצמת גם בגלל שדפי אינטרנט מוצגים בגופנים הזמינים במחשב הקורא, ולא בגופנים הזמינים במחשב שבו עוצב הדף (בניגוד מוחלט לשימוש בגופנים בדפוס). טכנולוגיות להטמעת גופנים בתוך דפי אינטרנט לא צלחו, בינתיים לפחות. אולם הנטייה להשתמש במספר גופנים מצומצם גולשת לעיתים גם למסמכים מודפסים במעבד תמלילים, כיון שהכותב מחבר את המסמך באותו גופן שבו יודפס, והוא מעדיף להשתמש בגופן ברור בזמן חיבור המסמך.


יש גם סוגי אותיות ששום רמז או החלקה לא יביאו לקריאות על המסך. גופנים בעלי חללים פנימיים קטנים, למשל, כמעט לעולם לא יראו טוב על מסך ברזולוציה נמוכה. גם גורם זה מקטין את מגוון האותיות שנעשה בהם שימוש אינטנסיבי במחשב.


השפעה אחרת, אם כי מוגבלת בינתיים, היא עיצוב גופנים במיוחד עבור מסכי מחשב. הגופנים הידועים ביותר מסוג זה הם הגופנים הלטיניים (כולל יוונית וקירילית) Georgia ו-Verdana, שחברת מייקרוסופט הזמינה במיוחד לצורך זה אצל מעצב אותיות מנוסה, ושהרמזים שלהם הוכנו באופן קפדני. גופנים לטיניים אחרים מטיפוס זה הם Agfa Screen ו-Tiresias. גופנים מיוחדים לקריאות על מסכים מפותחים גם עבור מכשירים עם מסכים קטנים, כמו טלפונים סלולריים ומחשבי כף יד.


לסיכום: ניתן לציין שרוב חברות תוכנה גדולות פיתחו טכנולוגיות של החלקת הפונטים משלהן, חלק מן התוכנות לא משתמשות בהחלקת פונטים של מערכת הפעלה (גם אם תכונה זו מופעלת במערכת); תוכנות אלה בד"כ מצויידות במנוע גראפי משלהן שעושה את החלקה בשיטה של החברה או מבטלות החלקה כליל. ניתן לציין שרוב גדול של משתמשי מחשב מנוסים לא מרוצה מאיכות החלקה במערכות הפעלה מסויימות (על כך יפורט בהמשך).



מושג נוסף שקשור לטכניקות תצוגה:


פקטור-קאל: זהו פרמטר אשר משמש להגדרת רזולוציה אפקטיבית של התקן תצוגה ספציפי. מספר זה נמדד לראשונה ב-1934 על ע"י מהנדס ראידמונד ד. קל ושותפיו.


– פקטור זה משמש כיום כמדד איכותי של רזולוציית מסכים (למרות ששם "קאל" אינו מוזכר). בפשטות ניתן לומר שמדד איכותי יותר כאשר יותר שורות של פיקסלים יכולים "להדחס" בשטח קטן יותר, באופן תיאורטי מסך עם יותר פיקסלים מסוגל להציג רזולוציה טוב יותר. כמובן שקיימים מדדים נוספים שמגדירים את האיכות של המסך.


הפעלת החלקה של גופנים במערכת הפעלה Windows XP:


xp_font_smoothing


הפעלת החלקה של גופנים במערכת הפעלה Windows Vista:


vista_font_smoothing


השוו טקסטים עם/ללא החלקה של גופנים (טכנולוגית החלקה Clear Type):


font_smoothing_compare


סיקור טכניקות שונות של החלקת הפונטים


כפי שתיארתי ישנה בעיית תצוגה ידוע של פונטים (בעיה דומה ישנה למספר אובייקטים גראפיים נוספים). ישנה הבעיה "לצייר" פונט בצורה ברורה, חלקה ויפה. מסך מחשב מורכב מפיקסלים ואלה יחידות תצוגה הכי קטנות, כל פיקסל "מצויר" על ידי קרן קתודות על גבי מנורות קטנות של מסך CRL או ע"י שינוי במצב גבישים של מסך LCD.


ציור האותיות על גבי המסך ניתן להשוות לציור האותיות על נייר משבצות או להרכבת האותיות מקוביות. אם נרכיב אותיות מריבועים, כאשר כל ריבוע מייצג פיקסל אחד, נראה שאין אפשרות לצייר אות בצורה חלקה. בחלק מן השפות (כמו שפות עם כתב לטיני) יש תווים שניתן לצייר ע"י קווים ישרים, כאן ניתן להסתפק בהרכבת הריבועים אחד אחרי השני ותווים יצויירו ברמה יחסית טובה, הבעיה מתחילה עם ציור תווים שיש בהם קווים אלכסוניים שלאחר ההרכבה ייראו כמו זיגזגים שמורכבים מריבועים קטנים, אילו היינו תמיד משתמשים בטקסטים בגודל הנמוך מ-11 נקודות פר אינץ' אז העין שלנו לא הייתה מבחינה בבעיה, יש מה שנקרא אפקט השלמה עפ"י הזיכרון, המוח האנושי מסוגל להשלים את המידע החסר, במקרה זה הוא משלים קו מזוגזג לקו אלכסוני נקי. הבעיה מתחילה עם טקסטים שמצויירים בגודל העולה על 11 נקודות, כאן מוחנו מסרב לבצע ת ההשלמה ולא נראה ניקיון אסתטי בתצוגה כזאת.


על מנת לפתור בעיית תצוגה הנ"ל נעשה שימוש במספר טכניקות של החלקת הפונטים. רוב הטכניקות עושות שימוש בהשלמת הפיקסלים לקוים אלכסוניים ולקשתות. כל הטכניקות מבוססות תוכנה, ללא קשר מהיכן היא מופעלת. חלק מאלגוריתמים של החלקה מיושמים במנועים גראפיים של מערכות הפעלה וחלק ביישומים שרצים במערכות הפעלה.
אציין ש- WPF עושה שימוש בשני אלגוריתמים:
(1) Clear-Type שמובנה במערכות הפעלה החל מ-MS Windows XP;
(2) החלקת פונטים של מנוע גראפי DirectX שמשתמש במאיץ גראפי לשם כך.


דוגמא לאותיות לועזיות שמורכבות מריבועים שחורים:


text_in_bricks


דוגמא מופשטת לקטע של קו אלכסוני עם החלקה בסיסית:


vertical_line_zoom






ראו בהמשך פוסט על "סקירה של שיטות נפוצות להחלקת גופנים", אשמח לקבל הערות/תיקונים לגבי הפוסט. לרשימת הפוסטים של הסדרה לחצו כאן.

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*