text-transform в CSS


Содержание

Свойство CSS text-transform

Свойство CSS text-transform отвечает за написание строчных или заглавных букв (верхний и нижний регистр) в html.

Синтаксис CSS text-transform

  • capitalize — каждое слово начинается с большой буквы
  • lowercase — переводит все буквы в нижний регистр
  • uppercase — переводит все буквы в верхний регистр
  • none — отменяет все действия (по умолчанию)
  • inherit — принять значение предка (родителя)

Примеры перевода в верхний и нижний регистр в HTML

Пример 1. Каждое слово с большой буквы в HTML

Вот как это выглядит на странице:

Пример 2. Все слова в нижнем регистре в HTML

Вот как это выглядит на странице:

Пример 3. Все слова в верхнем регистре в HTML

Вот как это выглядит на странице:

Для обращения к text-transform из JavaScript нужно писать следующую конструкцию:

CSS свойство text-transform

Управляет преобразованием текста элемента в заглавные или прописные символы.

CSS синтаксис

Возможные значения

Значение Описание
none Значение по умолчанию. Преобразование не осуществляется. Текст выводится как есть.
capitalize Каждое слово в предложении будет начинаться с заглавной буквы.
uppercase Все символы текста становятся прописными (верхний регистр).
lowercase Все символы текста становятся строчными (нижний регистр).
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

Устанавливаем преобразование текста в различных элементах

text-transform

Браузер Internet Explorer Netтscape Опера Safari Mozilla Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да

Краткая информация

CSS (ЦСС) CSS (ЦСС)1
Значение по умолчанию none
Наследуется Да
Применяется Ко всем элементам
Аналог ШТМЛ Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/text.ШТМЛ#propdef-text-transform

Описание

Управляет преобразованием контента элемента в заглавные или прописные символы. Когда значение отлично от none , регистр исходного контента будет изменен.

Синтаксис

text-transform: capitalize | lowercase | uppercase | none

Аргументы

ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

Результат данного примера показан ни рис. 1.

Рис. 1. Применение параметра text-transform

Свойство CSS text-transform

Свойство CSS text-transform отвечает за написание строчных или заглавных букв (верхний и нижний регистр) в html.

Синтаксис CSS text-transform

  • capitalize — каждое слово начинается с большой буквы
  • lowercase — переводит все буквы в нижний регистр
  • uppercase — переводит все буквы в верхний регистр
  • none — отменяет все действия (по умолчанию)
  • inherit — принять значение предка (родителя)

Примеры перевода в верхний и нижний регистр в HTML

Пример 1. Каждое слово с большой буквы в HTML

Вот как это выглядит на странице:

Пример 2. Все слова в нижнем регистре в HTML

Вот как это выглядит на странице:

Пример 3. Все слова в верхнем регистре в HTML


Вот как это выглядит на странице:

Для обращения к text-transform из JavaScript нужно писать следующую конструкцию:

CSS Свойство text-transform

Пример

Трансформировать текст в различных элементах:

h1
h2
p

Попробуйте сами »

Определение и Использование

Свойство text-transform контролирует использование прописных букв в тексте.

Значение по умолчанию: none
Наследуется: да
Версия: CSS1
JavaScript синтаксис: объект.style.textTransform=»uppercase»

Поддержка Браузерами

Свойство text-transform поддерживается всеми основными браузерами.

Замечание: Значение «inherit» не поддерживается в IE7 и более ранних версиях. IE8 требует объявления !DOCTYPE. IE9 поддерживает «inherit».

Text-transform

The text-transform property is used in CSS and some HTML elements. This property specifies capitalization and lowercase effects which should be rendered on the selected text.

Values

  • capitalize — The first letter on each word is capitalized and the other letters are unaffected.
  • uppercase — All letters are converted to uppercase.
  • lowercase — All letters are converted to lowercase.
  • none — No case change effects.

To apply this in HTML, use:

That produces: Capitalized text.

Text using the uppercase value: All-caps text.

Text using the lowercase value: Lowercase text.

To apply this in CSS, in the h1 element for example, use:

Свойства CSS для управления веб-типографикой

Интернет, как средство коммуникации, имеет ряд особенностей. Настолько ярко выраженных, что многие считают, что естественный и плавный переход к типографике это очень непростое дело.

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

Наш основной инструмент для управления видом текста в интернете — это CSS . Более подробное описание свойств CSS , которые я представлю в этой статье, вы можете найти в спецификации CSS Text Module .

