text transform uppercase что это
Text-transform в CSS
Привет! В этой статье мы продолжим говорить об изменениях шрифтов с помощью CSS, а именно поговорим о том, как работает свойство text-transform.
За что отвечает text-transform
Можно заметить, что часто заголовки пишутся прописными буквами. А в английском языке в названиях (например, книг, сериалов и пр.) первые буквы всех слов прописные:
Или, например, у Вас может возникнуть необходимость отобразить часть текста прописными буквами, а часть большими буквами.
Для примера возьмем параграф из Википедии:
Именно для того, чтобы поменять регистр текста (из прописных в заглавные, из заглавных в прописные) и используется свойство text-transform.
У text-transform есть 5 значений:
Рассмотрим как это работает на практике. Представим, что у нас есть следующая HTML-страница:
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 и копирование
Alphabet, Le Bistronome (CC BY-NC 2.0)
Пример текста с text-transform: uppercase
Пример текста с text-transform: lowercase
Пример текста с text-transform: capitalize
Стандарт до недавнего времени не определял, какое поведение является верным, поэтому оно стало предметом споров в баг-трекерах. Баг для Firefox завели еще в 2000 году, баг для WebKit с противоположным смыслом — в 2010. У сторонников обоих вариантов есть аргументы.
Аргумент другой стороны в том, что такое поведение нарушает принцип разделения содержимого и оформления. CSS не должен влиять на контент страницы. А раз создатели сайта решили менять регистр через CSS, то они относятся к этому как к стилизации, и у пользователя должен быть доступ к изначальному варианту текста.
В 2016 году за этот вопрос взялась Рабочая группа CSS (CSSWG). При обсуждении выделили основные сценарии использования text-transform :
В результате обсуждений в рабочей группе, в 2018 году было принято решение: дополнить стандарт CSS указанием, что свойство text-transform не должно влиять на копируемый текст.
Коммит, который вносит изменения в стандарт.
Сейчас баг в Firefox закрыт как «wontfix», баг в WebKit по-прежнему открыт. Но уже можно надеяться, что скоро его поправят, и копирование текста с 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 – наследует стиль отображения шрифта у родительского элемента.