Monospace Web

• कैरक्टर-आधारित ग्रिड पर वेब elements को align करके, text, table, diagram और media को 1970 के दशक की terminal aesthetics के करीब दिखाने वाला एक experimental page है
• सरल Markdown दस्तावेज़ों को Pandoc से convert किया जाता है, और CSS तथा बहुत कम JavaScript के साथ semantic HTML को monospace grid पर render किया जाता है
• responsive handling pixels के बजाय character-size units में सिकुड़ने के तरीके से होती है, और tables grid के अनुसार अपने-आप adjust हो जाती हैं, लेकिन expand होने वाली columns की संख्या एक तक सीमित है
• यह सामान्य paragraphs, separators, <details>, lists, tree-style lists, tables, forms, grid containers, <pre>-आधारित ASCII drawings, images और videos जैसे standard elements को संभालता है
• पूरा source code GitHub पर public है, इसलिए ज़रूरत के मुताबिक हिस्सों को license conditions के अनुसार fork या copy करके इस्तेमाल किया जा सकता है

---

कैरेक्टर ग्रिड से बनी वेब पेज

• Monospace fonts कुछ users को proportional fonts की तुलना में अधिक readable, consistent और सुंदर लग सकते हैं
• यह page सभी elements को monospace web के रूप में बनाकर देखने का एक technical और creative experiment है
• implementation में Markdown documents को Pandoc से convert करने के बाद, CSS और थोड़ी JavaScript के साथ semantic HTML को character grid पर रखा जाता है
• responsive layout स्क्रीन की चौड़ाई के अनुसार pixels के बजाय character-size units में सिकुड़ता है
• लक्ष्य यह है कि standard HTML elements बिना अलग से जटिल काम किए monospace grid के भीतर स्वाभाविक रूप से काम करें

समर्थित elements और layout का तरीका

• मूल markup में सामान्य paragraphs, horizontal separators और <details> elements शामिल हैं
• lists में सामान्य bullet lists और ordered lists का समर्थन है, और tree class लगी unordered lists के ज़रिए file system जैसी दिखने वाली tree structure दिखाई जा सकती है
• tables monospace grid के अनुसार अपने-आप adjust होती हैं और responsive तरीके से काम करती हैं
  • हालांकि expand होने वाली सिर्फ एक column की अनुमति है
• forms भी supported हैं, और उन्हें दूसरे standard elements के साथ उसी character grid पर रखा जाता है
• container में grid class जोड़ने पर cells क्षैतिज जगह को बराबर बाँटते हैं
  • monospace विशेषता बनाए रखने के कारण कुल चौड़ाई हमेशा 100% नहीं भी हो सकती
  • अगर किसी खास cell को बची हुई जगह भरनी हो, तो उस cell पर flex-grow: 1; सेट किया जाता है
• <pre> tag और box-drawing characters का उपयोग करके ASCII-style drawings बनाई जा सकती हैं
  • इन्हें <figure> और <figcaption> में wrap करके अधिक उभरता हुआ बनाया जा सकता है
  • उदाहरण के तौर पर message-passing diagram और bar chart शामिल हैं
• images और videos जैसे media objects भी supported हैं
  • वे page की चौड़ाई तक फैलते हैं, और monospace grid बनाए रखने के लिए नीचे padding जोड़ी जाती है
• पूरा source code github.com/owickstrom/the-monospace-web पर public है
• design inspiration का स्रोत U.S. Graphics Company है

[GN⁺]

Hacker News की राय

• fixed-width पेजों की सूची इकट्ठा कर रहा हूं: https://wonger.dev/posts/monospace-dump#web. अभी करीब 50 हैं
  spacing संभालना मुश्किल है, और proportional-width font छोड़ने पर readability भी कुछ हद तक खो जाती है
  मुझे लगता है कि proportional-width font की kerning आंखों को अक्षरों के समूहों का आकार पहचानने में बड़ा फर्क डालती है
  fixed-width text, code editor जैसी संरचित और highlighted जगहों में ठीक है, लेकिन लंबे लेखों में इससे बचना बेहतर है
  फिर भी खासकर Unicode charts और ASCII art में यह सचमुच सुंदर लगता है

  • proportional-width font में kerning बहुत बड़ा फर्क डालती है. सही kerning दिमाग को शब्दों के आकार बहुत तेजी से process करने देती है
  • ASCII art वाकई शानदार था. typing class में दिन का assignment खत्म करने के बाद, final image जाने बिना निर्देशों की सूची follow करके ASCII art बना सकते थे
    जैसे 15 space, 1 V, 3 U, 1 V, 15 space, 5 U, 12 space, 2 x, 5 U, 2 x जैसी चीजें होती थीं, और करीब 250 lines पूरी करने पर Jordan के dunk करने की तस्वीर बनती थी, जिसे print कर सकते थे
  • उदाहरणों में से एक अब बिक्री के लिए उपलब्ध domain बन गया है. फिर भी WBM में बचा हुआ है: https://web.archive.org/web/20230216225350/https://kary.us/n...
  • रंग और थोड़ी-सी formatting के बिना fixed-width text ऐसा लगता है जैसे किसी sense या spatial dimension को छोड़ देना. यह लगभग बेमतलब तपस्या जैसा है
  • list में एक और जोड़ने लायक है :) https://jarek.lupin.ski/tape-deck/

