פיתוח לחלונות 8 עם הטמל5 – איך לתמוך בעברית ובשפות מימין לשמאל (RTL) בגרסה הסופית של חלונות8

28 באוגוסט 2012

תגיות: , , , , ,
תגובה אחת

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

כשמריצים אפליקציית גריד בפעם הראשונה, כך היא נראית – מיושרת לשמאל:

 

image

בשביל להפוך את השפה צריך להגדיר עברית כשפה בתוך ה application manifest, בטאב הראשון:

image

בדומה למה שהיה בגרסה הקודמת, מה שזה עושה זה מוסיף פסדו סלקטור של CSS, כך שנוכל להגדיר התהגות מיוחדת ע”י הסלקטור  -ms-lang.

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

image

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

 

image

בתוך navigator.js ישנה פונקציה שמייצרת אלמנט דף חדש:

// Creates a container for a new page to be loaded into.

_createPageElement: function () {

    var element = document.createElement("div");

    element.style.width = "100%";

    element.style.height = "100%";

    return element;

},

כל מה שצריך לעשות בשביל לתקן את הבאג הוא להוסיף את השורה הבאה:

element.setAttribute("dir", window.getComputedStyle(this._element, null).direction);

כך שהקוד המלא יראה כך:

 

// Creates a container for a new page to be loaded into.

_createPageElement: function () {

    var element = document.createElement("div");

 

    element.setAttribute("dir", window.getComputedStyle(this._element, null).direction);

 

    element.style.width = "100%";

    element.style.height = "100%";

    return element;

},

בהרצה נוספת נראה כי אכן כל האלמנטים זזו בחזרה למקום הנכון.

image

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

כדוגמא, בקובץ default.css יש את הגדרת ה CSS הבאה.

 

.fragment header[role=banner] .win-backbutton {

    margin-left: 39px;

    margin-top: 59px;

}

במידה ואנחנו בעברית, נרצה לשנות את הגדרת ה margin-left להיות margin-right.

יחד עם זאת, נרצה שזה יקרה אך ורק אם אנחנו בשפה שנכתבת מימין לשמאל, ולכן פשוט נשכפל את הגדרת ה CSS הזו, ונוסיף לה את הסלקטור –ms-lang:

 

.fragment header[role=banner] .win-backbutton {

    margin-left: 39px;

    margin-top: 59px;

}

 

.fragment header[role=banner] .win-backbutton:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {

    margin-right: 39px;

    margin-top: 59px;

}

כך, רק בשפה מימין לשמאל הגדרת הMargin תתהפך.

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

 

image

 

את הפרוייקט המלא ניתן להוריד מכאן

להורדת קבצי ה CSS וה JS בלבד

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

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

תגובה אחת

  1. http://www.2daydietpillsite.com/7 במאי 2013 ב 5:49

    These pills didnt even control our appetite because I still felt hungry and also ate whatever I need without feeling 100 %.

    הגב