Другими словами, CSS Text Module отвечает за отображение символов и слов в браузере и за то, как они располагаются, выравниваются, переносятся и т.д. с помощью CSS .

Что представляет собой основную единицу текста или слова, а также, где именно допускается разрыв слов в данной части текста, зависит от правил языка, используемого на сайте. Именно поэтому важно объявлять эту информацию в HTML-документе ( как правило, в атрибуте lang элемента ).

В этой статье я рассмотрю две темы по типографике в дизайне:

  • шрифты, которые являются визуальным представлением символов , т.е. знаков и их свойств;
  • функции CSS , связанные с оформлением текста, таким как подчеркивание, тени и выделение.

Если вам интересно, вы можете найти самую свежую документацию по CSS-свойствам шрифтов и оформления текста в CSS Fonts Module Level 3 и CSS Text Decoration Module Level 3 соответственно.

Управление регистром букв

Иногда текстовые элементы должны отображаться заглавными буквами, например, имя и фамилия. CSS предоставляет нам возможность управлять регистром букв с помощью свойства text-transform .

Значение по умолчанию для свойства text-transform — none , то есть, данное преобразование к буквам не применяется.

Значение capitalize

Если вы хотите, чтобы первая буква каждого отображаемого слова выводилась в верхнем регистре, при этом все остальные буквы оставались без изменений ( независимо от их регистра в HTML-документе ), используйте значение capitalize :

Обратите внимание, что capitalize не следует конвенции регистра заголовков: все первые буквы слов в приведенном выше примере выводятся с заглавной.


Значение uppercase

Чтобы все буквы выводились в верхнем регистре независимо от их регистра в HTML-документе , в экранной типографике используется значение uppercase :

Значение lowercase

Применение значения lowercase приведет к тому, что все буквы будут отображаться в нижнем регистре. Естественно, это не повлияет на вид букв, которые и так уже являются строчными в исходном документе.

Значение full-width

В спецификацию было добавлено новое значение full-width . Оно ограничивает вывод символов на определенном участке, и используется для идеографических символов, например, японских, китайских иероглифов и т.д. Это облегчает выравнивание латинских символов с идеографическими.

Не все символы имеют соответствующую ширину, при которой регистр символов не изменяется при использовании значения full-width .

Вот как символы будут выглядеть в Firefox при использовании значения full-width :

Еще несколько замечаний

Свойство text-transform прекрасно поддерживается браузерами. Единственное исключение — это значение full-width , которое в настоящее время работает только в Firefox .

Кроме этого я заметила небольшое несоответствие при использовании значения capitalize для слов с дефисами в Firefox (V.39) и в других популярных браузерах.

Вот как это выглядит в Firefox :

Обратите внимание, что в Firefox первая буква после дефиса не переводится в верхний регистр. А вот как отображается тот же текст в Google Chrome :

В этом случае буквы, следующие сразу после дефисов, также отображаются с заглавной буквы. Я отмечала такое несоответствие в последних версиях всех наиболее популярных браузеров, кроме Firefox .

И, наконец, помните о наследовании! Если вы установите свойство text-transform для элемента контейнера, его значение наследуется всеми дочерними элементами. Чтобы избежать нежелательных результатов, установите для свойства text-transform дочерних элементов значение none.

Посмотрите демо-версию для значений свойства text-transform .

Как обрабатываются пустые диапазоны

Когда вы нажимаете клавишу табуляции, пробела или переносите текст на новую строку ( с помощью клавиши ENTER или тега ), вы создаете в исходном документе пустой диапазон.

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

Но что если вы хотите сохранить в HTML-документе пустые диапазоны, которые создаете. Это нужно, когда мы пишем текст, который должен отображаться, как корректно размеченный фрагмент кода. Или вы хотите вывести текст, который будет отображаться одной строкой без разрывов.

В подобных случаях, когда вы хотите переопределить поведение браузера по умолчанию, свойство white-space предлагает нам несколько интересных вариантов.

Значение normal позволяет сбросить параметры браузера на значения по умолчанию: все дополнительные пробелы объединяются в один символ, а строки переносятся, когда достигают края контейнера.

Значение pre

Значение pre позволяет отображать текст, сохраняя пустые диапазоны и оставляя без изменений все пустые строки в исходном документе. Текст не будет переноситься на новую строку, когда выходит за пределы контейнера:

Если вы используете табуляцию, чтобы создать пустые диапазоны, вы можете задавать их размер с помощью свойства tab-size , установив в качестве значения целое число:

Свойство tab-size поддерживается не всеми браузерами , но если вас совсем не устраивает размер по умолчанию пустого диапазона, создаваемого при помощи табуляции, вы можете использовать этот сервис .

