टेक्स्ट और टाइपोग्राफ़ी

The CSS Podcast - 036: Text & Typography

टेक्स्ट, वेब के मुख्य बिल्डिंग ब्लॉक में से एक है.

वेबसाइट बनाते समय, आपको अपने टेक्स्ट को स्टाइल करने की ज़रूरत नहीं है. एचटीएमएल में, डिफ़ॉल्ट रूप से कुछ स्टाइल मौजूद होती हैं.

हालांकि, आपकी वेबसाइट का ज़्यादातर हिस्सा टेक्स्ट से बना होगा. इसलिए, इसे बेहतर बनाने के लिए कुछ स्टाइल जोड़ना ज़रूरी है. कुछ बुनियादी प्रॉपर्टी में बदलाव करके, अपने उपयोगकर्ताओं के लिए पढ़ने के अनुभव को काफ़ी बेहतर बनाया जा सकता है!

इस मॉड्यूल में, हम @font-face नियम से शुरू करेंगे. इस नियम की मदद से, अपने वेबपेजों में पसंद के फ़ॉन्ट इंपोर्ट किए जा सकते हैं. इससे यह पक्का होता है कि आपके पास अपनी ज़रूरत के मुताबिक टाइपोग्राफ़ी है, भले ही उपयोगकर्ता ने कोई फ़ॉन्ट इंस्टॉल किया हो.

इसके बाद, हम ज़रूरी सीएसएस फ़ॉन्ट प्रॉपर्टी के बारे में बताएंगे. इनमें font-family, font-style, font-weight, और font-size शामिल हैं. इन बुनियादी बातों से, टेक्स्ट को स्टाइल और पढ़ने लायक बनाने के लिए, उसमें बदलाव करने का आधार तैयार होता है.

हम पैराग्राफ़ से जुड़ी खास प्रॉपर्टी, जैसे कि text-indent और word-spacing के बारे में भी बताएंगे. इसके बाद, वैरिएबल फ़ॉन्ट और स्यूडो-एलिमेंट जैसे बेहतर विषयों के बारे में बताएंगे. इनसे आपको टाइपोग्राफ़ी पर बेहतर कंट्रोल मिलता है.

इस दौरान, आपको सीएसएस की इन तकनीकों को समझने और लागू करने के लिए, काम के उदाहरण और सलाह दी जाएंगी.

@font-face नियम

@font-face सीएसएस at-rule, वेब डिज़ाइन में मददगार होता है. इसकी मदद से, टेक्स्ट दिखाने के लिए कस्टम फ़ॉन्ट तय किए जा सकते हैं और उनका इस्तेमाल किया जा सकता है. @font-face की सबसे बड़ी खूबी यह है कि इसे कई तरह से इस्तेमाल किया जा सकता है: इससे किसी रिमोट सर्वर या उपयोगकर्ता के डिवाइस पर इंस्टॉल किए गए फ़ॉन्ट से फ़ॉन्ट सोर्स किए जा सकते हैं.

सिंटैक्स

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff")
}

डिस्क्रिप्टर

ascent-override
ऐसेंट मेट्रिक को पसंद के मुताबिक बनाता है. इससे बेसलाइन के ऊपर मौजूद स्पेस पर असर पड़ता है.
descent-override
यह डेसेंट मेट्रिक में बदलाव करता है. इससे बेसलाइन के नीचे मौजूद स्पेस पर असर पड़ता है.
font-display
फ़ॉन्ट के डाउनलोड स्टेटस के आधार पर, फ़ॉन्ट के डिसप्ले के तरीके को कंट्रोल करता है.
font-family
फ़ॉन्ट से जुड़ी प्रॉपर्टी में इस्तेमाल करने के लिए, फ़ॉन्ट का नाम बताता है.
font-stretch
स्वीकार की जा सकने वाली हॉरिज़ॉन्टल स्केलिंग सेट करता है. इसे एक वैल्यू या रेंज के तौर पर तय किया जाता है.
font-style
यह फ़ॉन्ट स्टाइल तय करता है. साथ ही, यह तिरछी स्टाइल के लिए ऐंगल की रेंज के साथ काम करता है.
font-weight
इससे फ़ॉन्ट की मोटाई या उपलब्ध मोटाई की रेंज तय होती है.
font-feature-settings
OpenType फ़ॉन्ट की सुविधाओं को ऐक्सेस करने की अनुमति देता है.
font-variation-settings
वैरिएबल फ़ॉन्ट की सेटिंग को बेहतर तरीके से कंट्रोल करने की सुविधा देता है.
line-gap-override
यह फ़ॉन्ट की डिफ़ॉल्ट लाइन गैप को बदल देता है.
size-adjust
फ़ॉन्ट की आउटलाइन और मेट्रिक पर स्केलिंग फ़ैक्टर लागू करता है.
src
इससे फ़ॉन्ट का सोर्स तय होता है. यह सोर्स, लोकल या रिमोट हो सकता है. @font-face नियम के लिए, यह ज़रूरी है. src में url() और local() को जोड़ना एक सामान्य रणनीति है. इसमें, उपलब्ध होने पर स्थानीय फ़ॉन्ट का इस्तेमाल किया जाता है. फ़ॉलबैक के तौर पर, रिमोट फ़ॉन्ट फ़ाइल पर वापस स्विच किया जाता है. ब्राउज़र, एलान के क्रम के आधार पर संसाधनों को प्राथमिकता देते हैं. इसलिए, आम तौर पर local() को url() से पहले होना चाहिए.
unicode-range
इससे उन वर्णों की सीमा तय होती है जिनके लिए इस फ़ॉन्ट का इस्तेमाल किया जाना चाहिए.

