readable.css

 (readable-css.freedomtowrite.org)
2 पॉइंट द्वारा GN⁺ 8 시간 전 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • readable.css पूरे साइट के लिए कोई design system नहीं है, बल्कि semantic HTML में समझदारी भरे और आकर्षक default styles जोड़ने वाला एक CSS framework है
  • इसका मुख्य सिद्धांत consistency है, इसलिए colors, font styles, border thickness, और line height पूरे साइट में एकसमान लागू होते हैं
  • यह light/dark mode, responsive design, vertical rhythm, और header, footer, navigation, table, button, तथा form styles प्रदान करता है
  • इसमें चमकदार animations, custom fonts, utility classes, या user browser settings को override करने वाले elements शामिल नहीं हैं
  • यह semantic HTML को आधार मानकर intent को समझता है और Firefox 84+, Chromium 88+, Edge 88+, Safari 10+ को support करता है, जबकि IE शामिल नहीं है

प्रमुख फीचर्स और design scope

  • readable.css पूरे साइट के लिए design system बनाने वाला framework नहीं, बल्कि basic HTML को समझदारी भरा और देखने में अच्छा बनाने वाला CSS framework है
  • यह light/dark mode को manual तरीके से या prefers-color-scheme के जरिए support करता है, और responsive design व vertical rhythm प्रदान करता है
  • यह header, footer, navigation bar, images, blockquotes, aside, tables, buttons, और forms को style करता है
  • text justification डिफ़ॉल्ट रूप से disabled रहती है, और serif, sans-serif, monospace जैसे native fonts को support किया जाता है
  • चमकदार animations, custom fonts, utility classes, और user browser settings को override करने वाले elements को जानबूझकर बाहर रखा गया है

उपयोग और support scope

  • नवीनतम CSS file को release page से डाउनलोड करके साइट में जोड़ें 
    <link rel="stylesheet" type="text/css" href="/path/to/readable.css">
  • readable.css, semantic HTML के उपयोग के तरीके के आधार पर साइट के intent को समझता है, इसलिए stylesheet का सही उपयोग करने के लिए semantic HTML को सही ढंग से लिखना ज़रूरी है
  • usage guide और readable.css के अनुरूप HTML लिखने का तरीका wiki में देखा जा सकता है
  • यह Firefox 84+, Chromium 88+, Edge 88+, Safari 10+ को support करता है, और IE को support नहीं करता
  • Chromium, Firefox, और Edge में सीमित करने वाला factor :not() और :is() support है, जबकि Safari में सीमित करने वाला factor CSS variables support है
  • source code Codeberg पर है, और documentation Docs में उपलब्ध है
  • readable.css और साइट का code 0BSD license के अंतर्गत है, इसलिए इसे बिना अनिवार्य attribution के किसी भी उद्देश्य के लिए इस्तेमाल किया जा सकता है
  • Freedom to Write लेखन उद्योग के लिए free और open source software solutions बनाने और support करने वाला एक movement है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 8 시간 전
