Implementing your own CSS Layouter

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.