HTML Reflow Vizualizations

In a series of nice video visualizations, you can see how your browser draws and orders the different elements of a web page. There are examples for Wikipedia, Google, and Mozilla.org . Click here to view.

 

From Mozilla: "Reflow is the process by which the geometry of the layout engine's formatting objects are computed. The HTML formatting objects are called frames: a frame corresponds to the geometric information for (roughly) a single element in the content model; the frames are arranged into a hierarchy that parallels the containment hierarchy in the content model. A frame is rectangular, with width, height, and an offset from the parent frame that contains it."

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Lines and paragraphs break automatically.
  • Flash can be added to this post.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.

More information about formatting options

To prevent automated spam submissions leave this field empty.