Articles
Pengenalan ke CSS
Properti CSS untuk Tampilan Kode dan Kutipan

Properti CSS untuk Tampilan Kode dan Kutipan

Artikel ini menjelaskan properti CSS terkait tampilan kode dan kutipan.

Anda dapat mempelajari properti CSS yang terkait dengan tampilan kode dan kutipan, seperti quotes dan user-select, termasuk kasus penggunaannya dan cara menuliskannya.

YouTube Video

HTML untuk Pratinjau

css-code-quotation.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-code-quotation.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Code Display And Quotations</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Code Display And Quotations Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>white-space</h3>
 23            <section>
 24                <header><h4>white-space: normal</h4></header>
 25                <section class="sample-view">
 26                    <p class="white-space-normal">This is   an example     with    multiple spaces.   The spaces will be collapsed.</p>
 27                </section>
 28                <header><h4>white-space: nowrap</h4></header>
 29                <section class="sample-view">
 30                    <p class="white-space-nowrap">This is an example with no line breaks. The text will not wrap.</p>
 31                </section>
 32                <header><h4>white-space: pre</h4></header>
 33                <section class="sample-view">
 34<p class="white-space-pre">This    is     an
 35    example     with multiple
 36    spaces    and
 37    line breaks.</p>
 38                </section>
 39                <header><h4>white-space: pre-wrap</h4></header>
 40                <section class="sample-view">
 41<p class="white-space-pre-wrap">This    is     an
 42    example     with multiple
 43    spaces    and
 44    line breaks. The text will wrap when it reaches the edge.</p>
 45                </section>
 46            </section>
 47        </article>
 48        <article>
 49            <h3>overflow-wrap</h3>
 50            <section>
 51                <header><h4>overflow-wrap: normal</h4></header>
 52                <section class="sample-view">
 53                    <section class="overflow-wrap-example">
 54                        <p class="overflow-wrap-normal">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 55                    </section>
 56                </section>
 57                <header><h4>overflow-wrap: break-word</h4></header>
 58                <section class="sample-view">
 59                    <section class="overflow-wrap-example">
 60                        <p class="overflow-wrap-break-word">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 61                    </section>
 62                </section>
 63            </section>
 64        </article>
 65        <article>
 66            <h3>quotes</h3>
 67            <section>
 68                <header><h4>quotes: "(" ")"</h4></header>
 69                <section class="sample-view">
 70                    <p>Here's an example of a quote: <q>CSS makes the web beautiful.</q></p>
 71                </section>
 72                <header><h4>quotes: "(" ")" "[" "]"</h4></header>
 73                <section class="sample-view">
 74                    <p>Here's a nested quote: <q>He said, <q>CSS is powerful.</q></q></p>
 75                </section>
 76            </section>
 77        </article>
 78        <article>
 79            <h3>user-select</h3>
 80            <section>
 81                <header><h4>user-select: auto</h4></header>
 82                <section class="sample-view">
 83                    <p class="select-auto">This text is selectable.</p>
 84                </section>
 85                <header><h4>user-select: none</h4></header>
 86                <section class="sample-view">
 87                    <p class="select-none">This text cannot be selected.</p>
 88                </section>
 89                <header><h4>user-select: all</h4></header>
 90                <section class="sample-view">
 91                    <p class="select-all">All text will be selected at once.</p>
 92                </section>
 93            </section>
 94        </article>
 95        <article>
 96            <h3>tab-size</h3>
 97            <section>
 98                <header><h4>tab-size: initial</h4></header>
 99                <section class="sample-view">
100<pre>
101function example() {
102	console.log("Initial Tab size is 8");
103}
104</pre>
105            </section>
106            <section>
107                <header><h4>tab-size: 2</h4></header>
108                <section class="sample-view">
109<pre class="tab-size-2">
110function example() {
111	console.log("Tab size is set to 2");
112}
113</pre>
114            </section>
115            <header><h4>tab-size: 4</h4></header>
116            <section class="sample-view">
117<pre class="tab-size-4">
118function example() {
119	console.log("Tab size is set to 4");
120}
121</pre>
122            </section>
123            <header><h4>tab-size: 20px</h4></header>
124            <section class="sample-view">
125<pre class="tab-size-20px">
126function example() {
127	console.log("Tab size is set to 20px");
128}
129</pre>
130                </section>
131            </section>
132        </article>
133        <article>
134            <h3>text-indent</h3>
135            <section>
136                <header><h4>text-indent: 0</h4></header>
137                <section class="sample-view">
138                    <p class="text-indent-0">This text has no indentation. The first line starts flush with the left margin.</p>
139                </section>
140                <header><h4>text-indent: 20px</h4></header>
141                <section class="sample-view">
142                    <p class="text-indent-20px">This paragraph has a 20px indentation on the first line.</p>
143                </section>
144                <header><h4>text-indent: -10px</h4></header>
145                <section class="sample-view">
146                    <p class="text-indent--10px">This paragraph has a negative indentation, pulling the first line to the left.</p>
147                </section>
148                <header><h4>text-indent: 10%</h4></header>
149                <section class="sample-view">
150                    <p class="text-indent-10percent">This paragraph has a first-line indentation of 10% of the containing block's width.</p>
151                </section>
152                <header><h4>text-indent: -20px; margin-left:40px;</h4></header>
153                <section class="sample-view">
154                    <p class="text-indent-with-margin">This is an example paragraph using a hanging indent. The second and subsequent lines are indented, while the first line is outdented.</p>
155                </section>
156            </section>
157        </article>
158
159    </main>
160</body>
161</html>

