למה CSS3 טוב ליהודים ולערבים
בעת המרה לעברית של עיצוב שבמקור נוצר לכתיבה משמאל לימין, כלומר מ-LTR ל-RTL – קיימת בעיה אחת שלא ניתן לפתור באופן מדויק.
בעיצובים רבים קיים שימוש באייקונים המופיעים כתמונת רקע. לדוגמא, הצגה של קישור ליצירת קשר ולידו אייקון של תיבת דואר. פעמים רבות הקישור יקבל Class כלשהו והאייקון יופיע כתמונת רקע אשר מוקמה לצד הקישור.
דוגמאות נוספות: אייקון של תאריכון ליד הצגת תאריך של כתיבת פוסט, אייקון של משתמש ליד שם מחבר של פוסט ועוד…
הדרך הנפוצה להציג אייקונים כאלו היא להציג אותם כתמונת רקע אשר ממוקמת במרחק קבוע מהגבול השמאלי (של המסך או של ה-DIV בו האלמנט נמצא)
הקוד יכול להראות כך:
background: url(images/icon.png);
background-position: 3px 4px;
המשמעות של מיקום התמונה הוא 3px מהגבול השמאלי ו-4px מהגבול העליון.
מיקום תמונה במרחק מהגבול השמאלי
פעולת ההתאמה היא לבצע היפוך, תמונת ראי של העיצוב. כלומר, כל מה שהיה בשמאל עובר לימין ולהפך. אז מה עושים כאשר מתאימים את העיצוב לעברית? הרי נדרש להציב את התמונה ב-3px מהגבול הימני אבל אין לנו שום דרך לציין זאת.
כיום הפתרון הוא באמצעות אחוזים. הדפדפן מרנדר את המסך משמאל לימין ומכיר את הגבול השמאלי אך לא יודע היכן בדיוק נמצא הגבול הימני. לכן, אפשר לדבר איתו באמצעות אחוזים. אפס אחוזים הם הגבול השמאלי ו-100% הוא הגבול הימני. כדי להציב תמונה במרחק מסוים מהגבול הימני אפשר להגדיר לה 99%
background-position: 99% 4px;
הבעיה בשיטה זו שהיא מאד לא מדויקת. זה יוצא 'מאד בערך' ודורש ניסויים עד שמגיעים לתוצאה כמעט מדויקת.
הסבר מפורט על נושא זה, באתר שהקמתי המהווה מדריך להמרת עיצובים לעברית.
מיקום תמונה באמצעות אחוזים
פתרון עתידי באמצעות CSS3
CSS3 עדיין לא נתמך על ידי רוב גרסאות אינטרנט אקסלפורר ולכן השימוש בו עדיין פחות נפוץ, אך יבוא היום ורוב הגולשים ישתמשו בדפדפנים תומכי CSS3 והחיים יהיו הרבה יותר קלים.
האופציה calc() מאפשרת לבצע חישובים של אורכים ומרחקים. למעשה היא עדיין לא נתמכת גם על ידי Firefox, אך נראה שתשולב באחת מהגרסאות הקרובות.
באמצעות calc אפשר לכתוב מאפיין כזה:
background-positoin: calc(100%-3px);
כלומר, 3px מהגבול הימיני. מ.ש.ל
להסברים ומידע נוסף על פונקציית calc ב-CSS3.
אם אתה מציע לאובאמה לפתוח ביוזמת שלום מבוססת CSS3 ?
לא יודע אם כתבת את הפוסט הזה בעקבות מה ש-ajaxian פרסמו בסופ"ש, אבל לשמחתנו מוזילה עובדים על העניין בקצב ובנייטלי הבא יראו תוצאות:
https://bugzilla.mozilla.org/show_bug.cgi?id=363249#c41
לכתבה ב-ajaxian:
http://ajaxian.com/archives/css-calc-in-the-house
הלכת רחוק מידי. שני מאפיינים חשובים שלא דיברת עליהם הם start ו־end, שמתפקדים ממש כמו left/right רק שהם תלויים בכיוון הכתיבה.
נשמע טוב הקאלק הזה
יש אפשרות זמנית לפתור את הבעיה גם דרך תוכנה גרפית כזו או אחרת.
מתן הגדרות בCSS
background: url(images/icon.png);background-position: right;
והוספת מס' פיקסלים שקופים מימין לאייקון בקובץ התמונה עצמו יתנו תוצאה זהה.
זו אמנם שיטה מסורבלת קצת, אבל היא עושה את העבודה.
שיטה נוספת ויעילה שאני משתמש בה לצורך מיקום תמונות היא להוסיף לתמונה את הכמות הדרושה של הפקסלים מצד ימין ע"י עריכת התמונה עצמה.
היתרון של השיטה הזו שגם ברוחב לא קשיח המיקום ישאר מדוייק.
מכוער אבל עובד
סליחה לא שמתי לב שכבר משהו העלה את זה (בעיית הלשוניות הפתוחות)
פיירפוקס החדש גירסה 4 ביטא- כן תומך!