diff options
Diffstat (limited to 'files/id/web/css/text-transform/index.html')
| -rw-r--r-- | files/id/web/css/text-transform/index.html | 307 |
1 files changed, 307 insertions, 0 deletions
diff --git a/files/id/web/css/text-transform/index.html b/files/id/web/css/text-transform/index.html new file mode 100644 index 0000000000..41db13ecf4 --- /dev/null +++ b/files/id/web/css/text-transform/index.html @@ -0,0 +1,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> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<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> |