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: 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> і перетворює усі малі символи кана на рівносильні повнорозмірні кана, задля компенсування проблем розбірливості малих розмірів шрифту, що зазвичай використовуються в рубі.

Доступність

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

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

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

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;
}

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

Приклад з використанням "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>
p:nth-of-type(2) {
  text-transform: full-size-kana;
}

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

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

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
text-transform
Chrome Full support 1
footnote
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 4
Opera Full support 7
footnote
Safari Full support 1
footnote
WebView Android Full support 1
footnote
Chrome Android Full support 18
footnote
Firefox for Android Full support 4
Opera Android Full support 11
Safari on iOS Full support 1
footnote
Samsung Internet Full support 1.0
footnote
capitalize
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
footnote
Internet Explorer Full support 4
Opera Full support 7
Safari Full support 1
WebView Android Full support 1
Chrome Android Full support 18
Firefox for Android Full support 4
footnote
Opera Android Full support 11
Safari on iOS Full support 1
Samsung Internet Full support 1.0
Dutch IJ digraph
Chrome No support Ні
Edge No support Ні
Firefox Full support 14
Internet Explorer No support Ні
Opera No support Ні
Safari No support Ні
WebView Android No support Ні
Chrome Android No support Ні
Firefox for Android Full support 14
Opera Android No support Ні
Safari on iOS No support Ні
Samsung Internet No support Ні
full-size-kana
Chrome No support Ні
Edge No support Ні
Firefox Full support 64
Internet Explorer No support Ні
Opera No support Ні
Safari No support Ні
WebView Android No support Ні
Chrome Android No support Ні
Firefox for Android Full support 64
Opera Android No support Ні
Safari on iOS No support Ні
Samsung Internet No support Ні
full-width
Chrome No support Ні
Edge No support Ні
Firefox Full support 19
Internet Explorer No support Ні
Opera No support Ні
Safari No support Ні
WebView Android No support Ні
Chrome Android No support Ні
Firefox for Android Full support 19
Opera Android No support Ні
Safari on iOS No support Ні
Samsung Internet No support Ні
Greek accented letters
Chrome Full support 34
Edge Full support 79
Firefox Full support 15
Internet Explorer No support Ні
Opera Full support 21
Safari No support Ні
WebView Android Full support 4.4
Chrome Android Full support 34
Firefox for Android Full support 15
Opera Android Full support 21
Safari on iOS No support Ні
Samsung Internet Full support 2.0
Σσ or word-final ς
Chrome Full support 30
Edge Full support 12
Firefox Full support 14
Internet Explorer Full support 4
Opera Full support 17
Safari Full support 6
WebView Android Full support 4.4
Chrome Android Full support 30
Firefox for Android Full support 14
Opera Android Full support 18
Safari on iOS Full support 6
Samsung Internet Full support 2.0
iİ and ıI
Chrome Full support 31
Edge Full support 12
Firefox Full support 14
Internet Explorer Full support 4
Opera Full support 18
Safari Full support 8
WebView Android Full support 37
Chrome Android Full support 31
Firefox for Android Full support 14
Opera Android Full support 18
Safari on iOS Full support 8
Samsung Internet Full support 2.0
ßSS
Chrome Full support 1
Edge Full support 18
Firefox Full support 1
Internet Explorer No support Ні
Opera Full support 7
Safari Full support 1
WebView Android Full support 1
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 11
Safari on iOS Full support 1
Samsung Internet Full support 1.0

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