Properti Writing Mode pada CSS

Properti Writing Mode pada CSS - Ada dua style yang biasa kita temukan dalam penulisan teks, bisa teks dituliskan secara horizontal atau secara vertikal. Begitupun didalam website tentu penilsan seperti ini sudah menjadi hal yang biasa karena memang ditujukan untuk membuat halaman menjadi menarik, lalu bagaimana caranya supaya kita bisa membuat tulisan teks bisa horizontal atau vertical ? Nah, kali ini saya akan membahas salah satu properti CSS yang bisa kita gunakan untuk membuat tulisan horizontal atau vertikal.

Properti CSS yang akan saya bahas kali ini adalah properti writing-mode, properti ini berfungsi untuk menjadikan style tulisan menjadi horizontal (default) atau vertikal.
Sintak dasar properti writing-mode seperti berikut :

writing-mode: horizontal-tb|vertical-rl|vertical-lr;

Dimana ada 3 nilai yang bisa kita gunakan yaitu :

  • horizontal-tb : Memposisikan teks secara horizontal
  • vertical-rl : Memposisikan teks secara vertikal dari atas kebawah awal kalimat akan dimulai dari kanan ke kiri
  • vertical-lr : Memposisikan teks secara vertikal dari atas kebawah awal kalimat akan dimulai dari kiri ke kkanan

Supaya lebih jelas akan saya praktekan bagaimana cara penggunaannya.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Properti Writing Mode pada CSS</title>
    <style>
        .container {
            width: 400px;
            margin: auto;
            box-shadow: 0px 3px 8px #222222;
            padding: 10px;
            border-radius: 5px;
        }
        h4 {
            writing-mode: vertical-lr;
            float: left;
            color: blue;
            margin-top: 20px;
        }
        span {color: red}
    </style>
</head>
<body>
    <div class="container">
        <h4>DUMETSCHOOL.</h4>
        <p><span>DUMET School</span> adalah lembaga kursus yang bergerak di bidang pendidikan khususnya kursus website, digital marketing, dan desain grafis. Sampai saat ini DUMET School sudah memiliki lulusan lebih dari 8000 orang dari berbagai status dan profesi mulai dari pelajar sekolah, mahasiswa, guru, dosen, staff profesional, freelancer, dll. Mereka tidak hanya yang tinggal di Jakarta saja namun banyak juga yang datang dari berbagai daerah di Indonesia.</p>
    </div>
</body>
</html>

Dari sintak diatas properti writing mode telah di set pada tag h4 dengan nilai vertical-lr, artinya hanya elemen judul yang akan mempunyai style teks secara vertikal. Jika kalian ingin menggunakan properti writing mode lakukan hal yang sama pada tag yang diinginkan.

Contoh writing mode pada tag p vertical-rl dan vertical-lr

vertical-lr

Properti Writing Mode pada CSS

vertical-rl

Properti Writing Mode pada CSS


Itulah pembahasan tentang Properti Writing Mode pada CSS semoga dengan pembahasan dan contoh diatas kalian bisa paham ya, selamat mencoba dan sampai jumpa diartikel selanjutnya.

27 Februari 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat