1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
|
---
title: text-transform
slug: Web/CSS/text-transform
translation_of: Web/CSS/text-transform
---
<div>{{CSSRef}}</div>
<p>Properti CSS <strong><code>text-transform</code></strong> menerangkan bagaimana mengatur teks sebuah elemen. Properti ini dapat digunakan untuk membuat sebuah teks menjadi besar atau kecil semua, atau membuat setiap kata dikapitalisasi.</p>
<pre class="brush:css no-line-numbers">/* 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;
</pre>
<p>Properti <code>text-transform</code> memperhatikan peraturan khusus untuk setiap bahasa, seperti:</p>
<ul>
<li>
<p>Dalam bahasa daerah Turki, seperti bahasa Turki (<code>tr</code>), bahasa Azerbaijan (<code>az</code>), Tatar Krimean (<code>crh</code>), Tatar Volga (<code>tt</code>), dan bahasa Bashkir (<code>ba</code>), terdapat dua macam i, yaitu dengan dan tanpa titik, dan dua pasangan huruf: <code>i</code>/<code>İ</code> and <code>ı</code>/<code>I</code>.</p>
</li>
<li>
<p>Dalam bahasa Jerman (<code>de</code>), huruf besar <code>ß</code> menjadi <code>SS</code>.</p>
</li>
<li>
<p>Dalam bahasa Belanda (<code>nl</code>), dwihuruf <code>ij</code> diubah menjadi <code>IJ</code>, bahkan dengan pilihan <code>text-transform: capitalize</code>, yang seharusnya hanya mengubah huruf pertama dari kata menjadi huruf besar.</p>
</li>
<li>
<p>Dalam bahasa Yunani (<code>el</code>), huruf vokal kehilangan aksen saat semua huruf dalam kata adalah huruf besar (<code>ά</code>/<code>Α</code>), kecuali untuk huruf <span lang="el">eta</span> disjungtif (<code>ή</code>/<code>Ή</code>). Diftong dengan aksen pada huruf vokal pertama dihilangkan dan mendapat diaeresis pada huruf vokal kedua (<code>άι</code>/<code>ΑΪ</code>).</p>
</li>
<li>
<p>Dalam bahasa Yunani (<code>el</code>), huruf sigma kecil mempunyai dua bentuk: <code>σ</code> dan <code>ς</code>. <code>ς</code> digunakan hanya saat sigma terdapat di akhir kata. Sewaktu menerapkan <code>text-transform: lowercase</code> kepada huruf sigma besar (<code>Σ</code>), peramban perlu memilih huruf kecil yang tepat berdasarkan konteksnya.</p>
</li>
<li>Dalam bahasa Irlandia (<code>ga</code>), huruf pendahulu tertentu tetap menjadi huruf kecil saat dasar awal dikapitalkan, contohnya <code>text-transform: uppercase</code> akan mengubah <code>ar aon tslí</code> menjadi <code>AR AON tSLÍ</code> dan bukan menjadi seperti yang dikira orang <code>AR AON TSLÍ </code>(hanya Firefox). Pada beberapa kasus, garis-sambung juga dihilangkan saat pengubahan menjadi huruf besar: <code>an t-uisce</code> berubah menjadi <code>AN tUISCE </code>(dan garis-sambung ditambahkan kembali saat dilakukan <code>text-transform: lowercase</code>)</li>
</ul>
<p>Pilihan bahasa didefinisikan dengan atribut HTML <code>lang</code> atau dengan atribut XML <code>xml:lang</code>.</p>
<p>Dukungan untuk kasus-kasus tertentu tidak sama untuk semua peramban, harap periksa <a href="#Browser_compatibility">tabel kompatibilitas peramban</a>.</p>
<p>{{cssinfo}}</p>
<h2 id="Syntax">Syntax</h2>
<dl>
<dt><code>capitalize</code></dt>
<dd>
<p>Adalah kata kunci yang mengubah secara paksa <em>huruf</em> 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.</p>
<div class="note">Penulis tidak seharusnya mengharapkan <code class="css">capitalize</code> untuk mengikuti konvensi huruf besar untuk bahasa tertentu (seperti mengabaikan artikel dalam bahasa Inggris).</div>
<div class="note">Kata kunci <code>capitalize</code> 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 <code>ⓐ</code> 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 <code>capitalize</code> di tabel kompatibilitas peramban mempunyai informasi pada versi berapa mesin peramban mulai mendukung penerapan ini</div>
</dd>
<dt><code>uppercase</code></dt>
<dd>Adalah kata kunci yang mengubah semua karakter menjadi huruf besar.</dd>
<dt><code>lowercase</code></dt>
<dd>Adalah kata kunci yang mengubah semua karakter menjadi huruf kecil.</dd>
<dt><code>none</code></dt>
<dd>Adalah kata kunci yang mencegah perubahan dari semua karakter.</dd>
<dt><code>full-width</code> {{experimental_inline}}</dt>
<dd>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).</dd>
</dl>
<h3 id="Sintaksis_Formal">Sintaksis Formal</h3>
{{csssyntax}}
<h2 id="Contoh">Contoh</h2>
<h3 id="none" name="none"><code>none</code></h3>
<pre class="brush: html"><p>Kalimat Awal
<strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
</p></code>
<p>text-transform: none
<strong><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span></strong>
</p>
</pre>
<pre class="brush: css">span {
text-transform: none;
}
strong { float: right; }</pre>
<p>This demonstrates no text transformation.</p>
<p>{{ EmbedLiveSample('none', '100%', '100px') }}</p>
<h3 id="capitalize_(General)" name="capitalize_(General)"><code>capitalize</code> (Umum)</h3>
<pre class="brush: html"><p>Kalimat Awal
<strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
</p></code>
<p>text-transform: capitalize
<code> <strong></code><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span><code></strong></code>
</p></pre>
<pre class="brush: css">span {
text-transform: capitalize;
}
strong { float: right; }</pre>
<p>Contoh ini menunjukkan kata yang dikapitalkan.</p>
<p>{{ EmbedLiveSample('capitalize_(General)', '100%', '100px') }}</p>
<h3 id="capitalize_(Punctuation)" name="capitalize_(Punctuation)"><code>capitalize</code> (Tanda Baca)</h3>
<pre class="brush: html"><p>Kalimat Awal
<strong><code>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code><code></strong>
</p></code>
<p>text-transform: capitalize
<code><strong></code><span><code>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code></span><code></strong></code>
</p></pre>
<pre class="brush: css">span {
text-transform: capitalize;
}
strong { float: right; }</pre>
<p>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.</p>
<p>{{ EmbedLiveSample('capitalize_(Punctuation)', '100%', '100px') }}</p>
<h3 id="capitalize_(Symbols)" name="capitalize_(Symbols)"><code>capitalize</code> (Simbol)</h3>
<pre class="brush: html"><p>Kalimat Awal
<strong><code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code><code></strong>
</p></code>
<p>text-transform: capitalize
<code><strong></code><span><code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code></span><code></strong></code>
</p></pre>
<pre class="brush: css">span {
text-transform: capitalize;
}
strong { float: right; }</pre>
<p>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.</p>
<p>{{ EmbedLiveSample('capitalize_(Symbols)', '100%', '100px') }}</p>
<h3 id="capitalize_(Dutch_ij_digraph)" name="capitalize_(Dutch_ij_digraph)"><code>capitalize</code> (dwihuruf Belanda <em>ij</em>)</h3>
<pre class="brush: html"><p>Kalimat Awal
<strong lang="nl"><code>The Dutch word: "<span lang="nl">ijsland</span>" starts with a digraph.</code><code></strong>
</p></code>
<p>text-transform: capitalize
<code><strong></code><span lang="nl"><code>The Dutch word: "<span lang="nl">ijsland</span>" starts with a digraph.</code></span><code></strong></code>
</p></pre>
<pre class="brush: css">span {
text-transform: capitalize;
}
strong { float: right; }</pre>
<p>Contoh ini menunjukkan bagaimana dwihuruf bahasa Belanda <em>ij</em> harus diperlakukan sebagai huruf tunggal.</p>
<p>{{ EmbedLiveSample('capitalize_(Dutch_ij_digraph)', '100%', '100px') }}</p>
<h3 id="uppercase_(General)" name="uppercase_(General)"><code>uppercase</code> (Umum)</h3>
<pre class="brush: html"><p>Kalimat Awal
<strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code><code></strong>
</p></code>
<p>text-transform: uppercase
<code><strong></code><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span><code></strong></code>
</p></pre>
<pre class="brush: css">span {
text-transform: uppercase;
}
strong { float: right; }</pre>
<p>Contoh ini menunjukkan bagaimana kalimat diubah menjadi huruf besar.</p>
<p>{{ EmbedLiveSample('uppercase_(General)', '100%', '100px') }}</p>
<h3 id="uppercase_(Greek_Vowels)" name="uppercase_(Greek_Vowels)"><code>uppercase</code> (Huruf Vokal Yunani)</h3>
<pre class="brush: html"><p>Kalimat Awal
<strong><code>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</code><code></strong>
</p></code>
<p>text-transform: uppercase
<code><strong></code><span><code>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</code></span><code></strong></code>
</p></pre>
<pre class="brush: css">span {
text-transform: uppercase;
}
strong { float: right; }</pre>
<p>Contoh ini menunjukkan bagaimana huruf vokal bahasa Yunani, kecuali huruf disjungtif <em>eta</em>, kehilangan aksen, dan aksen pada huruf vokal pertama dari pasangan vokal menjadi diaeresis pada huruf vokal kedua.</p>
<p>{{ EmbedLiveSample('uppercase_(Greek_Vowels)', '100%', '100px') }}</p>
<h3 id="lowercase_(General)" name="lowercase_(General)"><code>lowercase</code> (Umum)</h3>
<pre class="brush: html"><p>Kalimat Awal
<strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code><code></strong>
</p></code>
<p>text-transform: lowercase
<code><strong></code><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span><code></strong></code>
</p></pre>
<pre class="brush: css">span {
text-transform: lowercase;
}
strong { float: right; }</pre>
<p>Contoh ini menunjukkan bagaimana kalimat diubah menjadi huruf kecil.</p>
<p>{{ EmbedLiveSample('lowercase_(General)', '100%', '100px') }}</p>
<h3 id="lowercase_(Greek_Σ)" name="lowercase_(Greek_Σ)"><code>lowercase</code> (Huruf Yunani Σ)</h3>
<pre class="brush: html"><p>Kalimat Awal
<strong><code>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</code><code></strong>
</p></code>
<p>text-transform: lowercase
<code><strong></code><span><code>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</code></span><code></strong></code>
</p></pre>
<pre class="brush: css">span {
text-transform: lowercase;
}
strong { float: right; }</pre>
<p>Contoh ini menunjukkan bagaimana karakter bahasa Yunani sigma (<code>Σ</code>) diubah menjadi huruf kecil sigma biasa (<code>σ</code>) atau varian akhir-kata (<code>ς</code>), tergantung kepada konteksnya.</p>
<p>{{ EmbedLiveSample('lowercase_(Greek_Σ)', '100%', '100px') }}</p>
<h3 id="full-width_(General)" name="full-width_(General)"><code>full-width</code> (Umum)</h3>
<pre class="brush: html"><p>Kalimat Awal
<strong>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~<code></strong>
</p></code>
<p>text-transform: full-width
<code><strong></code><span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span><code></strong></code>
</p></pre>
<pre class="brush: css">span {
text-transform: full-width;
}
strong { width: 100%; float: right; }</pre>
<p>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.</p>
<p>{{ EmbedLiveSample('full-width_(General)', '100%', '175px') }}</p>
<h2 id="Spesifikasi">Spesifikasi</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spesifikasi</th>
<th scope="col">Status</th>
<th scope="col">Komentar</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Text', '#text-transform', 'text-transform')}}</td>
<td>{{Spec2('CSS4 Text')}}</td>
<td>Dari {{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}, menambahkan kata kunci <code>full-size-kana</code> dan membolehkan kata kunci <code>full-width</code> digunakan bersama dengan kata kunci lainnya.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}</td>
<td>{{Spec2('CSS3 Text')}}</td>
<td>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 <code>capitalize</code> ke huruf pertama kata, mengabaikan tanda baca atau simbol di awal. Menambahkan kata kunci <code>full-width</code> untuk membuat penggabungan penulisan dengan karakter ideografi dan alfabet menjadi mulus.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Dari {{SpecName('CSS1', '#text-transform', 'text-transform')}}, memperluas cakupan huruf dengan tulisan bikameral non-latin.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#text-transform', 'text-transform')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Definisi awal</td>
</tr>
</tbody>
</table>
<h2 id="Kompatibilitas_Peramban">Kompatibilitas Peramban</h2>
<p> </p>
<div class="hidden">Tabel kompatibilitas di halaman ini dibuat dari data terstruktur. Apabaila anda mau menambahkan data, harap lakukan <em>check-out</em> pada <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> dan mengirimkan <em>pull-request</em> kepada kami.</div>
<p>{{Compat("css.properties.text-transform")}}</p>
<p> </p>
<h2 id="Lihat_juga">Lihat juga</h2>
<ul>
<li>{{cssxref("font-variant")}}</li>
</ul>
|
