אני לא חושב שיש מעצב או מפתח שלא נתקל בלורם איפסום מימיו, הטקסט הזה, שאפילו זכה בזמנו לספר שירה קצרה פרי עטו של תומר ליכטש, הוא כלי עזר למעצבים ומפתחים בעיצוב של תוכן מאז ומתמיד. על פי וויקיפדיה המקור של לורם איפסום הוא במאה ה 14 והנוסח הנוכחי הוא מאמצע המאה ה 20.
ככלי ראשוני להזנת תוכן ולהעמסת נפח הלורם איפסום ממלא את תפקידו לא רע בכלל, בטח יותר טוב מאותו "דג קטן שט בים" שמשוכפל בוורד אלפי פעמים כדי לייצר פיסקה. הבעיה היא, שאתרי אינטרנט אינם ספרים, והם מכילים הרבה יותר אלמנטים מרק פיסקאות של טקסט.
רק לפני מספר ימים ישבתי עם אדם שהגיש פרוייקט לזירת פרילאנסרים כזו או אחרת ולקח את ההצעה "המשתלמת ביותר" (כלומר הבחור שרצה הכי פחות). היות והמעצב השתמש רק בלורם איפסום כדי להזין טקסט אל תוך הסקיצות, הרי שאותו מפתח התיחס אך ורק לטקסט הזה וטרח לעצב רק אותו. כשאותו אדם התחיל להזין את התוכן האמיתי הוא גילה לצערו שיש לא מעט תיקונים שיש לעשות על מנת שהטקסט יוצג כמו שצריך. מישהו פעם שאל אותי מה ההבדל בין תוכניתן למפתח, אני חושב שהדוגמה הזו היא דוגמה מצויינת להבדל שכזה.
אז איזה אלמנטים יש לנו בטקסט?
פיסקאות – זה הקטע הבסיסי ולורם איפסום רגיל מטפל בזה
ציטטה – לציטטה יש טיפול דיפולטי שמוגדר בדפדפן עצמו, אבל הוא בסיסי למדי ולעיתים נרצה להתאים אותו
קוד – בלוק קוד הוא בעייתי בעיקר בעברית כי לרוב נרצה להשתמש בו כדי להציג טקסט באנגלית משמאל לימין, אך היות ומדובר באלמנט שמוצג inline ולא כ block זה אחד האלמנטים המתסכלים יותר לטיפול.
טבלאות – הרבה פעמים אני פוגש טבלאות נוראיות, ברמת המסגרת ותו לא, אבל טבלאות הן אלמנטים עם שלל תתי אלמנטים שדורשים לא מעט התיחסות. אני אקדיש לטבלאות פוסט בעתיד הקרוב.
רשימות – רשימות יכולות להיות ממוספרות או בתבליטים, אבל גם לתבליטים ניתן להגדיר שלל סוגים, צריך להתיחס כמובן גם לתתי רשימות וכן הלאה.
תמונות – כשמכניסים תמונה לפוסט בוורדפרס ניתן לבחור האם היא תוצמד לימין, לשמאל, למרכז או לא תוצמד כלל. אפשר להגדיר שיהיה לה כיתוב (caption) או שתהייה ללא – לכל אחת מההגדרות הללו, יש צורך בהגדרה עיצובית תואמת. דבר נוסף שיש לקחת בחשבון – הגדרת גבול לתמונה – פעמים רבות מתוך חוסר תשומת לב לא מבטלים את הגבול לתמונה וברגע שהיא קישור, בדפדפנים פחות מתקדמים, היא תוקף אוטומטית במסגרת כחולה.
לינק – ללינק עצמו יש 4 מצבים – רגיל, במעבר עכבר, בתגובה לקליק ולינק שכבר ביקרנו בו – הדיפולט, לרוב מכוער.
משקלים ונטיות – האם ידעתם שהגדרה של טקסט בערבית ככתב נטוי (italic) – תגרום לטקסט להופיע כריבועים? מסתבר שרוב הפונטים הערבים לא תומכים בכתב נטוי בערבית (ככל הנראה זה לא באמת קיים) ולכן הטקסט מוצג כריבועים המוכרים מבעיות קידוד. מי שלא לוקח דבר שכזה בחשבון, או לא מודע לנושא עלול למצוא עצמו מתוסכל למדי. אם אתם משתמשים בפונטים מוטמעים, תגלו פעמים רבות כי פונטים שכאלו אינם מכילים את כל סוגי המשקלים אלא מחולקים לפונטים נפרדים. כך יש פונט אחד עבור bold, פונט אחר עבור normal או italic וכדומה. אם לא לוקחים דברים שכאלה בחשבון בזמן בדיקות – התוצאה עלולה להתגלות מאוחר מדי.
אז מה הפיתרון?
הפיתרון הוא כמובן פוסט בדיקה שרצוי, מומלץ ואף חובה להתקין לפחות על שרת הבדיקות כדי לראות שכל האלמנטים הגרפיים מעוצבים כנדרש. לטובת העיניין אני מצרף פה שני קבצים – קובץ css המכיל את מירב הסלקטורים שיכולתי לחשוב עליהם וכדאי לקחת בחשבון. בנוסף, קובץ html המכיל תוכן של פוסט וורדפרס אותו יש לפרסם כפוסט חדש. חשוב לשים לב שאת הפירסום יש לבצע במצב HTML ולא במצב עורך עשיר. כמו כן, הקפידו לפתוח את קובץ הטקסט בעזרת תוכנה כדוגמת Notepad ולא Word שעלולה לזרוק זבל עיצובי משלה אל תוך הקוד.
שכחתי אלמנט כלשהו? יש לכם משהו להוסיף? בתגובות.
כתיבת תגובה