34 karakter · bebas disalin
Elemen blok untuk piksel teks
Blok Unicode U+2580 sampai U+259F menyimpan 32 karakter yang mengisi sebuah sel karakter dalam pecahan tetap — bayangan seperempat, langkah setinggi-perdelapan, setengah, dan kuadran. Inilah sebabnya sebuah terminal bisa menggambar progress bar, sparkline, atau bar chart hanya dengan teks. Salin karakter mana pun di bawah; masing-masing terdaftar dengan nama Unicode dan titik kodenya.
Bayangan
Empat tingkat kepadatan dari 25% sampai solid penuh. Cara tercepat untuk menyiratkan kedalaman atau peredupan tanpa warna.
Delapan-perdelapan vertikal
Mengisi sel dari bawah ke atas dalam delapan langkah. Inilah set untuk sparkline dan bar-chart.
Delapan-perdelapan horizontal
Mengisi sel dari kiri ke kanan dalam delapan langkah — set untuk progress-bar. Satu sel resolusi menjadi delapan.
Setengah dan kuadran
Setiap kombinasi dari empat seperempat-sel. Perlakukan satu sel karakter sebagai grid piksel 2×2 dan inilah keenam belas kondisinya.
Klik karakter mana pun untuk menyalinnya. Tidak ada yang diunduh — ini karakter teks, bukan gambar.
Blok Unicode
- U+2580–U+259F Elemen Blok
Cara menggunakan Elemen Blok
Bangun progress bar dari delapan-perdelapan horizontal
Gambar bagian yang terisi dengan █ dan selesaikan sel parsialnya dengan perdelapan terdekat. Bar 20-karakter tiba-tiba punya 160 langkah resolusi, bukan 20, sehingga bar bergerak mulus, bukan meloncat.
Bangun sparkline dari delapan-perdelapan vertikal
Petakan setiap titik data ke salah satu dari ▁▂▃▄▅▆▇█ berdasarkan proporsinya terhadap nilai maksimum. Seluruh chart menjadi satu baris teks yang bisa Anda tempelkan ke pesan commit atau log.
Gunakan kuadran sebagai grid piksel 2×2
Enam belas kombinasi kuadran memungkinkan satu sel karakter membawa empat piksel independen, menggandakan resolusi efektif di kedua arah. Begitulah cara kerja penampil gambar mode-teks.
Warnai seperti teks, karena memang teks
Sebuah █ mengikuti `color` CSS seperti karakter lainnya, sehingga sebuah bar chart bisa diberi gaya sepenuhnya lewat CSS tanpa canvas dan tanpa gambar. Atur line-height ke 1 agar blok yang bersebelahan secara vertikal saling bersentuhan.
Tentang Elemen Blok
Blok Block Elements adalah hal paling mendekati piksel yang dimiliki teks polos. Setiap karakter mengisi sebuah pecahan tertentu dari selnya — seperdelapan, seperempat, setengah, atau seluruhnya — yang berarti teks bisa dipakai sebagai bitmap beresolusi sangat rendah. Keempat karakter bayangan ░▒▓█ berasal dari code page 437 dan sudah dipakai selama puluhan tahun untuk memalsukan gradien dan dithering pada layar yang sama sekali tidak punya skala abu-abu.
Karakter langkah-perdelapan adalah bagian yang cerdik secara diam-diam. Karena membagi satu sel menjadi delapan, sebuah progress bar yang digambar dalam terminal 20-kolom punya 160 kondisi berbeda, bukan 20. Bar-nya bergerak maju dengan mulus, bukan tersentak-sentak, dan melakukannya dalam aliran teks polos yang bisa di-pipe, dicatat log, dan disalin. Hampir setiap progress bar CLI modern dibangun dari U+2588 dan ketujuh saudara parsialnya.
Karakter kuadran melangkah lebih jauh dengan memperlakukan satu sel sebagai grid 2×2, memberikan keenam belas kombinasi nyala/mati. Itu menggandakan resolusi secara horizontal dan vertikal sekaligus, dan menjadi dasar penampil gambar terminal: petakan setiap kelompok 2×2 piksel gambar ke sebuah karakter kuadran, atur warna latar depan dan latar belakang, dan sebuah foto akan tampil dalam teks.
Situs ini memakai elemen blok sebagai bahan gambar utamanya. Keping Tetris, raket dan balok Breakout, dinding Labirin, dan tubuh Ular semuanya dibangun dari █ dan bentuk parsialnya, bukan dari sprite, itulah sebabnya setiap game mewarisi warna aksen halaman dan tetap tajam di level zoom berapa pun — ini tipografi, jadi berskala seperti tipografi.
Game yang dibuat dari karakter ini
Setiap papan di situs ini dibuat dari Unicode, bukan sprite. Game-game berikut memakai karakter di atas.
Pertanyaan yang sering diajukan
Bagaimana cara membuat progress bar dengan karakter blok Unicode?
Gambar bagian yang sudah selesai dengan blok penuh █, lalu render sisa pecahannya dengan perdelapan horizontal terdekat (▏▎▍▌▋▊▉). Isi sisanya dengan spasi atau bayangan ringan ░. Mengalikan persentase Anda dengan delapan dan mengambil sisanya akan memilih karakter parsial yang tepat.
Mengapa ada celah di antara karakter blok saya?
Line-height. Karakter blok digambar tepat sampai ke tepi sel karakternya, jadi spasi tambahan apa pun akan tampak sebagai celah horizontal antar-baris. Atur line-height ke 1. Jika celah malah muncul di antara kolom, fontnya proporsional, bukan monospace.
Apa bedanya ░ ▒ ▓ dan █?
Keempatnya adalah empat tingkat kepadatan dari sel yang sama: bayangan ringan terisi sekitar 25%, sedang 50%, gelap 75%, dan blok penuh 100%. Karena berupa teks, keempatnya mengikuti warna teks Anda — sehingga Anda bisa mendapat empat tingkat kecerahan tampak dari satu warna saja.
Bisakah saya mengubah warna karakter blok?
Bisa. Ini karakter teks biasa, jadi `color` CSS, warna ANSI terminal, dan tema editor Anda semuanya berlaku. Itulah keunggulan penuhnya dibanding gambar: satu karakter bisa berwarna dan berukuran apa saja, dan tetap tajam di setiap level zoom.
Apakah elemen blok berfungsi di semua font?
Dukungannya pada dasarnya universal, tapi kualitasnya bervariasi. Beberapa font menggambar blok-perdelapan sedikit lebih sempit, meninggalkan celah rambut tipis pada isian solid. Font monospace yang dirancang untuk terminal — JetBrains Mono, Cascadia Code, DejaVu Sans Mono, Menlo — menggambarnya tepi-ke-tepi dan menjadi pilihan paling aman.
Support the arcade
Menikmati game-nya?
UnicodeGames gratis, tanpa iklan, dan akan selalu begitu. Jika ini membuat waktu istirahat kopi Anda lebih menyenangkan, Anda bisa membalas budi.
Traktir saya kopiOne-off · No account needed · Handled by Buy Me a Coffee