Lobste.rs की राय

  • यह बात पसंद आई कि इसने डिफ़ॉल्ट font-size को नहीं छेड़ा। यूज़र ब्राउज़र जैसे user agent में अपनी पसंद का आकार सेट कर सकते हैं, और करना भी चाहिए, और वेबसाइटों को उस सेटिंग का सम्मान करना चाहिए
    12px फिक्स बहुत छोटा लगता है, और चौड़े viewport में टेक्स्ट का अचानक बड़ा हो जाना भी नहीं चाहिए, क्योंकि मैंने पहले से ही इसे अपने लिए आरामदायक आकार पर सेट किया होता है। ऐसा बहुत आम है और accessibility को काफ़ी नुकसान पहुँचाता है

    • काम के प्रोजेक्ट्स में भी जब Accept-Language जैसे standards का पालन करने की बात करते हैं, तो अक्सर यह कहकर मना कर दिया जाता है कि यूज़र ऐप सेटिंग्स ठीक से करना नहीं जानते, इसलिए हमें उनकी तरफ़ से यह करना चाहिए
      लगता है font size के मामले में भी ऐसी ही बात सुनने को मिलेगी

  • मैं हमेशा PicoCSS या MVP जैसे frameworks देखता रहता हूँ, और यह इसलिए ध्यान खींचता है क्योंकि लगता है इसे starting point की तरह इस्तेमाल करने के लिए बनाया गया है
    यह कुछ ऐसा आधार लगता है जिस पर आगे आसानी से निर्माण किया जा सके, लेकिन design को मुझसे बेहतर समझने वालों की राय भी जानना चाहूँगा

  • html[data-font-family="serif"] से CSS variables बदलने का तरीका ज़्यादा उपयोगी नहीं लगता। इसकी जगह बस <html style="font-family:serif"> इस्तेमाल करने देना templates और client scripts दोनों में लगभग उतना ही आसान, बल्कि छोटा और कम जटिल है
    मौजूदा तरीका यह ग़लतफ़हमी दे सकता है कि आप <html data-font-family="some-webfont, serif"> जैसा कुछ लिख सकते हैं, जबकि असल में यह काम नहीं करेगा। पूरे दस्तावेज़ के font के रूप में monospace इस्तेमाल करना भी readability के हिसाब से ठीक style choice नहीं है, और “readable.css” नाम से भी मेल नहीं खाता। हालाँकि इसे केवल एक generic font family तक सीमित रखने का संयम अच्छा है
    --line-width और --line-height नाम भी उलझाने वाले हैं। एक “line” का मतलब elements के बीच की रेखा हो सकता है, जबकि दूसरा text line को दर्शाता है
    color theme वाला हिस्सा भी (prefers-color-scheme) और (prefers-contrast), [data-theme], [data-high-contrast] के मेल से उलझा हुआ है, और कुछ values व interactions documented भी नहीं हैं। @media (prefers-contrast: more) and (prefers-color-scheme: dark) का संयोजन, जब <html data-*> override न हो, तो #fff background पर #000 देता है, यानी साफ़ तौर पर टूट जाता है। color-scheme: dark और color-scheme: light declarations भी ज़रूरी हैं
    a { color: inherit; } देखते ही आगे पढ़ने का मन नहीं रहा। vertical rhythm की बहस तक जाने की भी ज़रूरत नहीं; अगर link color inherit करा दें और navigation में underline भी हटा दें, तो बहुत से यूज़र पहचान ही नहीं पाएँगे कि वहाँ लिंक है। लिंक नीले होने चाहिए, या कम से कम किसी saturated accent color में, और underline भी रहनी चाहिए। इसका नाम readable.css है, इसलिए निराशा और बढ़ जाती है

    • readability पर दशकों से शोध हुआ है और यह काफ़ी अच्छी तरह समझा हुआ क्षेत्र है, लेकिन हैरानी की बात है कि बहुत से लोग इसे ठीक से नहीं जानते। ख़ास तौर पर जिन चीज़ों को लोग अक्सर ग़लत संभालते हैं वे हैं line length और font choice, और इनके अलावा text size, line spacing, contrast जैसे कई और factors भी हैं
      line length के लिए ऐसा न्यूनतम और अधिकतम दायरा है जिसमें ज़्यादातर लोग आराम से पढ़ पाते हैं, और मोटे तौर पर यह प्रति पंक्ति 50–70 characters है। इस Stack Exchange thread में अच्छे जवाब हैं, और accessibility से इसका क़रीबी संबंध होने के कारण W3C WCAG भी visual presentation section में कहता है कि “width 80 characters या glyphs से अधिक नहीं होनी चाहिए (CJK के लिए 40)”
      fonts की बात करें तो आम तौर पर sans-serif सबसे बड़े दायरे की screens पर पढ़ने में आसान होता है, और आधुनिक high-resolution screens पर serif को भी लगभग समान रूप से अच्छा माना जाता है। monospace fonts ज़्यादातर लोगों के लिए legibility घटाते हैं, इसलिए body text में वे कम ही अच्छे विकल्प होते हैं। अपवाद वे लोग हो सकते हैं जो terminal या code editors के आदी हैं, या कुछ dyslexic यूज़र जिन्हें कभी-कभी monospace पढ़ना आसान लगता है। अगर संदेह हो तो मज़ेदार भले न लगे, लेकिन Arial सबसे सुरक्षित विकल्प है, और monospace fonts पर सामग्री के लिए यह Stack Exchange thread on monospaced fonts उपयोगी है
      इसके अलावा अमेरिकी सरकार का typography page, BBC GEL का typography section, Google Material Design का typography section, गहराई से पढ़ने के लिए Butterick's Practical Typography, और The Elements of Typographic Style Applied to the Web भी देखने लायक हैं

  • सच कहूँ तो डिफ़ॉल्ट text size बहुत छोटा है और पढ़ने में मुश्किल है। समझ नहीं आता कि ऐसा size क्यों चुना गया, और मेरे लिए यह न accessibility के लिहाज़ से अच्छा है न readability के लिहाज़ से

    • यह web platform की दो समस्याओं से निकलता है। ब्राउज़र द्वारा दिए गए fonts और sizes का पालन करना इसलिए अच्छा है क्योंकि इससे यूज़र की स्पष्ट preferences का सम्मान होता है, लेकिन व्यवहार में बहुत कम यूज़र इन्हें स्पष्ट रूप से सेट करते हैं, और कई default configurations में browser vendors ऐतिहासिक कारणों से जमे हुए defaults नहीं बदलते, इसलिए नतीजे में text size readability की निचली सीमा के काफ़ी पास, यानी बहुत छोटा रह जाता है
      इससे भी बुरी बात यह है कि font-size का हर font में कोई स्थिर absolute अर्थ नहीं होता। font-size: 16px भी चुने गए font के हिसाब से काफ़ी अलग दिख सकता है। Safari में डिफ़ॉल्ट sans और sans-serif ऐसे अलग दिखते हैं: https://github.com/user-attachments/assets/…. इसी टिप्पणी में भी आप देख सकते हैं कि monospace font size बाकी से मेल नहीं खा रहा
      आख़िरकार इसे सही तरह ठीक करना मुश्किल है, कुछ न कुछ कहीं न कहीं टूटेगा ही, और मामला इस पर आकर रुकता है कि webmaster किस तरह का समझौता पसंद करता है। व्यक्तिगत रूप से, अगर reading mode उपलब्ध हो तो मैं वेबसाइट design की ज़्यादा परवाह नहीं करता। हालाँकि font-size की इस अस्पष्टता का एक उपयोगी आधुनिक समाधान अब मौजूद है: https://matklad.github.io/2025/07/16/font-size-adjust.html
    • मैं एक अजीब 140ppi monitor इस्तेमाल करता हूँ, और जो 125% scaling लगानी चाहिए वह अच्छी नहीं लगती, इसलिए मैं 100% पर रखकर default zoom बदलता हूँ ताकि आराम से पढ़ सकूँ
      इस साइट पर text इतना छोटा था कि लगा जैसे इसने उस zoom को bypass कर दिया हो। मुझे Firefox की minimum font size setting एक और स्तर बढ़ानी पड़ी