text transform uppercase что значит
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.
The text-transform property takes into account language-specific case mapping rules such as the following:
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 ; 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).
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 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
Синтаксис
Описание
Свойство text-transform (от англ. «text transform» ‒ «преобразование текста») управляет эффектами капитализации текста элемента.
| Применяется: | ко всем элементам; |
|---|---|
| Наследование: | присутствует; |
| Проценты: | Н/Д ; |
| Медиа : | визуальные. |
Примечание
Фактическое преобразование в каждом случае зависит от языка содержимого.
JavaScript
Поддержка браузерами
Спецификация
Значения
capitalize Преобразует первую букву каждого слова в верхний регистр; другие символы не изменяются.
full-width Переводит все символы в полноширинную форму. Если символ не имеет соответствующей полноширинной формы, он остаётся как есть. Это значение обычно используется для печати латинских символов и цифр, таких как идеографические символы.
lowercase Преобразует все буквы элемента в нижний регистр.
none Эффект капитализации отсутствует (отменяет наследуемое значение).
uppercase Преобразует все буквы элемента в верхний регистр.
inherit Указывает, что элемент должен унаследовать параметры родительского элемента.
Text-transform в CSS
Привет! В этой статье мы продолжим говорить об изменениях шрифтов с помощью CSS, а именно поговорим о том, как работает свойство text-transform.
За что отвечает text-transform
Можно заметить, что часто заголовки пишутся прописными буквами. А в английском языке в названиях (например, книг, сериалов и пр.) первые буквы всех слов прописные:
Или, например, у Вас может возникнуть необходимость отобразить часть текста прописными буквами, а часть большими буквами.
Для примера возьмем параграф из Википедии:
Именно для того, чтобы поменять регистр текста (из прописных в заглавные, из заглавных в прописные) и используется свойство text-transform.
У text-transform есть 5 значений:
Рассмотрим как это работает на практике. Представим, что у нас есть следующая HTML-страница:
text-transform
Время чтения: меньше 5 мин
Обновлено 6 октября 2021
Кратко
Свойство text-transform позволяет трансформировать буквы в тексте. С помощью этого свойства можно сделать текст из одних заглавных или наоборот, из одних маленьких букв вне зависимости от формата исходного текста.
Это свойство важно. Вместо того, чтобы набирать текст одними заглавными буквами, лучше применить его. Поскольку в процессе жизни сайта тексты могут меняться, но их формат должен оставаться одинаковым. Нельзя гарантировать что контент-менеджер вставит текст, написанный заглавными, в нужное место.
Пример
Как это понять
Слово transform с английского языка переводится как трансформация — преобразование чего-то в нечто другое. Дословно можно перевести всё свойство как текст-трансформация. Или, говоря человеческим языком, трансформация текста.
Как пишется
Пишем свойство text-transform и после двоеточия указываем одно из доступных значений. Значения обозначаются ключевыми словами:
Подсказки
💡 Свойство трансформации нельзя анимировать при помощи свойства transition 😒
💡 При применении свойства text-transform меняется регистр текста. Это означает, что при копировании текст будет именно таким, как отображается на экране.
Если скопировать текст и вставить куда-нибудь в текстовое поле, то можно заметить, что две буквы заглавные. А значит регистр исходного текста был изменён. А не просто поменялось внешнее отображение текста.
На практике
Алёна Батицкая
Теперь если даже в меню добавится ещё пара пунктов, то они также будут отображаться заглавными буквами.
Как сделать в CSS заглавные буквы?
Оформляя страницу сайта, нам не редко приходится выделять заголовки или какие-то фрагменты текста заглавными буквами. Конечно, в случае если это нужно сделать один раз, то проще всего не заморачиваться и набрать нужный текст с помощью клавиши Caps Lock. А что если мы делаем какую-то типовую страницу, и все последующие будут на нее похожи, и текст нужно будет выделять в одних и тех же блоках на странице?
В случае если у нас есть блоки, в которых текст обязательно должен быть выделен, мы можем для них задать отображение текста, с помощью свойства CSS, заглавными буквами.
Навигация по статье:
Как сделать в CSS заглавные буквы?
Чтобы сделать в CSS заглавные буквы можно воспользоваться свойства text-transform, используя одно из его значений uppercase. Например:
Делаем блок с заголовком в html:
Задаём в CSS заглавные буквы
Задаем свойство text-transform: uppercase; для тега h3:
Задаём в CSS заглавные буквы
Конечно же, вы можете применить данное свойство и для уже существующих элементов на сайте. Например, вы решили изменить отображение заголовков статей, но перебирать все статьи на сайте и исправлять все вручную займет много времени.
В этом случае намного удобнее будет преобразовать уже существующий текст с помощью свойства CSS в заглавные буквы.
Для этого всего лишь нужно вычислить класс, который отвечает за отображения заголовка статьи, и задать ему нужное свойство.
Интересное свойство font-variant
Для выделения текста в CSS заглавными буквами существует еще одно свойство font-variant, которое дает достаточно необычный и интересный эффект.
font-variant может принимать три значения:
small-caps – отображает все символы слова, которые следуют после заглавной буквы, капительными символами. Строчные символы преобразуются в заглавные, но уменьшенного размера.
normal – вид шрифта по умолчанию
inherit – наследует стиль отображения шрифта у родительского элемента.