Web Monospace

 (owickstrom.github.io)
1 poin oleh GN⁺ 2024-08-28 | 1 komentar | Bagikan ke WhatsApp
  • Halaman eksperimental yang menata elemen web agar selaras di atas grid per karakter, menampilkan teks, tabel, diagram, dan media dengan estetika terminal ala 1970-an
  • Mengonversi dokumen Markdown sederhana dengan Pandoc, lalu merender HTML semantik ke grid monospace menggunakan CSS dan JavaScript yang sangat sedikit
  • Responsivitas ditangani dengan cara mengecil berdasarkan satuan ukuran karakter, bukan piksel; tabel otomatis menyesuaikan dengan grid, tetapi kolom yang dapat melebar dibatasi hanya satu
  • Mencakup elemen standar seperti paragraf biasa, garis pemisah, <details>, daftar, daftar berbentuk pohon, tabel, formulir, kontainer grid, gambar ASCII berbasis <pre>, serta gambar dan video
  • Seluruh kode sumber tersedia di GitHub, sehingga bagian yang diperlukan dapat di-fork atau disalin dan digunakan sesuai ketentuan lisensi

Halaman web yang disusun dengan grid karakter

  • Font monospace bagi sebagian pengguna dapat terasa lebih mudah dibaca, lebih konsisten, dan lebih indah daripada font proporsional
  • Halaman ini adalah eksperimen teknis dan kreatif untuk menyusun semua elemen sebagai web monospace
  • Implementasinya dilakukan dengan mengonversi dokumen Markdown menggunakan Pandoc, lalu menempatkan HTML semantik di atas grid karakter dengan CSS dan sedikit JavaScript
  • Tata letak responsif mengecil sesuai lebar layar berdasarkan satuan ukuran karakter, bukan piksel
  • Tujuannya adalah membuat elemen HTML standar dapat bekerja secara alami di dalam grid monospace tanpa pekerjaan rumit tambahan

Elemen yang didukung dan cara penataannya

  • Markup dasar mencakup paragraf biasa, garis pemisah horizontal, dan elemen <details>
  • Daftar mendukung daftar berpoin biasa dan daftar bernomor; dengan menambahkan kelas tree pada daftar tak berurutan, struktur pohon yang tampak seperti sistem berkas dapat ditampilkan
  • Tabel otomatis disesuaikan dengan grid monospace dan bekerja secara responsif
    • Namun kolom yang dapat melebar dibatasi hanya pada satu kolom
  • Formulir juga termasuk dalam cakupan dukungan, dan ditempatkan di atas grid karakter yang sama bersama elemen standar lainnya
  • Jika kelas grid ditambahkan ke kontainer, sel-selnya membagi ruang horizontal secara merata
    • Karena karakteristik monospace dipertahankan, lebar keseluruhan mungkin tidak selalu menjadi 100%
    • Untuk membuat sel tertentu mengisi ruang tersisa, atur flex-grow: 1; pada sel tersebut
  • Dengan tag <pre> dan box-drawing characters, gambar bergaya ASCII dapat dibuat
    • Dapat dibuat lebih menonjol dengan membungkusnya dalam <figure> dan <figcaption>
    • Contohnya mencakup diagram pengiriman pesan dan diagram batang
  • Objek media seperti gambar dan video juga didukung
    • Media diperluas hingga lebar halaman, dan padding bawah ditambahkan untuk menjaga grid monospace
  • Seluruh kode sumber tersedia di github.com/owickstrom/the-monospace-web
  • Sumber inspirasi desainnya adalah U.S. Graphics Company

Bacaan terkait

