Visual formatting

Visual Formatting

CSS visual formatting is a process that is responsible for processing the document tree to the visual media. It means it is liable to process the document tree for visualization on a computer screen. Each element in the document tree generates zero or more boxes according to the box model.

Some factors are there on which the layout of boxes depends –

  • Relationships between elements in the document.
  • Positioning scheme (normal flow, float, and absolute positioning).
  • Box dimensions.
  • Type of the element like – block or inline element.
  • External information like – viewport size, built-in dimensions of images, etc.

Let’s understand it clearly by some examples.

If we talk about inline box construction, that can be like –

Ex –

<P>Several <EM>emphasized words</EM> appear<STRONG>in this</STRONG> sentence, dear.</P>

In an inline formatting context, atomic inline boxes cannot be split into some lines.

Ex –

<style>

span

{

display:inline; /* default value*/

}

</style>

<div style=”width:20em;”>

The text in the span <span>can be split in several

lines as it</span> is an inline box.

</div>

 

If it is an inline box, then the text in the span can be split into different lines.

Ex-

<style>

span

{

display:inline-block;

}

</style>

<div style=”width:20em;”>

The text in the span <span>cannot be split in several lines as it </span> is an inline-block box.

</div>

In Anonymous block boxes –

Ex –

<DIV>

Some text

<P>More text

</DIV>

But sometimes you may distribute the boxes. It depends on the width of the P.

Ex –

<!DOCTYPE HTML PUBLIC “-//awm//DTD HTML 4.01//EN”><HTML>  <HEAD>    <TITLE>Example of inline flow on several lines</TITLE>    <STYLE type=”text/css”>      EM {        padding: 2px;         margin: 1em;        border-width: medium;        border-style: dashed;        line-height: 2.4em;      }    </STYLE>  </HEAD>  <BODY>    <P>Several <EM>emphasized words</EM> appear here.</P>  </BODY></HTML>

Leave a Reply

Your email address will not be published. Required fields are marked *