Προσανατολισμός κειμένου - CSS-Κόλπα

Η text-orientationιδιότητα στο CSS ευθυγραμμίζει το κείμενο σε μια γραμμή όταν λειτουργεί με κατακόρυφο writing-mode. Βασικά, περιστρέφεται είτε η γραμμή κατά 90 ° δεξιόστροφα για να ελέγξει τον τρόπο εμφάνισης των κατακόρυφων γλωσσών - όπως και ο τρόπος text-combine-uprightπεριστροφής ομάδων χαρακτήρων μέσα σε μια γραμμή κειμένου σε κάθετη δέσμη ενεργειών, αλλά για πλήρεις γραμμές κειμένου.

.element ( text-orientation: mixed; writing-mode: vertical-rl; )

Για τον χειρισμό αμφίδρομου κειμένου - ένα μπλοκ που περιέχει κείμενο από αριστερά προς δεξιά και από δεξιά προς αριστερά, για παράδειγμα - ελέγξτε την unicode-bidiιδιότητα. Συνδυάζεται με την directionιδιότητα για να παρακάμψει τον τρόπο με τον οποίο το πρόγραμμα περιήγησης αποφασίζει να εμφανίσει το κείμενο.

Σύνταξη

text-orientation: mixed | upright | sideways

Αρχικός: mixed
Ισχύει για: όλα τα στοιχεία εκτός από ομάδες γραμμών πίνακα, σειρές, ομάδες στηλών και στήλες
Κληρονομικό: ναι
Ποσοστά: n / a
Υπολογισμένη τιμή: καθορισμένη τιμή
Τύπος κινούμενης εικόνας: δεν κινείται

Αξίες

/* Keyword values */ text-orientation: mixed; /* default */ text-orientation: upright; text-orientation: sideways; text-orientation: sideways-right; /* Global values */ text-orientation: inherit; text-orientation: initial; /* mixed */ text-orientation: unset;

mixed: Προεπιλεγμένη τιμή. Οι χαρακτήρες σε ένα οριζόντιο σενάριο περιστρέφονται 90 ° δεξιόστροφα. Οι χαρακτήρες σε κάθετο σενάριο εμφανίζονται με τον φυσικό κατακόρυφο προσανατολισμό τους.
upright: Οι χαρακτήρες σε οριζόντιο σενάριο ρυθμίζονται στη φυσική τους οριζόντια όρθια θέση, συμπεριλαμβανομένων ορισμένων γλύφων. Έτσι, όπου μια κατακόρυφη λειτουργία γραφής μπορεί να περιστρέψει μια γραμμή κειμένου έτσι ώστε οι χαρακτήρες να είναι πλαγίως, αυτή η τιμή θα περιστρέψει τους ίδιους τους χαρακτήρες 90 ° στη φυσική τους θέση. Λάβετε υπόψη ότι αυτή η τιμή αναγκάζει την directionιδιότητα σε μια χρησιμοποιημένη τιμή ltr, που σημαίνει ότι όλοι οι χαρακτήρες αντιμετωπίζονται σαν να βρίσκονται σε λειτουργία γραφής από αριστερά προς τα δεξιά.
sideways: Όλο το κείμενο σε κατακόρυφη λειτουργία γραφής εμφανίζεται πλάγια, σαν να ήταν σε οριζόντια διάταξη, αλλά ολόκληρη η γραμμή περιστρέφεται 90 ° δεξιόστροφα.
sideways-right: Ορισμένα προγράμματα περιήγησης σέβονται αυτήν την τιμή ως ψευδώνυμο για την sidewaysτιμή που διατηρείται για συμβατότητα προς τα πίσω.

use-glyph-orientationκαταργήθηκε ως τιμή λέξης-κλειδιού τον Δεκέμβριο του 2015. Χρησιμοποιήθηκε σε στοιχεία SVG για τον καθορισμό ιδιοτήτων SVG glyph-orientation-verticalκαι οι glyph-orientation-horizontalοποίες έχουν πλέον καταργηθεί. glyph-orientation-verticalείναι τώρα ένα ψευδώνυμο για text-orientation.

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

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

Επιφάνεια εργασίας

Χρώμιο	Firefox	ΙΕ	Ακρη	Σαφάρι
48	41	Οχι	79	10.1 *

Κινητό / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	10.0-10.2

Προσδιορισμός

CSS Writing Modes Level 3 (Πρόχειρο του συντάκτη)

Περισσότερες πληροφορίες

Γιατί ο κάθετος προσανατολισμός κειμένου είναι ένας εφιάλτης για συμβατότητα μεταξύ προγραμμάτων περιήγησης; από τον Nikhil - Μια λεπτομερής εξήγηση text-orientationκαι writing-mode.
Εύκολη δημιουργία πλευρικού κειμένου χρησιμοποιώντας την ιδιότητα CSS "λειτουργίας γραφής" από τον Adi Purdila - Εξερευνήστε διαφορετικές προσεγγίσεις εκτός από τη χρήση text-orientation.
2 τρόποι δημιουργίας κάθετου κειμένου σε CSS από το WS Toh - Μια πιο άμεση σύγκριση μεταξύ προσεγγίσεων χρησιμοποιώντας writing-modeκαι text-orientation.
Περιστροφή κειμένου από τον Chris Coyier - Μια προσέγγιση σε κατακόρυφο κείμενο χρησιμοποιώντας transformαντί για writing-modeή text-orientation.