החלפת צדדים, שמאל וימין

8 בפברואר, 2010 מאת צוות האתר הוספת תגובה »

פעולת ההסבה ל-RTL היא למעשה פעולת "ראי". המטרה היא להפוך את הצדדים, כך שכל מה שהיה בשמאל יעבור לימין ולהפך.

הפעולה הראשונה תהיה מעבר על קובץ ה-CSS והחלפה בין המילים, בכל מקום שבו כתוב left לשנות ל- right ולהפך. פעולה זו תתבצע עבור תכונות ועבור ערכים אך לא עבור סלקטורים (למשל, שמות של Class) או עבור שמות קבצים.

מתי מחליפים
1. במקרים בהם המילים הן מחלק תכונות, למשל:

border-right: 1px solid #000;
padding-left: 10px;
left: 0;

בדוגמאות אלו, המילים left או right כחלק מתכונה, padding-left, למשל.

2. במקרים שהמילים הן ערכים, כגון:

float: right;
text-align: left;
background: url(images/image.jpg) left 2px;

בדוגמאות אלו, המילים הן חלק מהערכים, text-align: left, למשל.

מתי לא מחליפים

1. במקרים בהם המילים left ו-right הן חלק סלקטורים, למשל:

.shadow-left-tab .logo {
 color: #fff;
 background: #666;
 font-size: 22px;
}

בדוגמה זו, המילה left מופיעה כחלק מהסלקטור, ה-Class בשם shadow-left-tab.

2. במקרים בהם המילה היא חלק משם קובץ, למשל:

.readon a{
 display: block;
 color: #0054A8;
 text-decoration: none;
 background: url(images/right-arrow.png);
}

בדוגמה זו, המילה היא חלק מהשם קובץ של תמונה, right-arrow.png.

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

חפש החלף

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

עבור היעילות ניתן להשתמש בעורך קוד, למשל Dreamweaver עבור ביצוע של חיפוש ולחיצה על החלפה בכל פעם שאותרה מילה במיקום הנכון.
אם מבצעים פעולה מעין זו של חפש-החלף, יש להחליף למילת-ביניים, אי אפשר להחליף את left ל-right, כיוון שאחר כך לא יהיה ניתן לזהות איזה right הוא מקורי ואיזה נוצר מהחלפה של left.

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

כאשר אני מבצע זאת, ראשית אני מחליף את כל ה-left ל-שמאל ואת כל ה-right ל-ימין.

חפש והחלף - left = שמאל, rigth = ימין

חפש והחלף

בשלב הבא כבר ניתן לבצע חיפוש והחלפה אוטומטיים, חפש את כל ה-שמאל והחלף אותם ל-right.

החלף הכל

החלף הכל

שימו לב! ל-WordPress יש יוצאי דופן.

מופיע בקטגוריותסדנא בהמרת תבניות לעברית

תגיות:

ניתן לעקוב אחר התגובות לשיעור זה באמצעות RSS 2.0. תוכל להוסיף תגובה , או טראקבק מהאתר שלך.

פרסומת

6 תגובות

הוספת תגובה
  1. מאת רוני:
    9 במרץ 2010 בשעה 7:05

    סליחה שאני מעיר, אך חסר לכם ידע בסיסי בוורדפרס.
    כדי שוורדפרס יתמוך ב RTL אך לא יאבד את העיצוב ב LTR צריך להוסיף קובץ CSS נוסף: rtl.css
    וורדפרס ישתמש בקובץ זה רק עבור שפות RTL (עברית וערבית)
    בקובץ זה עושים את כל השינויים המתייחסים לכיוון.
    לדוגמא:
    .Kukuriku-left
    {
    color: red;
    float:left;
    }
    יהיה בrtl.css:
    .Kukuriku-left
    {
    float:right;
    }
    אין צורך להעתיק את התכונות אשר אינן מתייחסות לכיוון.
    מכיוון שהוורדפרס שותל את rtl.css מיד אחרי style.css כל התכונות שבמקור נשמרות ותכונות הRTL דורסות את התכונות שנוצרו ע"י style.css

  2. מאת צוות האתר:
    9 במרץ 2010 בשעה 23:57

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

    הוצאת פקודות לקובץ נפרד היא עבודה מסורבלת ויותר נוח, למי שלא לגמרי מבין את ה-CSS לערוך את הקובץ עצמו.

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

  3. מאת רוני:
    10 במרץ 2010 בשעה 1:22

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

  4. מאת אלי:
    17 באפריל 2010 בשעה 20:11

    לצערי נתקלתי לא פעם בתבנית שאכן יש בה קובץ rtl.css אך היא לא עושה את העבודה כמו הדרך שמוצגת ע"י ארז…

  5. מאת אלי:
    17 באפריל 2010 בשעה 20:13

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

    #navbar { clear: both; float: right; width: 977px; height: 38px; background: url(images/nav.jpg) no-repeat 0 0; }

    ul.menu { float: right; margin: 0; padding: 0 15px; list-style-type: none; }
    ul.menu li { float: left;}
    ul.menu li a { float: left; display: block; height: 28px; padding: 3px 15px 0 15px; line-height: 24px; color: #fff; }
    ul.menu li a:link, ul.menu li a:visited { color: #ccc; }
    ul.menu li a:hover, ul.menu li a:active { color: #fff; }

    ul.menu li.current_page_item a:link,
    ul.menu li.current_page_item a:visited,
    ul.menu li.current_page_item a:hover,
    ul.menu li.current_page_item a:active { color: #fff; text-decoration: none; font-weight: bold; }

טראקבקים /
פינגבקים

  1. למה CSS3 טוב ליהודים ולערבים | We CMS

כתיבת תגובה