Значение pre-wrap

Допустим, вы хотите, чтобы пустые диапазоны в исходном документе сохранялись при выводе в окне браузера. Но вы также хотите, чтобы строки переносились при достижении края контейнера.

Значение pre-wrap поможет достичь нужного результата:

Обратите внимание, что каждая строка, отображаемая в браузере, отражает принудительные разрывы в исходном коде, хотя контейнер имеет достаточно места, чтобы разместить больше текста:

Уменьшите окно браузера, и вы увидите, что строки переносятся, чтобы соответствовать размерам контейнера:

Значение pre-line

В отношении объединения пробелов и переноса строк оно сохраняет настройки браузера по умолчанию. Если в HTML документе присутствуют символ новой строки или тег
, они сохраняются при выводе в окне браузера:

Посмотрите демо-версию на CodePen для значений pre , pre-wrap и pre-line .

Значение nowrap

Если для вашего дизайна требуется, чтобы часть встроенного контента никогда не переносилась, тогда вам нужно использовать white-space: nowrap; .

Следующие случаи использования этого значения:

На рисунке, приведенном выше, изображена ссылка, за которой следует символ » . В этом случае вам определенно не хотелось, чтобы при переносе символов на новую строку вы получили картину, приведенную на рисунке ниже:

В подобных случаях ( думаю, для иконок, например ), использовать значение nowrap очень удобно.

Также свойство white-space может быть применено к любому встроенному контенту, в том числе к изображениям.

Я пошла еще дальше в этом направлении и создала стандартную JQuery-карусель , используя white-space: nowrap . Ниже приводится ее демо-версия:

Контроль над разрывами строк внутри слов

Иногда одно длинное слово не может быть обернуто в контейнер одной строки и выходит за рамки своего контейнера. Длинные URL-адреса или длинные слова в комментариях в блоге, например.


Следующие свойства предназначены для переноса длинных слов c помощью CSS .

Свойство word-wrap/overflow-wrap

Свойство word-wrap ( ранее называлось overflow-wrap, полностью поддерживается и работает во всех основных браузерах, как устаревшее ) вступает в силу, если свойство white-space позволяет перенос текста. Оно может принимать одно из двух значений: normal или break-word .

При использовании значения normal слова будут разрываться в указанных точках разрыва, например, пробелы, дефисы и т.д.

Значение break-word разрешает разрывать слова в произвольных местах, если слово не может быть разорвано и перенесено в установленных точках разрыва.

На рисунке ниже показан вывод длинного слова, которое выходит за границы контейнера:

Давайте установим свойство overflow-wrap , а также, чтобы все работало корректно, свойство word-wrap и зададим для них значение break-word :

В этом случае длинное слово разбивается на несколько строк, чтобы соответствовать размерам окна просмотра:

Свойство hyphens

Разбивка длинных слов — это хорошо. Но в результате у нас может получиться искаженный текст, смысл которого вводит читателей в заблуждение. Лучшим вариантом является добавление дефисов в тех местах, где слово переносится на следующую строку. Таким образом, читателям сразу становится понятно, что они видят одно слово, перенесенное на другую строку. Для этого CSS предлагает свойство hyphens , которое вы можете использовать в сочетании с word-wrap: break-word .

Значение auto для свойства hyphens позволяет выводить дефисы в местах, где слова были перенесены на следующую строку, если правила языка документа позволяют это или переносы присутствует в HTML-источнике . Чтобы это работало, убедитесь, что вы установили в HTML-документе атрибут lang для соответствующего языка:

Вы также можете запретить перенос слов в CSS в и вывод символа дефиса. Для этого установите для свойства hyphens значение none :

Также вы можете вывести дефисы в местах разрыва строк внутри слов, если дефисы указаны внутри слов и текст переносится на следующую строку. Это делается с помощью значения manual :

Благодаря вендорным префиксам, свойство hyphens поддерживается во всех основных браузерах, хотя и не без некоторых незначительных несоответствий. На момент написания данной статьи последние версии Chrome (V.44) и Opera (V.30) не поддерживают значение свойства auto .

Посмотреть пример на CodePen

Управление расстоянием между словами и буквами

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

CSS предлагает свойства word-spacing и letter-spacing , которые позволяют задавать расстояние между словами и буквами соответственно.

Свойство word-spacing

Ниже приведены значения для свойства word-spacing :

normal выводит пробелы между буквами по умолчанию. Конкретное значение зависит от используемого шрифта или браузера:

