Μετασχηματισμός κειμένου - CSS-Κόλπα

Η text-transformιδιότητα στο CSS ελέγχει το κείμενο και τη χρήση κεφαλαίων.

.lowercase ( text-transform: lowercase; )

Τιμές μετασχηματισμού κειμένου

• lowercase κάνει όλα τα γράμματα στο επιλεγμένο κείμενο πεζά.
• uppercase κάνει όλα τα γράμματα στο επιλεγμένο κείμενο κεφαλαία.
• capitalize κεφαλαιοποιεί το πρώτο γράμμα κάθε λέξης στο επιλεγμένο κείμενο.
• none αφήνει το κείμενο και τη χρήση κεφαλαίων ακριβώς όπως είχε εισαχθεί.
• inherit δίνει στο κείμενο την υπόθεση και την κεφαλαιοποίηση του γονέα του.

Το demo που ακολουθεί δείχνει lowercase, uppercaseκαι capitalizeκατά τη χρήση. Ρίξτε μια ματιά στην καρτέλα HTML για να δείτε πώς αρχικά γράφτηκε το κείμενο και μετά επιστρέψτε στην καρτέλα αποτελεσμάτων για να το δείτε μετά την εφαρμογή του CSS.

Δείτε το στυλό 0f4293fce0d14aafc3818c950ab0ded3 του mariemosley (@mariemosley) στο CodePen.

Σημεία ενδιαφέροντος

capitalizeθα κεφαλαιοποιήσει λέξεις που εμφανίζονται μέσα σε μεμονωμένα ή διπλά εισαγωγικά και το πρώτο γράμμα μετά από παύλα. Δεν θα κεφαλαιώσει το πρώτο γράμμα μετά από έναν αριθμό, οπότε ημερομηνίες όπως "4 Φεβρουαρίου 2015" δεν θα μετατραπούν σε "4 Φεβρουαρίου 2015".

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

Το CSS δεν μπορεί να κάνει "case case", το στυλ κεφαλαιοποίησης που χρησιμοποιείται σε τίτλους βιβλίων, ταινιών, τραγουδιών και ποιημάτων, όπου τα άρθρα είναι πεζά (όπως στο "Raiders of the Lost Ark"). Ωστόσο, υπάρχουν λύσεις JavaScript για την περίπτωση τίτλου, συμπεριλαμβανομένου του David Gouch's toTitleCase ().

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

• μετατροπή κειμένου στο MDN
• μετασχηματισμός κειμένου στο W3C Spec
• Σημειώσεις σχετικά με την προσβασιμότητα κεφαλαίων κειμένων από το WebAIM

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

Χρώμιο	Σαφάρι	Firefox	ΛΥΡΙΚΗ ΣΚΗΝΗ	ΙΕ	Android	iOS
Οποιος	Οποιος	Οποιος	Οποιος	Οποιος	Οποιος	Οποιος

Ο Firefox υποστηρίζει συγκεκριμένους κανόνες χρήσης κεφαλαίων για τουρκικές γλώσσες, γερμανικά, ολλανδικά και ελληνικά που δεν υποστηρίζονται από άλλα προγράμματα περιήγησης. Ο Firefox είναι επίσης το μόνο πρόγραμμα περιήγησης που υποστηρίζει text-transform: full-width;, το οποίο μπορεί να συμβάλει στη βελτίωση της αναγνωσιμότητας του κειμένου που περιλαμβάνει ένα μείγμα σεναρίων λατινικής και ανατολικής Ασίας. Δείτε λεπτομέρειες στο MDN.