Monospace वेब

परिचय

Monospace फ़ॉन्ट बहुत से लोगों को पसंद आते हैं। इनमें पठनीयता, एकरूपता और सौंदर्यबोध बेहतरीन होता है। यह पेज Monospace grid का इस्तेमाल करके टेक्स्ट और डायग्राम को align करता है। यह एक साधारण Markdown दस्तावेज़ से बनाया जाता है और CSS तथा थोड़े-से Javascript से render होता है। इसमें responsive design अपनाया गया है, इसलिए यह अक्षर-आकार की इकाइयों के आधार पर छोटा होता है। लक्ष्य है कि मानक elements ठीक से काम करें। इसे 70 के दशक-शैली वाले semantic HTML में render किया गया है.

बुनियादी बातें

• दस्तावेज़ में कुछ अतिरिक्त classes का उपयोग किया गया है, लेकिन अधिकतर हिस्सा markup है।
• उदाहरण के तौर पर सामान्य paragraph और horizontal rule मौजूद हैं।
• <details> element का उपयोग करके सामग्री छिपाई जा सकती है।

सूचियाँ

• सामान्य bullet list:

  • Banana
  • Paper boat
  • Cucumber
  • Rocket

• क्रमबद्ध सूची:

  • लक्ष्य
  • प्रेरणा
    • आंतरिक
    • बाहरी
  • द्वितीयक प्रभाव

• ट्री विज़ुअलाइज़ेशन:

  • /dev/nvme0n1p2
    • usr
      • local
      • share
      • libexec
      • includes
      • bin
      • src
      • lib64
      • lib
    • games
      • solitaire
      • snake
      • tic-tac-toe
    • media
    • run
    • tmp

तालिकाएँ

• सामान्य tables का उपयोग किया जा सकता है, जो अपने-आप Monospace grid में फिट हो जाती हैं।
• उदाहरण:
  • नाम: Boboli Obelisk, आकार: 1.41m × 1.41m × 4.87m, स्थान: 43°45’50.78”N 11°15’3.34”E
  • नाम: Pyramid of Khafre, आकार: 215.25m × 215.25m × 136.4m, स्थान: 29°58’34”N 31°07’51”E

फ़ॉर्म

• बटन और input fields के उदाहरण:
  • बटन: RESET, SAVE
  • input fields: नाम, उपनाम, आयु

ग्रिड

• container में grid class जोड़कर क्षैतिज स्थान को बराबर हिस्सों में बाँटा जा सकता है।
• किसी विशेष cell पर flex-grow: 1; सेट करके बची हुई जगह भरी जा सकती है।

ASCII चित्र

• <pre> tag का उपयोग करके box-drawing characters से चित्र बनाए जा सकते हैं।

• उदाहरण:

  ╭─────────────────╮
  │ MONOSPACE ROCKS │
  ╰─────────────────╯
  

• <figure> tag और <figcaption> जोड़कर इसे और उभारा जा सकता है।

• संदेश प्रेषण का उदाहरण:

  ┌───────┐ ┌───────┐ ┌───────┐
  │Actor 1│ │Actor 2│ │Actor 3│
  └───┬───┘ └───┬───┘ └───┬───┘
      │         │         │
      │ msg 1   │         │
      └────────►│         │
                │ msg 2   │
                └────────►│
  ┌───┴───┐ ┌───┴───┐ ┌───┴───┐
  │Actor 1│ │Actor 2│ │Actor 3│
  └───────┘ └───────┘ └───────┘
  

• चार्ट उदाहरण:

             Things I Have
                         │
                   ████ Usable
  15 │
                   ░░░░ Broken
  12 │       ░
  9 │  ░     ░
  6 │  █     ░     ░
  3 │  █     █     █
  0 └───▀─────────▀─────────▀──────────▀─────────────
     Socks   Jeans   Shirts  USB Drives
  

मीडिया

• images और video जैसी media objects का समर्थन है।
• उदाहरण:
  • फ़्रांस के किले का कमरा (2024)
  • वेब का केंद्र (1914), Wikimedia

चर्चा

• इसे CSS तकनीकों को आगे बढ़ाने और डिज़ाइन का आनंद लेते हुए बनाया गया है।
• यदि आप इसका उपयोग करें या feedback दें तो अच्छा लगेगा।
• पूरा source code GitHub पर उपलब्ध है: github.com/owickstrom/the-monospace-web
• U.S. Graphics Company को धन्यवाद दिया गया है।