позволяет увеличить расстояние между словами в дополнение к значению интервала по умолчанию, определенному для шрифта или браузера:

percentage работает так же, как , но с использованием не абсолютных значений, а процентов. Существует вероятность, что оно будет удалено из следующих версий спецификации CSS :

Свойство letter-spacing

Вы можете задать для свойства letter-spacing одно из двух значений: normal или .

При использовании значения normal расстояние между буквами остается по умолчанию для данного шрифта. В этом случае любые расстояния между буквами, заданные ранее с помощью свойства letter-spacing , сбрасываются к своим значениям по умолчанию. Например, если для родительского элемента вы указали значение letter-spacing в 1em , но хотите, чтобы для дочерних элементов использовалось значение по умолчанию, это можно сделать с помощью значения norma :

позволяет задавать значение в единицах измерения, например пикселях или em . На это значение будет увеличен интервал между буквами в дополнение к интервалу по умолчанию:

Дополнительная информация

Свойство word-spacing применимо не только к словам. Вы можете использовать его для любого встроенного или блокового контента.

Также вы можете создавать кинетическую типографику на основе свойств word-spacing и letter-spacing . Но при использовании переходов CSS для свойства letter-spacing выяснилось, что значение normal не распознается текущей версии Firefox (V.39) . Чтобы исправить это, замените normal на 0em .

Ниже приводится демо-версия анимированного текста с использованием word-spacing и letter-spacing :

Посмотреть демо- версию

Последние свойства CSS для выравнивания текста

Свойство text-align задает, как встроенный контент, такой как текст и изображения, выравнивается внутри блока контейнера. Значения left и right выравнивают встроенный контент по левому и правому краю соответственно. Установив для text-align значение center , вы выровняете контент по центру контейнера. Значение justify задает равномерное распределение контента таким образом, чтобы все строки имели одинаковую длину ( за исключением последней строки, если она недостаточно длинна, чтобы достичь края контейнера ).

В спецификацию CSS были введены два новых значения, которые могут быть весьма полезны для сайтов на языках, использующих систему письма справа-налево ( RTL ): start и end .

Для системы слева-направо ( LTR ), они соответствуют значениям left и right . Если сайт использует язык RTL , значение start соответствует right , значение end соответствует left :

Применение text-align: match-parent для встроенного дочернего элемента обеспечивает, чтобы дочерний элемент наследовал тот же тип выравнивания, что и родительский элемент. Наследование значений start или end вычисляется по направлению написания языка родительского элемента и дает в результате либо left , либо right .

Свойство text-align-last

Также в CSS появилось новое свойство text-align-last . Оно задает выравнивание последней перед концом абзаца или тегом
строки распределенного по ширине текста. Данное свойство принимает те же значения, что и свойство text-align , за исключением значения auto , которое является значением по умолчанию. Оно позволяет выровнять последнюю строку текста в соответствии со значением свойства text-align , если оно задано. Если нет, применяется свойство text-align со значением по умолчанию start .

На момент написания данной статьи, свойство text-align-last поддерживалось браузерами довольно слабо. Поэтому лучше не использовать его вообще.

Посмотреть демо-версию, иллюстрирующую данное свойство в действии

Отступы текста


Отступы первой строки абзаца встречаются на сайтах не так часто. Вместо этого используется пустая строка, как визуальный элемент, разделяющий два абзаца.

Тем не менее, отступы в первой строке абзаца иногда используется, чтобы задать классический вид, подходящий для конкретного дизайна.

Для красной строки в CSS существует свойство text-indent . Давайте рассмотрим его возможные значения.

Значение length обычно задается в пикселях или em :

Значение each-line задает отступ красной строки с помощью CSS для первой строки внутри блока контейнера, а также для каждой строки после принудительного разрыва строки, созданного с помощью нажатия клавиши enter или добавления тега
.

Однако отступ не применяется для каждой первой строки после разрыва с переносом, то есть переноса текста на новую строку, если он выходит за пределы контейнера.

Значение hanging задает вывод всех строк, кроме первой, с отступом.

Значения each-line и hanging являются экспериментальными, и на момент написания статьи не реализованы ни в одном браузере.

Посмотреть демо-версию, иллюстрирующую свойство text-indent в действии

Заключение

В этой статье я подробно рассмотрела ряд свойств CSS , которые позволяют контролировать форматирование, переносы строк и выравнивание текста. Попробуйте поэкспериментировать с ними с помощью демо-версий.

С нетерпением жду ваших отзывов!