ब्यौरा

@font-face, डिज़ाइनर को "वेब-सेफ़" फ़ॉन्ट की सीमाओं से मुक्त करता है. ऐसा, उन्हें कस्टम टाइपोग्राफ़ी का इस्तेमाल करने की अनुमति देकर किया जाता है. local() फ़ंक्शन की मदद से, उपयोगकर्ता के डिवाइस पर फ़ॉन्ट खोजा जा सकता है. इससे, उपयोगकर्ता को बेहतर अनुभव मिलता है. इसके लिए, इंटरनेट कनेक्शन होना ज़रूरी नहीं है.

फ़ॉन्ट के MIME टाइप

फ़ॉर्मैट एमआईएमई टाइप
TrueType font/ttf
OpenType font/otf
वेब ओपन फ़ॉन्ट फ़ॉर्मैट font/woff
वेब ओपन फ़ॉन्ट फ़ॉर्मैट 2 font/woff2

@font-face और font-family के बीच का अंतर

सीएसएस में, @font-face और font-family को अक्सर एक ही समझा जाता है, लेकिन ये दोनों अलग-अलग काम करते हैं.

जैसा कि हमने बताया है, @font-face एक नियम है. इसका इस्तेमाल, अपने वेब ऐप्लिकेशन में इस्तेमाल किए जाने वाले पसंद के मुताबिक फ़ॉन्ट तय करने के लिए किया जाता है. यह ब्राउज़र को बताता है कि फ़ॉन्ट को कहां डाउनलोड करना है, लोड होने के दौरान उसे कैसे दिखाना है (font-display प्रॉपर्टी की मदद से), और यह भी बताता है कि वर्णों का कौनसा सबसेट डाउनलोड करना है (unicode-range की मदद से).

इसके उलट, font-family एक सीएसएस प्रॉपर्टी है. इसका इस्तेमाल, किसी एलिमेंट को कोई फ़ॉन्ट या फ़ॉन्ट की सूची असाइन करने के लिए, सीएसएस नियम में किया जाता है. font-family में दिए गए फ़ॉन्ट, वेब-सेफ़ फ़ॉन्ट, सिस्टम फ़ॉन्ट या @font-face के साथ तय किए गए कस्टम फ़ॉन्ट हो सकते हैं.

खास जानकारी के लिए, @font-face किसी फ़ॉन्ट का एलान करता है और उसे नाम देता है. साथ ही, font-family एलान किए गए इस फ़ॉन्ट को एचटीएमएल एलिमेंट पर लागू करता है.

यहां दोनों का इस्तेमाल करने का उदाहरण दिया गया है:

<table>
  <thead>
    <tr>
      <th><p><pre>
@font-face {
  font-family: "CustomFont";
  src: url("customfont.woff2") format("woff2");
}

body {
  font-family: "CustomFont", Arial, sans-serif;
}

इस उदाहरण में, @font-face "CustomFont" की जानकारी देता है और ब्राउज़र को बताता है कि उसे कहां खोजना है. इसके बाद, font-family प्रॉपर्टी इसे बॉडी एलिमेंट पर लागू करती है. अगर "CustomFont" उपलब्ध नहीं है, तो फ़ॉलबैक के तौर पर Arial का इस्तेमाल किया जाता है.

