The Proportional Web — proportional-width typography के लिए वेब stylesheet

• The Proportional Web एक design है जो Robert Bringhurst की 《The Elements of Typographic Style》 से कुछ सिद्धांत लेकर उन्हें browser में लागू करता है। यह The Monospace Web का proportional-width उत्तराधिकारी और reusable stylesheet है
• Body text के लिए Alegreya और Alegreya SC, और code के लिए Courier Prime का उपयोग किया गया है; 16px root font और rem, 1.2rem line height के आधार पर sizes और vertical rhythm को consistent रखा गया है
• Modern browsers के word-break, text-wrap, hyphens का उपयोग करके justified alignment लागू किया गया है, लेकिन अगर word spacing या whitespace के rivers खराब दिखें तो text-align: left इस्तेमाल करने की सलाह दी गई है
• Semantic HTML5 को केंद्र में रखकर headings, quotes, figures, tables, code blocks को style किया गया है; wide screens पर side notes right margin में रखे जाते हैं और small screens पर decoration वाले inline paragraphs में बदल जाते हैं
• यह books, journals, blogs, manuals, wikis जैसे prose-centric documents के लिए उपयुक्त है और dynamic web applications के लिए recommended नहीं है; GitHub source डाउनलोड करके CSS और JavaScript जोड़ सकते हैं या Pandoc के साथ इस्तेमाल कर सकते हैं

---

The Monospace Web से proportional width तक

• The Monospace Web उम्मीद से ज्यादा widely फैला, इतना कि इसे personal blogs और application interfaces में अपनाया गया
• The Proportional Web उस project का spiritual successor है, जिसे fixed-width के बजाय proportional-width fonts का उपयोग करते हुए freely reusable बनाने के लिए design किया गया है
• Robert Bringhurst की 《The Elements of Typographic Style》 पढ़ने के बाद, इसकी शुरुआत book layout और typography को browser में implement करने के काम के रूप में हुई
• Print के उलट web में fixed page size नहीं होता और यह एक programmable platform भी है, इसलिए वही rules ज्यों-के-त्यों लागू करना मुश्किल है
  • इसके बजाय, उपयोगी या अच्छे दिखने वाले elements चुनकर इस्तेमाल किए जा सकें, इसके लिए इसे public किया गया है
• HTML generation के लिए Pandoc का उपयोग किया गया, लेकिन stylesheet थोड़े बदलावों के साथ दूसरे environments में भी काम कर सकती है

Font system

• कई typefaces मिलाने के बजाय एक versatile typeface चुनने के Bringhurst के सिद्धांत को design का आधार बनाया गया
• Alegreya family को use case के अनुसार अलग-अलग इस्तेमाल किया गया है
  • Alegreya Regular body text और level-3 headings पर लागू होता है
  • Alegreya SC का उपयोग title capitals जैसे level-1 headings, small capitals में दिखाए जाने वाले level-2 headings, और HTML जैसे inline abbreviations के लिए किया गया है
• Fixed-width code snippets पर Courier Prime लागू किया गया है

Relative units और vertical rhythm

• सभी sizes 16px root font size के आधार पर rem units में define किए गए हैं
• Standard sizes 0.75·0.875·1·1.125·1.25·1.375·1.5·2·2.5·3·4rem हैं, जो क्रमशः 12·14·16·18·20·22·24·32·40·48·64px के बराबर हैं
• केवल root font size बदलकर पूरे design को साथ में बड़ा या छोटा किया जा सकता है
  • उदाहरण के लिए, screen width 480px या उससे कम होने पर :root का font-size 14px किया जा सकता है
• Line height 1.2rem है, और सभी elements की vertical alignment को इस value के multiples से मिलाने की कोशिश की गई है
• The Monospace Web जितना extreme न होकर भी, पूरे document में एक common alignment rhythm बनाए रखता है

Modern browsers में implemented justified alignment

