Line Height, Letter Spacing, Text Alignment In Hindi
फॉण्ट हाइट, फॉण्ट लेटर स्पेसिंग, और फॉण्ट टेक्स्ट एलाइनमेंट, ऐट्रिब्यूट्स से आप अपने किसी एचटीएमएल वेबपेज में सीएसएस से बने वेबपेज और वेबसाइट डिज़ाइन लाइन की डिफ़ॉल्ट हाइट, टेक्स्ट लेटर के बिच में दूरी, और टेक्स्ट एलाइनमेंट, कुछ इम्पोर्टेन्ट सीएसएस प्रॉपर्टीज या ऐट्रिब्यूट्स को अप्लाई कर सकते हैं. जो किसी वेब डेवलपमेंट प्रोजेक्ट की डिफ़ॉल्ट प्रीव्यू आर्डर को एडवांस्ड कर कमर्सिअली वेब ब्राउज़र में प्रीव्यू कर सकते हैं।
So let us now understand the font height, font letter spacing, and font text alignment properties better by applying them to HTML.
Font line height attributes in HTML web page.
यदि आप किसी एचटीएमएल वेबपेज में सीएसएस से बने टेक्स्ट लाइन की डिफ़ॉल्ट हाइट टेक्स्ट रौस के मध्य वर्टीकल स्पेस को कण्ट्रोल और मैनेज करना चाहते है। तो आप फॉण्ट लाइन हाइट ऐट्रिब्यूट्स से अपने टेक्स्ट फॉण्ट हाइट को मैन्युअल तरीके से मैनेज कर सकते है, यह मौजूदा वेब पेज में यूजर रीडिंग बिहैवियर को इम्प्रूव करता है, और सिंपल वेब पेज को अधिक अट्रैक्टिव और कमर्सिअली प्रीव्यू करता है।
CSS line height example in HTML web page.
p {
line-height: 1.8; /* set manual 1.8 font size of paragraph text*/
}
Line Height Units.
आप अपने वेबपेज टेक्स्ट जरूरत के अनुसार डिफ़ॉल्ट वेबपेज टेक्स्ट लाइन की हाइट को विभिन्न तरीकों से उपयोग कर सकते हैं.
Line Height Units Example.
- Unitless line height attributes – line-height: 2;
- Length line height attributes – line-height: 22px;
- Percentage line height attributes – line-height: 200%;
यहाँ आप ऊपर दिए गए विभिन्न लाइन हाइट वैल्यूज में से किसी भी फॉण्ट यूनिट को अपने वेबपेज में अप्लाई कर सकते है. ज्यादातर मामलो में यूनिटलेस्स लाइन हाइट ऐट्रिब्यूट्स को उपयोग करते है. इसके उपयोग से आप अपने मौजूदा फॉण्ट साइज को तुरंत बढ़ा सकते है।
css letter spacing attributes in HTML web page.
आप अपने एचटीएमएल वेबपेज में सीएसएस से लेटर स्पेसिंग प्रॉपर्टीज को वेबपेज टेक्स्ट के बिच में करैक्टर स्पेस को एडजस्ट कर सकते है। जहा आप अपने वेबपेज में प्रीव्यू हो रहे वेबपेज टेक्स्ट कंटेंट के बिच डिफ़ॉल्ट स्पेस को कस्टम डिस्प्ले कर सकते है. यह आपके मौजूदा वेबपेज में रीडेबिलिटी, डिफ़ॉल्ट प्रीव्यू, और टेक्स्ट डिस्प्ले आर्डर को कस्टम इम्प्रूव करते है।
CSS letter spacing example in HTML web page.
h1 {
letter-spacing: 0.09em; /* set the custom heading font size */
}
Letter spacing units in CSS.
आप अपने वेब पेज में डिफ़ॉल्ट प्रीव्यू टेक्स्ट लेटर स्पेसिंग को अलग अलग तरीके से उपयोग कर सकते है.
- Length letter spacing attributes – letter-spacing: 3px;
- Percentage letter spacing attributes – letter-spacing: 2%;
- Em units letter spacing attributes – letter-spacing: 0.7em;
css text alignment attributes in HTML web page.
मौजूदा एचटीएमएल वेबपेज में बने टेक्स्ट को सीएसएस टेक्स्ट एलाइनमेंट प्रॉपर्टीज से आप अपने वेबपेज कंटेनर के अंदर टेक्स्ट की एलाइनमेंट पोजीशन को कण्ट्रोल और मैनेज कर सकते है। जहा डिफ़ॉल्ट रूप से आप वेबपेज टेक्स्ट को सामान्य रूप से लेफ्ट,राइट, सेण्टर, और जस्टिफाई डायरेक्शन में अलाइन कर सकते हैं।
CSS text alignment example in HTML web page.
h2 {
text-align: center; /* align heading2 text alignment in center direction*/
}
p {
text-align: justify; /* it align web page text in justify direction */
}
Line height, letter spacing, and text alignment example in HTML web page.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Line Height, Letter Spacing, Text Alignment Example In Css</title>
<style>
body {
font-family: monotype corsiva;
margin: 1;
padding: 10px;
background-color: aqua;
}
h1 {
font-family: arial;
font-size: 2rem; /* it previews heading font size */
font-weight: 800; /* create heading Bold font */
line-height: 1.7; /* add line Tight height */
text-align: center; /* move text in Center alignment */
}
h2 {
font-size: 3rem; /* set heading 2 font size */
font-weight: 700; /* set font weight */
line-height: 1.2; /* set text height space */
text-align: left; /* set Left text alignment */
letter-spacing: 0.09em; /* add text letter spacing */
}
p {
font-size: 2rem; /* set paragraph Font size */
font-weight: 700; /* set Normal weight */
line-height: 1.7; /* add paragraph text line height */
text-align: justify; /* align or Justified text position */
letter-spacing: 0.04em; /* add or set text letter spacing */
color: blue; /* set manual paragraph Text color */
}
</style>
</head>
<body>
<h1>Let Tray Some Font Attributes In Html With Css</h1>
<h2>You Can See the Css Font Attributes </h2>
<p>Explore Font Attributes with Html And Css Styling Attributes</p>
</body>
</html>
Line height, letter spacing, text alignment in html web page, Conclusion.
ऊपर दिए गए एचटीएमएल वेबपेज में टेक्स्ट की लाइन हाइट, टेक्स्ट लेटर स्पेसिंग, और टेक्स्ट एलाइनमेंट को मैन्युअल रूप से एडजस्ट करके, आप अपने मौजूदा वेब पेज टेक्स्ट की रिडेबिलिटी को इम्प्रूव कर सकते हैं। यहाँ आप अपनी वेब डेवलपमेंट जरूरत के अनुसार इन सीएसएस ऐट्रिब्यूट्स को कण्ट्रोल और मैनेज कर सकते है!
