Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Membuat Teks Sideways dengan Mudah Menggunakan Property CSS "writing-mode"

by
Difficulty:IntermediateLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Muhammad Naufal (you can also view the original English article)

Dalam tips singkat ini saya akan menunjukkan kepada Anda cara menampilkan teks di halaman website yang dimulai dari atas ke bawah, bukan dari kiri ke kanan (atau dari kanan ke kiri). Ada dua pendekatan, yang satu lebih baik dari yang lainnya, jadi mari kita mulai dan perhatikan!

Cara Menggunakan CSS "writing-mode"

Pendekatan #1: CSS Transform

Jika Anda familiar dengan CSS, Anda mungkin secara naluri berpikir bahwa transform adalah cara terbaik untuk mengatasi masalah ini, tetapi izinkan saya menunjukkan kepada Anda mengapa cara ini tidak ideal. Kita akan mulai dengan beberapa konten (beberapa heading dan paragraf), kemudian kita akan menerapkan transform, bersama dengan transform-origin sehingga berotasi dari titik yang benar, lalu offset untuk mempertahankannya tetap di layar:

Pendekatan ini berfungsi dalam rotating teks, tetapi flow dari dokumen tersebut tidak terpengaruh, sehingga h2 dalam kasus kami sekarang berada di atas konten di bawahnya. Namun, hal itu memberi kita hasil abstrak yang cukup keren.

Pendekatan #2: CSS writing-mode

Pendekatan kedua kita akan menjaga flow dokumen agar tetap sesuai dengan dimensi h2, terlepas dari arah teks. Kita akan menggunakan property writing-mode, seperti ini:

Dalam hal ini, kami telah memberinya value vertical-rl, yang menerapkan arah tampilan vertikal, dan arah teks kanan ke kiri. Lihatlah:

Jauh lebih baik lagi. Anda juga akan melihat bahwa kursornya juga berubah, yang tidak terjadi dengan CSS transform.

css cursor

Block Flow Direction

Anda mungkin telah memperhatikan bahwa kita telah menggunakan nilai rl (kanan ke kiri) sedangkan kita biasanya membaca skrip latin dari kiri ke kanan. Tetapi itu karena kita telah mengubah Arah Aliran Blok atau Block Flow Direction. jika kita memberi h2 set value yang tinggi, Anda akan melihat pembungkusan teks dan Anda akan menyadari bahwa dalam hal ini kita benar-benar membutuhkan garis untuk membaca dari kanan halaman ke kiri:

Hal ini menyebabkan kita perlu menentukan bit-bit mana dari semua pengaturan ini yang perlu mengalir dan ke arah mana. Skrip berbasis Latin mengalir dari atas ke bawah (ini adalah Block Flow Direction). Teks mereka dibaca kiri ke kanan (ini adalah Inline Flow Direction). Dan karakter mereka memiliki garis dasar di bagian bawah sementara mengarah ke atas (ini adalah Character Direction). Seperti ini:

Naskah lain, seperti yang berbasis bahasa Arab, Han-based (seperti Cina dan Jepang), dan berbasis Mongolia, dapat menampilkan teks menggunakan ketiga arus ini dalam kombinasi arah mana pun.

Skrip dan Mode Penulisan

Spesifikasi Mode Penulisan dirancang untuk mendukung berbagai skrip dan sistem penulisan dunia. Misalnya kami menyebutkan sistem berbasis Mongolia, apa pun mereka ditampilkan secara vertikal, tetapi mengalir dari kiri ke kanan.

Nilai-nilai writing-mode lainnya, yang dapat Anda gunakan hari ini, termasuk:

  • vertical-lr di mana teks berjalan secara vertikal tetapi mulai di sebelah kiri container berjalan ke kanan.
  • horizontal-tb di mana teks tetap horisontal, tetapi mengalir dari atas ke bawah. Ini (Anda akan perhatikan) adalah perilaku default.

Orientasi Teks

Inilah satu hal lagi untuk diperhatikan: sebuah puisi China, menggunakan mode penulisan vertical-rl. Isinya dimulai dari kanan, sehingga Anda mulai di sebelah kanan halaman dan membaca ke arah kiri. Tetapi yang mungkin Anda perhatikan adalah karakternya masih berorientasi tegak. Karakter Latin akan berorientasi berbeda dengan aturan yang sama persis ini. Ini disengaja:

"Unicode Standard menetapkan property untuk setiap karakter dan browser dapat menggunakan ini untuk menentukan orientasi default dari karakter yang diberikan." - W3C

Anda dapat lebih lanjut menyesuaikan orientasi karakter dengan menggunakan property text-orientation.

Kesimpulan

Writing mode CSS memiliki dukungan browser yang sangat baik pada saat tulisan ini dibuat, meskipun beberapa aspek masih dalam pengembangan. Semua yang Anda lihat dalam tutorial ini dapat digunakan dalam produksi sekarang.

Apakah Anda menggunakan ini untuk hasil praktis atau estetis, mari kita lihat apa yang telah bisa Anda lakukan di komentar!

Link yang Berguna

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.