text-transform

Властивість CSS text-transform (перетворення тексту) задає регістр тексту елемента. Вона може застосовуватися для виведення тексту суто великими або суто малими літерами, або з кожним словом з великої літери. Також вона може покращити розбірливість рубі.

Спробуйте його в дії

Властивість text-transform враховує специфічні для мови правила відображення, як то наступні:

• У тюркських мовах, як то турецькій (tr), азербайджанській (az), кримськотатарській (crh), татарській (tt) і башкирській (ba), є два різновиди i, з крапкою і без неї, і дві пари регістрів: i/İ і ı/I.
• У німецькій мові (de) ß у верхньому регістрі стає SS.
• У нідерландській мові (nl) диграф ij стає IJ, навіть із text-transform: capitalize, котра просто робить першу літеру слова великою.
• У грецькій мові (el) голосні літери втрачають наголос, коли усе слово постає з великих літер (ά/Α), окрім диз'юнктивної іти (ή/Ή). Крім цього, дифтонги з наголосом на першій голосній втрачають це наголос і набувають дієрезису на другій (άι/ΑΪ).
• У грецькій мові (el) мала літера сигма має два варіанти: σ і ς. ς вживається лише тоді, коли сигма стоїть в кінці слова. При застосуванні text-transform: lowercase до великої сигми (Σ) браузер мусить обрати правильний малий варіант на основі контексту.
• в ірландській мові (ga) частина префіксних літер залишається малими, коли базова перша літера стає великою, тож, наприклад, text-transform: uppercase перетворить ar aon tslí на AR AON tSLÍ, а не, як можна було б очікувати, на AR AON TSLÍ (лише в Firefox). У певних випадках переведення у верхній регістр також прибирає дефіс: an t-uisce перетворюється на AN tUISCE (причому дефіс коректно повертається із text-transform: lowercase).

Мова зазначається в атрибуті HTML lang або атрибуті XML xml:lang.

[!NOTE] Підтримка специфічних щодо мов випадків – різна в різних браузерах, тож перевірте таблицю сумісності з браузерами.

Синтаксис

/* Значення – ключові слова */
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;
text-transform: full-size-kana;
text-transform: math-auto;

/* Глобальні значення */
text-transform: inherit;
text-transform: initial;
text-transform: revert;
text-transform: revert-layer;
text-transform: unset;

capitalize

Ключове слово, котре перетворює кожну першу літеру кожного слова на велику. Решта символів залишається як є (зберігає свій вихідний регістр, вписаний у текст елемента). Під літерою тут розуміється символ, котрий є частиною загальних категорій Unicode Літери й або Числа; таким чином, будь-які розділові знаки або символи на початку слів – ігноруються.

[!NOTE] Не слід очікувати того, що capitalize виконуватиме специфічні для мови правила великих літер (як то пропуск артиклів у англійській).

[!NOTE] Ключове слово capitalize було недостатньо специфіковано в CSS 1 та CSS 2.1. Це призвело до відмінностей між браузерами щодо того, як визначається перша літера (Firefox вважав - і _ літерами, а інші браузери – ні. І WebKit, і Gecko помилково вважали символи на основі літер, як то ⓐ, справжніми літерами.) Чітко визначивши коректну логіку, специфікація Тексту CSS рівня 3 упорядковує цей безлад. Рядок capitalize у таблиці сумісності з браузерами містить версії рушіїв, з яких вони почали підтримувати таку чітко визначену логіку.

uppercase

Ключове слово, котре перетворює всі літери на великі.

lowercase

Ключове слово, котре перетворює всі літери на малі.

none

Ключове слово, котре запобігає зміні регістру всіх символів.

full-width

Ключове слово, котре примушує вписувати символи – перш за все ієрогліфи та латинські літери – у квадрат, даючи їм змогу вирівнятися щодо поширених у Східній Азії систем письма (як то китайської та японської).

full-size-kana

Це ключове слово загалом вживається для тексту анотацій <ruby> і перетворює усі малі символи кана на рівносильні повнорозмірні кана, задля компенсування проблем розбірливості малих розмірів шрифту, що зазвичай використовуються в рубі.

math-auto

Вживається для автоматичної візуалізації тексту математичним курсивом, де це доречно. Перетворює латинські та грецькі літери, а також кілька інших символів, що стосуються математики, на курсивні математичні символи, але лише тоді, коли застосовується до текстового вузла, що містить один-єдиний символ. Наприклад, "x" стане "𝑥" (U+1D465), проте "exp" залишиться "exp". Перш за все вживається для задання логіки елементів <mi> в MathML. Загалом, слід користуватися розміткою MathML, яка автоматично застосовує правильне оформлення.

