readable.css

 (readable-css.freedomtowrite.org)
2 puan yazan GN⁺ 8 시간 전 | 1 yorum | WhatsApp'ta paylaş
  • readable.css, sitenin tamamı için bir tasarım sistemi değil; semantik HTML'e makul ve göze hoş gelen varsayılan stiller ekleyen bir CSS framework'üdür
  • Temel ilke tutarlılıktır; renkler, yazı tipi stilleri, kenarlık kalınlığı ve satır yüksekliği site genelinde uyumlu olacak şekilde uygulanır
  • Açık/koyu mod, duyarlı tasarım, dikey ritim, başlık·altbilgi·gezinti·tablo·düğme·form stilleri sunar
  • Gösterişli animasyonlar, özel yazı tipleri, utility class'lar ve kullanıcının tarayıcı ayarlarını geçersiz kılan öğeler içermez
  • Semantik HTML varsayımıyla niyeti yorumlar; Firefox 84+, Chromium 88+, Edge 88+, Safari 10+'u destekler ve IE hariçtir

Başlıca özellikler ve tasarım kapsamı

  • readable.css, site genelinde bir tasarım sistemi oluşturan bir framework değil; temel HTML'i makul ve hoş görünümlü hale getiren bir CSS framework'üdür
  • Açık/koyu modu manuel olarak veya prefers-color-scheme ile destekler; ayrıca duyarlı tasarım ve dikey ritim sağlar
  • Başlık, altbilgi, gezinme çubuğu, görseller, alıntılar, aside, tablolar, düğmeler ve formlar için stil sunar
  • Metni iki yana yaslama varsayılan olarak devre dışıdır; serif, sans-serif ve monospace gibi yerel yazı tiplerini destekler
  • Gösterişli animasyonlar, özel yazı tipleri, utility class'lar ve kullanıcının tarayıcı ayarlarını geçersiz kılan öğeler bilinçli olarak dışarıda bırakılmıştır

Kullanım ve destek kapsamı

  • En güncel CSS dosyası sürüm sayfasından indirilebilir ve siteye eklenebilir 
    <link rel="stylesheet" type="text/css" href="/path/to/readable.css">
  • readable.css, sitenin niyetini semantik HTML kullanım biçimine göre yorumladığı için, stil sayfasından tam yararlanmak adına semantik HTML'i doğru kullanmak gerekir
  • Kullanım rehberi ve readable.css'e uygun HTML yazım biçimi wiki üzerinden görülebilir
  • Firefox 84+, Chromium 88+, Edge 88+, Safari 10+'u destekler; IE desteklenmez
  • Chromium, Firefox ve Edge tarafındaki sınırlayıcı etken :not() ve :is() desteğidir; Safari tarafındaki sınırlayıcı etken ise CSS değişkenleri desteğidir
  • Kaynak kodu Codeberg'de, belgeler ise Docs altında yer alır
  • readable.css ve site kodu 0BSD lisansıyla sunulur; zorunlu atıf olmadan istenen amaçla kullanılabilir
  • Freedom to Write, yazarlık endüstrisi için özgür ve açık kaynaklı yazılım çözümleri geliştiren ve destekleyen bir harekettir

İlgili okumalar