Данная публикация представляет собой перевод статьи « CSS Properties to Control Web Typography » , подготовленной дружной командой проекта Интернет-технологии.ру

Text-transform и копирование

Что происходит при копировании текста с text-transform .

В CSS есть свойство text-transform . С помощью него можно менять регистр текста: можно преобразовать текст в ПРОПИСНЫЕ, строчные или Капитализировать Только Первые Буквы Слов. Это делается значениями uppercase , lowercase и capitalize , соответственно. Помимо них есть значения full-width и full-size-kana , про которые мы в этот раз говорить не будем.

Выше приведен пример использования свойства text-transform . Попробуйте скопировать любой из них и вставить куда-нибудь. Результат будет отличаться в зависимости от вашего браузера:

  • Если у вас браузер на WebKit или Blink (Chrome, Safari, Opera 15+, Яндекс.Браузер и вскоре даже Edge), то вставится измененный текст — тот, который вы видите в браузере.
  • В остальных браузерах (Firefox, IE и пока Edge) вставится исходный текст — тот, который написан в HTML.

Стандарт до недавнего времени не определял, какое поведение является верным, поэтому оно стало предметом споров в баг-трекерах. Баг для Firefox завели еще в 2000 году, баг для WebKit с противоположным смыслом — в 2010. У сторонников обоих вариантов есть аргументы.

Главный аргумент за копирование измененного текста, как в WebKit — соответствие ожиданиям пользователя. Человек не может понять, в результате чего текст отображается заглавными буквами. Может быть, он прописан таким образом в исходном коде, а может быть, к нему применено text-trasform: uppercase . Если пользователь будет копировать текст в верхнем регистре, а потом вставлять его и иногда видеть что-то другое, ему будет казаться, что веб сломался и глючит.

Аргумент другой стороны в том, что такое поведение нарушает принцип разделения содержимого и оформления. CSS не должен влиять на контент страницы. А раз создатели сайта решили менять регистр через CSS, то они относятся к этому как к стилизации, и у пользователя должен быть доступ к изначальному варианту текста.

В 2020 году за этот вопрос взялась Рабочая группа CSS (CSSWG). При обсуждении выделили основные сценарии использования text-transform :

  • p::first-line < text-transform: uppercase >— первую строку набирают прописными буквами, как это иногда делают в англоязычной художественной литературе. В этом случае лучше копировать исходный текст, иначе он будет выглядеть странно.
  • abbr < text-transform: lowercase; font-variant: small-caps >— аббревиатуры в тексте набирают капителью. Свойство font-variant: small-caps берёт специальное начертание для капители из шрифта или отображает строчные буквы как прописные, только уменьшенного размера, если их нет. В этом случае тоже лучше копировать исходный текст, иначе аббревиатуры будут набраны строчными буквами.
  • h1 < text-transform: uppercase >— стилизуют заголовки с помощью прописных букв. Здесь применимы аргументы за оба варианта поведения.
  • em < font-style: normal; text-transform: uppercase >— используют прописные буквы для выделения важных фрагментов. Здесь тоже применимы оба аргумента.

В результате обсуждений в рабочей группе, в 2020 году было принято решение: дополнить стандарт CSS указанием, что свойство text-transform не должно влиять на копируемый текст.

text-transform

Браузер Internet Explorer Netтscape Опера Safari Mozilla Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да

Краткая информация

CSS (ЦСС) CSS (ЦСС)1
Значение по умолчанию none
Наследуется Да
Применяется Ко всем элементам
Аналог ШТМЛ Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/text.ШТМЛ#propdef-text-transform

Описание

Управляет преобразованием контента элемента в заглавные или прописные символы. Когда значение отлично от none , регистр исходного контента будет изменен.

Синтаксис

text-transform: capitalize | lowercase | uppercase | none

Аргументы

ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

Результат данного примера показан ни рис. 1.

Рис. 1. Применение параметра text-transform

CSS Свойство text-transform

Пример

Трансформировать текст в различных элементах:

h1
h2
p

Попробуйте сами »

Определение и Использование

Свойство text-transform контролирует использование прописных букв в тексте.

Значение по умолчанию: none
Наследуется: да
Версия: CSS1
JavaScript синтаксис: объект.style.textTransform=»uppercase»

Поддержка Браузерами

Свойство text-transform поддерживается всеми основными браузерами.

Замечание: Значение «inherit» не поддерживается в IE7 и более ранних версиях. IE8 требует объявления !DOCTYPE. IE9 поддерживает «inherit».

Илон Маск рекомендует:  Alt-коды
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL