Η directionιδιότητα στο CSS ορίζει την κατεύθυνση της ροής περιεχομένου μέσα σε ένα στοιχείο επιπέδου μπλοκ. Αυτό ισχύει για στοιχεία κειμένου, inline και inline-block. Ορίζει επίσης την προεπιλεγμένη ευθυγράμμιση του κειμένου και την κατεύθυνση που ρέουν τα κελιά του πίνακα μέσα σε μια σειρά πίνακα.
.main-content ( direction: rtl; /* Right to Left */ )Οι έγκυρες τιμές είναι:
ltr- Αριστερά προς τα δεξιά, η προεπιλογήrtl- Δεξιά προς τα αριστεράinherit- κληρονομεί την τιμή του από το γονικό στοιχείο
Το κείμενο σε αυτήν τη σελίδα έχει οριστεί στην προεπιλεγμένη ltrκατεύθυνση. Η πιο συνηθισμένη περίπτωση χρήσης για ρύθμιση rtlείναι για ιστοσελίδες με εβραϊκό ή αραβικό κείμενο. Ακολουθεί ένα παράδειγμα αραβικού συνόλου στο rtl:
طهيس يس تآخت تهات يسوريتتآن فروم ريغت تو لآفت تهات يس وسآد
Υπάρχει επίσης ένα χαρακτηριστικό HTML για τον καθορισμό της κατεύθυνσης:
Τόσο η ιδιότητα CSS όσο και το χαρακτηριστικό HTML θα μετατοπίσουν την κατεύθυνση προς τα στοιχεία καθόδου Συνιστάται να χρησιμοποιείτε το χαρακτηριστικό HTML, καθώς αυτό θα λειτουργήσει ακόμη και αν το CSS αποτύχει ή δεν επηρεάζει τη σελίδα για οποιονδήποτε λόγο.
Υπάρχει επίσης μια συγκεκριμένη ετικέτα HTML που μπορεί να χρησιμοποιηθεί για την αλλαγή της κατεύθυνσης του κειμένου: το στοιχείο διπλής κατεύθυνσης παράκαμψης. Αυτό υπάρχει, επομένως υπάρχει ένα στοιχείο χωρίς σημασιολογία για χρήση μόνο για το σκοπό αυτό. Για παράδειγμα:
This text will go left to right. This text will go right to left.Για να τα συνδυάσετε όλα αυτά με CSS…
*(dir="ltr") ( direction: ltr; unicode-bidi: embed; ) *(dir="rtl") ( direction: rtl; unicode-bidi: embed; ) bdo(dir="ltr") ( direction: ltr; unicode-bidi: bidi-override; ) bdo(dir="rtl") ( direction: rtl; unicode-bidi: bidi-override; )"Bidi" = "αμφίδρομη"
Κατά τη δημιουργία διατάξεων σε έναν κόσμο προ-πλέγματος pre-flexbox, οι άνθρωποι συχνά επέλεξαν μεταξύ πλωτών και ενσωματωμένων μπλοκ για να δημιουργήσουν στήλες. Ένα πλεονέκτημα του inline-block, εκτός από την αφαίρεση της ανάγκης να καθαριστεί το float, είναι ότι η αλλαγή της ιδιότητας κατεύθυνσης αντιστρέφει επίσης τη διάταξη. Αυτό δεν ισχύει για floats, το οποίο θα πρέπει να γίνει επαναφορά εάν μια ιστοσελίδα υποστηρίζει πολλές γλώσσες και η κατεύθυνση της γλώσσας αλλάξει από ltr σε rtl ή το αντίστροφο.
Εάν πρέπει να αλλάξετε την κατεύθυνση ενός ενσωματωμένου στοιχείου (σε σχέση με το στοιχείο του γονικού επιπέδου μπλοκ), είτε θα πρέπει να χρησιμοποιήσετε το στοιχείο είτε να βεβαιωθείτε ότι το ενσωματωμένο στοιχείο ορίζει σωστά την ιδιότητα unicode-bidi:
Some regular text reverse direction text text reverse directionspan(dir) ( unicode-bidi: bidi-override; )Υποστήριξη προγράμματος περιήγησης
| Χρώμιο | Σαφάρι | Firefox | ΛΥΡΙΚΗ ΣΚΗΝΗ | ΙΕ | Android | iOS |
|---|---|---|---|---|---|---|
| 2.0+ | 1.3+ | Οποιος | 9.2+ | 5.5+ | Οποιος | 3.1+ |