• Bringhurst की book की तरह body text को ragged-right के बजाय justified alignment में layout किया गया है
• Web पर justified alignment से बचना चाहिए—ऐसी धारणा मजबूत है, लेकिन improved browser features के आधार पर इसे फिर से आजमाया जा सकता है, ऐसा माना गया
• Line breaking और hyphenation को निम्न CSS properties से control किया गया है
  • word-break
  • text-wrap
  • hyphens
  • hyphenation की range control करने वाला hyphenate-limit-chars
• Justified alignment में word spacing बहुत ज्यादा फैलने या paragraphs में whitespace के rivers बनने का जोखिम होता है
• मौजूदा document line length, font size और content के combination में ठीक-ठाक result देता है, और कुछ मुश्किल words में soft hyphens manually डाले गए हैं
• अगर यह content के अनुकूल न हो, तो text-align: left पर बदलना ज्यादा उचित है

Paragraph indentation और colours

• लगातार आने वाले paragraphs में तीन 0 characters की width के बराबर 3ch indentation लागू किया गया है
• यह paragraph की शुरुआत और अंत को visually आसानी से पहचानने का तरीका है, जो print में कम से कम 500 वर्षों से इस्तेमाल होता आया है
• Web पर आमतौर पर indentation के बजाय paragraphs के बीच vertical spacing दी जाती है, लेकिन traditional indentation भी अभी भी valid choice है
• Colours को white background और black text तक सीमित रखा गया है
  • Prose-centric documents के default के रूप में minimal composition को पसंद किया गया है
  • Colours बचाकर रखने से, complex data दिखाने वाले charts जैसे सबसे महत्वपूर्ण elements पर reader का attention केंद्रित किया जा सकता है

Semantic HTML और headings/emphasis

• कुछ अतिरिक्त classes को छोड़कर, ज्यादातर structure केवल semantic HTML5 markup से बना है
• Headings को तीन levels में style किया गया है
  • h1: chapter-level top heading
  • h2: section heading
  • h3: subsection heading
• <em> element को सामान्य अपेक्षा के अनुसार italic में दिखाया गया है

Dividers और collapsible details

• Bringhurst की book में horizontal dividers के बारे में clear guidance नहीं है, इसलिए इन्हें decorative elements के रूप में इस्तेमाल किया गया है
• Divider में Unicode Dingbats block का U+2767 Rotated Floral Heart Bullet symbol इस्तेमाल किया गया है
• <details> element का उपयोग करके label दबाने पर खुलने वाली जानकारी छिपाकर रखी जा सकती है

Side notes और proper names

• Bringhurst द्वारा इस्तेमाल किए गए side notes को HTML के <aside> से implement किया गया है
• Screen पर्याप्त wide होने पर इन्हें previous paragraph के top से align करके right margin में दिखाया जाता है
• Small screens पर इन्हें decoration वाले inline paragraph में fold करके responsive तरीके से संभाला जाता है
• .canonical-name class से अलग किए गए proper names और official names, Bringhurst के example की तरह small capitals में render होते हैं

Quotes और figures

• Block quotes indented block और body text के आसपास quotation marks से बने हैं
• Footer में author, work, year रखे जाते हैं
• Images और captions को क्रमशः <figure> और <figcaption> elements में रखा गया है
• Figures के author और work title में quotes की तरह small capitals और italic का उपयोग होता है, और वही indentation system share किया जाता है

Lists और tables

• Bullet lists और ordered lists support हैं, और ordered lists की nested structure भी सामान्य रूप में दिखाई जाती है
• Table headers में small-capital labels और borders का उपयोग करके उन्हें मजबूत distinction दी गई है
• बाकी table design decoration घटाकर spacing पर निर्भर एक simple composition है

Code presentation

• पूरा design code-centric technical documentation के बजाय prose-centric documents के लिए बनाया गया है, लेकिन code blocks और inline code भी readable बनाए गए हैं
• Code में typewriter जैसी nostalgia देने वाला Courier Prime इस्तेमाल किया गया है, ताकि वह Alegreya और overall design के mood से मेल खाए
• Default style variables में font, line height, border thickness, text colour और background colour शामिल हैं
  • --font-family: "Alegreya", serif
  • --line-height: 1.2
  • --border-thickness: 1.5px
  • --text-color: #000
  • --background-color: #fff

