Τρόπος γραφής - CSS-Κόλπα

Η writing-modeιδιότητα αλλάζει την ευθυγράμμιση του κειμένου έτσι ώστε να μπορεί να διαβαστεί από πάνω προς τα κάτω ή από αριστερά προς τα δεξιά, ανάλογα με τη γλώσσα. Για παράδειγμα, ας υποθέσουμε ότι θέλουμε να προσθέσουμε κάποιο κείμενο που διαβάζεται από πάνω προς τα κάτω και από δεξιά προς τα αριστερά, όπως αυτό:

.vertical-rl ( writing-mode: vertical-rl; )

Δείτε τη λειτουργία γραφής της πένας: vertical-rl by CSS-Tricks (@ css-tricks) στο CodePen.

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

Δείτε το στυλό YWBWGA από CSS-Tricks (@ css-tricks) στο CodePen.

Αξίες

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

οριζόντια-tb

Αυτή είναι η προεπιλεγμένη τιμή της ιδιότητας: το κείμενο διαβάζεται από αριστερά προς τα δεξιά και από πάνω προς τα κάτω.

Δείτε τη λειτουργία γραφής Pen: horizontal-tb by CSS-Tricks (@ css-tricks) στο CodePen.

κάθετη-rl

Το κείμενο διαβάζεται από δεξιά προς τα αριστερά και από πάνω προς τα κάτω:

Δείτε τη λειτουργία γραφής της πένας: vertical-rl by CSS-Tricks (@ css-tricks) στο CodePen.

κάθετη-lr

Το κείμενο διαβάζεται από αριστερά προς τα δεξιά και από πάνω προς τα κάτω:

Δείτε τη λειτουργία γραφής της πένας: vertical-rl by CSS-Tricks (@ css-tricks) στο CodePen.

Σχετικοί σύνδεσμοι

Κάθετο κείμενο με τρόπους γραφής CSS3
Ο Ahmad Shadeed στη λειτουργία γραφής

Υποστήριξη προγράμματος περιήγησης

Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.