टाइपफ़ेस बदलना

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

अपने टेक्स्ट का टाइपफ़ेस बदलने के लिए, font-family का इस्तेमाल करें.

font-family प्रॉपर्टी, कॉमा लगाकर अलग की गई स्ट्रिंग की सूची स्वीकार करती है. यह सूची, खास या सामान्य फ़ॉन्ट फ़ैमिली की हो सकती है. खास फ़ॉन्ट फ़ैमिली, कोटेशन मार्क वाली स्ट्रिंग होती हैं. जैसे, "Helvetica", "EB Garamond" या "Times New Roman". जेनरिक फ़ॉन्ट फ़ैमिली, serif, sans-serif, और monospace जैसे कीवर्ड होते हैं. MDN पर विकल्पों की पूरी सूची देखें. ब्राउज़र, दी गई सूची में से पहला उपलब्ध टाइपफ़ेस दिखाएगा.

font-family का इस्तेमाल करते समय, आपको कम से कम एक सामान्य फ़ॉन्ट फ़ैमिली तय करनी चाहिए. ऐसा इसलिए, ताकि अगर उपयोगकर्ता के ब्राउज़र में आपके पसंदीदा फ़ॉन्ट न हों, तो भी वह आपके कॉन्टेंट को पढ़ सके. आम तौर पर, फ़ॉलबैक के तौर पर इस्तेमाल होने वाली सामान्य फ़ॉन्ट फ़ैमिली, आपकी पसंद के फ़ॉन्ट से मिलती-जुलती होनी चाहिए: अगर font-family: "Helvetica" (सांस-सेरफ़ फ़ॉन्ट फ़ैमिली) का इस्तेमाल किया जा रहा है, तो फ़ॉलबैक के तौर पर sans-serif का इस्तेमाल किया जाना चाहिए.

इटैलिक और तिरछे फ़ॉन्ट का इस्तेमाल करना

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

टेक्स्ट को इटैलिक करना है या नहीं, यह सेट करने के लिए font-style का इस्तेमाल करें. font-style इनमें से किसी एक कीवर्ड को स्वीकार करता है: normal, italic, और oblique.

टेक्स्ट को बोल्ड करना

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

टेक्स्ट को "बोल्ड" करने के लिए, font-weight का इस्तेमाल करें. यह प्रॉपर्टी, कीवर्ड वैल्यू (normal, bold), रिलेटिव कीवर्ड वैल्यू (lighter, bolder), और अंकों वाली वैल्यू (100 से 900) स्वीकार करती है.

कीवर्ड normal और bold, संख्या वाली वैल्यू 400 और 700 के बराबर हैं.

कीवर्ड lighter और bolder का हिसाब, पैरंट एलिमेंट के हिसाब से लगाया जाता है. इस वैल्यू का पता लगाने का तरीका जानने के लिए, MDN का रिलेटिव वेट का मतलब लेख पढ़ें. इसमें एक आसान चार्ट दिया गया है.

टेक्स्ट का साइज़ बदलना

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

अपने टेक्स्ट एलिमेंट का साइज़ कंट्रोल करने के लिए, font-size का इस्तेमाल करें. इस प्रॉपर्टी में लंबाई की वैल्यू, प्रतिशत, और कुछ कीवर्ड वैल्यू स्वीकार की जाती हैं.

लंबाई और प्रतिशत वैल्यू के अलावा, font-size कुछ एब्सोलूट कीवर्ड वैल्यू (xx-small, x-small, small, medium, large, x-large, xx-large) और कुछ रिलेटिव कीवर्ड वैल्यू (smaller, larger) स्वीकार करता है. रिलेटिव वैल्यू, पैरंट एलिमेंट के font-size से मिलती-जुलती होती हैं.

लाइनों के बीच की जगह में बदलाव करना

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

किसी एलिमेंट में हर लाइन की ऊंचाई तय करने के लिए, line-height का इस्तेमाल करें. यह प्रॉपर्टी, संख्या, लंबाई, प्रतिशत या कीवर्ड normal को स्वीकार करती है. आम तौर पर, इनहेरिटेंस से जुड़ी समस्याओं से बचने के लिए, लंबाई या प्रतिशत के बजाय संख्या का इस्तेमाल करने का सुझाव दिया जाता है.

वर्णों के बीच के स्पेस में बदलाव करना

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