1 yorum

 
GN⁺ 8 시간 전
Lobste.rs görüşleri

  • Varsayılan font-size değerine dokunmamış olmalarını beğendim. Kullanıcılar tarayıcı gibi kullanıcı aracılarında tercih ettikleri boyutu ayarlayabilmeli ve ayarlamalı; web siteleri de bu ayara saygı duymalı
    12px’e sabitlemeyi sevmiyorum çünkü çok küçük, geniş viewport’larda metnin bir anda büyümesini de istemiyorum çünkü zaten rahat ettiğim bir boyuta ayarlamış oluyorum. Bu çok sık oluyor ve erişilebilirliğe ciddi zarar veriyor

    • İş projelerinde Accept-Language gibi standartlara uyalım dediğimde, kullanıcılar uygulama ayarlarını düzgün yapmayı bilmez, o yüzden bunu bizim onlar adına yapmamız gerekir mantığıyla sık sık geri çevriliyor
      Yazı tipi boyutunda da benzer bir şey söylenecek gibi geliyor

  • Sürekli PicoCSS ya da MVP gibi framework’lere bakıyorum; bu ise sanki başlangıç noktası olarak kullanılsın diye yapılmış gibi durduğu için dikkatimi çekti
    Üzerine bir şeyler inşa etmek için iyi bir temel gibi görünüyor ama tasarımı benden daha iyi bilenlerin ne düşündüğünü de merak ediyorum

  • CSS değişkenlerini html[data-font-family="serif"] ile değiştirme yaklaşımı pek kullanışlı değil. Bunun yerine doğrudan <html style="font-family:serif"> kullanmayı mümkün kılmak, hem template tarafında hem istemci script’lerinde neredeyse aynı derecede kolay, ama daha kısa ve daha az karmaşık olurdu
    Şu anki yaklaşım, <html data-font-family="some-webfont, serif"> gibi kullanılabileceği yanılgısını yaratabilir ama aslında çalışmıyor. Tüm belge için monospace kullanmak da okunabilirliğe uygun bir stil tercihi değil ve “readable.css” adıyla da uyuşmuyor. Yine de bunu tek bir genel yazı tipi ailesiyle sınırlı tutmuş olmalarını beğendim
    --line-width ve --line-height isimleri de kafa karıştırıcı. Birindeki “line” öğeler arasındaki çizgiyi, diğerindeki ise metin satırını ifade ediyor
    Renk teması tarafında (prefers-color-scheme) ile (prefers-contrast), [data-theme] ve [data-high-contrast] kombinasyonu birbirine girmiş durumda ve bazı değerler ile etkileşimler belgelenmemiş. @media (prefers-contrast: more) and (prefers-color-scheme: dark) birleşimi, <html data-*> override’ları olmadığında #fff arka plan üzerinde #000 vererek bariz şekilde bozuluyor. Ayrıca color-scheme: dark ve color-scheme: light bildirimleri de gerekli
    a { color: inherit; } gördüğüm anda daha fazla bakasım kalmadı. Dikey ritim iddiasına hiç girmeden bile, bağlantı rengini miras aldırıp navigasyonda alt çizgiyi de kaldırırsanız birçok kullanıcı orada bir bağlantı olduğunu fark etmez. Bağlantılar mavi ya da en azından doygun bir vurgu rengi olmalı ve alt çizgi de korunmalı. Adı readable.css olunca daha da hayal kırıklığı yaratıyor

    • Okunabilirlik onlarca yıldır araştırılan ve epey iyi anlaşılan bir alan ama şaşırtıcı biçimde bunu bilmeyen çok insan var. Özellikle sık yanlış ele alınan konular satır uzunluğu ve yazı tipi seçimi; bunun yanında punto, satır aralığı, kontrast gibi başka etkenler de var
      Satır uzunluğu için, çoğu insanın rahat okuyabildiği bir alt ve üst aralık var; kabaca satır başına 50–70 karakter. Bu Stack Exchange başlığında iyi yanıtlar var ve konu erişilebilirliğe de yakın; W3C WCAG de görsel sunum maddesinde “genişlik 80 karakter veya gliften fazla olmamalı (CJK için 40)” diyor
      Yazı tiplerinde genel olarak sans-serif, en geniş ekran yelpazesinde en kolay okunan seçenek; modern yüksek çözünürlüklü ekranlarda serif de çoğu zaman benzer puan alıyor. Eş genişlikli yazı tipleri çoğu kişi için okunaklılığı düşürdüğünden gövde metninde nadiren iyi bir tercih olur. İstisnalar, terminal ya da kod editörüne alışkın kişiler ve bazen monospace’i daha kolay okuyan disleksili kullanıcılar olabilir. Emin değilseniz eğlenceli olmasa da Arial en güvenli seçenek; monospace hakkında da Stack Exchange thread on monospaced fonts faydalı olabilir
      Ayrıca ABD hükümetinin typography page, BBC GEL’in typography section, Google Material Design’ın typography section, daha derine inmek için Butterick's Practical Typography ve The Elements of Typographic Style Applied to the Web da bakmaya değer

  • Açıkçası varsayılan metin boyutu fazla küçük ve okuması zor. Neden böyle bir boyut seçildiğini anlamıyorum; bana göre ne erişilebilirlik ne de okunabilirlik açısından iyi değil

    • Bu, web platformunun iki sorunundan kaynaklanıyor. Tarayıcının sunduğu yazı tipi ve boyutu takip etmek, açıkça belirtilmiş kullanıcı tercihine saygı göstermek açısından iyi; ama pratikte tercihlerini açıkça ayarlayan kullanıcı sayısı çok az ve birçok varsayılan yapılandırmada tarayıcı üreticileri tarihsel olarak yerleşmiş varsayılanları değiştirmediği için ortaya çıkan metin boyutu okunabilirliğin alt sınırına yakın olacak kadar küçük kalıyor
      Daha kötüsü, font-size her yazı tipinde tutarlı bir mutlak anlama sahip değil. font-size: 16px bile kullanılan yazı tipine göre oldukça farklı görünebilir. Safari’de varsayılan sans ile sans-serif böyle farklı görünüyor: https://github.com/user-attachments/assets/…. Bu yorumun içinde bile monospace yazı tipinin boyutunun diğerleriyle uyuşmadığını görebilirsiniz
      Sonuç olarak bunu düzgün düzeltmek zor; bir yer mutlaka bozuluyor ve mesele, web yöneticisinin hangi uzlaşmayı tercih ettiğine kalıyor. Kişisel olarak okuma modu kullanabiliyorsam site tasarımını çok da umursamıyorum. Yine de font-size belirsizliği için bugünlerde kullanılabilir bir çözüm var: https://matklad.github.io/2025/07/16/font-size-adjust.html
    • Garip bir 140ppi monitör kullanıyorum; uygulanması gereken 125% ölçekleme iyi görünmediği için 100%’de bırakıp okunabilir olması adına varsayılan yakınlaştırmayı ayarlıyorum
      Bu site sanki o yakınlaştırmayı da atlatmış gibi, metin aşırı küçüktü. Sonunda Firefox’taki minimum yazı tipi boyutu ayarını bir kademe daha yükselttim