Suitable use cases और licence

• यह books, journals, blogs, manuals जैसे prose-centric web documents के लिए design है
• इसे personal websites, specific projects, या बड़े wikis के आधार के रूप में इस्तेमाल किया जा सकता है
• Dynamic web applications के लिए इसके उपयुक्त न होने की संभावना अधिक है
• आप अपनी पसंद के हिस्से copy या fork करके modify कर सकते हैं, लेकिन उचित attribution जरूरी है
• Source file headers में licence information बनाए रखकर attribution conditions पूरी की जा सकती हैं

Installation और Pandoc usage

• जल्दी शुरू करने के लिए GitHub source डाउनलोड करके project के the-proportional-web directory में रखें
• HTML के head में ये files जोड़ें
  • the-proportional-web/index.min.css
  • the-proportional-web/index.js
• Pandoc में table of contents depth, section numbers, CSS, JavaScript, syntax highlighting disable करने जैसे arguments देकर Markdown को HTML में convert किया जा सकता है
• अगर syntax highlighting चाहिए, तो इस HTML output में इस्तेमाल किए गए template जैसा custom template consider किया जा सकता है
• इस case में Pandoc द्वारा default रूप से शामिल CSS को custom template से remove करना होगा

Related typography projects

• Richard Rutter का The Elements of Typographic Style Applied to the Web Bringhurst की book की structure का काफी हद तक follow करता है और advice को web design के लिए adapt करता है
  • इसका scope The Proportional Web से काफी ज्यादा व्यापक है और यह information delivery पर केंद्रित है
  • वहीं The Proportional Web ideas और stylesheet को सीधे दिखाने वाले showcase के अधिक करीब है
  • उस site पर mobile phones में font size differences काफी बड़े दिखे, जिससे पढ़ना मुश्किल था; यह site कम से कम 20 साल पहले से मौजूद है और लगभग 8 वर्षों से update नहीं हुई लगती है
  • The Proportional Web ने screen size बदलने पर भी responsiveness और consistency दोनों बनाए रखने में काफी मेहनत की है, और दोनों projects के उद्देश्य अलग हैं, इसलिए वे साथ-साथ मौजूद रह सकते हैं
• Matthew Butterick की Practical Typography सामान्य users या typography के आसपास काम करने वाले engineers के लिए जरूरी लगभग सभी topics को पर्याप्त detail में cover करने वाला practical resource है
• Tufte CSS प्रभाव और recognition के लिहाज से बड़ा काम है; कुछ typesetting details से असहमति हो सकती है, फिर भी overall output मजबूत है

Scope और production tools

• Bringhurst की पूरी methodology नहीं, बल्कि केवल कुछ ideas लेकर उन्हें web के हिसाब से adapt किया गया है
• Document बनाने के लिए ये tools इस्तेमाल किए गए हैं
  • Pandoc
  • html-minifier
  • esbuild
  • GNU Make
• Design के ideas और actual layout काफी हद तक Robert Bringhurst की 《The Elements of Typographic Style》 से लिए गए हैं

[GN⁺]

Lobste.rs पर टिप्पणियाँ