अपने टेक्स्ट में वर्णों के बीच के हॉरिज़ॉन्टल स्पेस को कंट्रोल करने के लिए, letter-spacing का इस्तेमाल करें. यह प्रॉपर्टी, लंबाई की वैल्यू स्वीकार करती है. जैसे, em, px, और rem.

ध्यान दें कि तय की गई वैल्यू, वर्णों के बीच के स्पेस को बढ़ाती है. नीचे दिए गए डेमो में, किसी एक अक्षर को चुनकर देखें कि उसका लेटरबॉक्स साइज़ क्या है और letter-spacing के साथ यह कैसे बदलता है.

शब्दों के बीच के स्पेस में बदलाव करना

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

अपने टेक्स्ट में हर शब्द के बीच के स्पेस को बढ़ाने या घटाने के लिए, word-spacing का इस्तेमाल करें. यह प्रॉपर्टी, लंबाई की वैल्यू स्वीकार करती है. जैसे, em, px, और rem. ध्यान दें कि आपने जो लंबाई तय की है वह सामान्य स्पेस के अलावा, अतिरिक्त स्पेस के लिए है. इसका मतलब है कि word-spacing: 0, word-spacing: normal के बराबर है.

font शॉर्टहैंड

फ़ॉन्ट से जुड़ी कई प्रॉपर्टी को एक साथ सेट करने के लिए, शॉर्टहैंड font प्रॉपर्टी का इस्तेमाल किया जा सकता है. संभावित प्रॉपर्टी की सूची में ये शामिल हैं: font-family, font-size, font-stretch, font-style, font-variant, font-weight, और line-height.

इन प्रॉपर्टी को क्रम से लगाने का तरीका जानने के लिए, MDN का font लेख पढ़ें.

## टेक्स्ट का केस बदलना

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

अपने टेक्स्ट के कैपिटल लेटर में बदलाव करने के लिए, [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) का इस्तेमाल करें. इसके लिए, आपको एचटीएमएल में बदलाव करने की ज़रूरत नहीं है. यह प्रॉपर्टी, कीवर्ड की ये वैल्यू स्वीकार करती है: `uppercase`, `lowercase`, और `capitalize`.

टेक्स्ट में अंडरलाइन, ओवरलाइन, और थ्रू-लाइन जोड़ना

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

अपने टेक्स्ट में लाइनें जोड़ने के लिए, text-decoration का इस्तेमाल करें. आम तौर पर, टेक्स्ट के नीचे लाइनें जोड़ी जाती हैं. हालांकि, टेक्स्ट के ऊपर या उसके बीच में भी लाइनें जोड़ी जा सकती हैं!

text-decoration प्रॉपर्टी, खास प्रॉपर्टी के लिए शॉर्टहैंड है. इन प्रॉपर्टी के बारे में आगे बताया गया है.

text-decoration-line प्रॉपर्टी में underline, overline, और line-through कीवर्ड इस्तेमाल किए जा सकते हैं. एक से ज़्यादा लाइनों के लिए, एक से ज़्यादा कीवर्ड भी दिए जा सकते हैं.

text-decoration-color प्रॉपर्टी, text-decoration-line की सभी सजावट का रंग सेट करती है.

text-decoration-style प्रॉपर्टी में solid, double, dotted, dashed, और wavy कीवर्ड इस्तेमाल किए जा सकते हैं.

text-decoration-thickness प्रॉपर्टी में लंबाई की कोई भी वैल्यू डाली जा सकती है. साथ ही, यह text-decoration-line से सभी डेकोरेशन की स्ट्रोक चौड़ाई सेट करती है.

text-decoration प्रॉपर्टी, पहले की सभी प्रॉपर्टी के लिए शॉर्टहैंड है.

अपने टेक्स्ट में इंडेंट जोड़ना

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

टेक्स्ट के ब्लॉक में इंडेंट जोड़ने के लिए, text-indent का इस्तेमाल करें. इस प्रॉपर्टी में लंबाई (उदाहरण के लिए, 10px, 2em) या उस ब्लॉक की चौड़ाई का प्रतिशत डाला जा सकता है जिसमें यह प्रॉपर्टी मौजूद है.

ओवरफ़्लो या छिपे हुए कॉन्टेंट से जुड़ी समस्या हल करना

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 7.
  • Safari: 1.3.

Source

