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

הנה שני דפים, אחד בכיוון RTL ואחד בכיוון LTR (רגיל):

אנגלית – LTR עברית – RTL
דף שמאל לימין דף ימין לשמאל

ניתן לראות שבדף RTL הכל נראה הפוך באופן אופקי. זה כמו להסתכל בדף LTR 'רגיל' דרך מראה. יצירת תמונת מראה זו היא בעצם די קלה. הכיוון dir ב-CSS יעשה את רוב העבודה ויהיה עליך לתקן רק מקומות מועטים.

טעינת קובץ CSS שונה לשפות RTL

WordPress יודעת לאיזה שפות יש זרימת RTL והיא מקלה עליך להתאים אישית את הפריסה שלהן. צור קובץ rtl.css חדש ושים אותו בספריית הבסיס של ערכת העיצוב.

WordPress יטען את הקובץ rtl.css אחרי שהוא יטען את styles.css הרגיל, כך שקובץ ה-CSS של RTL צריך רק להחליף מאפיינים שצריכים להשתנות. המשמעות היא שהקובץ rtl.css בדרך כלל קטן למדי עבור רוב ערכות העיצוב.

הגדרת כיוון הדף ל-RTL

המאפיין direction ב-CSS אומר לדפדפן מה כיוון הדף. עבור שפות RTL, תרצה להגדיר אותו להיות ‘rtl’. יש עוד מאפיין 'קסם' שיש להגדיר עבור תצוגת RTL נכונה. שמו unicode-bidi. מאפיין ה'קסם' הוא די פשוט להבנה. כשאתה כותב ב-RTL, הוא שולט על האופן שבו תווים מוצגים בתוך השורה.

לתצוגת RTL נכונה, הוסף את הדברים הבאים לבוחר של .body:

{
 direction:rtl;
 unicode-bidi:embed;
}

ועכשיו סיימת! ערכת העיצוב החדשה פועלת ב-RTL. כמעט. שני משפטים אלה יגרמו לרוב הדף להיראות נכון. עכשיו יהיה עליך לטפל ביוצאים מן הכלל.

היפוך כיוון טקסט, ציפה וניקוי

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

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

גרפיקה המרמזת על כיוון

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

בחירת גופנים מותאמים אישית

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

אם אתה משתמש בגופני אינטרנט סטנדרטיים, לא תהיה לך כל בעיה.

כיצד לבדוק את ערכת העיצוב שלך ב-RTL

כשאתה מפתח קובץ CSS ל-RTL, כדאי לבדוק את מה שאתה עושה.

  1. שנה את השפה בקובץ wp-config.php לשפה זו. אם אתה משתמש ב- WPML, הוסף שפת RTL לאתר שלך.
    הוספת שפות RTL
    Adding RTL languages
  2. קבל את התרגום של WordPress עבור שפת RTL  (עברית, ערבית, פרסית). ניתן למצוא את כל התרגומים המעודכנים בפרויקט הלוקליזציה של WordPress. כמובן שאם אתה משתמש ב-WPML, WPML יכול לקבל את התרגום של WordPress עבורך.
    קבלת תרגומים עבור WordPress
    Getting translations for WordPress
  3. תרגם לשפה זו את הטקסטים של ערכת העיצוב שלך שמוגדרים מראש (לפחות את אלה שבממשק המשתמש). WPML מאפשר לך לעשות זאת באמצעות המודול תרגום המחרוזות.
    תרגום הטקסטים של ערכת העיצוב
    תרגום הטקסטים של ערכת העיצוב
  4. קבל תוכן לדוגמה בשפה זו. לעריכה קלה ב-RTL בניהול המערכת של WordPress, עבור לפרופיל שלך, דפדף אל הגדרת שפת מנהל המערכת והגדר את השפה לזו של שפת העריכה.
    הזנת תוכן במצב RTL
    Editing content in RTL mode

לא יודע אף שפת RTL? השתמש ב-Google Translate. התרגום יהיה ברובו שטויות, אבל לצורכי פיתוח CSS זה מספיק.

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

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

חומר בונוס – מנהל המערכת של ערכת העיצוב בשפות RTL

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

בנוסף על כך, משתמשים רבים ירצו לראות את מנהל המערכת של WordPress בשפה שלהם. המשמעות היא שעליך לראות את מסכי הניהול של ערכת העיצוב בכיוון RTL.

הדרך הקלה להשגת תאימות RTL זו היא שמסכי הניהול של ערכת העיצוב שלך ישתמשו במחלקות ברירת המחדל הסטנדרטיות של WordPress CSS עבור רכיבי ממשק המשתמש. נכון, זה אומר שלא תוכל להשתמש באפקטים מפוארים של CSS כדי להאיר את ממשק המשתמש שלך. זה גם אומר שממשק המשתמש שלך יתמזג באופן מושלם במנהל המערכת של WordPress ויוצג נכון ב-LTR/RTL.

ניהול המערכת של ערכת העיצוב 2014 ב-RTL. לא מתורגם לחלוטין, אבל הכל ממוקם נכון.
ניהול המערכת של ערכת העיצוב 2014 ב-RTL. לא מתורגם לחלוטין, אבל הכל ממוקם נכון.

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

הפנייה מעולה – ברירת המחדל של ערכת העיצוב של WordPress

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