• नीचे की तरह font size को pixel value में सेट करना accessibility को नुकसान पहुँचाता है, इसलिए इससे बचना चाहिए

  @media screen and (max-width: 480px) {  
    :root {  
      font-size: 14px;  
    }  
  }  
  

  • CSS की px unit अब physical pixel से 1:1 match नहीं करती, बल्कि इसका मतलब max(1/96in, 1 pixel) है
  • मेरा पसंदीदा तरीका है :root का font-size 0.625 पर सेट करना, ताकि 1rem 10px के बराबर हो जाए, और body पर 1.6rem या 2rem सेट करना ताकि पूरा page उसे inherit करे
    font के लिए px, खासकर wv या wh, इस्तेमाल न करें; rem या em इस्तेमाल करें. और जिन layouts को font size के हिसाब से zoom होने की जरूरत नहीं है, उनके लिए मुख्यतः px, wv, wh आदि इस्तेमाल कर सकते हैं
    कमज़ोर नज़र वाले users browser की text size बदलने की सुविधा इस्तेमाल कर सकें, इसके लिए fonts में px के बजाय em या rem की जोरदार सिफारिश की जाती है
    font size में wv या wh इस्तेमाल करने से desktop पर Ctrl-+ से zoom करते समय innerWidth और innerHeight भी उसी अनुपात में घटते हैं, इसलिए text size वही रहता है; इससे बचना चाहिए. बड़े screens पर ही थोड़ा बढ़ाने के लिए font-size: calc(1.6rem + 2wv) जैसे subtle mixed use ठीक हैं
  • browser का default font size न बदलना बेहतर है. साधारण text documents के लिए यह ठीक है, लेकिन web के अधिकांश हिस्सों में layout टूट सकता है
    complex websites को arbitrary font sizes संभालने के लिए design करना practically मुश्किल है, और design constraints भी बेहद बढ़ जाते हैं
    अगर visual impairment जैसी accessibility की जरूरत हो, तो browser का default zoom level बदलना चाहिए. तब site को केवल arbitrary viewport sizes को naturally handle करने वाली आम responsive design का ध्यान रखना होता है, जो realistically संभव है
    पुराने browsers users को font size सीधे adjust करने देते थे, लेकिन user experience अच्छा नहीं था, इसलिए दशकों पहले वे पूरे page zoom वाले तरीके पर shift हो गए

• शक है कि इसे mobile पर भी पढ़ने योग्य बनाया गया है या नहीं

• Bringhurst की किताब में दी गई typography को काफी अच्छी तरह reproduce किया गया है, यह impressive है
  हालांकि fixed line-height वाली uniform grid से यह कभी-कभी बाहर निकल जाता है. उदाहरण के लिए, Courier में set text अगर किसी line में mix हो जाए, तो line-height थोड़ी बढ़ जाती है

  • इससे बचने के लिए <code> पर line-height: 1 set करना चाहिए. 0 बेहतर है या नहीं, इस पर कोई consensus है, यह पता नहीं
    साथ ही, अगर 『The Elements of Typographic Style』 का पालन करना है, तो bullet और numbered lists के symbols को margin में रखना चाहिए, लेकिन मुझे याद नहीं कि यह explicit requirement थी या नहीं

• classic typography books को explore करने का नतीजा शानदार है, और online इस तरह की constraint-based design और ज़्यादा देखने को मिलना अच्छा है

• इस क्षेत्र में 2009 में आया http://lamb.cc/typograph/ अब भी मेरे लिए सबसे अच्छा है

• relative sizing बढ़िया है, लेकिन root font size को overwrite करना मुझे गलती लगता है
  sites को user की font size settings का सम्मान करना चाहिए, और proportions तथा relationships पर आधारित relative sizing system इसके लिए अच्छी तरह fit बैठता है

• यह दिखावा करना आसान है कि text सबसे महत्वपूर्ण है और presentation मायने नहीं रखती, लेकिन सावधानी से design किया गया page layout blog posts, novels या articles को कहीं ज़्यादा professional दिखाता है
  बेहतरीन page typesetting कुछ हद तक भुलाई जा रही skill बनती जा रही है, इसलिए ऐसी कोशिशें देखकर अच्छा लगता है
  शुरुआती दिनों में मैंने tuft.css अपनाया था और कई सालों तक tweaks की जरूरत पड़ी, लेकिन अब तक इसका अच्छा उपयोग करता आया हूँ. यह कुछ मायनों में बेहतर लगता है, लेकिन इतना नहीं कि मैं switch करूँ