Σύγκριση διατάξεων RTL και LTR με στοίχιση κειμένου

Πρακτικός οδηγός

Βασικές αρχές RTL webdesign για Αραβικά, Περσικά & Εβραϊκά

Η υποστήριξη γραφών από δεξιά προς αριστερά (RTL) όπως τα Αραβικά, τα Περσικά και τα Εβραϊκά απαιτεί ειδικές τεχνικές σχεδιασμού ιστοσελίδων. Αυτός ο οδηγός εξηγεί τα βασικά: το χαρακτηριστικό dir, τους καθρεπτισμένους διατάξεις, τις λογικές ιδιότητες CSS, τον χειρισμό αριθμών και ενσωματωμένων λατινικών, καθώς και τη σωστή επιλογή γραμματοσειράς και τον καθρεπτισμό εικονιδίων. Στόχος είναι η δημιουργία μιας συνεπούς και φιλικής προς τον χρήστη εμπειρίας για γλώσσες RTL.

ar: Αραβική RTL γραφή
fa: Περσική διάταξη RTL
he: Εβραϊκό RTL κείμενο

Βασικό χαρακτηριστικό dir

Το χαρακτηριστικό dir με την τιμή 'rtl' αποτελεί τη βάση για κάθε σχεδιασμό ιστοσελίδων RTL. Συνήθως ορίζεται στην ετικέτα <html> ή <body> και επηρεάζει την στοίχιση κειμένου, την προεπιλεγμένη σειρά κελιών πίνακα και την κατεύθυνση ιδιοτήτων CSS όπως το 'text-align'. Χωρίς αυτό το χαρακτηριστικό, το περιεχόμενο παραμένει αριστερόστοιχο, κάτι που είναι αφύσικο για γλώσσες RTL. Επιπλέον, θα πρέπει να παρακάμπτετε το 'dir' σε επίπεδο δοχείου όταν υπάρχουν μικτές κατευθύνσεις. Η έλλειψη ή η λανθασμένη χρήση του χαρακτηριστικού dir οδηγεί σε δυσανάγνωστες διατάξεις και γι' αυτό θα πρέπει να δοθεί προτεραιότητα.

Κατοπτρική διάταξη και λογικές ιδιότητες CSS

Αντί για φυσικές ιδιότητες όπως 'left' και 'right', χρησιμοποιήστε λογικές ιδιότητες CSS όπως 'margin-inline-start' και 'padding-inline-end'. Αυτές προσαρμόζονται αυτόματα στην κατεύθυνση γραφής και αποφεύγουν τις χειροκίνητες παρακάμψεις. Μια κατοπτρική διάταξη σημαίνει ότι η γραμμή πλοήγησης βρίσκεται δεξιά και το περιεχόμενο ξεκινά αριστερά. Με λογικές τιμές όπως 'float: inline-start' ή 'text-align: start' το επιτυγχάνετε χωρίς ερωτήματα πολυμέσων. Σύγχρονες ιδιότητες CSS Grid και Flexbox όπως 'justify-content: flex-start' λειτουργούν σωστά ανάλογα με το χαρακτηριστικό dir. Δοκιμάζετε πάντα με πραγματικό περιεχόμενο, καθώς οι λογικές ιδιότητες δεν ερμηνεύονται το ίδιο από όλα τα προγράμματα περιήγησης.

Παράδειγμα λογικών ιδιοτήτων CSS με inline-start και end

Αριθμοί και ενσωματωμένα λατινικά

Σε κείμενα RTL, οι αριθμοί και τα ενσωματωμένα λατινικά γράμματα παραμένουν στοιχισμένα από αριστερά προς τα δεξιά. Αυτό δημιουργεί προκλήσεις, καθώς μπορούν να διαταράξουν την κατεύθυνση ανάγνωσης. Χρησιμοποιήστε το χαρακτηριστικό 'unicode-bidi' ή 'direction: ltr' για τέτοια στοιχεία ώστε να εξασφαλίσετε συνεπή απόδοση. Στις μορφές ημερομηνίας ή αριθμών, καλό είναι να προσαρμόσετε τη σειρά στην κουλτούρα RTL. Προσέξτε επίσης τη διάταξη φορμών, όπου τα πεδία εισαγωγής αριθμών θα πρέπει να παραμένουν στοιχισμένα αριστερά. Η προσεκτική διαχείριση αυτής της μικτής κατεύθυνσης αποτρέπει οπτικές ασυνέχειες και βελτιώνει την αναγνωσιμότητα.

Γραμματοσειρές και τυπογραφία

