--- title: text-transform slug: Web/CSS/text-transform translation_of: Web/CSS/text-transform ---

Properti CSS text-transform menerangkan bagaimana mengatur teks sebuah elemen. Properti ini dapat digunakan untuk membuat sebuah teks menjadi besar atau kecil semua, atau membuat setiap kata dikapitalisasi.

/* Nilai Kata-kunci */
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;
text-transform: full-width;

/* Nilai Global */
text-transform: inherit;
text-transform: initial;
text-transform: unset;

Properti text-transform memperhatikan peraturan khusus untuk setiap bahasa, seperti:

Dalam bahasa daerah Turki, seperti bahasa Turki (tr), bahasa Azerbaijan (az), Tatar Krimean (crh), Tatar Volga (tt), dan bahasa Bashkir (ba), terdapat dua macam i, yaitu dengan dan tanpa titik, dan dua pasangan huruf: i/İ and ı/I.
Dalam bahasa Jerman (de), huruf besar ß menjadi SS.
Dalam bahasa Belanda (nl), dwihuruf ij diubah menjadi IJ, bahkan dengan pilihan text-transform: capitalize, yang seharusnya hanya mengubah huruf pertama dari kata menjadi huruf besar.
Dalam bahasa Yunani (el), huruf vokal kehilangan aksen saat semua huruf dalam kata adalah huruf besar (ά/Α), kecuali untuk huruf eta disjungtif (ή/Ή). Diftong dengan aksen pada huruf vokal pertama dihilangkan dan mendapat diaeresis pada huruf vokal kedua (άι/ΑΪ).
Dalam bahasa Yunani (el), huruf sigma kecil mempunyai dua bentuk: σ dan ς. ς digunakan hanya saat sigma terdapat di akhir kata. Sewaktu menerapkan text-transform: lowercase kepada huruf sigma besar (Σ), peramban perlu memilih huruf kecil yang tepat berdasarkan konteksnya.
Dalam bahasa Irlandia (ga), huruf pendahulu tertentu tetap menjadi huruf kecil saat dasar awal dikapitalkan, contohnya text-transform: uppercase akan mengubah ar aon tslí menjadi AR AON tSLÍ dan bukan menjadi seperti yang dikira orang AR AON TSLÍ (hanya Firefox). Pada beberapa kasus, garis-sambung juga dihilangkan saat pengubahan menjadi huruf besar: an t-uisce berubah menjadi AN tUISCE (dan garis-sambung ditambahkan kembali saat dilakukan text-transform: lowercase)

Pilihan bahasa didefinisikan dengan atribut HTML lang atau dengan atribut XML xml:lang.

Dukungan untuk kasus-kasus tertentu tidak sama untuk semua peramban, harap periksa tabel kompatibilitas peramban.

Syntax

capitalize: Adalah kata kunci yang mengubah secara paksa huruf pertama dari setiap kata menjadi huruf besar. Karakter lainnya tidak berubah; huruf-huruf tersebut akan tetap seperti pertama kali dituliskan pada katanya. Sebuah huruf adalah karakter Unicode dari kategori Huruf atau Angka umum {{experimental_inline}} : pilihan ini tidak memasukkan tanda baca atau simbal pada awal kata.

Penulis tidak seharusnya mengharapkan capitalize untuk mengikuti konvensi huruf besar untuk bahasa tertentu (seperti mengabaikan artikel dalam bahasa Inggris).

Kata kunci capitalize kurang dispesifikasikan pada CSS 1 dan CSS 2.1. Terdapat perbedaan antara peramban untuk memperhitungkan huruf pertama (Firefox menganggap - dan _ sebagai huruf, tetapi peramban lain tidak. Baik Webkit dan Gecko tidak dengan tepat menanggap simbol berdasarkan huruf seperti ⓐ sebagai benar-benar huruf. Internet Explorer 9 menerapkan definisi CSS 2 yang paling mendekati, tetapi dengan beberapa kasus sangat aneh). Dengan mendefinisikan bagaimana penerapan yang benar secara jelas, CSS Text Level 3 membersihkan kekacauan ini. Baris capitalize di tabel kompatibilitas peramban mempunyai informasi pada versi berapa mesin peramban mulai mendukung penerapan ini
uppercase: Adalah kata kunci yang mengubah semua karakter menjadi huruf besar.
lowercase: Adalah kata kunci yang mengubah semua karakter menjadi huruf kecil.
none: Adalah kata kunci yang mencegah perubahan dari semua karakter.
full-width {{experimental_inline}}: Adalah kata kunci yang mengharuskan penulisan karakter — biasanya ideogram dan tulisan latin — di dalam kotak persegi, yang membuat mereka dapat sejajar dalam tulisan Asia Timur kebanyakan (seperti bahasa Cina atau Jepang).

Sintaksis Formal

Contoh

`none`

<p>Kalimat Awal
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
</p>
<p>text-transform: none
  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
</p>

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

This demonstrates no text transformation.