• यह सवाल पूछने के लिए बिल्कुल सही thread लगता है. कुछ साल पहले मैंने शायद किसी video game walkthrough जैसा एक लेख देखा था, जिसे fixed-width font में पढ़ने के लिए लिखा गया था, और हजारों lines पूरी तरह सिर्फ शब्दों के चुनाव से perfectly justified थीं
  किसी को पता है कि वह क्या था और link है?

  • इसी तरह का http://tom7.org/bovex/ भी है. यह एक layout engine है जो input को LLM से दोबारा लिखवाकर वैसा ही effect लाने की कोशिश करता है
  • उसे bricktext कहते हैं. पहले कभी-कभी usenet या GameFAQs जैसी जगहों पर दिखता था
    [0] http://www.catb.org/esr/jargon/html/B/bricktext.html
    Google search results से यह concept पूरी तरह गायब हो गया है, यह थोड़ा हैरान करता है
  • Laravel भी कुछ ऐसा ही करता है. multi-line comment में हर line पिछली line से बिल्कुल 3 characters छोटी होती है
    https://github.com/laravel/laravel/blob/11.x/config/database...
  • GameFAQs walkthrough में ऐसा कुछ देखने की धुंधली याद है. शायद कोई Final Fantasy game था, लेकिन इससे ज्यादा याद नहीं
  • मैं भी इस thread में एक सवाल जोड़ना चाहता हूं
    कई सालों से Visual Studio Code extension के रूप में ऐसी feature बनाना चाहता था जो typing के दौरान comments को hyphenation समेत justify करे, और जरूरत पड़ने पर extra spaces भी allow करे
    इससे जुड़े algorithms और libraries थोड़ा खोजने के अलावा शुरू नहीं कर पाया, क्योंकि यह काफी complex लगता था
    fmt या par जैसी चीजें इस्तेमाल करने की कोशिश की, लेकिन आखिर में मान लिया कि manually किए बिना सुंदर aligned comments छोड़ने होंगे, और एक छोटी change भी अक्सर कई lines फिर से करने पर मजबूर कर देती है, इसलिए बहुत समय लगता है
    लंबे identifiers को अगर हो सके तो line के बीच में तोड़ना नहीं चाहता, और nested lists, tables, code blocks, comments के अंदर ASCII art, words के अंदर hyphen और hyphenation में आए hyphen के बीच फर्क, XML documentation comments या Javadoc tags जैसे structured comments भी handle करने होंगे
    Tom7 का Badness 0 देखकर LLM आजमाने का भी सोचा, लेकिन अगर इसे realtime में काम करना हो और hallucinated comments नहीं चाहिए हों, तो मुझे यह अभी practical नहीं लगता
    क्या ऐसी feature पहले से मौजूद है, या कोई ऐसा आधार है जिससे extension बनाना 1 साल का काम न बन जाए?

• fixed-width अपने आप में परेशान नहीं करता
  परेशान करने वाली चीज forced line breaks है
  कुछ “retro” websites असल में pre tag इस्तेमाल करती हैं
  phone पर यह छोटे font वाली text wall बन जाती है, reading mode काम नहीं करता, और landscape करने पर scrollbar आ भी सकता है और नहीं भी
  आजकल tech mailing lists से मेरी लगभग इकलौती शिकायत भी forced line breaks और rigid layout ही है

  • यह website वैसी नहीं है. यह पूरी तरह responsive है
  • phone पर RFC पढ़ने की कोशिश की, और एक साधारण paragraph देखने के लिए लगातार बाएं-दाएं scroll करना पड़ा. वरना text इतना छोटा करना पड़ता कि पढ़ा न जा सके
  • मुझे जानना है कि scrollbar में exactly दिक्कत क्या है

• आज देखे एक video में इसे indie web कहा जा रहा था, और बताया गया कि यह algorithms के खिलाफ और पुराने web को शानदार बनाने वाली चीजों को अपनाने की philosophy है
  RSS, personal blogs, forums, webrings जैसी चीजें
  मैंने भी अपना एक शुरू किया है और काफी अच्छा महसूस होता है

  • कभी-कभी इसे small web भी कहते हैं. Ben Hoyt का The small web is beautiful देखें: https://benhoyt.com/writings/the-small-web-is-beautiful