Properti CSS untuk Tampilan Kode dan Kutipan

Properti white-space 

 1.white-space-normal {
 2    white-space: normal;
 3    border: 1px solid black;
 4    padding: 10px;
 5    width: 300px;
 6}
 7
 8.white-space-nowrap {
 9    white-space: nowrap;
10    border: 1px solid black;
11    padding: 10px;
12    width: 300px;
13}
14
15.white-space-pre {
16    white-space: pre;
17    border: 1px solid black;
18    padding: 10px;
19    width: 300px;
20}
21
22.white-space-pre-wrap {
23    white-space: pre-wrap;
24    border: 1px solid black;
25    padding: 10px;
26    width: 300px;
27}

Properti white-space adalah properti CSS yang menentukan bagaimana spasi kosong dan pemisahan baris ditangani di dalam sebuah elemen. Secara default, HTML memperlakukan beberapa spasi sebagai satu spasi, tetapi properti white-space memungkinkan Anda untuk mengubah perilaku ini.

Nilai utama dari white-space

  • normal adalah nilai default, di mana beberapa spasi digabungkan menjadi satu, dan baris dipisahkan secara otomatis.
  • nowrap menggabungkan spasi menjadi satu tetapi mencegah pemisahan baris. Konten ditampilkan dalam satu baris.
  • pre mempertahankan spasi kosong dan pemisahan baris sesuai aslinya. Pemisahan baris tidak terjadi.
  • pre-wrap mempertahankan spasi kosong dan pemisahan baris sambil memungkinkan pemisahan baris.
  • pre-line menggabungkan spasi tetapi mempertahankan pemisahan baris, dan memungkinkan pemisahan baris.
  • break-spaces mempertahankan spasi dan pemisahan baris, sambil memungkinkan pemisahan pada kata yang panjang atau spasi kosong.

Properti overflow-wrap 

 1.overflow-wrap-example {
 2  width: 200px;
 3  border: 1px solid #000;
 4}
 5
 6.overflow-wrap-normal {
 7  overflow-wrap: normal;
 8}
 9
10.overflow-wrap-break-word {
11  overflow-wrap: break-word;
12}

Properti overflow-wrap, sebelumnya dikenal sebagai word-wrap, menentukan bagaimana kata-kata ditangani ketika melebihi lebar kontainer. Dengan menggunakan properti ini, Anda dapat membungkus kata secara benar untuk mencegah teks meluap dan merusak tata letak.

Dalam contoh ini, dengan normal, kata yang panjang dapat melebihi kontainer dan menyebabkan pengguliran horizontal, tetapi break-word memaksa kata panjang untuk dibungkus.

Nilai properti

overflow-wrap terutama memiliki dua nilai:.

  • normal

    normal adalah nilai default, di mana peramban mengikuti aturan pembungkusan kata standar. Biasanya, kata-kata hanya dibungkus pada titik-titik yang dapat dipisahkan seperti spasi atau tanda hubung. Jika sebuah kata sangat panjang, kata tersebut mungkin melebihi lebar kontainer dan merusak tata letak.

  • break-word break-word memaksa pemisahan baris jika diperlukan, membungkus teks ke baris berikutnya terlepas dari panjang kata. Ini membantu mencegah tata letak kontainer rusak karena kata-kata yang terlalu panjang.

    Ketika break-word ditentukan, kata-kata akan terbungkus bahkan di tempat tanpa spasi atau tanda hubung untuk sesuai dengan lebar layar. Ini sangat berguna untuk URL atau kata-kata yang sangat panjang.

Perbedaan Antara overflow-wrap dan Properti Lain

Properti yang mirip dengan overflow-wrap termasuk word-break dan white-space.

Perbedaan dengan word-break

