ב-Catalina יש גופן מערכת חדש עם משתנים מאוחדים ל-macOS.
בקטע'ממשק משתמש של המערכת' במפרט של מודול הגופנים של CSS ברמה 4 מוגדרת מילת מפתח של גופן system-ui שמאפשרת למפתחים להשתמש בגופן המובנה, שעבר אופטימיזציה טורבו, מותאם לשפה, באיכות גבוהה במיוחד, שלא דורש הורדה, שהוא גופן ברירת המחדל של מערכת ההפעלה, ישירות באתרים ובאפליקציות שלהם.
body {
font-family: system-ui;
}
הבחירה הזו של טיפוגרפיה דומה לאמירה "שימוש בגופן ברירת המחדל של המערכת עבור הלוקאל הנוכחי של המשתמש הזה".
ב-macOS, הגופן system-ui הוא San Francisco, גופן שנבדק על ידי צוות עיצוב, עבר בדיקות ו… לאחרונה שודרג! תחילה נסביר על התכונות החדשות והמעניינות של גופנים משתנים ב-Catalina, ואחר כך נסביר על שני באגים ואיך מהנדסי Chromium פתרו אותם.
בפוסט הזה אנחנו מניחים שאתם כבר מכירים את המושג 'גופנים משתנים'. אם לא, כדאי לעיין במאמר מבוא לגופנים משתנים באינטרנט ובסרטון שלמטה.
תאימות דפדפן
בזמן כתיבת המאמר, system-ui נתמך על ידי Chromium (מגרסה 56), Edge (מגרסה 79), Safari (מגרסה 11) ו-Firefox (מגרסה 43), אבל עם מילת המפתח -apple-system. אפשר לקרוא את המאמר האם אפשר להשתמש בגופנים משתנים? כדי לקבל עדכונים.
כוחות חדשים
היכולות החדשות ש-Catalina הביאה לגופן המערכת זמינות עכשיו למפתחי אתרים החל מ-Chromium 83. system-ui לגופן יש עכשיו הגדרות משתנות נוספות: שינוי גודל אופטי ו-2 התאמות ייחודיות של עובי הגופן:
h1 { font-family: system-ui; font-weight: 700; font-variation-settings: 'wght' 750 ; }
h1 { font-family: system-ui; font-weight: 700; font-variation-settings: 'wght' 750, 'opsz' 20, 'GRAD' 400, 'YAXS' 400 ; }
ב-Mojave, system-ui הוא פונט משתנה עם הגדרות wght בלבד. ב-Catalina, system-ui הוא גופן משתנה עם הגדרות wght, opsz, GRAD ו-YAXS.
נראה לי שיש כאן כמה הזדמנויות מעניינות לעיצוב שיפורים הדרגתיים! אם רוצים, אפשר להתעמק בניואנסים של גופן המערכת.
wght
מקבל ערך של עובי הגופן בין 0 ל-900, ומוחל באופן שווה על כל התווים.
/* 0-900 */
font-variation-settings: 'wght' 750;
opsz
התאמת גודל אופטית דומה לריווח בין אותיות או לריווח בין מילים, אבל הריווח נעשה על ידי העין האנושית ולא על ידי חישובים מתמטיים. ערך של 19 ומטה מיועד לרווחים בין טקסט לבין גוף הטקסט, וערך של 20 ומעלה מיועד לרווחים בין כותרות ותתי כותרות.
/* 19 or 20 */
font-variation-settings: 'opsz' 20;
GRAD
דומה למשקל, אבל בלי לגעת במרווח האופקי. אפשר להזין בו ערכים בין 400 ל-1000.
/* 400-1000 */
font-variation-settings: 'GRAD' 500;
YAXS
מתיחה אנכית של הגליף. אפשר להזין בו ערכים בין 400 ל-1000.
/* 400-1000 */
font-variation-settings: 'YAXS' 500;
שילוב האפשרויות
בעזרת כמה שורות של CSS, אפשר לשנות את הגדרות הגופן לגופן מודגש לפי בחירה, או לנסות שילובים מעניינים אחרים:
font-weight: 700;
font-weight: bold;
font-variation-settings: 'wght' 750, 'YAXS' 600, 'GRAD' 500, 'opsz' 20;
וכך, משתמשי Chromium ב-macOS רואים את המשקל המשודרג והמותאם אישית של 750 עם עוד כמה שינויים כיפיים 👍
ב-macOS 10.15 נוספו תכונות חדשות לגופן המערכת, וב-macOS 10.15 תועד באיתור הבאגים של Chromium באג מסובך system-ui. מעניין אם הם קשורים אחד לשני.
נספח: הרגרסיה system-ui
הסיפור הזה מתחיל בבאג אחר: #1005969. הדיווח הזה נשלח לגבי macOS 10.15 כי המרווח בין האותיות בגופן system-ui נראה צר וצפוף.
רקע
האם שמתם לב פעם ב-macOS 10.14 איך הפסקאות או הכותרות שלכם 'קופצות' לגופן אחר כשהגודל שלהן עולה או יורד?
ב-Mojave (macOS 10.14), הגופן system-ui משתנה בין שני גופנים בהתאם לגודל הגופן הרצוי. כשהטקסט היה מתחת ל-20px, מערכת macOS השתמשה בגופן San Francisco Text. כשהטקסט היה 20px או יותר, מערכת macOS השתמשה בגופן San Francisco Display. התכונה 'שינוי גודל אופטי' מובנית באופן סטטי בשני גופנים נפרדים.
ב-Catalina (macOS 10.15) נוסף גופן משתנה מאוחד חדש בשם San Francisco. אין יותר צורך לנהל את האפשרויות 'טקסט' ו'תצוגה'. נוספה גם הגדרת הווריאציה החדשה opsz שתיארנו קודם.
h1 {
font-variation-settings: 'opsz' 20;
}
לצערנו, ערך ברירת המחדל opsz בגופן החדש של Catalina הוא 20, והמהנדסים של Chromium לא היו מוכנים להחיל את opsz על גופן המערכת. כתוצאה מכך, גדלים קטנים יותר מוצגים בצורה צרה מדי.
כדי לפתור את הבעיה, היה צריך ש-Chromium יחיל את opsz בצורה נכונה על גופן המערכת. הבעיה הזו הובילה לתיקון של בעיה מספר 1005969. ניצחון! או שזה היה…?
עוד לא סיימתם
כאן העניינים הסתבכו: Chromium החיל את opsz אבל משהו עדיין לא נראה נכון. לגופני מערכת ב-Mac יש טבלת גופנים נוספת שנקראת trak, שמשנה את הריווח האופקי. במהלך העבודה על התיקון, מהנדסי Chromium הבחינו שב-macOS, כשמאחזרים מדדים אופקיים מאובייקט CTFontRef, המדדים של trak כבר נכללים בתוצאות המדדים. ספריית העיצוב של Chromium HarfBuzz צריכה מדדים שבהם ערכי trak עדיין לא נלקחים בחשבון.
באופן פנימי, Skia (ספריית הגרפיקה, לא הגופן באותו שם) משתמשת גם במחלקה CGFontRef מ-CoreGraphics וגם במחלקה CTFontRef מ-CoreText. בגלל המרות פנימיות נדרשות בין האובייקטים האלה (שמשמשות לשמירה על תאימות לאחור ולגישה לממשקי API נדרשים בשתי המחלקות), במקרים מסוימים Skia מאבד מידע על משקל, וגופנים מודגשים מפסיקים לפעול. הבעיה הזו תועדה בבעיה מספר 1057654.
עדיין נדרשת תמיכה ב-macOS 10.11 ב-Skia כי Chromium עדיין תומך בה. בגרסה 10.11, הגופנים San Francisco Text ו-San Francisco Display לא היו בכלל גופנים משתנים. במקום זאת, כל אחד מהם היה משפחה של גופנים נפרדים לכל משקל זמין. בשלב מסוים, מזהי הגליפים שלהם יצאו מסנכרון. לכן, אם Skia עיצב טקסט (המרת טקסט לסימנים שאפשר לצייר) באמצעות 'San Francisco Text', הוא יהיה חסר משמעות אם הוא מצויר באמצעות 'San Francisco Display', ולהפך. גם אם Skia מבקשת גודל אחר, יכול להיות שמערכת macOS תעבור לגודל השני. אפשר תמיד להשתמש באחד מהגופנים ולשנות את הגודל שלו (באמצעות מטריצה להגדלה במקום לבקש גודל גדול יותר), אבל יש בעיה ב-CoreText שבה הוא לא משנה את הגודל של גליפים מסוג sbix (אמוג'י צבעוני) להגדלה (רק להקטנה). זה קצת יותר מורכב. נראה ש-CoreText מגביל את הגודל האנכי אחרי החלת המטריצה, ונראה שההגבלה הזו קשורה לכך שהוא לא מצליח לצייר אמוג'י בזוויות של 45 מעלות. בכל מקרה, אם רוצים שהאימוג'י יוצג בגדול, צריך ליצור עותק של הגופן כדי לקבל גרסה גדולה.
לכן, כדי ליצור עותקים של אובייקטים מסוג CTFont בגדלים שונים באופן פנימי, תוך הקפדה על שימוש באותם נתוני גופן בסיסיים, Chromium משך את CGFont מ-CTFont, ואז יצר CTFont חדש מ-CGFont (אובייקטים מסוג CGFont לא תלויים בגודל, והמעבר הקסום מתרחש ברמה של CoreText). השיטה הזו עבדה בצורה תקינה עד גרסה 10.154. בגרסה 10.15, התהליך הזה גרם לאיבוד של יותר מדי מידע, ולכן הייתה בעיה במשקל. ב-Flutter זיהו את הבעיה במשקל, ובוצע תיקון חלופי לשינוי הגודל כדי ליצור את CTFont החדש ישירות מ-CTFont המקורי, תוך שליטה בגודל האופטי ישירות באמצעות מאפיין ישן אבל לא מתועד ב-CoreText. הפעולה הזו מאפשרת להמשיך לעבוד בגרסה 10.11 ופותרת בעיות אחרות (למשל הגדרה מפורשת של הגודל האופטי לערך ברירת המחדל).
עם זאת, כך נשמר יותר מה 'קסם' של הגופן CoreText. אחת מהן היא שהיא עדיין משנה את המרווחים בין הגליפים בדרך כלשהי, ולא רק באמצעות טבלת trak (ש-Chromium כבר ניסה למנוע את השימוש בה באמצעות מאפיין נוסף שלא מתועד).
CGFont לא מבצע את כל ה'קסם' הזה, אז אולי Chromium יוכל להסיר את CGFont מ-CTFont ולהשתמש בו רק כדי לקבל יתרונות? לצערנו, הפתרון הזה לא יעבוד כי ידוע ש-CoreText משנה את הגופנים גם בדרכים אחרות. לדוגמה, אם תבקשו ליצור אימוג'י קטן, הוא יהיה קצת יותר גדול ממה שביקשתם (הגודל שלו יוגדל קצת). CGFont לא יודע על כך, ולכן האמוג'י שמבוססים על sbix יהיו קרובים מדי זה לזה, כי המדידה תתבצע בגודל אחד אבל CoreText יצייר אותם בגודל גדול יותר. Chromium רוצה את ההתקדמות של CTFont, אבל הוא רוצה אותה בלי מעקב, ועדיף בלי התעסקות אחרת.
כדי לפתור את בעיית הרווחים, היה צורך בסדרה של תיקונים מקושרים ב-Blink וב-Skia, ולכן מהנדסי Chromium לא יכלו פשוט לבטל את השינוי כדי לפתור את הבעיה. מהנדסי Chromium ניסו גם להשתמש בדגל build שונה כדי לשנות נתיב קוד שקשור לגופן ב-Skia, וזה פתר את הבעיה של הגופנים המודגשים, אבל החמיר את הבעיה של הריווח.
התיקון
בסופו של דבר, כמובן, ב-Chromium רצו לתקן את שני הדברים. Chromium משתמש עכשיו בפונקציות המובנות של HarfBuzz למדדי גופנים מסוג OpenType כדי לאחזר מדדים אופקיים ישירות מהנתונים הבינאריים בטבלאות הגופנים של גופן המערכת. באמצעות ההגדרה הזו, Chromium עוקף את CoreText ואת Skia כשהגופן כולל טבלה של trak (אלא אם מדובר בגופן של אימוג'י).
בינתיים, עדיין אפשר לעקוב אחרי התיקון המלא של הבעיה ב-Skia באמצעות Skia Issue #10123, ולחזור להשתמש ב-Skia כדי לאחזר משם את מדדי הגופן של המערכת, במקום התיקון הנוכחי שמתבצע דרך HarfBuzz.