תכנות בהטמל5 לחלונות 8 – איך להוסיף תמיכה בשפות מימין לשמאל כמו עברית

13 ביוני 2012

תגיות: , , , , , , ,
3 תגובות



הפוסט הזה מעודכן לגרסת ה RP של חלונות. בשביל תמיכה מימין לשמאל בגרסה הסופית של חלונות יש פוסט עדכני יותר.

איך מוסיפים תמיכה בשפות שנכתבות מימין לשמאל בחלונות 8?

שאלה שאני נשאל לעיתים קרובות היא איך מתאימים אפלקציות הטמל5 לעבודה בעברית בחלונות8.
אחד החלקים הכי כיפים בכתיבה לחלונות 8 זה שכל הידע שלנו בהטמל רלוונטי גם כאן, ולפיכך היינו יכולים להתאים ל RTL בכל הדרכים הרגילות. אבל.. אנחנו עובדים בהטמל5, לא 4, לפיכך אפשר לעבוד בצורה אפילו יותר חכמה ממה שרגילים אליה – ע”י תגית הCSS3 לשפת ממשק – -ms-lang (זהו פיצ’ר לא סגור של הטמל5 ולכן הקידומת –ms).

 

 

איך מגדירים שפת ממשק?

ניצור אפליקציית גריד חדשה:

image

כשנריץ אותה, נוכל לראות שהיא מותאמת לשפות Left To Right, ולפיכך זה לא יתאים לעברית:

image

נסגור את האפליקציה, ונכנס להגדרות של הפרוייקט:

image

תחת שפת ברירת המחדל (default language) יהיה כתוב en-US:

image

נשנה את זה לעברית – he-IL:

image

במידה ונריץ את האפליקציה, נראה שאכן האפליקציה הפכה להיות מימין לשמאל, אבל זה לא נראה טוב:

image

איך זה עובד?

אם נכנס לקובץ ה CSS של WinJS נוכל לראות משהו מעניין

image

בתוך הקובץ (שורה 30) יש שורה מעניינת, שעושה שימוש ב –ms-lang:

image

-ms-lang הוא פסדו סלקטור של שפה. בקוד לעיל, מוגדר כי במידה ואנו באחת משפות הממשק המצויינות (עברית, ערבית, ועוד כל מיני שפות RTL), אזי direction יקבע ל rtl. היופי כאן הוא שקובץ *אחד* יכול להכיל הגדרות לכל שפה שבעולם. זה מפשט כתיבה לכמה שפות לאין שיעור (וכל מי שהתנסה בזה, יודע שזה לא כיף גדול).

 

 

אז למה זה לא נראה טוב?

מסתבר שקבצי ה CSS של winJS כתובים ממש טוב, אבל קבצי ה CSS “שלנו” שנוצרו ע”י ויז’ואל סטודיו לא מתייחסים לתגית הזו (אין שימוש בפסדו סלקטור הזה בהם). כדוגמא, אם נסתכל בקובץ default.css שנמצא תחת התיקייה CSS, נוכל לראות את הגדרת ה CSS הבאה:

image

כפי שאפשר לראות, margin-left נקבע להיות 39 פיקסלים. הסלקטור CSS הזה “תופס” את כפתור החזור, ונותן לו ריווח של 39 פיקסלים משמאל, רק שבמידה וקבענו את השפה להיות עברית, לא רשום בשום מקום שזה אמור להיות ההפך. זו הסיבה שכפתור החזור נראה כך:

image

 

 

איך מסדרים את זה?

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

image

עכשיו, כשנריץ, נוכל לראות שהכפתור התמקם מחדש במקום הנכון!

image

כל מה שנותר לעשות זה לעבור על כל קבצי ה CSS שנוצרו אוטומאטית ע”י ויז’ואל סטודיו, ולהוסיף את התיקון הזה בכל מקום. (כל מה שצריך לתקן זה ריווח שמאלי לימני וריווח ימני לשמאלי, וסיימנו).

כאלו קבצים יש ארבעה:

default.css
groupedItems.css
groupDetail.css
itemDetail.css

צריך לעבור על כולם ולהפוך בכל מקום את הריווחים ע”פ השפה, וסיימנו!

נריץ את האפליקציה פעם אחרונה, ונראה כי הכל מסודר כפי שרצינו:

image

את הקבצים המתוקנים אפשר להוריד מכאן

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

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

כתיבת תגובה

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

3 תגובות

  1. ערן23 ביולי 2012 ב 11:56

    נראה מצוין אם כי בעיות במעבר השפה נותרו בעינן כאשר הרצנו את האפליקציה עברנו למצב SNAP
    הבעיה הראשונה הופיעה כאשר רק האייטם בראשון שלGroup Header הופיע, ולמשל כאשר לחצנו עליו הגענו לGROUP שלו עדיין במצב SNAP וכשהרחבנו את המסך למצב מלא, הLIST VIEW vu נצמד לצד השמאלי ההפוך למה שציפינו.

    האם התמודדת עם בעיות אלו?

    הגב
  2. DD23 ביולי 2012 ב 19:34

    הטמל5?
    כל כך קשה לעבור לאנגלית?

    הגב
  3. *********@gmail.com6 בדצמבר 2013 ב 14:01

    mbt changa תכנות בהטמל5 לחלונות 8 – איך להוסיף תמיכה בשפות מימין לשמאל כמו עברית | אלעד כץ | Elad Katz

    הגב