readable.css

 (readable-css.freedomtowrite.org)
2 poin oleh GN⁺ 8 jam lalu | 1 komentar | Bagikan ke WhatsApp
  • readable.css bukanlah framework untuk sistem desain seluruh situs, melainkan framework CSS yang menambahkan gaya dasar yang masuk akal dan enak dipandang ke HTML semantik
  • Prinsip utamanya adalah konsistensi; warna, gaya font, ketebalan border, dan tinggi baris diterapkan secara seragam di seluruh situs
  • Menyediakan mode terang/gelap, desain responsif, ritme vertikal, serta gaya untuk header, footer, navigasi, tabel, tombol, dan formulir
  • Tidak menyertakan animasi mencolok, font kustom, utility class, atau elemen yang menimpa pengaturan browser pengguna
  • Mengasumsikan penggunaan HTML semantik untuk menafsirkan maksud struktur, mendukung Firefox 84+, Chromium 88+, Edge 88+, Safari 10+, dan tidak mendukung IE

Fitur utama dan cakupan desain

  • readable.css bukan framework untuk membuat sistem desain seluruh situs, melainkan framework CSS untuk membuat HTML dasar terlihat masuk akal dan enak dipandang
  • Mendukung mode terang/gelap secara manual atau melalui prefers-color-scheme, serta menyediakan desain responsif dan ritme vertikal
  • Memberi styling pada header, footer, bilah navigasi, gambar, kutipan, aside, tabel, tombol, dan formulir
  • Perataan teks kanan-kiri dinonaktifkan secara bawaan, dan mendukung font native seperti serif, sans-serif, dan monospace
  • Animasi mencolok, font kustom, utility class, dan elemen yang menimpa pengaturan browser pengguna sengaja tidak disertakan

Cara penggunaan dan cakupan dukungan

  • File CSS terbaru dapat diunduh dari halaman rilis lalu ditambahkan ke situs 
    <link rel="stylesheet" type="text/css" href="/path/to/readable.css">
  • readable.css menafsirkan maksud situs berdasarkan cara penggunaan HTML semantik, jadi untuk memanfaatkan stylesheet ini dengan benar, HTML semantik harus ditulis dengan tepat
  • Panduan penggunaan dan cara menulis HTML yang sesuai dengan readable.css dapat dilihat di wiki
  • Mendukung Firefox 84+, Chromium 88+, Edge 88+, Safari 10+, dan tidak mendukung IE
  • Faktor pembatas pada Chromium, Firefox, dan Edge adalah dukungan :not() dan :is(), sedangkan faktor pembatas pada Safari adalah dukungan variabel CSS
  • Kode sumber tersedia di Codeberg, dan dokumentasi disediakan di Docs
  • readable.css dan kode situs menggunakan lisensi 0BSD, sehingga dapat digunakan untuk tujuan apa pun tanpa atribusi wajib
  • Freedom to Write adalah gerakan yang membuat dan mendukung solusi perangkat lunak bebas dan open-source untuk industri penulisan

Bacaan terkait

