In the current post, I would like to give the details of the layout process of HTML inline elements in WebKit.
What are inline elements??
An inline element is an element that defines text or data in the document like STRONG makes the enclosed text strongly emphasized. They don’t start new lines when you use them, and they generally only contain other inline tags and text or data,or they include nothing at all, like the BR tag.Inline elements don’t have widths. That is, they do have widths, but the width is set by the container box. Some other properties that inline elements ignore include:
- width and height
- max-width and max-height
- min-width and min-height
So if you need to define the width or height that an element should take up, you need to apply that to the block-level element containing your inline text.
Following are the examples of inline elements:
Span <span> </span>
Label <label> </label>
Strong <strong> </strong>
Boldface <b> </b>
Italic <i> </i>
Underlined <u> </u>
Small <small> </small>
Paragraph <p></p>
Heading <h1></h1> <h2></h2>
Layout of inline elements:
LayoutUnit is an abstraction used to represent the location or size of a render object in fractions of a logical pixel. The current implementation represents values as multiples of 1/60th pixel.
When an object is marked as needing layout, the ancestor chain that is dirtied is based on a CSS concept called the containing block. The containing block is also used to establish the coordinate space of children. Renderers have xPos and yPos coordinates, and these are relative to their containing blocks. In other words when layout recurs down the render tree, it is a block’s responsibility to position all of the renderers that have it as their containing block.
The root of the render tree is called the RenderView, and this class corresponds to the initial containing block according to CSS2.1. It is also the renderer that will be returned if the renderer() method is called on the Document.
The layout of the inline element takes place through the container block. When the inline element is encountered,height of the container block is updated and a relayout is carried out. To update the height of the container box, the line boxes are cleared and the resize of the container block is done. The flag which is used to clear the line boxes is isFullLayout in RenderBlock::layoutInlineChildren.
Techable 