word-break menentukan bagaimana seluruh kata diproses, sedangkan overflow-wrap hanya memicu pembungkusan ketika sebuah kata melebihi lebar kontainer. Sebagai contoh, word-break: break-all; memotong kata pada posisi mana saja, bahkan jika kata tersebut tidak panjang, sedangkan overflow-wrap hanya membungkus kata ketika kata tersebut melebihi kontainer.

Perbedaan dengan white-space

Properti white-space mengontrol bagaimana pemutusan baris dan spasi diproses dalam seluruh teks. Tidak seperti overflow-wrap, white-space menentukan apakah pemutusan baris dan spasi dipertahankan namun tidak secara langsung memengaruhi pembungkusan kata.

Sebagai contoh, white-space: nowrap; memastikan bahwa seluruh teks tetap berada dalam satu baris tanpa pembungkusan. Di sisi lain, overflow-wrap mengontrol pembungkusan teks.

Kasus Penggunaan Praktis

overflow-wrap sangat berguna dalam situasi-situasi berikut:.

  1. Menampilkan URL: Mencegah masalah tata letak saat menampilkan URL panjang.
  2. Istilah Teknis: Menangani kasus-kasus di mana kata-kata berbahasa Inggris yang berkelanjutan atau istilah teknis melebihi lebar kontainer.
  3. Desain Responsif: Memastikan bahwa teks panjang tidak merusak tata letak bahkan pada layar kecil.

Properti quotes 

1q {
2    quotes: "(" ")" "[" "]";
3}

Properti quotes digunakan untuk menyesuaikan tanda kutip. Biasanya, tanda kutip akan otomatis dimasukkan saat membungkus konten elemen <blockquote> atau <q>, namun dengan menggunakan properti quotes, Anda dapat menentukan tanda kutip khusus.

Dalam contoh ini, tanda kurung ((, )) digunakan sebagai tanda kutip luar. Selain itu, tanda kutip bersarang direpresentasikan dengan tanda kurung siku ([, ]).

Sintaksis 

1element {
2    quotes: [opening-quote closing-quote] [, opening-quote closing-quote] ...;
3}

Properti quotes dapat ditentukan dengan nilai-nilai seperti berikut:.

  • none: Tidak ada tanda kutip yang akan ditampilkan.
  • Serangkaian kutipan: Tentukan tanda kutip pembuka dan penutup. Set pertama merepresentasikan tanda kutip luar, sementara set berikutnya digunakan untuk kutipan bersarang.

Poin penting dari quotes

Properti quotes adalah properti yang berguna untuk menyesuaikan tanda kutip yang digunakan dalam kutipan teks. Dengan menetapkan tanda kutip yang sesuai dengan desain dan bahasa, Anda dapat mencapai tampilan halaman yang lebih canggih. Menggunakan properti quotes memberikan manfaat seperti berikut:.

  • Sesuaikan tanda kutip: Anda dapat mengubah bentuk standar tanda kutip atau menetapkan tanda kutip yang disesuaikan dengan desain tertentu.
  • Mendukung tanda kutip bersarang: Anda dapat menerapkan set tanda kutip yang berbeda untuk tanda kutip bersarang.
  • Dapat disesuaikan berdasarkan negara dan bahasa: Mudah menerapkan gaya tanda kutip yang berbeda tergantung pada bahasa atau negara, yang berguna untuk situs web internasional.

Properti user-select 

 1.select-auto {
 2    user-select: auto;
 3}
 4
 5.select-none {
 6    user-select: none;
 7}
 8
 9.select-all {
10    user-select: all;
11}

  • Properti user-select adalah properti CSS yang digunakan untuk mengontrol apakah pengguna dapat memilih teks. Dengan menggunakan properti ini, Anda dapat mencegah teks agar tidak disalin pada elemen tertentu atau di seluruh halaman, atau sebaliknya membuatnya dapat dipilih. Jika Anda menentukan all untuk properti user-select, seluruh elemen akan dipilih sekaligus. Misalnya, ketika pengguna mengklik pada bidang teks atau paragraf, seluruh elemen akan dipilih sekaligus.

  • Ini juga dapat digunakan untuk pemilihan massal kode sumber.

  • Pada contoh ini, teks dari paragraf pertama dapat dipilih, tetapi teks dari paragraf kedua tidak dapat dipilih. Pada kelas select-all, properti user-select diatur ke all, memungkinkan seluruh elemen dipilih sekaligus.

Sintaksis 

1element {
2    user-select: auto | none | text | all | contain;
3}

