- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
CSS Visual Formatting Model
The CSS Visual Formatting is a model corresponding to an algorithm which processes and transforms each element of the document to generate one or more boxes that conform to CSS Box Model.
The layout of generated boxes depends on several properties such as −
- Dimensions
- Type − atomic inline-level, block, inline, or inline-block
- Positioning − absolute, float, or normal
- Relation with child and neighbor elements of document
- External Information − viewport’s and image’s width - height, etc.
CSS Box Generation of processed elements −
- Block level
- These elements force line break above and below themselves and take up the available whole width even though their content doesn’t require it.
- For example: Divisions (<div>), Heading (<h1> to <h6>), etc.
- Inline level
- These elements do not force line break above and below themselves and take up only the required width for the content.
- For example: Spans (<span>), Strong element (<strong>)
Example
Let’s see an example of block level box generation −
<!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>Output
This will produce the following output −
After clicking ‘Preview’ button with text field empty −
After clicking ‘Preview’ button with text field not empty and ‘h2’ radio button checked −
Example
Let’s see an example for inline level box generation −
<!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>Output
This will produce the following output −
Before clicking ‘Check’ button −
After clicking ‘Check’ button −
Updated on 07-Jan-2020 11:11:49
- Related Questions & Answers
- Understanding CSS Visual Formatting
- Formatting Text Using CSS
- Formatting Text in CSS
- How to add visual effects to images with CSS?
- Understanding CSS Box Model
- Formatting Unordered and Ordered Lists Using CSS
- Formatting Unordered and Ordered Lists in CSS
- Define the CSS Box Model
- Control the flow and formatting of text with CSS
- What is Box Model in CSS?
- Adding HTML5 Validation to Visual Studio
- Difference between C# and Visual C#
- HTML Text Formatting
- Python - Output Formatting
- C++11 features in Visual Studio 2015
Advertisements