Any sheets out there describing the layout-computation of an Html page?

StackOverflow https://stackoverflow.com/questions/13044125

Question

I'm searching for some ressources that describe how the fixed layout is computed for an Html page, but I couldn't find any. Perhaps there is a special term for it that I don't know abkout?

Please point me to some ressources that describe this process. At best, it would be a publication documenting the complete process from top to bottom.

However, if there is not such a ressource, and maybe to illustrate the question a little more, here is what problem I'm currently facing:

<body>:  Yo dawg, its time to compute our fixed size and position for the renderer. How big are you?
<div>:   How big are you?
<body>:  That is why I ask you, you're one of my child-nodes.
<div>:   But my width is set to auto and my display to block. I'm as wide as you are!

-> Houston, we have a problem!
Was it helpful?

Solution

The way a layout is computed depends on the engine. Different browsers use different engines.

What is a layout engine?

Basically, a layout engine takes content (such as HTML, XML, image files, applets, and so on) and formatting information (such as Cascading Style Sheets, presentational HTML tags, etc.) and displays the formatted content on the screen. It paints the browser's content area, which is the blank area inside the browser window's chrome.

Here is a list of common engines: http://en.wikipedia.org/wiki/List_of_layout_engines

Instead of searching for global 'how do webpages get rendered'. You could search for 'How does Gecko render webpages?'

After a google, I found that this question was already asked here. Maybe it can help you too. How does Gecko (or any other layout engine) render a document/page?

OTHER TIPS

I would look through the docs of different layout engines. For example, this multi-part article from the Webkit blog might be of use to you: WebCore Rendering I – The Basics. It seems like all parts of the article are useful and the fourth part, Absolute/Fixed and Relative Positioning, might be of particular use to you.

This talk by Alex Russel should give you some insights.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top