תאימות דפדפנים, חלק א': גופן זה לא Fun – בודק סוגי גופנים חינמי

nicubunu_Comic_characters_Laptop-ASAFCHE

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

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

זורם? זורם?! “אוי ויי", ייבבתי לעצמי כשניסיתי לחשוב איך אני מסביר לו שאי אפשר להשתמש בגופן המגניב שהוא ראה בוורד של הבת שלו. זאת לא אשמתו, באמת שלא, אבל לך תסביר לו שאתה לא לוקח אחריות על הסטנדרטיזציה באינטרנט. גם ככה הוא החליק את זה שב- IE7 העיצוב נראה קצת אחרת (זה נורא מעצבן, אבל הוא תמיד נראה קצת אחרת
ב-7…), ושתאימות הדפדפנים עדיין לא הסתיימה (ואולי תתחיל מחדש בשנייה ש- IE9 ייצא מהבטא שלו), אז עכשיו גם לספר לו שהוא לא יכול לשנות את הטהומה באתר לגופן המגניב של הבת שלו?

אבל למה בעצם אי אפשר לעשות את זה? ואולי אפשר?

גופנים בטוחים (בטוחים מפני מה?)

בראשית היה תוהו ובוהו, ואין סטנדרט אחד על פני תהום.

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

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

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

אותה שאיפה של ציבור המפתחים, הגיעה לכדי רשימה ערטילאית של בין 10 ל-20 גופנים (ה- ”Web safe fonts”), אליהם הצטמצמנו עם השנים, על מנת לפתור את בעיית ה- cross-platform ("מרובה פלטפורמות" – מתייחס ליכולת של תוכנה או חומרה לרוץ באופן זהה על פלטרפומות שונות). מכאן מגיע השם “safe fonts” – גופנים בטוחים לשימוש.

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

רגע של ביקורת – השאלה המתבקשת היא "עד מתי?”. למה אי אפשר פשוט לטעון קובץ גופן, ושהדפדפן של הלקוח יקרא את הקובץ ויצליח להציג את הגופן המסוגנן מהוורד של הבת במחשב של הלקוח?

טוב, אז קוראים לזה font-face וזה מסתובב כאן כבר שנים. כן, שנים.

Font-face – לפנים או על הפרצוף?

אולי שמעתם על זה בעבר, אבל רוב הסיכויים שגם אם שמעתם, נרתעתם.

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

בזמנו התכונה לא התקבלה בסבר פנים יפות ע"י מפתחי הדפדפנים, ותתפלאו לדעת אבל IE תמך בתכונה זו עוד בגרסה 4! (תמך, אבל תמך חלקית בלבד, כמו ש- IE יודע לתמוך, כואב הלב…).

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

אבל מה? בעוד שהתחביר פשוט עד מאוד (כמו ש- CSS יודע להיות), לדוגמא:

<STYLE TYPE="text/css" MEDIA="screen, print">
@font-face {
font-family: "Robson Celtic";
src: url("http://site/fonts/rob-celt")
}
H1 { font-family: "Robson Celtic", serif
</STYLE>

ממש פשוט, לא?

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

בפועל התחביר נראה כך:

@font-face {
font-family: 'AFontwithSerifsRegular'; /* name to use */
src: url('/fonts/A_Font_with_Serifs.eot'); /* for IE */
src: local('?'), /*
so IE doesnt barf & give a 404 on the url(...) calls */
url('/fonts/A_Font_with_Serifs.woff') format('woff'), /* for firefox */
url('/fonts/A_Font_with_Serifs.ttf') format('truetype'),/*
for opera/webkit */
url('/fonts/A_Font_with_Serifs.svg#AFontwithSerifs') format('svg'); /*
for mobile safari/other mobile devices */
}

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

ומה עוד? אה, כן – עברית.

הכל קשה יותר בעברית, וזה כלל אצבע – אם הגופנים בfont-face הם עניין שהרבה מפתחים מפחדים ממנו בשפות הנכר, אז מה נגיד אנחנו, עם הכתב העתיק והמכושף שלנו?

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

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

תחליפים קיימים

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

פרוייקט אחר הוא http://webfonts.info שהלך בעצם על פשרה בין רשימת גופנים בטוחים וה- font-face, והתוצאה – רשימת ה- "בטוחים לשימוש בfont-face”, ותחסכו מכם את החיפוש – לא תמצאו שם גופנים בעברית. חיפשתי.

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

אז תכל'ס, תחליפים – אין.

Font-face manipulation VS safe fonts

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

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

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

בפעם האחרונה שהייתי באותה נקודה, הבנתי שחבל לי על הזמן ועל הפינג-פונג במייל: "זה לא זה", ו"אין לך גופן שנותן תחושה של חופש"?

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

האמת, זה היה בול במקום.

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

ואיזה גופן לדעתכם בחר הלקוח?

גם אתה רוצה לבדוק סוגי פונטים?

לקריאה מעמיקה נוספת: Generic Font Families ב-w3c

כתיבת תגובה

האימייל לא יוצג באתר. (*) שדות חובה מסומנים

תגי HTML מותרים: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>