GN⁺ का सारांश

• यह प्रोजेक्ट Monospace फ़ॉन्ट का उपयोग करने वाला एक web design experiment है।
• यह responsive design और semantic HTML को मिलाकर 70 के दशक-शैली वाला web page बनाता है।
• यह developers को CSS और design skills बेहतर करने में मदद कर सकता है।
• मिलती-जुलती विशेषताओं वाला एक प्रोजेक्ट "CSS Zen Garden" है।

[GN⁺]

Hacker News राय

• एक उपयोगकर्ता monospace पेजों की सूची बनाए रखता है, और वर्तमान में उनमें लगभग 50 हैं

  • proportional फ़ॉन्ट छोड़ देने पर पठनीयता कम हो जाती है
  • proportional फ़ॉन्ट में letter spacing का समायोजन अक्षरों के समूहों के आकार को पहचानने में बड़ा फर्क डालता है
  • code editor में जब टेक्स्ट structured और highlighted हो, तब monospace टेक्स्ट ठीक लगता है
  • Unicode charts और ASCII art के साथ इस्तेमाल करने पर यह खास तौर पर सुंदर लगता है

• एक उपयोगकर्ता कुछ साल पहले monospace फ़ॉन्ट में लिखी गई video game strategy guide खोज रहा है

  • वह केवल शब्द चयन से पूरी तरह aligned टेक्स्ट था
  • वह पूछता है कि क्या किसी को उसका लिंक पता है

• एक उपयोगकर्ता "indie web" दर्शन का उल्लेख करता है

  • यह algorithm को बाहर रखता है और उन चीज़ों को अपनाता है जिन्होंने पुराने web को अच्छा बनाया था
  • इसमें RSS, custom blogs, forums, web rings आदि शामिल हैं
  • उसने खुद भी इसे शुरू किया है और उसे यह बहुत अच्छा लगा

• एक उपयोगकर्ता कहता है कि monospace फ़ॉन्ट अपने आप में ठीक है, लेकिन forced line wrapping समस्या है

  • छोटे फ़ॉन्ट के साथ टेक्स्ट की दीवार बन जाती है, और reader mode काम नहीं करता
  • landscape orientation में scrollbar आने की संभावना रहती है
  • technical mailing lists में भी यही शिकायत है

• एक उपयोगकर्ता अपनी personal website का फ़ॉन्ट monospace में बदलने पर विचार कर रहा है

  • वह लंबे टेक्स्ट के लिए अच्छी readability वाले monospace फ़ॉन्ट की सिफारिश चाहता है
  • अगर वह Google Fonts में हो तो अतिरिक्त अंक मिलेंगे

• एक उपयोगकर्ता कहता है कि monospace सुंदर और responsive है, लेकिन body text के लिए उपयुक्त नहीं है

  • उसने कई साइटों पर monospace body text पढ़ा है, लेकिन उसका मानना है कि proportional फ़ॉन्ट बेहतर हैं

• एक उपयोगकर्ता उल्लेख करता है कि प्रसिद्ध C64 संसाधन "VIC article" अब भी monospace में उपलब्ध है

  • मुख्य समस्या print करना है
  • diagrams ऐसे 2D space का उपयोग करते हैं जिसमें fixed reference की जरूरत होती है
  • यह लेख C64 के सबसे महत्वपूर्ण technical reference materials में से एक है
  • technical demo effects का 99% इसमें मिले बुनियादी tricks में तोड़ा जा सकता है

• एक उपयोगकर्ता कहता है कि web फिर से अपने मूल रूप में लौट रहा है

  • शुरुआती web की satellite communities धीरे-धीरे बढ़ रही हैं
  • web के अलग-अलग हिस्सों का दौरा करना और अधिक रोचक होता जा रहा है

• एक उपयोगकर्ता सोचता है कि tree ul-list CSS class को HTML standard का हिस्सा होना चाहिए

  • यह बहुत उपयोगी है

• एक उपयोगकर्ता कहता है कि OpenBSD ने कुछ साल पहले से console फ़ॉन्ट को "Spleen" पर सेट किया है

  • TrueType version न होना अफसोस की बात है
  • Spleen GitHub लिंक दिया गया है