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.

Initial valuenone
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

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 : 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
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

none | capitalize | uppercase | lowercase | full-width

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.

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.

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.

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
CSS Text Level 4
The definition of 'text-transform' in that specification.
Working Draft Dari CSS Text Module Level 3
The definition of 'text-transform' in that specification.
, menambahkan kata kunci full-size-kana dan membolehkan kata kunci full-width digunakan bersama dengan kata kunci lainnya.
CSS Text Module Level 3
The definition of 'text-transform' in that specification.
Working Draft Dari CSS Level 2 (Revision 1)
The definition of 'text-transform' in that specification.
, 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.
CSS Level 2 (Revision 1)
The definition of 'text-transform' in that specification.
Recommendation Dari CSS Level 1
The definition of 'text-transform' in that specification.
, memperluas cakupan huruf dengan tulisan bikameral non-latin.
CSS Level 1
The definition of 'text-transform' in that specification.
Recommendation Definisi awal

Kompatibilitas Peramban

 

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1112147213
capitalize as defined by CSS level 3 ? ?14 ? ? ?
full-width No ?19 No No No
Dutch IJ digraph No ?14 No No No
Greek accented letters30 ?15 No No No
Σσ or word-final ς30 ?14 No No6
iİ and ıI No ?14 ? ? No
ßSS ? ?1 ? ? ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support11 ? Yes4 ?13 ?
capitalize as defined by CSS level 3 ? ? ?14 ? ? ?
full-width No ? ?19 No No No
Dutch IJ digraph No ? ?14 No No No
Greek accented letters No ? ? No No No ?
Σσ or word-final ς No ? ?14 No No ?
iİ and ıI No ? ?14 ? No No
ßSS ? ? ?4 ? ? ?

1. The text-transform property does not work for ::first-line pseudo-elements (nor for the one-colon syntax). See Chromium bug 129669.

2. Since Opera 15, the text-transform property does not work for ::first-line pseudo-elements (nor for the one-colon syntax). See Chromium bug 129669.

3. The text-transform property does not work for ::first-line pseudo-elements (also not for the old one-colon syntax). See WebKit bug 3409.

 

Lihat juga

Tag Dokumen dan Kontributor

Kontributor untuk laman ini: fowlplay
Terakhir diperbarui oleh: fowlplay,