Υποστήριξη RTL
1) Αρχές
1. Το RTL δεν είναι μετάφραση κειμένου, αλλά αντικατοπτρίζει τη σκέψη. Άξονες, σειρά ανάγνωσης, σειρά εστίασης, χειρονομίες και αλλαγή πλοήγησης.
2. Λογικές ιδιότητες CSS αντί αριστερά/δεξιά. Πηγαίνετε στο 'περιθώριο-inline-start', 'inset-inline-end', 'border-start-radius', κλπ.
3. Σε παγκόσμιο επίπεδο ενεργοποιήστε την κατεύθυνση, απομονώστε τοπικά τα θραύσματα LTR. Αριθμοί, URL, κωδικοί, ηλεκτρονικό ταχυδρομείο και IBAN διαβάζονται πάντα από αριστερά προς τα δεξιά.
4. Καθρέφτης τι εξαρτάται από την κατεύθυνση, δεν σημαίνει. «Αναπαραγωγή», «↗», «↙» και εικονίδια ρολογιού/διεργασίας δεν μπορούν να αντικατοπτρίζουν.
5. Δοκιμή ψευδο-RTL. Συμπεριλάβετε 'dir =' rt '/' direction: rt and pseudo translations before exit.
2) Κατεύθυνση: 'dir' και ιδιότητες boolean
Σε παγκόσμιο επίπεδο σχετικά με το έγγραφο/ρίζα: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 και μικτού κειμένου
Η ανάμειξη των αραβικών/εβραϊκών με τα λατινικά/αριθμούς σπάει τη σειρά χαρακτήρων. Χρήση απομόνωσης BiDi:- Ετικέτες: '' (κατεύθυνση απομονωθέντων στελεχών), ' '(παράκαμψη δυνάμεων).
- '\u2066 'LRI/'\u2067' RLI - έναρξη απομόνωσης LTR/RTL, '\u2069 'PDI - τέλος,
- "\u200E 'LRM/'\u200F' RLM - μάρκες ενός byte για σύντομα ένθετα.
html
<span dir="rtl">
سحب <bdi dir="ltr">IBAN AE070331234567890123456</bdi> بمبلغ
<bdi dir="ltr">2,000. 00 UAH</bdi>
</span>4) Πλοήγηση, ιεραρχία και διατάξεις
Ψίχουλα: σειρά κατόπτρων: "الصفحة الرئيسية ‹ الرهان "التأكيد"
Panels/μενού: κύρια navbar - στα δεξιά· «πίσω» σημεία προς τα αριστερά (στην αρχή της γραμμής RTL).
Κάρτες/κατάλογοι: ευθυγράμμιση των κεφαλίδων με το inline-start. εικονίδια κατάστασης - έως inline-end.
Καρουσέλ και swips: κύλιση προς inline-start (σε RTL - στα δεξιά). Οι δείκτες σελίδων αντικατοπτρίζονται επίσης.
Pagination: το βέλος "nex πηγαίνει στο inline-start," previous "- στο inline-end.
5) Εικονίδια και εικόνες
Κατοπτρικά κατευθυνόμενα εικονίδια: βέλη, «εμπρός/πίσω», playhead, «επέκταση/κατάρρευση».
Μη αντικατοπτρίζετε: εικονίδια κειμένου, γραφήματα, ώρες (αν υπάρχει βέλος πραγματικού χρόνου), λογότυπα μάρκας.
css
.rtl-mirror { transform: scaleX(-1); transform-origin: center; }
html:dir(rtl). icon--arrow { transform: scaleX(-1); }Για SVG: χρησιμοποιήστε 'transform-box: view-box?' για να αποφευχθεί η «επιπλέουσα».
Αποφυγή κειμένου μέσα σε εικόνες → εντοπισμός σε ξεχωριστά στρώματα.
6) Έντυπα και εισροές
Ευθυγράμμιση περιεχομένου: ευθυγράμμιση κειμένου: εκκίνηση. "πεδία κειμένου, αριθμητικά/ποσά/URL/e-mail - LTR.
Χαρακτηριστικά γνωρίσματα: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.
sliders: σε RTL, τουλάχιστον στη δεξιά άκρη, το πολύ στα αριστερά (ή δείχνουν μια κλίμακα χωρίς αντιστροφή και αριθμούς LTR).
7) Αριθμοί, ημερομηνίες, νομίσματα
Εξ ορισμού, οι αραβικοί τόποι χρησιμοποιούν αραβικές-ινδικές σφαίρες (٠١٢٣٤٥٦٧٨٩). Λύση - Επιχειρηματική πολιτική:- Στον χρηματοπιστωτικό τομέα, οι λατινικοί αριθμοί (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. TimeFormat '), κατευθυνόμενοι οριοθέτες, και τοπικές συντομογραφίες ημέρας/μήνα.
8) Τυπογραφία και αναγνωσιμότητα
Γραμματοσειρές με καλά αραβικά/εβραϊκά γραφήματα και συνδέσμους (αραβική διαμόρφωση).
Απόσταση γραμμής 1. 4–1. 6; να αποφεύγεται η στενή παρακολούθηση.
Για τα αραβικά, η κασίντα (επιμήκυνση εγκεφαλικών επεισοδίων) επιτρέπεται όταν ευθυγραμμίζεται σε πλάτος - ενεργοποιήστε προσεκτικά ('text-wause: inter-word? '/υποστήριξη κινητήρα).
Απαγορεύει τα λατινικά πλάγια μέσα στην αραβική γραμμή (χαλάει τον κάθετο ρυθμό).
9) Γραφήματα, κλίμακες και πίνακες
Οι άξονες Χ κινούνται από τα δεξιά προς τα αριστερά. ο θρύλος ευθυγραμμίζεται με το inline-end.
Στήλες πίνακα: «πρωτογενής» στήλη (όνομα/παιχνίδι) - δεξιά· οι αριθμοί/ποσά μπορούν να παραμείνουν LTR και να ευθυγραμμιστούν με το inline-end.
html
<bdi dir="ltr">+12. 5%</bdi>10) αναγνώστες A11y και οθόνης
Βεβαιωθείτε ότι το 'lang = «ar «'/' lang =» he» 'είναι εκτεθειμένο: ο κινητήρας TTS θα επιλέξει τη σωστή φωνητική δράση.
Ηχητικές δυναμικές αλλαγές κατεύθυνσης προσεκτικά - μην αλλάζετε «dir» σε θραύσματα χωρίς λόγο.
Ζωντανές ενημερώσεις ('aria-live = «ευγενικό») - κείμενο χωρίς οδηγίες ανάμειξης.
Τα εικονίδια δεν μεταδίδουν νόημα χωρίς ετικέτες κειμένου. χρήση του «σήματος aria».
11) Οι ιδιαιτερότητες του iGaming
11. 1 Τοκομερίδιο στοιχήματος (betslip)
Εντολή πεδίου: ποσό → λόγος → δυνητικού κέρδους· δεξιές υπογραφές, αριθμοί/παράγοντες LTR.
Επικαιροποίηση των συντελεστών με ήπιο τρόπο. τα βέλη πάνω/κάτω δεν χρειάζεται να αντικατοπτρίζονται (η έννοια της κατεύθυνσης των τιμών είναι καθολική).
11. 2 Αγώνες/Αγορές
Ευθυγράμμιση της λίστας των πρωταθλημάτων/εκδηλώσεων με την inline-start (σε RTL - στα δεξιά).
Χρονοδιακόπτες και μετρητές - LTR 'dir = «ltr»' με επιτραπέζια ψηφία ('font-variant-numeric: tabular-nums; ').
11. 3 Πληρωμές/ACC
Τα πεδία IBAN/BIC/τηλεφώνου είναι πάντα LTR.
Επωνυμίες/διεύθυνση τράπεζας - RTL.
Σφάλματα/επικυρωτές δείχνουν δείκτες στα δεξιά.
11. 4 Τουρνουά/leaderboards
Στήλες: θέση, ψευδώνυμο, γυαλί - θέση δεξιά. ευθυγράμμιση των γυαλιών με το εσωτερικό άκρο (ψηφία LTR).
12) Παραγωγή και δοκιμές
Ψευδο- RTL στην παρθένα:css html. debug-rtl { direction: rtl; }css html:dir(rtl). icon-dir { transform: scaleX(-1); }- Στιγμιότυπα διάταξης στο 'dir = rtl'.
- Ελέγχεται εάν λείπει η λέξη «αριστερά/δεξιά» στο CSS (lint).
- : tabbing order, carousel swips, slider συμπεριφορά.
- Οπτικές δοκιμές με αραβικό κείμενο + ένθετα LTR (e-mail, άθροισμα).
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) Snippets
Για να αλλάξετε κατεύθυνση στην εφαρμογή (Αντιδράστε):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»' → «broked» cart and order.
Αντικατοπτρίζοντας λογότυπα/διαγράμματα/ώρες.
Το ίδιο σύνολο εικονιδίων πάντα καθρεφτίζει - χωρίς εξαίρεση στο νόημα.
Τα καρουσέλ, τα φυλλάδια και οι σελίδες δεν είναι ανάποδα.
Μικτές χορδές χωρίς απομόνωση BiDi → χαρακτήρες «χορού».
16) Μετρήσεις
Κάλυψη RTL: το ποσοστό των οθονών που έχουν υποβληθεί σε επανεξέταση RTL.
Ελαττώματα/απελευθέρωση BiDi: αριθμός σφαλμάτων μικτού κειμένου.
Χρόνος προεξοχής (LTR έναντι RTL): δεν πρέπει να διαφέρει> 5-10%.
Σφάλμα εισόδου σε μορφές αριθμού - ποσοστό γεγονότων με εσφαλμένη φροντίδα/μάσκα.
CLS/perf: καμία διάταξη δεν πηδά όταν «dir» διακόπτες.
17) Κατάλογος ελέγχου QA
Διεύθυνση και διάταξη
- '' για τους τόπους RTL, ': εφαρμόζονται τα στυλ dir (rtl)'.
- Boolean ιδιότητες αντί του 'left/δεξιά'.
- Navigation/bredkramby/carousels/pagination zerkalitsya σωστά.
Κείμενο και BiDi
- Αριθμοί/νομίσματα/URL/e-mail - 'dir = «ltr»' ή ''.
- Δεν υπάρχουν «ανεστραμμένοι» χαρακτήρες σε μεικτές χορδές.
- Τοπικές ημερομηνίες/νομίσματα μέσω 'Intl. '.
Έντυπα
- Ορθές ετικέτες. κλικ σε περιοχές ≥ 44 × 44 px.
- Τηλέφωνο/IBAN/ποσότητα - LTR cart, σωστές μάσκες.
- Οι ολισθητήρες/τα χαμηλά/υψηλά επίπεδα συμπεριφέρονται όπως αναμενόταν.
Εικονίδια/Εικόνες
- Μόνο οι κατευθύνσεις αντανακλώνται. πληρούνται οι εξαιρέσεις.
- Δεν υπάρχει κείμενο σε εικόνες χωρίς τοπικές εκδόσεις.
А11у/Performance
- «lang» εκτεθειμένη, Ο SR διαβάζει σωστά.
- Καμία περιττή επανάληψη όταν αλλάζει «dir».
- Οι δακτύλιοι αντίθεσης/εστίασης αντιστοιχούν σε ΑΑ.
18) Τεκμηρίωση στο σύστημα σχεδιασμού
Τμήμα κατευθύνσεων & BiDi: αντικατοπτρίζοντας την πολιτική, κατάλογος εξαιρέσεων για εικονίδια.
Ένα σύνολο από μάρκες RTL και μια επένδυση στυλ ('αριστερή/δεξιά' απαγόρευση).
Do/Don 't Gallery: καρουσέλ, φρυγανιές, μορφές αριθμών, ολισθητήρες, γραφήματα.
Pseudo-RTL scripts and review checklists.
Σύντομη Περίληψη
Σωστή υποστήριξη RTL είναι λογικές ιδιότητες CSS, συνειδητή αντανάκλαση, και αυστηρή απομόνωση BiDi. Αριθμοί απομονώσεως/URL σε LTR, εικονίδια κατοπτρικής πλοήγησης και κατεύθυνσης, διατηρούν τα σχήματα προβλέψιμα και τα γραφήματα αναγνώσιμα. Έτσι η διεπαφή για Αραβικά, Εβραϊκά, Φάρσι ή Ούρντου θα είναι φυσική και γρήγορη - από ένα κουπόνι και έντυπα πληρωμής μέχρι τραπέζια τουρνουά και ζωντανούς αγώνες.