Доступність

Великі розділи тексту зі властивістю text-transform зі значенням uppercase може бути важко читати людям з когнітивними негараздами, як то дислексією.

• MDN розуміння WCAG, пояснення Настанов 1.4
• W3C розуміння WCAG 2.1

Формальний опис

Формальний синтаксис

none | capitalize | uppercase | lowercase | full-width | full-size-kana

Приклади

Приклад з використанням "none"

<p>
  Рядок на початку
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: none
  <strong><span>Щастям б'єш жук їх глицю в фон й ґедзь пріч.</span></strong>
</p>

span {
  text-transform: none;
}
strong {
  float: right;
}

Це демонструє відсутність перетворення тексту.

Приклад з використанням "capitalize" (загальний)

<p>
  Рядок на початку
  <strong>Щастям б'єш жук їх глицю в фон й ґедзь пріч.</strong>
</p>
<p>
  text-transform: capitalize
  <strong><span>Щастям б'єш жук їх глицю в фон й ґедзь пріч.</span></strong>
</p>

span {
  text-transform: capitalize;
}
strong {
  float: right;
}

Це демонструє додавання до тексту великих літер

Приклад з використанням "capitalize" (розділові знаки)

<p>
  Рядок на початку
  <strong
    >(це) "є" [така] –собі– -перевірка- «роботи» *css* _text_ ¿transform?
    ?¡capitalize!</strong
  >
</p>
<p>
  text-transform: capitalize
  <strong
    ><span
      >(це) "є" [така] –собі– -перевірка- «роботи» *css* _text_ ¿transform?
      ?¡capitalize!</span
    ></strong
  >
</p>

span {
  text-transform: capitalize;
}
strong {
  float: right;
}

Це демонструє те, як ігноруються розділові знаки на початку слів. Це ключове слово цілиться на першу літеру, котра є першим у слові символом Unicode, що є частиною категорії Літери або Числа.

Приклад з використанням "capitalize" (символи)

<p>
  Рядок на початку
  <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong>
</p>
<p>
  text-transform: capitalize
  <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong>
</p>

span {
  text-transform: capitalize;
}
strong {
  float: right;
}

Це демонструє те, як ігноруються символи на початку. Це ключове слово цілиться на першу літеру, котра є першим у слові символом Unicode, що є частиною категорії Літери або Числа.

Приклад з використанням "capitalize" (нідерландський диграф ij)

<p>
  Рядок на початку
  <strong lang="nl"
    >Нідерландське слово: "ijsland" починається з диграфу.</strong
  >
</p>
<p>
  text-transform: capitalize
  <strong
    ><span lang="nl"
      >Нідерландське слово: "ijsland" починається з диграфу.</span
    ></strong
  >
</p>

span {
  text-transform: capitalize;
}
strong {
  float: right;
}

Це демонструє те, як нідерландський диграф ij повинен оброблятися як одна літера.

Приклад з використанням "uppercase" (загальний)

<p>
  Рядок на початку
  <strong>Щастям б'єш жук їх глицю в фон й ґедзь пріч.</strong>
</p>
<p>
  text-transform: uppercase
  <strong><span>Щастям б'єш жук їх глицю в фон й ґедзь пріч.</span></strong>
</p>

span {
  text-transform: uppercase;
}
strong {
  float: right;
}

Це демонструє переведення тексту в верхній регістр.

Приклад з використанням "uppercase" (грецькі голосні)

<p>
  Рядок на початку
  <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong>
</p>
<p>
  text-transform: uppercase
  <strong
    ><span lang="el">Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong
  >
</p>

span {
  text-transform: uppercase;
}
strong {
  float: right;
}

Це демонструє те, що грецькі голосні, окрім диз'юнктивної іти, не повинні мати наголосу, і наголос на першій з пари голосних стає дієрезисом на другій голосній.

Приклад з використанням "lowercase" (загальний)

<p>
  Рядок на початку
  <strong>Щастям б'єш жук їх глицю в фон й ґедзь пріч.</strong>
</p>
<p>
  text-transform: lowercase
  <strong><span>Щастям б'єш жук їх глицю в фон й ґедзь пріч.</span></strong>
</p>

span {
  text-transform: lowercase;
}
strong {
  float: right;
}

