text-transform

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

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

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

Пример

Секция статьи "Пример"
        
          
          <div class="parent">  <h1 class="title">title case</h1>  <p class="paragraph">Title case (англ. «регистр заголовка»)...</p>  <article class="news">    <h2 class="title-case">who framed roger rabbit?</h2>    <p class="paragraph">The overarching villain...</p>  </article></div>
          <div class="parent">
  <h1 class="title">title case</h1>
  <p class="paragraph">Title case (англ. «регистр заголовка»)...</p>

  <article class="news">
    <h2 class="title-case">who framed roger rabbit?</h2>
    <p class="paragraph">The overarching villain...</p>
  </article>
</div>

        
        
          
        
      

Текст в заголовке написан маленькими буквами, но по дизайну, как это часто случается, требуется, чтобы заголовок отображался заглавными буквами. Используем свойство text-transform. Заодно зададим это же свойство для второго заголовка, но со значением capitalize, которое преобразует текст так, чтобы каждое новое слово начиналось с заглавной буквы.

        
          
          .title {  text-transform: uppercase;}.title-case {  text-transform: capitalize;}
          .title {
  text-transform: uppercase;
}

.title-case {
  text-transform: capitalize;
}

        
        
          
        
      
Открыть демо в новой вкладке

Как это понять

Секция статьи "Как это понять"

Слово transform с английского языка переводится как трансформация — преобразование чего-то в нечто другое. Дословно можно перевести всё свойство как текст-трансформация. Или, говоря человеческим языком, трансформация текста.

Как пишется

Секция статьи "Как пишется"

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

  • uppercase — все буквы в тексте, к которому применяется это значение, будут трансформированы в заглавные.
  • lowercase — все буквы будут преобразованы в строчные, маленькие.
  • capitalize — каждое слово начинается с прописной, заглавной буквы. Это часто необходимо при работе с текстами на английском языке.
  • full-width — латинские буквы и иероглифы восточно-азиатских языков вписываются в квадрат.
  • full-size-kana — латинские буквы и иероглифы восточно-азиатских языков вписываются в квадрат, но используются в рамках <ruby> элементов (например, когда вам нужно обозначить новый иероглиф, и сверху правила его чтения)
  • none — значение по умолчанию, отменяет все трансформации.

Подсказки

Секция статьи "Подсказки"

💡 Свойство трансформации нельзя анимировать при помощи свойства transition 😒

💡 Значение по умолчанию — none.

💡 При применении свойства text-transform меняется регистр текста. Это означает, что при копировании текст будет именно таким, как отображается на экране.

        
          
          <p class="abbreviation">вниоптусх</p><p class="meaning">Всероссийский научно-исследовательский...</p>
          <p class="abbreviation">вниоптусх</p>
<p class="meaning">Всероссийский научно-исследовательский...</p>

        
        
          
        
      
        
          
          .abbreviation {  text-transform: uppercase;}
          .abbreviation {
  text-transform: uppercase;
}

        
        
          
        
      
Открыть демо в новой вкладке

Если скопировать текст и вставить куда-нибудь в текстовое поле, то можно заметить, что две буквы заглавные. А значит регистр исходного текста был изменён. А не просто поменялось внешнее отображение текста.

На практике

Секция статьи "На практике"

Алёна Батицкая

Секция статьи "Алёна Батицкая"

🛠 Довольно часто в макетах встречаются пункты меню, написанные заглавными буквами. Не нужно в разметке набирать текст заглавными. Скопируй текст из макета и примени свойство text-transform.

        
          
          <div class="element">  <a href="#" class="logo">    <img src="../images/logo.png" alt="Company logo">  </a>  <nav class="menu">    <ul class="menu-list">      <li class="menu-list__item">        <a href="#" class="menu-list__link">Главная</a>      </li>      <li class="menu-list__item">        <a href="#" class="menu-list__link">О компании</a>      </li>      <li class="menu-list__item">        <a href="#" class="menu-list__link">Проекты</a>      </li>      <li class="menu-list__item">        <a href="#" class="menu-list__link">Контакты</a>      </li>    </ul>  </nav></div>
          <div class="element">
  <a href="#" class="logo">
    <img src="../images/logo.png" alt="Company logo">
  </a>
  <nav class="menu">
    <ul class="menu-list">
      <li class="menu-list__item">
        <a href="#" class="menu-list__link">Главная</a>
      </li>
      <li class="menu-list__item">
        <a href="#" class="menu-list__link">О компании</a>
      </li>
      <li class="menu-list__item">
        <a href="#" class="menu-list__link">Проекты</a>
      </li>
      <li class="menu-list__item">
        <a href="#" class="menu-list__link">Контакты</a>
      </li>
    </ul>
  </nav>
</div>

        
        
          
        
      
        
          
          .menu-list {  text-transform: uppercase;}
          .menu-list {
  text-transform: uppercase;
}

        
        
          
        
      
Открыть демо в новой вкладке

Теперь если даже в меню добавится ещё пара пунктов, то они также будут отображаться заглавными буквами.