छिपाए गए कॉन्टेंट को दिखाने का तरीका बताने के लिए, text-overflow का इस्तेमाल करें. इसके लिए, दो विकल्प हैं: clip (डिफ़ॉल्ट), जो ओवरफ़्लो होने पर टेक्स्ट को छोटा कर देता है और ellipsis, जो ओवरफ़्लो होने पर तीन बिंदु (…) दिखाता है.

व्हाइट-स्पेस कंट्रोल करना

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

white-space प्रॉपर्टी का इस्तेमाल करके यह तय किया जाता है कि किसी एलिमेंट में मौजूद खाली जगह को कैसे मैनेज किया जाए. ज़्यादा जानकारी के लिए, MDN पर white-space लेख पढ़ें.

white-space: pre का इस्तेमाल, ASCII आर्ट या ध्यान से इंडेंट किए गए कोड ब्लॉक को रेंडर करने के लिए किया जा सकता है.

शब्दों को तोड़ने का तरीका कंट्रोल करना

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 3.

Source

लाइन के ओवरफ़्लो होने पर, शब्दों को "ब्रेक" करने का तरीका बदलने के लिए, word-break का इस्तेमाल करें. डिफ़ॉल्ट रूप से, ब्राउज़र शब्दों को अलग नहीं करेगा. word-break के लिए कीवर्ड वैल्यू break-all का इस्तेमाल करने पर, ब्राउज़र को ज़रूरत पड़ने पर, शब्दों को अलग-अलग वर्णों में बांटने का निर्देश मिलेगा.

टेक्स्ट का अलाइनमेंट बदलना

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

ब्लॉक या टेबल-सेल एलिमेंट में टेक्स्ट के हॉरिज़ॉन्टल अलाइनमेंट की जानकारी देने के लिए, text-align का इस्तेमाल करें. इस प्रॉपर्टी में कीवर्ड की वैल्यू left, right, start, end, center, justify, और match-parent इस्तेमाल की जा सकती हैं.

left और right वैल्यू, टेक्स्ट को ब्लॉक के बाएं और दाएं हिस्से में अलाइन करती हैं.

मौजूदा राइटिंग मोड में, टेक्स्ट की लाइन की शुरुआत और आखिर की जगह दिखाने के लिए, start और end का इस्तेमाल करें. इसलिए, start अंग्रेज़ी में left और दाईं से बाईं ओर (आरटीएल) लिखी जाने वाली ऐरेबिक स्क्रिप्ट में right से मैप होता है. ये लॉजिकल अलाइनमेंट हैं. इनके बारे में ज़्यादा जानने के लिए, हमारे लॉजिकल प्रॉपर्टी मॉड्यूल पर जाएं.

टेक्स्ट को ब्लॉक के बीच में अलाइन करने के लिए, center का इस्तेमाल करें.

justify की वैल्यू, टेक्स्ट को व्यवस्थित करती है और शब्दों के बीच की जगह को अपने-आप बदलती है, ताकि टेक्स्ट, ब्लॉक के बाएं और दाएं किनारों के साथ अलाइन हो जाए.

टेक्स्ट के रैप होने का तरीका कंट्रोल करना

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.4.

Source

किसी एलिमेंट में टेक्स्ट को रैप करने के तरीके को बदलने के लिए, text-wrap का इस्तेमाल करें.

इस प्रॉपर्टी के लिए स्वीकार किए गए कीवर्ड में wrap, nowrap, balance, और stable शामिल हैं. डिफ़ॉल्ट वैल्यू wrap है. यह सामान्य स्पेस और शब्द के बीच के ब्रेक के साथ-साथ लाइनों में टेक्स्ट को रैप करके, ओवरफ़्लो को कम करता है.

इसके उलट, nowrap कीवर्ड का इस्तेमाल करके, टेक्स्ट को अलग-अलग लाइनों में बांटने से रोका जा सकता है. ऐसा करने से, टेक्स्ट ओवरफ़्लो हो सकता है.

उदाहरण के लिए, हेडिंग या हेडलाइन लिखते समय, हर लाइन पर एक ही टेक्स्ट पाने के लिए, balance कीवर्ड का इस्तेमाल करें. परफ़ॉर्मेंस को बेहतर बनाने के लिए, ब्राउज़र इस वैल्यू को सिर्फ़ उन एलिमेंट पर लागू करेंगे जिनमें छह लाइन या उससे कम टेक्स्ट है.