• दिखने में अच्छा, semantic और responsive होना ठीक है, लेकिन मूल रूप से monospace font body text के लिए बहुत अच्छा नहीं होता
  मैंने कई साइटों पर monospace body वाले blog posts पढ़े हैं और वे ठीक-ठाक थे, लेकिन मेरे हिसाब से proportional width ही सही दिशा है

  • मुझे लगता है मैं monospace को ज़्यादा पसंद करता हूँ। कम से कम काले background पर सफेद text वाली color scheme तो निश्चित रूप से बेहतर है
    पुराने print magazine जैसा एहसास देने की कोशिश करने वाले “खूबसूरत” pages की तुलना में मुझे यह कहीं बेहतर लगता है
  • सहमत हूँ। Markdown documents लिखते समय भी यह मुझे खटकने लगा है, लेकिन Markdown में monospace से बचना अक्सर व्यावहारिक नहीं होता
  • जिज्ञासा से पूछ रहा हूँ, body text के लिए आप कौन-सा font पसंद करते हैं?
    अपने blog में मैं monospace इस्तेमाल करता हूँ क्योंकि मेरी दृष्टि अच्छी नहीं है और मैं zoom settings इस्तेमाल करता हूँ, लेकिन accessibility को महत्वपूर्ण मानता हूँ, इसलिए हमेशा सोचता हूँ कि सभी के लिए ज़्यादा readable विकल्प क्या होगा

• बाकी सब छोड़ें तो tree ul-list CSS class इतनी अच्छी है कि HTML specification में tag के रूप में शामिल होने लायक है। यह बेहद useful component है

• line spacing बहुत कम है, जिससे readability पर बुरा असर पड़ता है। ऐसे सघन body text के लंबे paragraphs पढ़ना मुश्किल है
  लेकिन tables और character graphics को इसी तरह की कम line-height चाहिए होती है
  समस्या यह है कि graphics और text दोनों के लिए वही character grid इस्तेमाल की जा रही है
  शायद ऐसे font का इस्तेमाल करने से बात कुछ संभल सकती है जिसकी x-height खासकर कम हो और जो अक्षरों के ऊपर-नीचे ज़्यादा खाली जगह छोड़े

  • पहले मुझे लगा कि बात line width की हो रही है, इसलिए confusion हुआ। line width आम तौर पर स्वीकार्य range, लगभग 70 characters, के भीतर है
    line height पर मैं सहमत हूँ। 16px font size पर 19.2px सिर्फ 1.2x है, इसलिए बहुत घुटा-घुटा लगता है। इसे 24px करने से काफी सुधार होता है
    हालांकि मेरी नज़र में बड़ी line height tables या character graphics को प्रभावित नहीं करती। ऐसा adjustment डालने पर monospace style काफी अच्छी तरह बची रहती है
    संपादन: लगता है बात समझ आ गई। यह author के fixed grid concept को तोड़ता है। p element में line-height: 24px डालकर और author का “debug mode” ऑन करके grid देखने पर यह साफ हो जाता है
  • पढ़ने के लिए मैं monospace बिल्कुल बर्दाश्त नहीं कर पाता, इसलिए मैंने एक bookmarklet बनाया। इस site पर सिर्फ सामान्य text tags को sans-serif में बदल देने से भी यह ठीक चलता है, लेकिन सभी reading modes font preference खराब कर देते हैं
    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/
  • यहाँ HN comments की सघनता से तुलना करें तो कैसा है?
  • समस्या सघन line height है, या फिर यह तथ्य ही कि monospace font, proportional font की तुलना में पढ़ने में कठिन होता है?
    क्योंकि monospace words के “shapes” proportional words की तुलना में ज़्यादा मिलते-जुलते हो जाते हैं
  • देखते ही तुरंत अरुचि हो गई

• OpenBSD ने कुछ साल पहले से console font को Spleen पर set करना शुरू किया है
  अफसोस है कि इसका TrueType version नहीं है
  https://github.com/fcambus/spleen

  • क्या OTF files को इसके बजाय इस्तेमाल नहीं कर सकते? README में लिखा है कि release tarball के अंदर OTF files हैं

• आज भी मशहूर C64 resource, तथाकथित VIC article, monospace में उपलब्ध है
  https://www.cebix.net/VIC-Article.txt
  मुख्य समस्या output है
  यह लेख ऐसे diagrams इस्तेमाल करता है जिन्हें 2D space में fixed references की जरूरत होती है, इसलिए यहाँ monospace बहुत महत्वपूर्ण है
  यह C64 के सबसे महत्वपूर्ण technical references में से एक है, और technical demo effects के 99% को यहाँ मौजूद basic tricks में तोड़ा जा सकता है

• सोच रहा हूँ कि अपनी personal website का font monospace में बदल दूँ
  क्या किसी को ऐसा monospace font पता है जिसकी लंबे लेखों की readability खास तौर पर अच्छी हो?
  Google Fonts पर हो तो और अच्छा

  • paragraph display के लिए मुझे Drafting Mono पसंद है: https://indestructibletype.com/Drafting/
    Google Fonts पर नहीं है, लेकिन free है, या variable font version भी काफी सस्ता है
  • IBM Plex Mono काफी अच्छा है और license भी reasonable है। Google Fonts पर है और repository यहाँ है: https://github.com/IBM/plex
  • थोड़ा side note है, लेकिन Google Fonts के बजाय https://fontsource.org/ इस्तेमाल करने पर विचार करना अच्छा रहेगा। इस्तेमाल में उतना ही आसान है, और कम से कम Google tracking नहीं है