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. כמעט. שתי ההצהרות הללו יגרמו לרוב העמוד להיראות נכון. כעת, עליך לטפל בחריגים.
היפוך כיוון טקסט, floats ו־clears
כל מקום ב־CSS שבו אתה מגדיר את כיוון הטקסט ומציף (float) אלמנטים, דורש תשומת לב ידנית.
מצא את כל הבוררים עבור text-align, float ו־clear. אם אחד מהם מציין כיוון, הפוך בין "right" ל־"left". זכור את תמונת המראה שאנו מנסים להשיג, וזה יהפוך את ההבנה של הטרנספורמציה הזו לקלה יותר.
גרפיקה המרמזת על כיוון
דבר נוסף שיש לשים לב אליו הוא גרפיקה עם משמעות של "כיוון". לדוגמה, אם אתה יוצר מצגת, ייתכן שיהיו לך חצים עבור הפריטים הבא והקודם. זכור שהאתר שלך ייראה דרך מראה בשפות RTL, ולכן עליך להפוך גם את הגרפיקה הכיוונית. אם אתה משתמש בחץ המצביע ימינה עבור "הבא" ב־LTR, עליך לספק חץ המצביע שמאלה עבור "הבא" ב־RTL.
בחירת גופנים מותאמים אישית
לשפות RTL אין את אותם גופנים כמו לשפות LTR. אם אתה משתמש בגופנים מיוחדים ופריסת ערכת העיצוב שלך מסתמכת עליהם, עליך למצוא גופנים חלופיים עבור השפות הללו. אם תבחר גופן שאינו קיים בשפת RTL, הדפדפן יחזור למה שהוא מכיר. עדיף שתציין גופנים חלופיים קיימים שאתה אוהב.
אם אתה משתמש בגופני רשת סטנדרטיים, מצבך מצוין.
כיצד לבדוק את ערכת העיצוב שלך ב־RTL
כאשר אתה מפתח את קובץ ה־RTL CSS שלך, כדאי תמיד לבדוק את מה שאתה עושה.
- שנה את השפה בקובץ wp-config.php לאותה שפה. אם אתה משתמש ב־WPML, פשוט הוסף שפת RTL לאתר שלך.
הוספת שפות RTL - תרגם את הטקסטים המקודדים קשיח (hard-coded) של ערכת העיצוב שלך (לפחות אלה שבצד הלקוח) לאותה שפה. WPML מאפשר לך לעשות זאת באמצעות המודול תרגום מחרוזות.
תרגום הטקסטים של ערכת העיצוב - השג תוכן לדוגמה באותה שפה. לעריכה קלה ב־RTL באזור הניהול של WordPress, עבור אל הפרופיל שלך, גלול אל הגדרת שפת אזור הניהול והגדר את השפה כך שתהיה זהה לשפת העריכה.
עריכת תוכן במצב RTL
אינך מכיר שפות RTL? פשוט השתמש ב־Google Translate. התרגום יהיה ברובו חסר היגיון, אך לצורכי פיתוח CSS, זה בסדר.
כעת, עבור על סוגי התוכן השונים באתר שלך. הקפד לכלול פוסטים, עמודים, את דף הבית וכל תוכן מותאם אישית שתיצור.
לקבלת התוצאות הטובות ביותר, מצאו מישהו שדובר את השפה ובקשו ממנו לעשות עבורך בדיקת שפיות (sanity check). החבר שלך שדובר שפת RTL יתפוס את ה־5% הנותרים של הבעיות שתפספס. זה "נחמד שיהיה", אז אל תפסיק את מאמצי ה־RTL שלך אם אינך מכיר מישהו שיעזור בבדיקות. ברגע שתשחרר את הגרסה של ערכת העיצוב שלך שתומכת ב־RTL, תקבל שפע של משוב מהלקוחות שלך. אם תעשה 95% מהמאמץ, הם ישמחו לתרום תיקונים עבור ה־5% הנותרים.
חומר בונוס – אזור הניהול של ערכת העיצוב שלך בשפות RTL
הדרישה הבסיסית לכך שתהיה ערכת עיצוב תואמת RTL, היא שצד הלקוח (התוכן הציבורי) יוצג כראוי בשפות RTL. זהו הבסיס האמיתי, שבלעדיו אף אחד לא יכול להשתמש בערכת העיצוב שלך כדי לבנות אתרים בשפות RTL.
מלבד זאת, משתמשים רבים ירצו שאזור הניהול של WordPress יהיה בשפה שלהם. המשמעות היא גם לראות את מסכי אזור הניהול של ערכת העיצוב שלך בכיוון RTL.
הדרך הקלה להשיג תאימות RTL זו עבור מסכי אזור הניהול של ערכת העיצוב שלך היא להשתמש במחלקות ה־CSS הסטנדרטיות של WordPress עבור רכיבי ממשק משתמש גרפי (GUI). נכון, זה אומר שאתה לא יכול להשתמש באפקטים מיוחדים של CSS כדי לשפר את ה־GUI שלך. זה גם אומר שה־GUI שלך משתלב בצורה מושלמת באזור הניהול של WordPress ומוצג כראוי ב־LTR / RTL.
אם עליך להשתמש ב־CSS המותאם אישית שלך עבור מסכי אזור הניהול, בדוק כיצד הוא נראה בשפת RTL. אותם כללים שאתה פועל לפיהם עבור ה־CSS של צד הלקוח חלים גם על צד השרת (back-end). הפוך aligns, floats ו־clears; הימנע ממיקום מוחלט (absolute positioning) וטפל בתמונות.
מקור עזר מצוין – ערכת העיצוב של ברירת המחדל של WordPress
לידיעתך, ערכות העיצוב של ברירת המחדל של WordPress מותאמות כולן באופן מושלם לשפות RTL. פתח את ערכת העיצוב של ברירת המחדל וחפש את הקובץ rtl.css. תראה אילו שינויים הוא ביצע ב־CSS עבור ערכת העיצוב של ברירת המחדל. בדרך כלל, השינויים הללו די קטנים וקלים להבנה.