Implementing your own CSS Layouter

Posted on:June 19 2015

I've written a lot of websites during the last nearly two decades, and know pretty much of HTML, CSS, JavaScript and other web technologies because of that. But there is usually always a situation where I have to scratch my head and wonder how or why a browser is lay-outing a specific part of a website the way it does. And confusingly, why in the world other browsers are doing it in the exact same, weired way as well.

I recently had to implement a big part of CSS 2's visual formatting model for a new component I wrote, in C++. And while implementing this, I received answers to a lot of those questions. After I had a basically working HTML layout engine, it did exactly the same strange things in many situations as the browsers do. But with the difference that I now understood why: In most cases, because the implementation forced it this way. And the implementation seems to be the way it was, because it was the simplest way to make it work.

While testing my implementation, I also found bugs in some browsers layout engines: For example the original Opera apparently doesn't correctly layout blocks with left or right float in justified text flows. A bug my implementation funnily also had in a very similar way.

Anyway, I now understand much more how browsers do what they do. Not sure if this will be helpful when creating websites in the future, but it was definitely interesting. I can at least recommend to read through the specification one day, if you have nothing better to do.





Comments:


At least it is only boxes :)
I remember some awkward moments with my code when I tried implementing parts of XSL:FO (which, for the most part, works similar in that respect). Floats can be particularly nasty, especially when they aggregate in a place... (non-floating stuff is deceptively simple at first, but becomes trouble once floats enter the arena).
xaos
Quote
2015-06-23 12:20:00


Are you building a new gui framework for irrlicht?

If so you should look into librocket: http://librocket.com/
Kai Mast
Quote
2015-06-23 15:54:00


Float is tricky, yes :)
No, its for an internal project for a client. Didn't try libRocket, but looks interesting!
niko
Quote
2015-06-24 09:39:00


Add comment:


Posted by:


Enter the missing letter in: "Internatio?al"


Text:

 

  

Possible Codes


Feature Code
Link [url] www.example.com [/url]
Bold [b]bold text[/b]
Quote [quote]quoted text[/quote]
Code [code]source code[/code]

Emoticons