מתכון להסבת עיצובים לעברית

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

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

הסבתם? נהניתם? בבקשה לטעון את העיצוב לאתר דרופל ישראל!

ובכן, יש לפעול בשלבים הבאים:

א. בתג ה-body יש להוסיף את הפקודה direction:rtl.

ב. בכל מקום שיש משהו שמזכיר left, לרשום right. ובכל מקום שיש right - לרשום left. לדוגמה: נסב float: left ל-float: right, ולהיפך - נסב float:right ל-float:left . דוגמה נוספת: אם רשום margin-left:2px, נרשום margin-right:2px (שימו לב שכאן הייחוס של left/right הוא בגוף האלמנט).

ג. בכל מקום שיש אלמנטים עם ארבעה מספרים, פשוט נהפוך ימין ושמאל. לדוגמה: אם רשום margin: 1em, 2em, 3em, 4em אז נרשום במקום margin: 1em, 4em, 3em, 2em. פשוט - יש להפוך את הסדר של האלמנט השני (שזה ימין) והרביעי (שזה שמאל). כנ"ל לגבי אלמנטים כמו border או padding וכדומה.

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

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

ו. למתקדמים, יש מודולים שיש להם קובץ css קטנטן משלהם שגם הוא זקוק להסבה.

קונבנציות: אני נוהג לשמור את העיצוב הקודם בתוך הערה בקובץ החדש, כדי שאדע מה שיניתי ואוכל לחזור אחורה במידת הצורך.