1 komentar

 
GN⁺ 8 jam lalu
Opini di Lobste.rs

  • Saya suka karena mereka tidak mengutak-atik font-size default. Pengguna bisa dan seharusnya dapat mengatur ukuran yang mereka sukai di user agent seperti browser, dan situs web harus menghormati pengaturan itu
    Saya tidak suka ukuran tetap 12px karena terlalu kecil, dan saya juga tidak ingin teks tiba-tiba membesar di viewport lebar ketika saya sudah mengatur ukuran yang nyaman. Hal seperti ini terlalu sering terjadi dan sangat merusak aksesibilitas

    • Bahkan saat mencoba mendorong agar standar seperti Accept-Language dipatuhi di proyek kerja, sering ditolak dengan logika bahwa pengguna tidak akan tahu cara mengatur aplikasi dengan benar sehingga kita harus melakukannya untuk mereka
      Sepertinya argumen serupa akan muncul juga untuk ukuran font

  • Saya selalu mencari framework seperti PicoCSS atau MVP, dan ini menonjol karena tampaknya dibuat untuk dipakai sebagai titik awal
    Kelihatannya seperti fondasi yang bagus untuk dibangun lebih lanjut, tetapi saya juga penasaran dengan pendapat orang yang lebih paham desain

  • Cara mengganti variabel CSS lewat html[data-font-family="serif"] tidak terlalu berguna. Lebih baik biarkan orang memakai <html style="font-family:serif">; dari template maupun skrip klien hampir sama mudahnya, lebih pendek, dan kurang rumit
    Pendekatan saat ini bisa membuat orang salah paham dan mengira <html data-font-family="some-webfont, serif"> akan berfungsi, padahal sebenarnya tidak. Menggunakan monospace sebagai font seluruh dokumen juga merupakan pilihan gaya yang tidak cocok untuk keterbacaan, dan tidak sesuai dengan nama “readable.css”. Meski begitu, saya suka pembatasannya yang disiplin hanya pada satu keluarga font generik tunggal
    --line-width dan --line-height juga membingungkan sebagai nama. Satu “line” berarti garis antar elemen, yang lain berarti baris teks
    Untuk tema warna, kombinasi (prefers-color-scheme) dan (prefers-contrast), [data-theme], [data-high-contrast] terasa kusut, dan beberapa nilai serta interaksinya tidak didokumentasikan. Kombinasi @media (prefers-contrast: more) and (prefers-color-scheme: dark) jelas rusak karena memberi #000 di atas latar #fff ketika tidak ada override <html data-*>. Deklarasi color-scheme: dark dan color-scheme: light juga diperlukan
    Saya langsung kehilangan minat saat melihat a { color: inherit; }. Bahkan tanpa masuk ke klaim soal ritme vertikal, jika warna tautan diwariskan dan garis bawah di navigasi juga dihilangkan, banyak pengguna tidak akan sadar ada tautan di sana. Tautan seharusnya berwarna biru atau setidaknya warna penekanan yang jenuh, dan garis bawah juga harus dipertahankan. Lebih mengecewakan lagi karena namanya readable.css

    • Keterbacaan sudah diteliti selama puluhan tahun dan sebenarnya cukup dipahami dengan baik, tetapi ternyata masih banyak orang yang tidak tahu. Yang paling sering salah ditangani terutama adalah panjang baris dan pemilihan font, selain faktor lain seperti ukuran huruf, jarak antarbaris, dan kontras
      Panjang baris punya rentang minimum dan maksimum yang nyaman untuk sebagian besar orang, kira-kira 50–70 karakter per baris. Ada jawaban-jawaban bagus di thread Stack Exchange ini, dan ini juga dekat dengan aksesibilitas sehingga W3C WCAG dalam bagian presentasi visual mengatakan “lebar tidak lebih dari 80 karakter atau glyph (40 atau kurang untuk CJK)”
      Untuk font, secara umum sans-serif paling mudah dibaca di rentang layar yang paling luas, dan pada layar modern beresolusi tinggi, serif juga umumnya dinilai mirip. Font monospace menurunkan keterbacaan bagi kebanyakan orang, jadi jarang menjadi pilihan yang baik untuk isi utama. Pengecualiannya bisa orang yang terbiasa dengan terminal dan editor kode, atau kadang pengguna disleksia yang lebih mudah membaca font monospace. Jika ragu, Arial memang membosankan tetapi pilihan paling aman, dan untuk referensi soal font monospace ada thread Stack Exchange tentang monospaced fonts
      Tambahan referensi yang layak dilihat: halaman typography dari pemerintah AS, bagian typography dari BBC GEL, bagian typography dari Google Material Design, Butterick's Practical Typography untuk pendalaman, dan The Elements of Typographic Style Applied to the Web

  • Sejujurnya ukuran teks default-nya terlalu kecil dan sulit dibaca. Saya tidak tahu kenapa memilih ukuran seperti ini, dan bagi saya ini buruk untuk aksesibilitas maupun keterbacaan

    • Ini berasal dari dua masalah di platform web. Mengikuti font dan ukuran yang disediakan browser itu bagus karena menghormati preferensi pengguna yang dinyatakan secara eksplisit, tetapi dalam praktiknya sangat sedikit pengguna yang benar-benar mengatur preferensi itu secara eksplisit, dan pada banyak konfigurasi default, vendor browser secara historis tidak mengubah nilai bawaan lama sehingga hasilnya ukuran teks menjadi kecil, nyaris di batas bawah keterbacaan
      Yang lebih buruk, font-size tidak punya makna absolut yang stabil antarfont. font-size: 16px pun bisa terlihat sangat berbeda tergantung font tertentu. Di Safari, sans default dan sans-serif default terlihat berbeda sejauh ini: https://github.com/user-attachments/assets/…. Bahkan di komentar ini sendiri Anda bisa melihat ukuran font monospace tidak selaras dengan yang lain
      Pada akhirnya ini sulit diperbaiki dengan benar, pasti akan ada bagian yang rusak di suatu tempat, dan tinggal soal kompromi mana yang disukai webmaster. Secara pribadi, kalau bisa memakai mode baca, saya jadi tidak terlalu peduli pada desain situs web. Tapi untuk ketidakjelasan font-size, sekarang ada solusi yang lumayan berguna: https://matklad.github.io/2025/07/16/font-size-adjust.html
    • Saya memakai monitor 140ppi yang aneh, dan skala 125% yang seharusnya dipakai justru terlihat jelek, jadi saya biarkan 100% lalu menyesuaikan zoom default agar tetap nyaman dibaca
      Teks di situs ini begitu kecil sampai saya sempat bertanya-tanya apakah situs ini sengaja melewati pengaturan zoom itu. Akhirnya saya menaikkan lagi pengaturan ukuran font minimum di Firefox satu tingkat