34 znaków · darmowe do skopiowania
Elementy blokowe jako piksele tekstu
Blok Unicode od U+2580 do U+259F zawiera 32 znaki, które wypełniają komórkę znaku w ustalonych ułamkach — ćwiartkowe cieniowania, kroki co jedną ósmą wysokości, połówki i ćwiartki. To dzięki nim terminal potrafi narysować pasek postępu, mini-wykres albo wykres słupkowy samym tekstem. Skopiuj dowolny znak poniżej; każdy jest opisany swoją nazwą Unicode i punktem kodowym.
Cieniowania
Cztery stopnie gęstości od 25% do pełnego wypełnienia. Najszybszy sposób na zasugerowanie głębi albo przygaszenia bez użycia koloru.
Ósemki pionowe
Wypełniają komórkę od dołu w ośmiu krokach. To zestaw do mini-wykresów i wykresów słupkowych.
Ósemki poziome
Wypełniają komórkę od lewej do prawej w ośmiu krokach — zestaw do pasków postępu. Jedna komórka rozdzielczości zamienia się w osiem.
Połówki i ćwiartki
Każda kombinacja czterech ćwiartek komórki. Potraktuj jedną komórkę znaku jako siatkę pikseli 2×2, a to wszystkie szesnaście stanów.
Kliknij dowolny znak, aby go skopiować. Nic nie jest pobierane — to znaki tekstowe, a nie obrazki.
Bloki Unicode
- U+2580–U+259F Elementy Blokowe
Jak używać — Elementy Blokowe
Zbuduj pasek postępu z ósemek poziomych
Narysuj wypełnioną część znakiem █ i dokończ częściową komórkę najbliższą ósemką. 20-znakowy pasek nagle ma 160 kroków rozdzielczości zamiast 20, więc porusza się płynnie zamiast skakać.
Zbuduj mini-wykres z ósemek pionowych
Zmapuj każdy punkt danych na jeden z ▁▂▃▄▅▆▇█ według jego udziału w maksimum. Cały wykres zamienia się w jedną linię tekstu, którą możesz wkleić do opisu commita albo do logu.
Wykorzystaj ćwiartki jako siatkę pikseli 2×2
Szesnaście kombinacji ćwiartek pozwala jednej komórce znaku nieść cztery niezależne piksele, podwajając efektywną rozdzielczość w obu kierunkach. Tak właśnie działają renderery obrazów w trybie tekstowym.
Koloruj je jak tekst, bo tekstem są
█ przejmuje CSS `color` jak każdy znak, więc wykres słupkowy można w całości stylizować przez CSS, bez canvasu i bez obrazków. Ustaw line-height na 1, by pionowo sąsiadujące bloki się stykały.
O Elementy Blokowe
Blok Elementy Blokowe to najbliższa rzecz, jaką zwykły tekst ma do piksela. Każdy znak wypełnia określony ułamek swojej komórki — jedną ósmą, ćwiartkę, połowę albo całość — co oznacza, że tekstu można używać jako bitmapy o bardzo niskiej rozdzielczości. Cztery znaki cieniowania ░▒▓█ pochodzą ze strony kodowej 437 i przez dekady służyły do udawania gradientów i ditheringu na wyświetlaczach, które w ogóle nie miały skali szarości.
Znaki podzielone na ósemki to cicho genialna część tego bloku. Ponieważ dzielą komórkę na osiem części, pasek postępu narysowany w 20-kolumnowym terminalu ma 160 odrębnych stanów zamiast 20. Pasek posuwa się płynnie zamiast skakać, i robi to w strumieniu zwykłego tekstu, który można przekierować, zalogować i skopiować. Niemal każdy nowoczesny pasek postępu w CLI jest zbudowany z U+2588 i jego siedmiu częściowych odpowiedników.
Znaki ćwiartkowe idą dalej, traktując jedną komórkę jako siatkę 2×2, co daje wszystkie szesnaście kombinacji włączone/wyłączone. To podwaja rozdzielczość jednocześnie w poziomie i w pionie i stanowi podstawę terminalowych przeglądarek obrazów: zmapuj każdą grupę 2×2 pikseli obrazu na znak ćwiartkowy, ustaw kolor pierwszego planu i tła, a fotografia wyrenderuje się w tekście.
Ta strona wykorzystuje elementy blokowe jako swoje podstawowe tworzywo rysunkowe. Klocki Tetrisa, paletka i cegiełki Breakout, ściany Labiryntu i ciało Węża są zbudowane z █ i jego częściowych form zamiast z grafik sprite, dlatego każda gra przejmuje kolor akcentu strony i pozostaje ostra przy każdym powiększeniu — to typografia, więc skaluje się jak typografia.
Gry narysowane tymi znakami
Każda plansza na tej stronie powstaje z Unicode, a nie z obrazków. Te poniżej korzystają ze znaków przedstawionych powyżej.
Najczęściej zadawane pytania
Jak zrobić pasek postępu ze znaków blokowych Unicode?
Narysuj ukończoną część pełnym blokiem █, a potem oddaj pozostały ułamek najbliższą ósemką poziomą (▏▎▍▌▋▊▉). Wypełnij resztę spacjami albo jasnym cieniowaniem ░. Pomnożenie procentu przez osiem i wzięcie reszty z dzielenia wskaże właściwy częściowy znak.
Dlaczego między moimi znakami blokowymi jest luka?
Line-height. Znaki blokowe są rysowane dokładnie do krawędzi komórki znaku, więc każdy dodatkowy odstęp wiodący pokazuje się jako pozioma luka między rzędami. Ustaw line-height na 1. Jeśli zamiast tego luki pojawiają się między kolumnami, czcionka jest proporcjonalna, a nie o stałej szerokości.
Jaka jest różnica między ░ ▒ ▓ a █?
To cztery stopnie gęstości tej samej komórki: jasne cieniowanie to około 25% wypełnienia, średnie 50%, ciemne 75%, a pełny blok 100%. Ponieważ to tekst, wszystkie cztery przejmują kolor twojego tekstu — możesz więc uzyskać cztery pozorne poziomy jasności z jednego koloru.
Czy mogę zmienić kolor znaków blokowych?
Tak. To zwykłe znaki tekstowe, więc działa na nie CSS `color`, kolory ANSI terminala i motyw twojego edytora. To cała przewaga nad obrazkiem: jeden znak może mieć dowolny kolor i dowolny rozmiar, i pozostaje ostry przy każdym powiększeniu.
Czy elementy blokowe działają w każdej czcionce?
Wsparcie jest praktycznie powszechne, ale jakość bywa różna. Niektóre czcionki rysują bloki ósemkowe odrobinę za wąsko, zostawiając cienkie szwy w pełnym wypełnieniu. Czcionki o stałej szerokości zaprojektowane do terminali — JetBrains Mono, Cascadia Code, DejaVu Sans Mono, Menlo — rysują je krawędź do krawędzi i są bezpiecznym wyborem.
Support the arcade
Podobają Ci się gry?
UnicodeGames jest darmowy, nie ma reklam i nigdy nie będzie ich mieć. Jeśli umilił Ci przerwę na kawę, możesz się odwdzięczyć.
Postaw mi kawęOne-off · No account needed · Handled by Buy Me a Coffee