פריסת RTL: תמיכה בערבית, עברית ופרסית
כשמפתחים אתר בערבית או בעברית, שינוי כיוון בלבד אינו מספיק. מפתחים רבים נתקלים בממשק שבור: אייקונים הפונים לכיוון הלא נכון, ריווח לא מיושר וטקסט שמתערבב. אנחנו צוות עם ניסיון של 5+ שנים בפריסת RTL, שהתאימנו למעלה מ-50 פרויקטים לשפות RTL. שירות פריסת ה-RTL שלנו מבטיח שהאתר שלך יעבוד בצורה מושלמת בערבית, עברית ופרסית. אנו מספקים התאמת אתר מלאה ל-RTL: מביקורת ועד השקה. המחיר מתחיל ב-$500 לביקורת בסיסית ו-$1500 להתאמה מלאה. צור קשר — נעריך את הפרויקט שלך ונציע פתרון עם אחריות תאימות.
RTL (מימין לשמאל) — תמיכה בשפות הנכתבות מימין לשמאל: ערבית, עברית, פרסית (פארסי), אורדו. פריסת RTL היא לא רק direction: rtl; היא עיבוד שיטתי של כל מאפייני ה-CSS הכיווניים ורכיבי הממשק. בלעדיה, אתר בערבית נראה זר ומאבד את אמון המשתמשים.
הקדמה והתקנה בסיסית
התקנת RTL בסיסית
- הוסף
<html dir="rtl" lang="ar">ו-[dir="rtl"] { direction: rtl; unicode-bidi: embed; }לאלמנטleft. - הגדר CSS בסיסי:
<html dir="rtl" lang="ar"> - בדוק עם Chrome DevTools על ידי החלפת
right.
טכניקות CSS ל-RTL
למה מאפייני CSS לוגיים הם חובה ל-RTL
במקום מאפיינים פיזיים (margin-left, margin-left, margin-inline-start), מאפיינים לוגיים מתאימים את עצמם אוטומטית ל-dir. זה מבטל חוקים כפולים ומקטין את גודל הקוד. השווה:
| פיזי | לוגי |
|---|---|
margin-right |
margin-inline-end |
padding-left |
padding-inline-start |
border-left |
border-inline-start |
left: 0 |
inset-inline-start: 0 |
text-align: left |
text-align: start |
float: left |
float: inline-start |
.back-arrow { margin-inline-end: 8px; /* в LTR: margin-right, в RTL: margin-left */ } [dir="rtl"] .directional-icon { transform: scaleX(-1); } |
flex-direction: row |
בפועל, זה אומר שכפתור "חזור" עם חץ מציג ← ב-LTR ו-→ ב-RTL ללא צורך בעקיפות נוספות. מאפיינים לוגיים הם הבסיס לפריסת RTL מודרנית. למידע נוסף ראה תיעוד MDN.
דוגמה:
[dir="rtl"] { direction: rtl; unicode-bidi: embed; } אייקונים ותמונות
אייקונים כיווניים (חצים, אחורה/קדימה) חייבים להיות משוקפים ל-RTL. אייקונים לא כיווניים (לב, כוכב, סימון) — לא משוקפים. אייקונים עם טקסט (לוגואים) — לא משוקפים. קל לשכוח את הכלל הזה, אבל הוא קריטי לחוויית משתמש.
Flexbox ו-Grid ב-RTL
margin-left מתהפך אוטומטית ב-RTL. אבל margin-right / .nav-item + .nav-item { margin-left: 16px; } מפורשים לא משתנים — יש להחליף אותם בלוגיים. לדוגמה, במקום margin-inline-start: 16px השתמש ב-unicode-bidi: isolate. זה מפחית שגיאות ב-40% לפי הנתונים שלנו.
גופנים לשפות RTL
טקסט ערבי דורש גופנים מיוחדים: Noto Sans Arabic, Tajawal, Cairo, IBM Plex Sans Arabic. מספרים בהקשר ערבי עשויים להופיע כספרות ערביות מזרחיות (٠١٢٣٤٥٦٧٨٩) או מערביות בהתאם ללוקל. בחירת הגופן משפיעה על קריאות ועל Core Web Vitals. אנו ממליצים על Noto Sans Arabic — הוא מכסה את רוב השפות ומותאם לאינטרנט.
טקסט דו-כיווני (BiDi)
דף עשוי להכיל שני כיוונים (ערבית + אנגלית). מאפיין ה-CSS .ltr-content { direction: ltr; unicode-bidi: isolate; } מבודד בלוקים:
.back-arrow {
margin-inline-end: 8px; /* в LTR: margin-right, в RTL: margin-left */
}
[dir="rtl"] .directional-icon {
transform: scaleX(-1);
}לאלמנטים מוטבעים בכיוון ההפוך, השתמש בתג <bdi>. זה מונע בלבול בסדר הטקסט ומציג נכון מחרוזות מעורבות. עוד על BiDi.
בדיקות ושיטות עבודה מומלצות
איך לבדוק פריסת RTL
כלי בדיקה מהיר: Chrome DevTools → Elements → הוסף dir="rtl" ל-<html>. או התקן את תוסף RTL Toggler. שימוש ב-Playwright:
.ltr-content { direction: ltr; unicode-bidi: isolate; } השוואת גישות: מאפיינים לוגיים מול פיזיים
| מאפיין | מאפיינים לוגיים | מאפיינים פיזיים |
|---|---|---|
| זמן התאמה | 2–3 ימים | 4–5 ימים |
| שיעור שגיאות | 5–10% | 30–50% |
| תחזוקה | גבוהה | נמוכה |
שימוש במאפיינים לוגיים מהיר ב-30% ומפחית באגים פי 3 בהשוואה למאפיינים פיזיים. הניסיון שלנו מראה שגישה זו מקצרת את זמן הפיתוח ב-30% ומפחיתה באגים פי 3, עם שיעור שביעות רצון של 95% מלקוחות.
השירותים שלנו ומקרה בוחן
מקרה הבוחן שלנו: חנות מקוונת עם 50 עמודים
לקוח מאיחוד האמירויות ביקש מאיתנו להתאים את החנות שלו לערבית. ערכנו ביקורת, זיהינו 120 מקומות עם מאפיינים פיזיים, כתבנו מחדש את ה-CSS למאפיינים לוגיים, שיקפנו 80 אייקונים והתאמנו גופנים. תוצאה: האתר מוצג נכון בכל המכשירים, LCP השתפר ב-15%, והלקוח ראה עלייה של 22% בהמרות לאחר ההשקה. הלקוח ציין שתמיכת RTL כבר לא דרשה תיקונים מתמידים.
מה כלול
- ביקורת האתר הנוכחי: זיהוי מאפיינים פיזיים, בעיות אייקונים, גופנים ו-BiDi.
- כתיבת CSS מחדש למאפיינים לוגיים עם אחריות תאימות לאחור.
- שיקוף אייקונים ותמונות כיווניים.
- הגדרת גופנים ולוקל למספרים.
- בדיקות אוטומטיות (Playwright) לתצוגת RTL תקינה.
- תיעוד תמיכת RTL למפתחים שלך.
לוח זמנים ועלות
הוספת RTL לאתר LTR קיים — 2–5 ימים (תלוי בהיקף מאפייני ה-CSS הפיזיים). פיתוח מאפס עם RTL באמצעות מאפיינים לוגיים — ללא זמן נוסף אם מקפידים על שיטות עבודה מומלצות. העלות הסופית מחושבת באופן אישי לאחר ביקורת, עם תמחור טיפוסי של $500 עד $1500. הזמן התאמת RTL — אנו מבטיחים שהאתר שלך יוצג נכון בכל המכשירים והדפדפנים.
טעויות נפוצות בפריסת RTL:
- שימוש ב-
test('RTL layout', async ({ page }) => { await page.goto('/ar'); await expect(page.locator('html')).toHaveAttribute('dir', 'rtl'); // Проверяем позиционирование ключевых элементов });/margin-rightבמקוםmargin-inline-* - אי שיקוף אייקונים כיווניים
- חוסר ב-
unicode-bidi: isolateלטקסט מעורב - בחירת גופן שאינו תומך בגליפים ערביים
- התעלמות ממספרים: ערביים מזרחיים מול מערביים
צור קשר — קבל ייעוץ והערכה ראשונית תוך יום אחד. למהנדסים שלנו יש ניסיון של 5+ שנים והסמכות בתקני אינטרנט.