Свойство CSS text-transform
Свойство text-transform управляет регистром символов текста элемента. Изучите значения свойства и попробуйте примеры.
CSS-свойство text-transform управляет регистром текста элемента — оно позволяет принудительно переводить текст В ВЕРХНИЙ РЕГИСТР, в нижний регистр или Начинать Каждое Слово С Заглавной Буквы, не изменяя исходный HTML. Это исключительно визуальное изменение: исходный текст остаётся точно таким, каким вы его написали, поэтому программы чтения с экрана, копирование и отправка форм всё равно видят оригинальный регистр.
На этой странице рассматриваются все значения text-transform, особенности значения capitalize, правила смены регистра для отдельных языков и запускаемые примеры для каждого значения.
Зачем использовать text-transform вместо ручного ввода в нужном регистре?
Хранить информацию о регистре в CSS, а не в разметке — значит держать контент чистым и гибким:
- Единый источник истины. Пишите заголовки и метки в обычном регистре предложения; CSS будет переводить их в верхний регистр только там, где этого требует дизайн. Изменить дизайн позже можно в одном месте.
- Удобно для локализации. Переводчики редактируют читаемый текст, а не слова, написанные заглавными буквами.
- Доступность и SEO. Поисковые системы и вспомогательные технологии читают реальный текст, а не стилизованные глифы. Визуальный перевод метки
<button>в верхний регистр таким способом всё равно предоставляет доступное имя в нормальном регистре.
Правила смены регистра для конкретных языков
text-transform следует правилам смены регистра, принятым для языка содержимого (атрибут lang), а не простому ASCII-преобразованию. Несколько примечательных случаев:
- Тюркские языки — турецкий (
tr), азербайджанский (az), крымскотатарский (crh), татарский (tt) и башкирский (ba) имеют точечные и беточечные варианты i, образующие две пары регистров: i/İ и ı/I. - Немецкий (
de) — ß превращается в SS в верхнем регистре. - Греческий (
el) — при переводе целого слова в верхний регистр ударение над гласной опускается (ά → Α), за исключением разделительного эта (ή/Ή).
Поддержка этих языковых правил браузерами различается, поэтому проверяйте, если ваша аудитория на них полагается.
Значения full-width и full-size-kana являются экспериментальными. full-width имеет частичную поддержку в WebKit, тогда как full-size-kana поддерживается очень ограниченно.
| Начальное значение | none |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Да. |
| Анимируемо | Нет. |
| Версия | CSS1 |
| DOM Syntax | object.style.textTransform = "capitalize"; |
Синтаксис
text-transform: none | capitalize | uppercase | lowercase | full-width | full-size-kana | initial | inherit;Значение "uppercase"
uppercase преобразует каждый символ в верхний регистр — чаще всего используется для заголовков, кнопок и меток. В примере ниже текст абзаца и <div> принудительно переводится в верхний регистр, тогда как HTML сохраняет обычный регистр:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-transform: uppercase;
}
</style>
</head>
<body>
<h2>Text-transform property example</h2>
<p>This is some paragraph.</p>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>Результат
Значения "capitalize" и "lowercase"
capitalize переводит в верхний регистр первую букву каждого слова, оставляя остальные буквы нетронутыми. Границей слова считается любой пробел, знак препинания или символ, поэтому кавычки и дефисы тоже начинают новые слова (например, mother-in-law становится Mother-In-Law). Два распространённых подводных камня:
- Оно затрагивает только первую букву —
iPhoneостаётсяIPhone, а неIphone, потому что регистр остальных букв сохраняется. - Цифра не считается буквой, поэтому первая буква после числа не переводится в верхний регистр.
3rdостаётся3rd, никогда не становясь3Rd.
lowercase — противоположность uppercase: оно переводит все символы в нижний регистр. В примере ниже первый <div> использует capitalize, а второй — lowercase:
<!DOCTYPE html>
<html>
<head>
<style>
.a {
text-transform: capitalize
}
.b {
text-transform: lowercase
}
</style>
</head>
<body>
<h2>Text-transform property example</h2>
<div class="a">"Text transform property"</div>
<br />
<div class="b">
"THIS IS SOME PARAGRAPH FOR EXAMPLE".
</div>
</body>
</html>Значение "none"
none — значение по умолчанию: текст отображается точно так, как написан, без каких-либо изменений регистра. Главным образом оно используется для отмены text-transform, который элемент иначе унаследовал бы, поскольку свойство наследуется по умолчанию.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: red;
}
h2 {
text-transform: none;
}
</style>
</head>
<body>
<h1>Example with text-transform property</h1>
<h2>
Example of the text-transform property with the "none" value:
</h2>
</body>
</html>Значение "initial"
initial сбрасывает свойство до его CSS-значения по умолчанию (none), независимо от любого унаследованного значения. Пример ниже сбрасывает text-transform для абзаца:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: red;
}
p.text {
text-transform: initial;
}
</style>
</head>
<body>
<h1>Example with text-transform property</h1>
<h2>text-transform: initial:</h2>
<p class="text">
Example of the text-transform property with the "initial" value:
</p>
</body>
</html>Значения
| Значение | Описание | Попробуйте |
|---|---|---|
| none | Никаких изменений регистра. Это значение по умолчанию. | Попробуйте » |
| capitalize | Делает первый символ каждого слова заглавным. | Попробуйте » |
| uppercase | Делает все символы каждого слова заглавными. | Попробуйте » |
| lowercase | Делает все символы каждого слова строчными. | Попробуйте » |
| full-width | Помещает символы (идеограммы и латиницу) в квадрат, позволяя выравнивать их как в китайском или японском тексте. | Попробуйте » |
| full-size-kana | Преобразует все малые символы Кана в полноразмерные, компенсируя проблемы читаемости при малых размерах шрифта, типичных для фуриганы. | Попробуйте » |
| initial | Устанавливает свойство в значение по умолчанию. | Попробуйте » |
| inherit | Наследует свойство от родительского элемента. |
Связанные свойства
text-transform — одно из нескольких CSS-инструментов для управления внешним видом текста. Комбинируйте его со следующими связанными свойствами:
- text-decoration — подчёркивание, надчёркивание или зачёркивание текста.
- font-variant — отображение текста капителью (истинный типографский вариант, в отличие от визуального верхнего регистра).
- letter-spacing и word-spacing — хорошо сочетаются с заголовками в верхнем регистре, которые часто лучше смотрятся с дополнительным трекингом.
- text-align — управление горизонтальным выравниванием преобразованного текста.
- ::first-letter и ::first-line —
text-transformтакже применяется к этим псевдоэлементам, что полезно для создания эффектов буквицы.