תמיכה ב ־ RTL
1) עקרונות
1. RTL אינו תרגום של טקסט, אלא שיקוף של חשיבה. גרזנים, סדר קריאה, סדר מיקוד, מחוות ושינוי ניווט.
2. מאפייני CSS לוגיים במקום שמאל/ימין. עבור ל "התחלה בשוליים", "inset-inline-end'," גבול-התחלה-התחלה-רדיוס ", וכו '.
3. באופן גלובלי להפעיל את הכיוון, לבודד מקטעי LTR באופן מקומי. מספרים, כתובות, קודים, דוא "ל ואיבאן תמיד נקראים משמאל לימין.
4. מראה מה תלוי בכיוון, לא משמעות. ”נגן”, ”↗”, ”↙” ואייקוני שעון/תהליך לא יכולים להיראות.
5. בדיקה פסאודו-RTL. כלול את "dir" = "rtl'/" כיוון": rtl 'and pseudo translations לפני היציאה.
2) כיוון: ”דיר” ותכונות בוליאניות
באופן גלובלי במסמך/שורש:html
<html lang="ar" dir="rtl"> … </html>css
.card { padding-inline: 16px; margin-inline: 12px; }
.sidebar { inset-inline-start: 0; }
.button { border-start-start-radius: 12px; border-end-end-radius: 12px; }css
:root:dir(rtl). breadcrumb { flex-direction: row-reverse; }
:root:dir(ltr). breadcrumb { flex-direction: row; }html
<p dir="auto">…</p>3) בידודי ובידוד טקסט מעורב
ערבוב ערבית/עברית עם לטינית/מספרים שובר את סדר התווים. השתמש בבידוד BiDi:- תגיות: ”” (מבודד כיוון), ”” (עוקף כוחות).
- '\u2066 'LRI/'\u2067' RLI - תחילת בידוד LTR/RTL, '\u2069 'PDI - סוף,
- '\u200E 'LRM/'\u200F' RLM - אסימונים חד-ביטיים לכניסות קצרות.
html
<span dir="rtl">
سحب <bdi dir="ltr">IBAN AE070331234567890123456</bdi> بمبلغ
<bdi dir="ltr">2,000. 00 UAH</bdi>
</span>4) ניווט, היררכיה ופריסות
פירורי לחם: סדר מראה: "על הפרק الرئيسية ‹ "official officly official official"
פאנלים/תפריטים: מוט נאבאר ראשי - מימין; ”גב” מצביע משמאל (לתחילת קו RTL).
קלפים/רשימות: ליישר כותרות להתחלה. סמלים סטטוטוריים - עד קצה קו.
קרוסלות וסוויפס: גלילה לכיוון התחלה (RTL - מימין). מדדי עמוד גם הם שיקוף.
החץ ”הבא” עובר להתחלה מקוונת, ”קודמת” אל פנים.
5) סמלים ותמונות
סמלים כיווני מראה: חיצים, ”קדימה/אחורה”, ”ראש משחק”, להרחיב/לקרוס.
אל תראה: סמלים של טקסט, גרפים, שעות (אם יש חץ בזמן אמת), לוגוס מותג.
css
.rtl-mirror { transform: scaleX(-1); transform-origin: center; }
html:dir(rtl). icon--arrow { transform: scaleX(-1); }עבור SVG: השתמש ב- transform-box: view-box; כדי להימנע מ ”לצוף”.
הימנעו מטקסט בתוך תמונות * מיקוד בשכבות נפרדות.
6) טפסים וקלט
יישור תוכן: יישור טקסט: התחל; שדות טקסט, מספרים/כמויות/כתובת/דואר אלקטרוני - סגן.
תכונות:html
<input type="email" dir="ltr" inputmode="email" autocomplete="email">
<input type="number" dir="ltr" inputmode="numeric" pattern="[0-9]">
<input type="tel" dir="ltr" inputmode="tel" autocomplete="tel">ממלא מקום/תווית הם מקומיים, אבל דאגות במספרים/קודים חייבות לעבור משמאל לימין.
מסכות: אל ”ליירט” בחומרה; תמיכה בהחדרה ובחירה.
רשימת/רדיו/תיבת צ 'ק: חתימות מימין לבקרות, אזורי לחיצה על 44 × 44 px.
ב-RTL, לפחות בקצה הימני, לכל היותר בצד שמאל (או להראות סולם ללא היפוך ומספרי LTR).
7) מספרים, תאריכים, מטבעות
כברירת מחדל, משתמשים באזור ערבי-אינדו-ספרתי (٠١٢٣٤٥٦٧٨٩). פתרון - מדיניות עסקית:- ב-UI פיננסי, מספרים לטיניים (0-9) מוצגים לעיתים קרובות יותר למען האינטרפרטציה, אבל הפורמט (רווחים/סימנים) הוא מקומי.
js new Intl. NumberFormat('ar', { style:'currency', currency:'AED' }). format(2000);
new Intl. DateTimeFormat('he-IL', { dateStyle:'medium', timeStyle:'short' }). format(new Date());זמן יחסי ('Intl. Time Format "), מחסלי כיוון, וקיצורי יום/חודש מקומיים.
8) טיפוגרפיה וקריאה
גופנים עם גרפמה טובה בערבית/עברית וליגטורות (עיצוב ערבי).
מרווח קו 1. 4–1. 6; הימנע ממעקב צר.
לערבית, קאשידה (משיכות הארכה) מותרת בעת יישור ברוחב - תדליק בזהירות ('טקסט-מצדיק: בין מילים; '/תמיכה במנוע).
איסור על איטלקים לטיניים בתוך הקו הערבי (מקלקל את המקצב האנכי).
9) גרפים, מאזניים ושולחנות
גרזני האיקס עוברים מימין לשמאל; האגדה מיושרת עם קו הסוף.
עמודות שולחן: ”עמודה ראשית” (שם/משחק) - נכון; מספרים/כמויות יכולים להישאר LTR ולהיות מיושרים באופן מקוון.
html
<bdi dir="ltr">+12. 5%</bdi>10) A11y וקוראי מסך
ודא ש-lang = "ar "/" lang =" he "נחשף: מנוע ה-TTS יבחר את פעולת הקול הנכונה.
שינויי צליל דינמיים בכיוון בזהירות - לא לעבור ”dir” על שברים שלא לצורך.
עדכונים חיים (aria-live = ”מנומס”) - טקסט ללא ערבוב כיוונים.
סמלים אינם מעבירים משמעות ללא תוויות טקסט; השתמש 'אריה-תווית'.
11) הפרטים של iGaming
11. קופון הימור 1 (betslip)
סדר שדה: יחס pall = roying; חתימות נכונות, מספרי LTR/גורמים.
עדכן את המקדמים בעדינות; אין צורך לשקף חיצים כלפי מעלה/מטה (משמעות הכיוון הוא אוניברסלי).
11. 2 התאמות/שווקים
יישר את רשימת הליגות/אירועים עם התחלה (ב-RTL - מימין).
טיימרים וספירה - LTR = "Ltr" עם ספרות שולחן ("font-variant-numeric: tabular-nums; ').
11. 3 תשלומים/ACC
שדות ה ־ IBAN/BIC/טלפון הם תמיד LTR.
שמות בנק/כתובת - RTL.
שגיאות/אימות מראות סמנים מימין.
11. 4 טורנירים/לוחות מובילים
עמודים: מיקום, כינוי, משקפיים - מיקום מימין; יישר את המשקפיים לקצה הקווי (ספרות LTR).
12) ייצור ובדיקה
פסאודו-RTL בבתולה:css html. debug-rtl { direction: rtl; }css html:dir(rtl). icon-dir { transform: scaleX(-1); }- תצלומי פריסה ב ”dir = rtl”.
- בודק אם ”שמאל/ימין” חסר ב ־ CSS (מוך).
- E2E: סדר לוח, קרוסלה מחליקה, התנהגות מחוון.
- בדיקות ויזואליות עם טקסט ערבי + הכנסת LTR (דואר אלקטרוני, סכום).
13) מערכת עיצוב אסימונים (דוגמה)
json
{
"direction": {
"supported": ["ltr", "rtl"],
"rtlLocales": ["ar", "he", "fa", "ur"]
},
"layout": {
"gap": { "sm": 8, "md": 12, "lg": 16 },
"useLogicalProps": true
},
"icons": {
"autoMirror": true,
"exclude": ["logo", "chart", "clock", "play"]
},
"forms": {
"numericDir": "ltr",
"minTap": 44
},
"a11y": { "contrastAA": true, "live": "polite" }
}14) קטעים
כדי להחליף את הכיוון ביישום (תגובה):tsx import { useEffect } from "react";
export function useDirection(locale: string) {
useEffect(() => {
const lang = locale. split("-")[0];
const isRTL = ["ar", "he", "fa", "ur"].includes(lang);
const html = document. documentElement;
html. setAttribute("dir", isRTL? "rtl": "ltr");
html. setAttribute("lang", locale);
}, [locale]);
}css
.breadcrumb { display:flex; gap:8px; }
html:dir(rtl). breadcrumb { flex-direction: row-reverse; }
.breadcrumb__sep { transform: scaleX(var(--dir,1)); }
html:dir(rtl). breadcrumb__sep { --dir: -1; }html
<span>الربح المحتمل: <bdi dir="ltr">2,000. 00 UAH</bdi></span>css html:dir(rtl) input[type="range"] { direction: rtl; }15) תרופות אנטי ־ פטריות
קשיח ”שמאל/ימין” בסגנונות השובר RTL.
הזנת מספרים/IBAN/URL ללא ”dir” = ”ltr” ough ”broken” cart and order.
מראה לוגואים/תרשימים/שעות.
אותו סט של סמלים תמיד מראות ללא יוצא מן הכלל במשמעות.
קרוסלות, עלונים ועובדי אלילים אינם הפוכים.
מחרוזות מעורבות ללא בידוד BiDi * תווים ”רוקדים”.
16) מדדים
כיסוי RTL: הפרופורציה של מסכים שעברו ביקורת RTL.
פגמים/שחרור BiDi: מספר באגי טקסט מעורבים.
זמן עופרת (LTR נגד RTL): לא צריך להיות שונה> 5-10%.
שגיאת קלט בטופסי מספר - אחוז האירועים עם מסכה/דארט שגויה.
אין פריסה קופצת כאשר 'dir' מתגים.
17) רשימת QA
כיוון ופריסה
[ ] <html dir = ”rtl”> עבור RTL locales; הסגנונות מיושמים.[ ] תכונות בוליאניות במקום שמאל/ימין.[ ] ניווט/bredkramby/carousels/pagination zerkalitsya נכון.טקסט ובידי
[ ] מספרים/מטבעות/URL/דואר אלקטרוני - dir = ”סגן” או ”<bdi>”.[ ] אין דמויות ”הפוכות” בחוטים מעורבים.[ ] תאריכים מקומיים/מטבעות דרך אינטל. '.צורות
[ תוויות ] ימין; אזורי לחיצה 44 × 44 px.[ ] טלפון/IBAN/כמות - LTR cart, מסכות נכונות.[ ] גולשים/יורדים/גבוהים להתנהג כצפוי.אייקונים/תמונות
[ ] רק כיוונים משוקפים; יוצאים מן הכלל נענים.[ ] אין טקסט בתמונות ללא גרסאות מקומיות.А11у/Performance
[ ] 'lang' חשוף; האב-אר קורא נכון.[ ] אין שרטוטים מחודשים מיותרים בעת שינוי ”dir”.[ ] טבעות ניגוד/מיקוד מתאימות לאלכוהוליסטים אנונימיים.18) תיעוד במערכת התכנון
כיוון וסעיף BiDI: מדיניות שיקוף, רשימת יוצאים מן הכלל עבור סמלים.
קבוצה של אסימונים RTL וציפוי סגנון (”שמאל/ימין”).
גלריה דו/אל: קרוסלות, ברדקרמבות, צורות מספרים, מחוונים, גרפים.
תסריטים פסאודו-RTL ורשימות ביקורת.
תקציר
תמיכה תקינה ב ־ RTL היא מאפייני CSS לוגיים, שיקוף מודע ובידוד קפדני של BiDI. בודד מספרים/כתובות ב ־ LTR, ניווט מראה וסמלי כיוון, שמור על צורות ניתנות לחיזוי וגרפים ניתנים לקריאה. אז הממשק לערבית, עברית, פרסית או אורדו יהיה טבעי ומהיר - מקופון הימור וטפסי תשלום לשולחנות טורניר ומשחקים חיים.