Це демонструє переведення тексту в нижній регістр

Приклад з використанням "lowercase" (грецька Σ)

<p>
  Рядок на початку
  <strong
    >Σ – ЦЕ грецька ЛІТЕРА, котра КІЛЬКА РАЗІВ ЗУСТРІЧАЄТЬСЯ В ΟΔΥΣΣΕΥΣ.</strong
  >
</p>
<p>
  text-transform: lowercase
  <strong
    ><span
      >Σ – ЦЕ грецька ЛІТЕРА, котра КІЛЬКА РАЗІВ ЗУСТРІЧАЄТЬСЯ В ΟΔΥΣΣΕΥΣ.</span
    ></strong
  >
</p>

span {
  text-transform: lowercase;
}
strong {
  float: right;
}

Це демонструє те, як грецький символ сигми (Σ) перетворюється на звичайну малу сигму (σ) або на варіант для кінця слова (ς), залежно від контексту.

Приклад з використанням "lowercase" (литовська мова)

<p>
  Рядок на початку
  <strong>Ĩ – це литовська ЛІТЕРА, як і J́</strong>
</p>
<p>
  text-transform: lowercase
  <strong><span lang="lt">Ĩ – це литовська ЛІТЕРА, як і J́</span></strong>
</p>

span {
  text-transform: lowercase;
}
strong {
  float: right;
}

Це демонструє те, як литовські літери Ĩ і J́ зберігають свої крапки, коли переводяться в нижній регістр.

Приклад з використанням "full-width" (загальний)

<p>
  Рядок на початку
  <strong
    >0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</strong
  >
</p>
<p>
  text-transform: full-width
  <strong
    ><span
      >0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span
    ></strong
  >
</p>

span {
  text-transform: full-width;
}
strong {
  width: 100%;
  float: right;
}

Частина символів існує у двох форматах: нормальної та повної ширини, з різними кодовими точками Unicode. Повноширинна версія використовується для красивого їх вписування в текст на азійських ієрогліфах.

Приклад з використанням "full-width" (японська півширинна катакана)

<p>
  Рядок на початку
  <strong>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</strong>
</p>
<p>
  text-transform: full-width
  <strong><span>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</span></strong>
</p>

span {
  text-transform: full-width;
}
strong {
  width: 100%;
  float: right;
}

Японська півширинна катакана вживалася для представлення катакани 8-бітними кодами символів. На відміну від звичайних (повноширинних) символів катакани, літера зі знаком дзвінкості представляється у вигляді двох кодових точок: тіла літери й знака дзвінкості. full-width поєднує їх в одну кодову точку, коли перетворює такі символи на повноширинні.

Приклад з використанням "full-size-kana"

<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>

p:nth-of-type(2) {
  text-transform: full-size-kana;
}

Приклад, що вживає "math-auto"

У цьому прикладі для створення математичної формули використовується суто розмітка HTML:

<div>
  (<span class="math-id">sin</span>&#8198;<span class="math-id">x</span>)<sup
    >2</sup
  >
  + (<span class="math-id">cos</span>&#8198;<span class="math-id">x</span>)<sup
    >2</sup
  >
  = 1
</div>

Кожному елементу .math-id задається text-transform: math-auto. Проте зверніть увагу, що лише символи x стають курсивними, а sin і cos залишаються без змін.

.math-id {
  text-transform: math-auto;
}

Проте для математичних формул краще користуватися MathML, адже ця мова пропонує надійніший і доступніший спосіб подання математичного вмісту. Ось та сама формула з використанням MathML:

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <semantics>
    <mrow>
      <mo stretchy="false">(</mo>
      <mo lspace="0em" rspace="0em">sin</mo>
      <mspace width="0.16666666666666666em"></mspace>
      <mi>x</mi>
      <msup>
        <mo stretchy="false">)</mo>
        <mn>2</mn>
      </msup>
      <mo>+</mo>
      <mo stretchy="false">(</mo>
      <mo lspace="0em" rspace="0em">cos</mo>
      <mspace width="0.16666666666666666em"></mspace>
      <mi>x</mi>
      <msup>
        <mo stretchy="false">)</mo>
        <mn>2</mn>
      </msup>
      <mo>=</mo>
      <mn>1</mn>
    </mrow>
    <annotation encoding="TeX">(\sin\,x)^2+(\cos\,x)^2=1</annotation>
  </semantics>
</math>

Специфікації

Сумісність із браузерами

Дивіться також

• font-variant