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 |
---|---|
Успадковується | так |
Обчислене значення | as specified |
Формальний синтаксис
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>
p:nth-of-type(2) {
text-transform: full-size-kana;
}
Специфікації
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
text-transform
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | 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 | Opera Android Full support 11 | Safari on iOS Full support 1 | Samsung Internet Full support 1.0 |
capitalize
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | 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 | 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 |