Web Monospace

 (owickstrom.github.io)
1 poin oleh GN⁺ 2024-08-28 | 1 komentar | Bagikan ke WhatsApp

Pengantar

Font monospace disukai banyak orang. Keterbacaan, konsistensi, dan estetikanya sangat baik. Halaman ini menyelaraskan teks dan diagram menggunakan grid monospace. Dibuat dari dokumen Markdown sederhana, lalu dirender dengan CSS dan sedikit Javascript. Mengadopsi desain responsif sehingga diperkecil berdasarkan satuan ukuran karakter. Bertujuan agar elemen-elemen standar berfungsi dengan baik. Dirender sebagai HTML semantik bergaya tahun 70-an.

Dasar-dasar

  • Dokumen ini menggunakan beberapa kelas tambahan, tetapi sebagian besar berupa markup.
  • Ada paragraf biasa dan garis horizontal sebagai contoh.
  • Konten dapat disembunyikan menggunakan elemen <details>.

Daftar

  • Daftar bullet umum:

    • Pisang
    • Perahu kertas
    • Mentimun
    • Roket

  • Daftar berurutan:

    • Tujuan
    • Motivasi
      • Intrinsik
      • Ekstrinsik
    • Efek sekunder

  • Visualisasi pohon:

    • /dev/nvme0n1p2
      • usr
        • local
        • share
        • libexec
        • includes
        • bin
        • src
        • lib64
        • lib
      • games
        • solitaire
        • snake
        • tic-tac-toe
      • media
      • run
      • tmp

Tabel

  • Tabel biasa dapat digunakan dan akan otomatis menyesuaikan ke grid monospace.
  • Contoh:
    • Nama: Boboli Obelisk, ukuran: 1.41m × 1.41m × 4.87m, lokasi: 43°45’50.78”N 11°15’3.34”E
    • Nama: Pyramid of Khafre, ukuran: 215.25m × 215.25m × 136.4m, lokasi: 29°58’34”N 31°07’51”E

Formulir

  • Contoh tombol dan kolom input:
    • Tombol: RESET, SAVE
    • Kolom input: nama depan, nama belakang, usia

Grid

  • Ruang horizontal dapat dibagi rata dengan menambahkan kelas grid ke container.
  • Sisa ruang dapat diisi dengan mengatur flex-grow: 1; pada sel tertentu.

Gambar ASCII

  • Gambar dapat dibuat dengan karakter box-drawing menggunakan tag <pre>.

  • Contoh:

    ╭─────────────────╮
│ MONOSPACE ROCKS │
╰─────────────────╯

  • Penekanan dapat ditambahkan dengan tag <figure> dan <figcaption>.

  • Contoh penyampaian pesan:

    ┌───────┐ ┌───────┐ ┌───────┐
│Actor 1│ │Actor 2│ │Actor 3│
└───┬───┘ └───┬───┘ └───┬───┘
    │         │         │
    │ msg 1   │         │
    └────────►│         │
              │ msg 2   │
              └────────►│
┌───┴───┐ ┌───┴───┐ ┌───┴───┐
│Actor 1│ │Actor 2│ │Actor 3│
└───────┘ └───────┘ └───────┘

  • Contoh grafik:

               Things I Have
                       │
                 ████ Usable
15 │
                 ░░░░ Broken
12 │       ░
9 │  ░     ░
6 │  █     ░     ░
3 │  █     █     █
0 └───▀─────────▀─────────▀──────────▀─────────────
   Socks   Jeans   Shirts  USB Drives

Media

  • Mendukung objek media seperti gambar dan video.
  • Contoh:
    • Kamar di kastel Prancis (2024)
    • Pusat web (1914), Wikimedia

Diskusi

  • Dibuat sambil mengeksplorasi teknik CSS dan menikmati proses desain.
  • Akan menyenangkan jika digunakan atau diberi masukan.
  • Seluruh source code dapat dilihat di GitHub: github.com/owickstrom/the-monospace-web
  • Menyampaikan terima kasih kepada U.S. Graphics Company.

Ringkasan GN⁺

  • Proyek ini adalah eksperimen desain web yang menggunakan font monospace.
  • Menggabungkan desain responsif dan HTML semantik untuk mewujudkan halaman web bergaya tahun 70-an.
  • Dapat membantu developer meningkatkan keterampilan CSS dan desain.
  • Proyek serupa dengan fungsi mirip adalah "CSS Zen Garden".

Bacaan terkait

1 komentar

 
GN⁺ 2024-08-28
Komentar Hacker News

  • Seorang pengguna memelihara daftar halaman monospace, dan saat ini ada sekitar 50

    • Jika font proporsional ditinggalkan, keterbacaan menurun
    • Pengaturan jarak antarhuruf pada font proporsional membuat perbedaan besar dalam mengenali bentuk kelompok huruf
    • Teks monospace baik-baik saja jika terstruktur dan diberi penekanan di editor kode
    • Terlihat sangat bagus terutama saat digunakan bersama chart Unicode dan seni ASCII

  • Seorang pengguna sedang mencari panduan video game yang ditulis dengan font monospace beberapa tahun lalu

    • Teksnya tersusun sangat rapi hanya lewat pemilihan kata
    • Ia bertanya apakah ada yang mengetahui tautannya

  • Seorang pengguna menyebut filosofi "web indie"

    • Menyingkirkan algoritme dan merangkul hal-hal yang dulu membuat web terasa bagus
    • Termasuk RSS, blog kustom, forum, web ring, dan sebagainya
    • Ia juga sudah memulainya dan merasa itu sangat menyenangkan

  • Seorang pengguna menyebut bahwa font monospace itu sendiri tidak masalah, tetapi pemaksaan pindah baris adalah persoalannya

    • Muncul dinding teks dengan font kecil, dan mode pembaca tidak berfungsi
    • Jika dimiringkan ke arah horizontal, ada kemungkinan muncul scrollbar
    • Keluhan yang sama juga ada di mailing list teknis

  • Seorang pengguna sedang mempertimbangkan untuk mengubah font situs pribadinya menjadi monospace

    • Ia ingin mendapat rekomendasi font monospace dengan keterbacaan yang baik untuk teks panjang
    • Jika font itu ada di Google Fonts, nilainya bertambah

  • Seorang pengguna menyebut monospace cantik dan responsif, tetapi tidak cocok untuk teks isi

    • Ia sudah membaca teks isi monospace di beberapa situs, tetapi menurutnya font proporsional lebih baik

  • Seorang pengguna menyebut bahwa sumber daya C64 terkenal, "VIC article", masih disajikan dalam monospace

    • Masalah utamanya adalah pencetakan
    • Diagram menggunakan ruang dua dimensi yang memerlukan referensi tetap
    • Artikel ini adalah salah satu referensi teknis terpenting untuk C64
    • 99% efek demo teknis dapat diuraikan menjadi trik-trik dasar yang ditemukan di sini

  • Seorang pengguna menyebut web sedang kembali ke bentuk aslinya

    • Komunitas satelit dari web awal semakin banyak bermunculan
    • Mengunjungi berbagai bagian web menjadi semakin menarik

  • Seorang pengguna berpikir kelas CSS tree ul-list seharusnya menjadi bagian dari standar HTML

    • Itu sangat berguna

  • Seorang pengguna menyebut OpenBSD sudah mengatur font konsol ke "Spleen" sejak beberapa tahun lalu