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, 0 insertions, 307 deletions
diff --git a/files/id/web/css/text-transform/index.html b/files/id/web/css/text-transform/index.html deleted file mode 100644 index b9fbd65f0c..0000000000 --- a/files/id/web/css/text-transform/index.html +++ /dev/null @@ -1,307 +0,0 @@ ---- -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> |