Энциклопедия CSS: text-transform

В CSS свойство text-transform используется для управления регистром текста. Оно позволяет изменять способ отображения текста без изменения его фактического содержания в HTML. Это свойство особенно полезно для стилизации заголовков, кнопок и других текстовых элементов, где требуется единообразие в отображении регистра.

Синтаксис

text-transform: none | capitalize | uppercase | lowercase | full-width;

Значения:

• none: Значение по умолчанию. Текст отображается в том виде, в котором он задан в HTML, без изменений регистра.
• capitalize: Преобразует первый символ каждого слова в строке в верхний регистр, а остальные символы — в нижний. Это особенно полезно для заголовков.
• uppercase: Преобразует весь текст в верхний регистр.
• lowercase: Преобразует весь текст в нижний регистр.
• full-width: Преобразует символы в их полуширные аналоги (чаще используется для японских символов).

Примеры использования

Преобразование текста в верхний регистр

Чтобы изменить весь текст на странице в верхний регистр, используйте следующее правило:

h1 {
    text-transform: uppercase;
}

В результате все заголовки будут отображаться в верхнем регистре, независимо от того, как они записаны в HTML.

Преобразование первого символа каждого слова в верхний регистр

Чтобы каждое слово начиналось с заглавной буквы, можно использовать значение capitalize:

h2 {
    text-transform: capitalize;
}

Это правило изменит текст в заголовках, делая первую букву каждого слова заглавной.

Преобразование текста в нижний регистр

Чтобы сделать весь текст в нижнем регистре, используйте значение lowercase:

p {
    text-transform: lowercase;
}

Этот стиль сделает весь текст в параграфах строчными.

Совместимость

Свойство text-transform поддерживается всеми современными браузерами, включая Chrome, Firefox, Safari, Edge и Opera. Оно также работает в мобильных браузерах, таких как Safari и Chrome для iOS и Android.

Примечания

Свойство text-transform изменяет только визуальное отображение текста и не влияет на его фактическое содержание, поэтому, например, использование uppercase не меняет текст в исходном HTML-коде, а только на экране. Это свойство не поддерживает язык и локализацию, и в некоторых случаях может повлиять на отображение символов в языках, где буквы имеют различные формы в зависимости от регистра.

Заключение

Свойство text-transform в CSS является мощным инструментом для управления отображением текста в различных регистрах. Оно позволяет стилизовать текст без изменения исходных данных, что дает гибкость при проектировании интерфейсов и улучшении пользовательского опыта.