Κείμενο-συνδυασμός-όρθιος - CSS-Κόλπα

Η text-combine-uprightιδιότητα CSS συνδυάζει χαρακτήρες στο διάστημα ενός χαρακτήρα. Οι προδιαγραφές ονομάζουν αυτή την "οριζόντια σε κατακόρυφη" σύνθεση που είναι ένας καλός τρόπος για να περιγράψετε την περίπτωση χρήσης: καταστάσεις όπου μπορεί να χρειαστείτε μερικούς χαρακτήρες σε κατακόρυφη λειτουργία γραφής για να εμφανίσετε οριζόντια στην ίδια γραμμή.

span ( text-combine-upright: all; )

Η τεχνική του οριζόντιου κειμένου σε κάθετο κείμενο είναι ιαπωνική που ονομάζεται tate-chū-yoko. Δείτε πώς φαίνεται:

Όταν εργάζεστε με μια κατακόρυφη λειτουργία γραφής από αριστερά προς τα δεξιά ( `writing-mode: vertical-rl;`), όπως η αριστερή πλευρά αυτής της `text-combine-upright`εικόνας , η ιδιότητα μπορεί να λάβει πολλούς χαρακτήρες και να τις εμφανίσει οριζόντια, ουσιαστικά χωρίζοντας το χώρο χαρακτήρων σε ίσα μέρη ανάλογα με τον αριθμό των χαρακτήρων που επιλέγονται. Σε αυτό το παράδειγμα, η δεξιά πλευρά δείχνει δύο χαρακτήρες που μοιράζονται τον ίδιο χώρο χαρακτήρων μέσα σε μια κατακόρυφη λειτουργία γραφής.

Σύνταξη

text-combine-upright: none | all | ( digits ? )

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

Αξίες

text-combine-upright αποδέχεται τις ακόλουθες τιμές:

none: Αυτή είναι η αρχική τιμή. Δεν εμφανίζονται χαρακτήρες οριζόντια σε κατακόρυφη λειτουργία γραφής.
all: Όλοι οι διαδοχικοί τυπογραφικοί χαρακτήρες στο κατακόρυφο πλαίσιο που εμφανίζονται εμφανίζονται οριζόντια στην ίδια γραμμή, καταλαμβάνοντας τον χώρο ενός μόνο χαρακτήρα στο κατακόρυφο πλαίσιο.
digits ?: Όλα τα διαδοχικά ψηφία ASCII στο κατακόρυφο κουτί που εμφανίζονται εμφανίζονται οριζόντια στην ίδια γραμμή, καταλαμβάνοντας τον χώρο ενός μόνο χαρακτήρα στο κατακόρυφο πλαίσιο, μέχρι τον καθορισμένο ακέραιο. Εάν δεν υπάρχει συγκεκριμένος ακέραιος αριθμός, τότε η προεπιλογή είναι 2 ψηφία. Οτιδήποτε κάτω από 2 και άνω 4 δεν είναι έγκυρο.

/* Keyword values */ text-combine-upright: none; text-combine-upright: all; /* Digits values */ text-combine-upright: digits; /* 2 digits */ text-combine-upright: digits 4; /* 4 digits */ /* Global values */ text-combine-upright: inherit; text-combine-upright: initial; text-combine-upright: unset;

Χρήση

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

平成20年4月16日に

date ( writing-mode: vertical-lr; )

Εντάξει, θέλουμε οι αριθμοί της ημερομηνίας να εμφανίζονται οριζόντια. Είναι λογικό να υποθέσουμε ότι η προσθήκη text-combine-uprightαπευθείας στο στοιχείο θα κάνει το κόλπο:

date ( text-combine-upright: digits 2; /* ? */ writing-mode: vertical-lr; )

Buuuuut, όχι τόσο πολύ. Κατά τη στιγμή της γραφής, πρέπει να εφαρμόσουμε την ιδιότητα στα ίδια τα ψηφία για να λειτουργήσει αυτό. Ένα εύρος θα κάνει.

平成20年4月16日に

date ( writing-mode: vertical-lr; ) span ( text-combine-upright: digits 2; )

Ορίστε!

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

Όπως μόλις είδαμε στο παράδειγμα, η υποστήριξη του προγράμματος περιήγησης είναι λίγο διασκορπισμένη αυτή τη στιγμή. Ενώ πολλά προγράμματα περιήγησης προσφέρουν τουλάχιστον μερική υποστήριξη text-combine-upright, υπάρχει πολύ λιγότερη υποστήριξη για την digitsτιμή από ό, τι υπάρχει για την allτιμή.

ΙΕ	Ακρη	Firefox	Χρώμιο	Σαφάρι	ΛΥΡΙΚΗ ΣΚΗΝΗ
11¹	12 + ¹	48 + ²	48+	5.1 + ³	35+

Android Chrome	Android Firefox	Πρόγραμμα περιήγησης Android	iOS Safari	Opera Mobile
86+	82 + ²	81+	5 + ³	59+

Πηγή: caniuse

Χρησιμοποιεί το μη τυπικό όνομα: -ms-text-combine-horizontal
Αναγνωρίζει την digitsτιμή πίσω από την layout.css.text-combine-upright-digits.enabledπειραματική σημαία, αλλά δεν εφαρμόζει ακόμη υποστήριξη διάταξης για το tate-chū-yoko
Χρησιμοποιεί το μη τυπικό όνομα: -webkit-text-combine