stable कीवर्ड, wrap की तरह ही काम करता है. हालांकि, इसका इस्तेमाल contenteditable टेक्स्ट के साथ किया जाता है. text-wrap: stable सेट होने पर, बदलाव किए जा रहे कॉन्टेंट के ऊपर मौजूद लाइनें, बदलाव करने के दौरान एक जगह से दूसरी जगह नहीं जाएंगी.

कभी-कभी, ब्रेकिंग पॉइंट के बिना लंबी स्ट्रिंग, कंटेनर को ओवरफ़्लो कर सकती हैं. इस तरह के टेक्स्ट के ब्रेक को कंट्रोल करने के लिए, overflow-wrap का इस्तेमाल करें.

Browser Support

  • Chrome: 23.
  • Edge: 18.
  • Firefox: 49.
  • Safari: 7.

Source

इस प्रॉपर्टी के लिए, normal, break-word, और anywhere जैसे कीवर्ड इस्तेमाल किए जा सकते हैं. डिफ़ॉल्ट सेटिंग normal है. इस सेटिंग में, टेक्स्ट को अगली लाइन में तब तक नहीं भेजा जाएगा, जब तक उसमें स्पेस या ब्रेक पॉइंट शामिल न हों.

anywhere और break-word वैल्यू, स्ट्रिंग में कहीं भी ब्रेकपॉइंट जोड़ती हैं, ताकि ओवरफ़्लो न हो. कीवर्ड, किसी min-content साइज़ के लिए अलग-अलग तरीके से काम करते हैं. anywhere कीवर्ड की मदद से, सॉफ़्ट ब्रेकिंग के सभी अवसरों का इस्तेमाल किया जा सकता है. break-word वैल्यू ऐसा नहीं करती. साथ ही, यह टेक्स्ट को सबसे लंबे शब्द के बराबर लंबा बना देती है.

टेक्स्ट की दिशा बदलना

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

टेक्स्ट की दिशा सेट करने के लिए, direction का इस्तेमाल करें. इसके लिए, ltr (डिफ़ॉल्ट रूप से बाएं से दाएं) या rtl (दाएं से बाएं) का इस्तेमाल करें. अरबी, हिब्रू या फ़ारसी जैसी कुछ भाषाओं को दाईं से बाईं ओर लिखा जाता है. इसलिए, direction: rtl का इस्तेमाल किया जाना चाहिए. अंग्रेज़ी और बाएं से दाएं लिखी जाने वाली अन्य सभी भाषाओं के लिए, direction: ltr का इस्तेमाल करें.

टेक्स्ट का फ़्लो बदलना

Browser Support

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 10.1.

Source

टेक्स्ट के फ़्लो और उसके व्यवस्थित होने के तरीके को बदलने के लिए, writing-mode का इस्तेमाल करें. डिफ़ॉल्ट रूप से, यह horizontal-tb पर सेट होता है. हालांकि, जिस टेक्स्ट को हॉरिज़ॉन्टल तौर पर फ़्लो करना है उसके लिए, writing-mode को vertical-lr या vertical-rl पर भी सेट किया जा सकता है.

टेक्स्ट का ओरिएंटेशन बदलना

Browser Support

  • Chrome: 48.
  • Edge: 79.
  • Firefox: 41.
  • Safari: 14.

Source

अपने टेक्स्ट में वर्णों के ओरिएंटेशन की जानकारी देने के लिए, text-orientation का इस्तेमाल करें. इस प्रॉपर्टी के लिए मान्य वैल्यू mixed और upright हैं. इस प्रॉपर्टी का इस्तेमाल सिर्फ़ तब किया जाता है, जब writing-mode को horizontal-tb के अलावा किसी और वैल्यू पर सेट किया गया हो.

टेक्स्ट में शैडो जोड़ना

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 1.1.

Source

अपने टेक्स्ट में शैडो जोड़ने के लिए, text-shadow का इस्तेमाल करें. इस प्रॉपर्टी में तीन लंबाई (x-offset, y-offset, और blur-radius) और एक रंग होना चाहिए.

ज़्यादा जानने के लिए, शैडो के बारे में हमारे मॉड्यूल का text-shadow सेक्शन देखें.

वैरिएबल फ़ॉन्ट

