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; } #headingPreview h2{    background-color: #DC3545; } </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' बटन पर क्लिक करने के बाद टेक्स्ट फील्ड खाली होने पर:

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

एक और उदाहरण

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

<!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; } em{    background-color: #FF8A00; } </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' बटन पर क्लिक करने से पहले:

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