CSS विजुअल फॉर्मेटिंग को समझना

CSS विजुअल फॉर्मेटिंग एक मॉडल है जो एक एल्गोरिदम से मेल खाता है जो डॉक्यूमेंट के प्रत्येक एलिमेंट को प्रोसेस और ट्रांसफॉर्म करता है ताकि एक या अधिक बॉक्स उत्पन्न हों जो CSS बॉक्स मॉडल के अनुरूप हों।

प्रोसेस्ड एलिमेंट्स का CSS बॉक्स जनरेशन:

ब्लॉक लेवल

ये एलिमेंट्स अपने ऊपर और नीचे लाइन ब्रेक फोर्स करते हैं और पूरी उपलब्ध चौड़ाई ले लेते हैं भले ही उनके कंटेंट को इसकी आवश्यकता न हो।
उदाहरण के लिए: डिवीजन्स (<div>), हेडिंग (<h1> से <h6>), आदि।

इंलाइन लेवल

ये एलिमेंट्स अपने ऊपर और नीचे लाइन ब्रेक फोर्स नहीं करते और कंटेंट के लिए आवश्यक चौड़ाई ही लेते हैं।
उदाहरण के लिए: स्पैन्स (<span>), स्ट्रॉन्ग एलिमेंट (<strong>)

आइए ब्लॉक लेवल बॉक्स जनरेशन का एक उदाहरण देखते हैं:

उदाहरण

<!DOCTYPE html> <html> <head> <title>HTML Heading</title> <style> form {    width:70%;    margin: 0 auto;    text-align: center; } * {    padding: 2px;    margin:5px; } input[type="button"] {    border-radius: 10px; } </style> </head> <body> <form> <fieldset> <legend>HTML Heading</legend> <input type="text" id="textSelect" placeholder="Type Heading Here..."> <div id="radioBut"> <label>H1</label><input class="radio" type="radio" name="heading" value="h1" checked> <label>H2</label><input class="radio" type="radio" name="heading" value="h2"> <label>H3</label><input class="radio" type="radio" name="heading" value="h3"> <label>H4</label><input class="radio" type="radio" name="heading" value="h4"> <label>H5</label><input class="radio" type="radio" name="heading" value="h5"> <label>H6</label><input class="radio" type="radio" name="heading" value="h6"> </div> <div>Heading Preview: <span id="headingPreview">Output will show up here</span></div> <input type="button" onclick="changeHeading()" value="Preview"> </fieldset> </form> <script> var textSelect = document.getElementById("textSelect"); var headingPreview = document.getElementById("headingPreview"); function changeHeading() {    if(textSelect.value === '')       headingPreview.innerHTML = 'Write a Heading';    else{       for(var i=0; i<6; i++){          var radInp = document.getElementsByClassName('radio')[i];          if(radInp.checked === true && textSelect.value !== ''){             headingPreview.innerHTML = '<'+radInp.value+'>'+textSelect.value+'</'+radInp.value+'>';             headingPreview.innerHTML += '<'+radInp.value+'>'+textSelect.value+'</'+radInp.value+'>';          }       }    } } </script> </body> </html>

आउटपुट

'Preview' बटन पर क्लिक करने के बाद टेक्स्ट फील्ड खाली होने पर:

CSS विजुअल फॉर्मेटिंग को समझना

'Preview' बटन पर क्लिक करने के बाद टेक्स्ट फील्ड खाली न होने और 'h2' रेडियो बटन चेक्ड होने पर:

CSS विजुअल फॉर्मेटिंग को समझना

आइए इंलाइन लेवल बॉक्स जनरेशन का एक उदाहरण देखते हैं:

दूसरा उदाहरण

यहां em एलिमेंट का एक उदाहरण है:

<!DOCTYPE html> <html> <head> <title>em element</title> <style> form {    width:70%;    margin: 0 auto;    text-align: center; } * {    padding: 2px;    margin:5px; } input[type="button"] {    border-radius: 10px; } </style> </head> <body> <form> <fieldset> <legend>em-element</legend> <label for="textSelect">Formatter: </label> <input id="textSelect" type="text" placeholder="John Doe"> <input type="button" onclick="convertItalic()" value="Check"> <div id="divDisplay"></div> </fieldset> </form> <script> var divDisplay = document.getElementById("divDisplay"); var textSelect = document.getElementById("textSelect"); function convertItalic() {    for(i=0; i<2; i++){       var italicObject = document.createElement("EM");       var italicText = document.createTextNode(textSelect.value);       italicObject.appendChild(italicText);       divDisplay.appendChild(italicObject);    } } </script> </body> </html>

आउटपुट

'Check' बटन पर क्लिक करने से पहले:

CSS विजुअल फॉर्मेटिंग को समझना

'Check' बटन पर क्लिक करने के बाद:

CSS विजुअल फॉर्मेटिंग को समझना