Η επιλογή γραμματοσειράς είναι κρίσιμη: Αραβικά, Περσικά και Εβραϊκά χρειάζονται γραμματοσειρές με κατάλληλη υποστήριξη γλυφών. Δημοφιλείς επιλογές είναι οι 'Noto Naskh Arabic', 'Vazir' για Περσικά και 'Noto Sans Hebrew'. Ορίστε εφεδρικές γραμματοσειρές, π.χ. 'font-family: 'Noto Naskh Arabic', 'Tahoma', sans-serif;'. Φροντίστε για επαρκή μεγέθη γραμματοσειράς και διάστιχα, καθώς οι γραμματοσειρές RTL είναι συχνά στενότερες ή πιο σύνθετες. Αποφύγετε πλάγια γραφή, καθώς δεν υπάρχει σε πολλές αραβικές γραφές. Δοκιμάστε την απόδοση σε διάφορες συσκευές για να βεβαιωθείτε ότι οι γραμματοσειρές φορτώνονται σωστά και είναι ευανάγνωστες.

Εικονίδια και κατοπτρισμός

Εικονίδια που υποδεικνύουν κατεύθυνση (π.χ. βέλη, σύμβολα εμπρός/πίσω) πρέπει να κατοπτρίζονται σε διατάξεις RTL. Αυτό επιτυγχάνεται με μετασχηματισμούς CSS όπως 'transform: scaleX(-1)' ή χρησιμοποιώντας σύνολα εικονιδίων που υποστηρίζουν αυτόματα RTL (π.χ. Font Awesome με χαρακτηριστικό 'dir'). Σύμβολα χωρίς αναφορά κατεύθυνσης (π.χ. σπίτι, ρυθμίσεις) παραμένουν αμετάβλητα. Βεβαιωθείτε ότι ο κατοπτρισμός δεν αλλοιώνει τη σημασιολογία. Δοκιμάστε όλα τα εικονίδια στην προβολή RTL, καθώς ακούσιοι κατοπτρισμοί μπορούν να επηρεάσουν την ευχρηστία.

Λίστα ελέγχου για είσοδο στην αγορά

Ορίστε dir='rtl' στο στοιχείο html.
Χρησιμοποιήστε λογικές ιδιότητες CSS αντί για φυσικές.
Χειριστείτε αριθμούς και μικτές κατευθύνσεις με το 'direction'.
Επιλέξτε γραμματοσειρές με εκτενή υποστήριξη γλυφών.
Αντιστρέψτε εικονίδια που σχετίζονται με κατεύθυνση χρησιμοποιώντας scaleX.
Δοκιμάστε τη διάταξη με πραγματικό περιεχόμενο σε όλες τις γλώσσες-στόχους.

Αντικατοπτρισμός εικονιδίων σε διάταξη RTL με βέλη

Συχνές ερωτήσεις

Γιατί το dir='rtl' από μόνο του δεν είναι αρκετό;

Το χαρακτηριστικό dir ορίζει τη βασική κατεύθυνση, αλλά ιδιότητες CSS όπως το 'margin-left' παραμένουν αριστερά. Χωρίς λογικές ιδιότητες, πρέπει να παρακάμψετε πολλές τιμές χειροκίνητα, κάτι που είναι επιρρεπές σε σφάλματα και μειώνει τη συντηρησιμότητα.

Πώς χειρίζομαι αριθμούς σε διατάξεις RTL;

Οι αριθμοί σε περιβάλλοντα RTL είναι από προεπιλογή LTR. Χρησιμοποιήστε 'unicode-bidi: embed' στο γονικό στοιχείο ή ορίστε 'direction: ltr' για περιοχές αριθμών, ώστε να διασφαλίσετε σωστή στοίχιση.

Πρέπει να αντικατοπτρίζονται όλα τα εικονίδια;

Όχι, μόνο εικονίδια με σιωπηρή κατεύθυνση, όπως βέλη, πρέπει να αντικατοπτρίζονται. Σύμβολα όπως ένα σπίτι ή ένα γρανάζι παραμένουν αμετάβλητα. Αντικατοπτρίστε αποκλειστικά εικονίδια που υποδηλώνουν κίνηση ή κατεύθυνση ανάγνωσης.

Έτοιμοι για αυτή την αγορά;

Εντοπίζουμε τον ιστότοπό σας γλωσσικά, τεχνικά και πολιτιστικά – με έλεγχο από φυσικούς ομιλητές και σταθερή τιμή. Ζητήστε μια προσφορά χωρίς υποχρέωση.

Ζητήστε μια μη δεσμευτική προσφορά