1 komentar

 
GN⁺ 2024-08-28
Komentar Hacker News

  • Sedang mengumpulkan daftar halaman berfont monospace: https://wonger.dev/posts/monospace-dump#web. Saat ini ada sekitar 50
    Penanganan spasi itu sulit, dan jika meninggalkan font proporsional, keterbacaan juga sedikit berkurang
    Menurut saya kerning pada font proporsional membuat perbedaan besar dalam cara mata mengenali bentuk kelompok huruf
    Teks monospace oke untuk tempat yang terstruktur dan diberi penyorotan seperti editor kode, tetapi sebaiknya dihindari untuk tulisan panjang
    Meski begitu, terutama untuk bagan Unicode dan ASCII art, tampilannya benar-benar indah

    • Pada font proporsional, kerning membuat perbedaan sangat besar. Kerning yang benar membuat otak memproses bentuk kata jauh lebih cepat
    • ASCII art benar-benar keren. Di kelas mengetik, setelah menyelesaikan tugas harian, kami bisa membuat ASCII art dengan mengikuti daftar instruksi tanpa tahu gambar akhirnya
      Misalnya seperti 15 space, 1 V, 3 U, 1 V, 15 space, 5 U, 12 space, 2 x, 5 U, 2 x, dan setelah sekitar 250 baris selesai, muncul gambar Jordan melakukan dunk yang bisa dicetak
    • Salah satu contoh kini menjadi domain yang dijual. Namun masih ada di WBM: https://web.archive.org/web/20230216225350/https://kary.us/n...
    • Teks monospace dengan warna dan sedikit pemformatan terasa seperti mengorbankan satu dimensi rasa atau ruang. Hampir seperti asketisme yang tidak bermakna
    • Layak menambahkan satu lagi ke daftar :) https://jarek.lupin.ski/tape-deck/

  • Sepertinya ini thread yang tepat untuk menanyakan hal ini. Beberapa tahun lalu saya pernah melihat tulisan, mungkin semacam panduan video game, yang dibuat agar dibaca dengan font monospace, dan seluruh ribuan barisnya rata kiri-kanan secara sempurna hanya lewat pemilihan kata
    Ada yang tahu itu apa dan punya tautannya?

    • Ada juga yang mirip: http://tom7.org/bovex/. Itu layout engine yang mencoba menghasilkan efek serupa dengan menulis ulang input memakai LLM
    • Itu disebut bricktext. Dulu kadang terlihat di tempat seperti usenet atau GameFAQs
      [0] http://www.catb.org/esr/jargon/html/B/bricktext.html
      Agak mengejutkan bahwa konsep ini benar-benar menghilang dari hasil pencarian Google
    • Laravel juga melakukan hal serupa. Dalam komentar multi-baris, setiap baris persis 3 karakter lebih pendek daripada baris sebelumnya
      https://github.com/laravel/laravel/blob/11.x/config/database...
    • Saya punya ingatan samar pernah melihat hal seperti itu di panduan GameFAQs. Mungkin untuk salah satu game Final Fantasy, tapi saya tidak ingat lebih jauh
    • Saya juga ingin menambahkan satu pertanyaan ke thread ini
      Selama beberapa tahun saya ingin membuat ekstensi Visual Studio Code yang, saat mengetik, meratakan komentar kiri-kanan termasuk pemenggalan kata dengan tanda hubung, sambil mengizinkan spasi tambahan bila perlu
      Selain sedikit mencari algoritma dan library terkait, saya belum memulainya karena tampaknya cukup rumit
      Saya sempat mencoba memakai sesuatu seperti fmt atau par, tetapi akhirnya menerima bahwa kecuali dilakukan manual, saya harus menyerah pada komentar yang tersusun rapi, dan sering kali satu perubahan kecil memicu pengerjaan ulang banyak baris sehingga terlalu memakan waktu
      Identifier panjang sebisa mungkin tidak ingin dipotong di tengah baris, dan juga harus menangani daftar bertingkat, tabel, blok kode, ASCII art di dalam komentar, tanda hubung di dalam kata serta pembedaan tanda hubung untuk pemenggalan, juga komentar terstruktur seperti komentar dokumen XML atau tag Javadoc
      Setelah melihat Badness 0 dari Tom7, saya sempat berpikir untuk melemparnya ke LLM, tetapi jika harus berjalan real-time dan tidak boleh ada komentar halusinasi, menurut saya itu belum praktis
      Apakah fitur seperti ini sudah ada, atau ada fondasi yang bisa membuat pembuatan ekstensi ini tidak menjadi pekerjaan setahun penuh?

  • Monospace itu sendiri tidak mengganggu
    Yang mengganggu adalah line break paksa
    Ada situs web “retro” yang pada dasarnya memakai tag pre
    Di ponsel, itu menjadi dinding teks berukuran kecil, mode baca tidak berfungsi, dan jika diputar horizontal, scrollbar bisa muncul atau bisa juga tidak
    Hampir satu-satunya keluhan saya tentang mailing list teknis masa kini juga line break paksa dan tata letak yang kaku

    • Situs web ini tidak begitu. Sepenuhnya responsif
    • Saya mencoba membaca RFC di ponsel, tetapi harus terus menggulir ke kiri dan kanan hanya untuk melihat satu paragraf sederhana. Atau harus memperkecil sampai hurufnya tidak terbaca
    • Saya penasaran, sebenarnya apa masalahnya dengan scrollbar?

  • Dalam video yang saya tonton hari ini, hal seperti ini disebut indie web; katanya ini adalah filosofi untuk menentang algoritma dan merangkul hal-hal yang dulu membuat web hebat
    Hal-hal seperti RSS, blog pribadi, forum, dan webring
    Saya juga mulai membuat satu sendiri, dan rasanya cukup menyenangkan

  • Bagus karena enak dilihat, semantik, dan responsif, tetapi pada dasarnya font berlebar tetap tidak terlalu cocok untuk teks isi.
    Saya pernah membaca artikel blog dengan isi berlebar tetap di beberapa situs, dan memang tidak masalah, tetapi menurut saya lebar proporsional adalah arah yang tepat.

    • Sepertinya saya lebih suka lebar tetap. Setidaknya skema warna teks putih di latar hitam jelas lebih baik.
      Menurut saya ini jauh lebih baik daripada halaman-halaman “indah” yang mencoba memberi nuansa majalah cetak lama.
    • Setuju. Saat menulis dokumen Markdown pun ini mulai terasa mengganggu, tetapi di Markdown sering kali tidak realistis untuk menghindari lebar tetap.
    • Sekadar penasaran, font apa yang Anda sukai untuk teks isi?
      Di blog saya, karena penglihatan saya kurang baik dan saya memakai pengaturan perbesaran, saya menggunakan lebar tetap, tetapi saya menganggap aksesibilitas itu penting, jadi saya selalu penasaran pilihan mana yang lebih mudah dibaca untuk semua orang.

  • Terlepas dari hal lain, menurut saya kelas CSS tree ul-list cukup bagus sampai-sampai layak masuk spesifikasi HTML sebagai tag. Ini adalah komponen yang sangat berguna.

  • Jarak antarbaris terlalu sempit, sehingga berdampak buruk pada keterbacaan. Paragraf panjang dengan isi sepadat ini sulit dibaca.
    Namun tabel dan grafik karakter memang membutuhkan jarak baris yang sempit seperti ini.
    Masalahnya adalah memakai grid karakter yang sama untuk grafis dan teks.
    Sepertinya ini bisa diredakan dengan memakai font yang x-height-nya terutama rendah, sehingga menyisakan lebih banyak ruang di atas dan bawah huruf.

    • Awalnya saya bingung karena mengira yang dimaksud adalah lebar baris. Lebar baris berada dalam kisaran yang umumnya diterima, sekitar 70 karakter.
      Untuk tinggi baris, saya setuju. Dengan ukuran font 16px dan 19,2px, itu hanya 1,2 kali, jadi terlalu sesak. Jika dijadikan 24px, jauh lebih baik.
      Namun di mata saya, tinggi baris yang lebih besar tidak tampak memengaruhi tabel atau grafik karakter. Dengan penyesuaian seperti ini, gaya lebar tetap masih cukup bertahan dengan baik.
      Edit: sepertinya saya paham maksudnya. Itu merusak konsep grid tetap si penulis. Bisa dicek dengan menambahkan line-height: 24px pada elemen p lalu menyalakan “debug mode” penulis untuk melihat grid-nya.
    • Karena benar-benar tidak tahan memakai lebar tetap untuk membaca, saya membuat bookmarklet. Di situs ini, mengganti hanya tag teks biasa ke sans-serif sudah bekerja dengan baik, tetapi semua mode baca mengacaukan preferensi font.
      javascript: (function() {
      (function() {
      const textElements = document.querySelectorAll('p, span, h1, h2, h3, h4, h5, h6, li, td, th');
      textElements.forEach((element) => {
      const textColor = getComputedStyle(element).getPropertyValue('color');
      element.style.fontFamily = 'system-ui, -apple-system, sans-serif';
      element.style.WebkitTextStroke = \0.4px ${textColor}`; }); location.hash = ""; history.replaceState("", "", location.pathname); })(); })();`
      https://caiorss.github.io/bookmarklet-maker/
    • Bagaimana jika dibandingkan dengan kepadatan komentar HN di sini?
    • Apakah masalahnya tinggi baris yang rapat, atau fakta bahwa font berlebar tetap itu sendiri lebih sulit dibaca daripada font proporsional?
      Karena kata-kata berlebar tetap membuat “bentuk” kata lebih mirip satu sama lain dibanding kata-kata dengan lebar proporsional.
    • Begitu melihatnya, saya langsung merasa tidak cocok.

  • OpenBSD sejak beberapa tahun lalu mulai menetapkan font konsolnya ke Spleen.
    Sayang tidak ada versi TrueType.
    https://github.com/fcambus/spleen

    • Bukankah bisa memakai file OTF sebagai gantinya? README mengatakan ada file OTF di dalam tarball rilis.

  • Materi C64 terkenal hingga sekarang, yang disebut VIC article, disediakan dalam lebar tetap.
    https://www.cebix.net/VIC-Article.txt
    Masalah utamanya adalah keluaran.
    Artikel ini menggunakan diagram yang membutuhkan referensi tetap dalam ruang dua dimensi, jadi di sini lebar tetap sangat penting.
    Artikel ini adalah salah satu referensi teknis terpenting untuk C64, dan 99% efek demo teknis dapat diuraikan menjadi trik-trik dasar yang ada di sini.

  • Saya sedang mempertimbangkan untuk mengubah font situs web pribadi saya menjadi lebar tetap.
    Ada yang tahu font lebar tetap yang khususnya bagus untuk keterbacaan tulisan panjang?
    Akan lebih baik jika ada di Google Fonts.

    • Untuk tampilan paragraf, saya suka Drafting Mono: https://indestructibletype.com/Drafting/
      Tidak ada di Google Fonts, tetapi gratis, atau versi variable font-nya juga sangat murah.
    • IBM Plex Mono cukup bagus dan lisensinya juga masuk akal. Ada di Google Fonts dan repositorinya di sini: https://github.com/IBM/plex
    • Sedikit menyamping, tetapi ada baiknya mempertimbangkan memakai https://fontsource.org/ alih-alih Google Fonts. Sama mudahnya digunakan, dan setidaknya tidak ada pelacakan Google.