Datatype - टेक्स्ट को चार्ट में बदलने वाला variable font

• "data as type" कॉन्सेप्ट के तहत, JS/इमेज/रेंडरिंग लाइब्रेरी के बिना सिर्फ टेक्स्ट से चार्ट दिखाना
• OpenType ligature substitution का उपयोग करके {b:30,70,50,90} जैसे सरल टेक्स्ट एक्सप्रेशन को inline chart में बदलता है
• 3 तरह के chart types सपोर्ट: bar/line/pie
  • bar chart: {b:30,70,50,90,64,27,72,42} कॉमा से अलग किए गए मान (हर एक 0–100), अधिकतम 20 bars
  • sparkline: {l:10,50,30,80,20,15,48,72,37} कॉमा से अलग किए गए मान (हर एक 0–100), अधिकतम 20 points
  • pie chart: {p:69} {p:43} 0–100 के बीच एक single percentage value
• font size और दो variable axes से visual adjustment
  • Width(wdth): 50–150, spacing control, default 100
  • Weight(wght): 100–900, line thickness control, default 400
• अक्षरों के बीच भी render हो सकता है, इसलिए मुख्य टेक्स्ट के बीच, टेबल के अंदर, log messages आदि जहाँ भी टेक्स्ट जा सकता है वहाँ वैसे ही काम करता है
  • table/dashboard/report आदि में भी आसानी से insert किया जा सकता है
• वेब पर सिर्फ 3 लाइनों के CSS से इस्तेमाल किया जा सकता है
  • @font-face से font load करें → font-family: 'Datatype' सेट करें → HTML में {l:20,40,70} लिखें
  • font-variation-settings से wdth जैसे अतिरिक्त adjustment options भी मिलते हैं
• डेस्कटॉप: TTF install करने के बाद OpenType ligature सपोर्ट करने वाले apps (Adobe आदि) में उपयोग संभव
• Google Fonts पर भी उपलब्ध, इसलिए अलग hosting के बिना इस्तेमाल किया जा सकता है
• 15 named instances उपलब्ध (standard Weight 9 + custom width combinations 6)
  • Thin UltraCondensed(50/100), SemiBold Condensed(75/600), Medium Expanded(125/500), Black ExtraExpanded(150/900) जैसे उपयोग-आधारित presets शामिल
• glyph count: प्रति master 10,850, कुल 9 masters
• file size: TTF 4.0MB / WOFF2 78KB, Unicode coverage Google Fonts Latin Core
• browser support: Chrome 62+, Firefox 62+, Safari 11+, Edge 17+

• काम करने का तरीका

  • OpenType ligature substitution फीचर का उपयोग करता है
  • मूल ligature फीचर fi, fl जैसे अक्षर संयोजनों को एक glyph से replace करता है
  • Datatype इसे बढ़ाकर {b:30,70,50,90} जैसे पूरे pattern को एक chart glyph {b:30,70,50,90} में replace करता है
  • अगर browser या app font ligature फीचर सपोर्ट करता है, तो JavaScript चलाए बिना तुरंत render हो जाता है
• SIL Open Font License 1.1
• Specimen साइट पर वास्तविक उपयोग उदाहरण देखे जा सकते हैं

[winterjung]

{p:75} {l:40,10,10,40} {p:75}

[shakespeares]

{p:75} {l:40,10,10,40} {p:75}
वाह..

[xguru]

ऐसा इस्तेमाल भी हो सकता है?!

[crawler]

हाहाहाहाहाहा

[bichi]

हाहाहाहा

[roxie]

मैंने सोचा था कि यह svg में बदलने से बहुत अलग नहीं होगा, लेकिन GeekNews पर इसका इस्तेमाल का उदाहरण तुरंत सामने आ गया। यह सच में एक अच्छा आइडिया था। {p:100} {b:50,50,50} {p:100}

[xguru]

यह GeekNews पर काफ़ी अच्छी तरह फिट बैठता लगा, इसलिए परिचय देते हुए इसे एक बार beta फ़ीचर के रूप में लागू करके देखा। इसका साइज़ छोटा है, इसलिए इसे सीधे self-host करना भी बोझिल नहीं है.
{b:30,70,90,64,27,42} {b:30,70,90,64,27,42} या {l:10,50,30,80,20} {l:10,50,30,80,20} की तरह इनपुट देने पर यह सिर्फ़ उन स्ट्रिंग्स को पकड़कर उन पर फ़ॉन्ट लागू कर देता है।
स्ट्रिंग केवल बिना backtick(`) के दर्ज करनी है।

[xguru]

GeekNews पहले से ही जहाँ तक संभव हो इमेज का इस्तेमाल नहीं करता, इसलिए जब भी ऐसे text-based lightweight solution आते हैं, हम जहाँ तक संभव हो उन्हें अपनाने की कोशिश करते हैं.
Google, black-and-white emoji font Noto Emoji जारी को लागू हुए भी 4 साल हो गए हैं, और यह अभी भी अच्छी तरह इस्तेमाल हो रहा है 😀😃😄😁😆😅😍🥰😘

[humblebee]

{p:75} {l:40,10,10,40} {p:75} 🙂

[crawler]

वाह, यह तो कमाल का है हाहाहा

[onestone]

ऊपर की ओर बढ़ता ग्राफ~ {b:10,20,40,60,80,100}

[logone72]

{l:10,50,30,80,20}

[jungkeuny]

{l:10,50,30,80,20}

[aer0700]

{p:75} {l:45,30,10,10,30,45} {p:75}

[lazydonkey456]

{p:65} {l:70,0,70,0,70} {p:65}

[duky8n]

{p:5} {l:60,0,50,50,0,60} {p:5}

[aciddust]

{p:75} {l:40,10,10,40} {p:75} कितनाोोोोोोो क्यूट

[filab]

{b:30,70,50,30}

[nvrshowfear]

{p:75} {l:40,10,10,40} {p:75}

[syate]

{p:75} {l:40,10,40} {p:75}

[syate]

{p:75} {l:40,10,10,10,10,10,40} {p:75}

[gilsport]

{b:30,70,90,64,27,42}

[unknowncyder]

{b:30,70,90,64,27,42,42,27,64,90,70,30}

[alstj158]

Google Material Symbols भी ligature के ज़रिए icons implement करता है, यह दिलचस्प है।

[holywork]

बहुत अच्छा है

[akarin]

{l:1,2,3,4,5,6,7,8,9,10,11,12,13,14,15}

[recast7838]

{b:30,70,50,90}

[sigco]

{l:40,10,10,40} {p:75}

[kimjeongwonn]

{b:90,100,100,90,20,10,0,10,20,90,100,100,90}

[seoseonyu]

वाह haha, काफ़ी दिलचस्प है