Mengatur Teks
Melalui kelas ini, kamu diajak untuk:
- Mengidentifikasi elemen-elemen untuk mengatur tata letak teks dalam HTML Web Story.
- Mengidentifikasi elemen-elemen untuk mengatur visualisasi teks dalam HTML Web Story.
Pentingnya Mengatur Teks
Sebagai jenis konten visual storytelling, Web Story tetap menganggap penting keberadaan teks sebagai penunjang jalannya cerita. Untuk menghadirkan konten yang menarik perhatian, kita juga perlu mengatur bagaimana teks ditampilkan.
Tata Letak Teks
AMP Story Grid Layer memiliki template yang mengatur tata letak konten, termasuk teks. Dengan menambahkan atribut vertical, kita bisa mengatur posisi teks di atas (top), tengah (middle), atau bawah (bottom) lewat selector class.
<amp-story-grid-layer template="vertical" class="bottom">
<div class="box_gradient">Yogyakarta tidak hanya tentang gudeg, tetapi juga tempat terbaik untuk menikmati bakmi jawa.
</div>
</amp-story-grid-layer>Visualisasi Teks
Selain mengatur tata letak, kita juga bisa mengatur visualisasi teks. Mari kita lihat kembali susunan kode di bagian sebelumnya.
<amp-story-grid-layer template="vertical" class="bottom">
<div class="box_gradient">Yogyakarta tidak hanya tentang gudeg, tetapi juga tempat terbaik untuk menikmati bakmi jawa.
</div>
</amp-story-grid-layer>Dalam susunan kode ini, tampilan teks diatur dalam class “box_gradient”. Ini adalah selector CSS yang bisa kita atur sendiri. Lihat contoh di bawah ini.
.box_gradient {
font-size: 18px;
line-height: 25px;
position: relative;
padding: 24px;
background: linear-gradient(transparent 0%, transparent 34%, black 100%);
}Selayang Pandang
- Yang perlu diatur dalam teks adalah ukuran, jarak antar-baris, posisi, dan jenisnya.
- Jika teks berada di dalam box atau mepet dengan konten, gunakan padding atau margin.
Kuis
Di manakah letak teks?