आम तौर पर, "नॉर्मल" फ़ॉन्ट के लिए, टाइपफ़ेस के अलग-अलग वर्शन के लिए अलग-अलग फ़ाइलें इंपोर्ट करनी पड़ती हैं. जैसे, बोल्ड, इटैलिक या कॉन्डेंस्ड. वैरिएबल फ़ॉन्ट ऐसे फ़ॉन्ट होते हैं जिनमें एक फ़ाइल में टाइपफ़ेस के कई अलग-अलग वैरिएंट हो सकते हैं.

Roboto Flex को चौड़ाई और वज़न के अलग-अलग कॉम्बिनेशन में इस्तेमाल किया गया है

ज़्यादा जानकारी के लिए, वैरिएबल फ़ॉन्ट के बारे में हमारा लेख पढ़ें.

स्यूडो-एलिमेंट

::first-letter और ::first-line स्यूडो-एलिमेंट

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

::first-letter और ::first-line स्यूडो-एलिमेंट, टेक्स्ट एलिमेंट के पहले अक्षर और पहली लाइन को टारगेट करते हैं.

::selection स्यूडो-एलिमेंट

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 62.
  • Safari: 1.1.

Source

उपयोगकर्ता के चुने गए टेक्स्ट का रंग बदलने के लिए, ::selection स्यूडो-एलिमेंट का इस्तेमाल करें.

इस स्यूडो-एलिमेंट का इस्तेमाल करते समय, सिर्फ़ कुछ सीएसएस प्रॉपर्टी का इस्तेमाल किया जा सकता है: color, background-color, text-decoration, text-shadow, stroke-color, fill-color, stroke-width.

font-variant

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

font-variant प्रॉपर्टी, कई सीएसएस प्रॉपर्टी का शॉर्टहैंड है. इसकी मदद से, small-caps और slashed-zero जैसे फ़ॉन्ट वैरिएंट चुने जा सकते हैं. इस शॉर्टहैंड में शामिल सीएसएस प्रॉपर्टी ये हैं: font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, और font-variant-numeric. किसी प्रॉपर्टी के इस्तेमाल के बारे में ज़्यादा जानकारी के लिए, उस पर दिए गए लिंक देखें.

देखें कि आपको क्या समझ आया

वेब पर टाइपोग्राफ़ी के बारे में अपनी जानकारी को टेस्ट करना

इनमें से कौनसे कीवर्ड का इस्तेमाल, font-family सामान्य फ़ॉलबैक के तौर पर किया जा सकता है?

serif
सही!
monospace
सही!
italic
फिर से कोशिश करें. italic, font-style के लिए मान्य कीवर्ड है, न कि font-family के लिए.
sci-fi
फिर से कोशिश करें. हालांकि, fantasy, font-family के लिए एक मान्य सामान्य फ़ॉलबैक है.
sans-serif
सही!
helvetica
फिर से कोशिश करें. "Helvetica" कोई सामान्य कीवर्ड नहीं है, बल्कि यह किसी खास फ़ॉन्ट फ़ैमिली को रेफ़र करता है.

हर शब्द के पहले अक्षर को अपरकेस में बदलने के लिए, किस स्टेटमेंट का इस्तेमाल किया जाता है? उदाहरण के लिए, This is a sentence. ➡ This Is A Sentence.

text-capitalize: true;
फिर से कोशिश करें.
text-case: capitalize;
फिर से कोशिश करें.
text-transform: capitalize;
सही!
font-style: capitals;
फिर से कोशिश करें.
font-variant: capitalize;
फिर से कोशिश करें.

सही या गलत: टेक्स्ट को बाईं, दाईं या बीच में अलाइन करने के लिए, text-orientation का इस्तेमाल करें.

सही
फिर से कोशिश करें. text-orientation, किसी लाइन में अक्षरों के रोटेशन को बदलता है.
गलत
सही! text-orientation, किसी लाइन में अक्षरों के रोटेशन को बदलता है. टेक्स्ट को बाईं, दाईं या बीच में अलाइन करने के लिए text-align का इस्तेमाल करें. इसके अलावा, और भी बहुत कुछ!

टेक्स्ट की लाइनों के बीच के स्पेस को बदलने के लिए, सीएसएस की किस प्रॉपर्टी का इस्तेमाल किया जा सकता है?

line-spacing
फिर से कोशिश करें.
leading
फिर से कोशिश करें. टाइपोग्राफ़ी में लाइनों के बीच के स्पेस के लिए, लीडिंग सही शब्द है. हालांकि, यह सीएसएस प्रॉपर्टी नहीं है.
baseline-distance
फिर से कोशिश करें.
line-height
सही!

संसाधन