`capitalize` (Umum)

<p>Kalimat Awal
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
</p>
<p>text-transform: capitalize
  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
</p>

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

Contoh ini menunjukkan kata yang dikapitalkan.

`capitalize` (Tanda Baca)

<p>Kalimat Awal
  <strong>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</strong>
</p>
<p>text-transform: capitalize
  <strong><span>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</span></strong>
</p>

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

Contoh ini mennjukkan bagaimana tanda baca di awal sebuah kata diabaikan. Kata kunci ini bekerja pada huruf pertama yang termasuk dalam bagian karakter Unicode dari kategori Huruf dan Angka umum.

{{ EmbedLiveSample('capitalize_(Punctuation)', '100%', '100px') }}

`capitalize` (Simbol)

<p>Kalimat Awal
  <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong>
</p>
<p>text-transform: capitalize
  <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong>
</p>

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

Contoh ini menunjukkan bagaimana simbol di awal kata diabaikan. Kata kunci ini bekerja pada huruf pertama yang termasuk dalam bagian karakter Unicode dari kategori Huruf dan Angka umum.

`capitalize` (dwihuruf Belanda ij)

<p>Kalimat Awal
  <strong lang="nl">The Dutch word: "ijsland" starts with a digraph.</strong>
</p>
<p>text-transform: capitalize
  <strong><span lang="nl">The Dutch word: "ijsland" starts with a digraph.</span></strong>
</p>

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

Contoh ini menunjukkan bagaimana dwihuruf bahasa Belanda ij harus diperlakukan sebagai huruf tunggal.

{{ EmbedLiveSample('capitalize_(Dutch_ij_digraph)', '100%', '100px') }}

`uppercase` (Umum)

<p>Kalimat Awal
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
</p>
<p>text-transform: uppercase
  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
</p>

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

Contoh ini menunjukkan bagaimana kalimat diubah menjadi huruf besar.

`uppercase` (Huruf Vokal Yunani)

<p>Kalimat Awal
  <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong>
</p>
<p>text-transform: uppercase
  <strong><span>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong>
</p>

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

Contoh ini menunjukkan bagaimana huruf vokal bahasa Yunani, kecuali huruf disjungtif eta, kehilangan aksen, dan aksen pada huruf vokal pertama dari pasangan vokal menjadi diaeresis pada huruf vokal kedua.

{{ EmbedLiveSample('uppercase_(Greek_Vowels)', '100%', '100px') }}

`lowercase` (Umum)

<p>Kalimat Awal
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
</p>
<p>text-transform: lowercase
  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
</p>

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

Contoh ini menunjukkan bagaimana kalimat diubah menjadi huruf kecil.

`lowercase` (Huruf Yunani Σ)

<p>Kalimat Awal
  <strong>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</strong>
</p>
<p>text-transform: lowercase
  <strong><span>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</span></strong>
</p>

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

Contoh ini menunjukkan bagaimana karakter bahasa Yunani sigma (Σ) diubah menjadi huruf kecil sigma biasa (σ) atau varian akhir-kata (ς), tergantung kepada konteksnya.

`full-width` (Umum)

<p>Kalimat Awal
  <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; }

Beberapa karakter mempunyai dua bentuk, yaitu lebar normal dan penuh, dengan kode nilai Unicode yang berbeda. Versi lebar-penuh digunakan untuk membuat penggabungan penulisan dengan karakter ideografi Asia dengan mulus.

Spesifikasi

Spesifikasi	Status	Komentar
{{SpecName('CSS4 Text', '#text-transform', 'text-transform')}}	{{Spec2('CSS4 Text')}}	Dari {{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}, menambahkan kata kunci `full-size-kana` dan membolehkan kata kunci `full-width` digunakan bersama dengan kata kunci lainnya.
{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}	{{Spec2('CSS3 Text')}}	Dari {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}, memperluas cakupan huruf ke semua karakter Unicode dalam kategori Angka dan Huruf umum. Mengubah penerapan `capitalize` ke huruf pertama kata, mengabaikan tanda baca atau simbol di awal. Menambahkan kata kunci `full-width` untuk membuat penggabungan penulisan dengan karakter ideografi dan alfabet menjadi mulus.
{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}	{{Spec2('CSS2.1')}}	Dari {{SpecName('CSS1', '#text-transform', 'text-transform')}}, memperluas cakupan huruf dengan tulisan bikameral non-latin.
{{SpecName('CSS1', '#text-transform', 'text-transform')}}	{{Spec2('CSS1')}}	Definisi awal

Kompatibilitas Peramban

Lihat juga

{{cssxref("font-variant")}}

Syntax

Sintaksis Formal

Contoh

none

capitalize (Umum)

capitalize (Tanda Baca)

capitalize (Simbol)

capitalize (dwihuruf Belanda ij)

uppercase (Umum)

uppercase (Huruf Vokal Yunani)

lowercase (Umum)

lowercase (Huruf Yunani Σ)

full-width (Umum)