Properti user-select dapat ditentukan dengan nilai-nilai berikut:.

  • auto: Gunakan perilaku default browser. Pemilihan teks diizinkan pada sebagian besar elemen, tetapi mungkin dibatasi pada beberapa elemen interaktif seperti tombol dan tautan.
  • none: Pemilihan teks sepenuhnya dinonaktifkan. Pengguna tidak akan dapat memilih teks di dalam elemen tersebut.
  • text: Mengizinkan hanya teks di dalam elemen untuk dipilih.
  • all: Seluruh elemen dipilih sekaligus. Alih-alih memilih sebagian, seluruh elemen akan dipilih sebagai satu kesatuan.
  • contain: Hanya didukung oleh beberapa browser. Hanya elemen pada lokasi yang diklik yang dapat dipilih.

Browser yang Didukung

Properti user-select didukung oleh sebagian besar browser modern. Namun, beberapa browser mungkin memerlukan awalan vendor seperti -webkit-user-select.

  • Chrome: Didukung
  • Firefox: Didukung
  • Safari: Didukung (memerlukan awalan -webkit-)
  • Edge: Didukung
  • Internet Explorer: Tidak Didukung

Kasus Penggunaan Utama

Properti user-select menawarkan keuntungan-keuntungan berikut.

  • Elemen UI: Nonaktifkan pemilihan teks untuk menghindari gangguan dengan operasi klik atau seret.
  • Cegah penyalinan teks: Cegah pemilihan dan penyalinan teks pada elemen tertentu.
  • Formulir dan elemen interaktif: Terapkan pada elemen interaktif di mana pemilihan teks tidak diperlukan untuk meningkatkan pengalaman pengguna.

Ringkasan

User-select adalah properti CSS yang berguna yang memungkinkan kontrol fleksibel atas pemilihan teks di sebuah halaman web. Ini dapat mencegah pengguna secara tidak sengaja memilih teks yang tidak diperlukan atau memungkinkan mereka memilih semuanya sekaligus, sesuai dengan berbagai interaksi.

Properti tab-size 

 1.tab-size-2 {
 2    tab-size: 2;
 3}
 4
 5.tab-size-4 {
 6    tab-size: 4;
 7}
 8
 9.tab-size-20px {
10    tab-size: 20px;
11}
  • Properti tab-size digunakan untuk menyesuaikan ruang untuk karakter tab. Secara default, lebar tab biasanya diatur ke 8 spasi, tetapi dapat disesuaikan ke nilai apa pun menggunakan properti tab-size.

Sintaksis 

1element {
2    tab-size: length | number;
3}

Properti tab-size dapat menerima jenis nilai berikut.

  • number: Menentukan lebar karakter tab dalam jumlah karakter. Anda dapat menentukan angka bulat atau desimal.
  • length: Menentukan lebar karakter tab menggunakan unit panjang (misalnya, px, em).

Catatan

  • Properti tab-size biasanya digunakan dengan font monospace. Saat digunakan dengan font proporsional, lebar tab mungkin menjadi tidak rata.

  • Saat menentukan jumlah karakter, perhatikan penskalaan pada perangkat yang berbeda.

Ringkasan

Menggunakan properti tab-size meningkatkan fleksibilitas saat menampilkan kode atau karakter tab. Sebagai pengembang, mengatur lebar tab dengan benar memastikan keterbacaan kode dan konsistensi desain.

Properti text-indent 

 1p.text-indent-0 {
 2    text-indent: 0;
 3}
 4
 5p.text-indent-20px {
 6    text-indent: 20px;
 7}
 8
 9p.text-indent--10px {
10    text-indent: -10px;
11}
12
13p.text-indent-10percent {
14    text-indent: 10%;
15}
16
17p.text-indent-with-margin {
18    text-indent: -20px;
19    margin-left: 20px;
20}
  • Properti text-indent digunakan untuk membuat lekukan pada baris pertama teks dalam elemen blok dengan jarak tertentu. Properti ini memungkinkan Anda untuk mengatur gaya hanya pada baris pertama paragraf.

Sintaksis 

1element {
2    text-indent: length | percentage;
3}

Properti text-indent dapat menerima jenis nilai berikut.

  • length: Menentukan lekukan menggunakan unit panjang (misalnya, px, em).
  • percentage: Menentukan lekukan sebagai persentase berdasarkan lebar elemen kontainer.

Catatan

  • text-indent hanya berlaku untuk elemen blok. Itu tidak berpengaruh pada elemen inline.

Ringkasan

Properti text-indent adalah alat yang sederhana namun kuat untuk menciptakan desain teks yang mudah dibaca. Dengan menguasai dasar-dasar dan memahami kasus penggunaan yang lebih lanjut dan pertimbangan terkait, Anda dapat membuat gaya lebih efektif.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Properti CSS terkait dengan jarak teksProperti CSS yang terkait dengan model kotak