text-transform
The text-transform CSS property specifies how to capitalize an element’s text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.
Try it
The text-transform property takes into account language-specific case mapping rules such as the following:
- In Turkic languages, like Turkish ( tr ), Azerbaijani ( az ), Crimean Tatar ( crh ), Volga Tatar ( tt ), and Bashkir ( ba ), there are two kinds of i , with and without the dot, and two case pairings: i / İ and ı / I .
- In German ( de ), the ß becomes SS in uppercase.
- In Dutch ( nl ), the ij digraph becomes IJ , even with text-transform: capitalize , which only puts the first letter of a word in uppercase.
- In Greek ( el ), vowels lose their accent when the whole word is in uppercase ( ά / Α ), except for the disjunctive eta ( ή / Ή ). Also, diphthongs with an accent on the first vowel lose the accent and gain a diaeresis on the second vowel ( άι / ΑΪ ).
- In Greek ( el ), the lowercase sigma character has two forms: σ and ς . ς is used only when sigma terminates a word. When applying text-transform: lowercase to an uppercase sigma ( Σ ), the browser needs to choose the right lowercase form based on context.
- in Irish ( ga ), certain prefixed letters remain in lowercase when the base initial is capitalized, so for example text-transform: uppercase will change ar aon tslí to AR AON tSLÍ and not, as one might expect, AR AON TSLÍ (Firefox only). In some cases, a hyphen is also removed upon uppercasing: an t-uisce transforms to AN tUISCE (and the hyphen is correctly reinserted by text-transform: lowercase ).
The language is defined by the lang HTML attribute or the xml:lang XML attribute.
Note: Support for language-specific cases varies between browsers, so check the browser compatibility table.
Syntax
Is a keyword that converts the first letter of each word to uppercase. Other characters remain unchanged (they retain their original case as written in the element’s text). A letter is defined as a character that is part of Unicode’s Letter or Number general categories Experimental ; thus, any punctuation marks or symbols at the beginning of a word are ignored.
Note: Authors should not expect capitalize to follow language-specific title casing conventions (such as skipping articles in English).
Note: The capitalize keyword was under-specified in CSS 1 and CSS 2.1. This resulted in differences between browsers in the way the first letter was calculated (Firefox considered — and _ as letters, but other browsers did not. Both Webkit and Gecko incorrectly considered letter-based symbols like ⓐ to be real letters.) By precisely defining the correct behavior, CSS Text Level 3 cleans this mess up. The capitalize line in the browser compatibility table contains the version the different engines started to support this now precisely-defined behavior.
Is a keyword that converts all characters to uppercase.
Is a keyword that converts all characters to lowercase.
Is a keyword that prevents the case of all characters from being changed.
Is a keyword that forces the writing of a character — mainly ideograms and Latin scripts — inside a square, allowing them to be aligned in the usual East Asian scripts (like Chinese or Japanese).
Generally used for <ruby> annotation text, the keyword converts all small Kana characters to the equivalent full-size Kana, to compensate for legibility issues at the small font sizes typically used in ruby.
Accessibility concerns
Large sections of text set with a text-transform value of uppercase may be difficult for people with cognitive concerns such as Dyslexia to read.
Text-transform в CSS
Привет! В этой статье мы продолжим говорить об изменениях шрифтов с помощью CSS, а именно поговорим о том, как работает свойство text-transform.
За что отвечает text-transform
Можно заметить, что часто заголовки пишутся прописными буквами. А в английском языке в названиях (например, книг, сериалов и пр.) первые буквы всех слов прописные:
- General Electric
- Game of Thrones
- Microsoft Office
Или, например, у Вас может возникнуть необходимость отобразить часть текста прописными буквами, а часть большими буквами.
Для примера возьмем параграф из Википедии:
Слово компьютер является производным от английских слов to compute , computer , которые переводятся как «вычислять», «вычислитель» (английское слово, в свою очередь, происходит от латинского computāre — «вычислять»). ПЕРВОНАЧАЛЬНО В АНГЛИЙСКОМ ЯЗЫКЕ ЭТО СЛОВО ОЗНАЧАЛО ЧЕЛОВЕКА, ПРОИЗВОДЯЩЕГО АРИФМЕТИЧЕСКИЕ ВЫЧИСЛЕНИЯ С ПРИВЛЕЧЕНИЕМ ИЛИ БЕЗ ПРИВЛЕЧЕНИЯ МЕХАНИЧЕСКИХ УСТРОЙСТВ. В дальнейшем его значение было перенесено на сами машины, однако современные компьютеры выполняют множество задач, не связанных напрямую с математикой.
Именно для того, чтобы поменять регистр текста (из прописных в заглавные, из заглавных в прописные) и используется свойство text-transform.
У text-transform есть 5 значений:
- text-tranform: capitalize (Первая Буква Каждого Слова Будет Большой)
- text-tranform: lowercase (все буквы будут маленькими)
- text-transform: uppercase (ВСЕ БУКВЫ БУДУТ БОЛЬШИМИ)
- text-transform: none (отменяет предыдущие форматирование)
- text-tranform: inherit (наследует форматирование родителя)
Рассмотрим как это работает на практике. Представим, что у нас есть следующая HTML-страница:
CSS свойство text-transform
Свойство text-transform используется для отображения всего текста в верхнем регистре (заглавные буквы) или в нижнем регистре (строчные буквы). Или же каждое слово может начинаться заглавной буквой.
Свойство text-transform подчеркивает правила регистра, отражающие специфику данного языка.
| Значение по умолчанию | none |
| Применяется | Ко всем элементам, а также к ::first-letter и ::first-line. |
| Наследуется | Да |
| Анимируемое | Нет |
| Версия | CSS1 |
| DOM синтаксис | object.style.textTransform = «capitalize»; |
Синтаксис
Пример
Пример, где для первого предложения установлено значение «capitalize», а для второго «lowercase»:
Прописные и строчные буквы в CSS: свойство text-transform
Если по какой-либо причине вам необходимо изменить регистр букв в тексте веб-страницы, на помощь придет свойство CSS text-transform. Какие значения можно устанавливать для данного свойства, смотрите в таблице ниже.
| Значение | Что делает |
|---|---|
| uppercase | Делает заглавными (прописными) все буквы в тексте |
| lowercase | Делает строчными все буквы в тексте |
| capitalize | Делает заглавной первую букву каждого слова в тексте |
| none | Не делает изменений |
| inherit | Наследует значение родителя |
Пример записи стиля:
Используйте значение uppercase , если вам нужно сделать все буквы большими в заголовке или абзаце текста, словно текст набран в режиме Caps Lock. В случае, когда вам требуется убрать все заглавные буквы, оставив только строчные, воспользуйтесь значением lowercase . Значение capitalize может пригодиться, к примеру, в веб-форме для поля «ФИО», чтобы каждое новое слово автоматически начиналось с прописной буквы.
Обратите внимание: применение text-transform в CSS никак не влияет на исходное содержимое веб-страницы. Регистр букв изменяется лишь во время отображения страницы в окне браузера, а сам текст HTML-документа остается неизменным.
Примеры отображения стилей можно увидеть на скриншоте:
Скриншот: использование свойства text-transform
Далее в учебнике: подчеркивание и зачеркивание текста с помощью свойства CSS text-decoration.