Własność CSS text-transform

Własność CSS text-transform umożliwia zamianę wszystkich liter w tekście na małe lub wielkie albo sprawienie, aby każdy wyraz zaczynał się od wielkiej litery. Ponadto za jej pomocą można zwiększyć czytelność tekstu napisanego przy użyciu znaków kana.

Własność ta ma tylko znaczenie wizualne, tzn. należy jej używać wyłącznie w celach dekoracyjnych, a nie semantycznych. Inaczej mówiąc, na przykład każde zdanie należy zaczynać wielką literą, nawet jeśli za pomocą własności text-transform zmieniono wszystkie litery na wielkie itd.

Wartości i składnia

Własność text-transform jako wartość przyjmuje kilka słów kluczowych. Jej formalna składnia wygląda następująco:

none | [capitalize | uppercase | lowercase ] || full-width || full-size-kana | math-auto

To znaczy, że własność text-transform przyjmuje jedno spośród słów kluczowych none, capitalize, uppercase, lowercase i math-auto oraz dodatkowo opcjonalnie przyjmuje słowo kluczowe full-width lub full-size-kana.

capitalize

Zamienia pierwszą literę każdego słowa na wielką.

full-size-kana

Zamienia wszystkie małe znaki kana na pełnowymiarowe.

full-width

Sprawia, że wszystkie znaki są renderowane w kwadratowym polu, co umożliwia ich wyrównanie w sposób typowy dla znaków języków wschodnioazjatyckich.

lowercase

Zamienia wszystkie litery na małe.

math-auto

Zamienia litery alfabetów łacińskiego i greckiego oraz kilka innych symboli matematycznych na kursywę matematyczną, ale działa tylko w odniesieniu do pojedynczych znaków. Na przykład literę x zamieni na 𝑥, literę y zamieni na 𝑦. Wartość ta jest przeznaczona głównie do stylizacji elementów mi języka MathML i zamiast niej zalecane jest używanie właśnie elementów tego języka.

none

Wyłącza zmianę wielkości liter.

uppercase

Zamienia wszystkie litery na wielkie.

Przykład

W poniższym przykładzie wszystkie litery w nagłówku h1 będą wielkie.

<style>
h1 {
  text-transform: uppercase
}
</style>
...
<h1>Lorem ipsum</h1>

Efekt:

Podsumowanie