0

Everywhere it is written that the browser parses HTML into DOM and css into CSSOM and combines them to create a render tree. There is official docs for creating DOM and CSSOM but I can't find any resources for combining them into render tree and creating a layout. Does anybody have any idea or link to resources?

lorem1213
  • 433
  • 4
  • 11
  • 1
    It sounds like you want to build a browser rendering engine. See: https://web.dev/critical-rendering-path-render-tree-construction/ for a graphical example of a render tree and the steps a browser will take to build one from the DOM and CSSOM. – Rounin Jul 27 '22 at 11:02
  • @Rounin-StandingwithUkraine But That doesnot provide any guide for how to create a render tree like the mentioned link in the post provide for DOM and CSSOM. – lorem1213 Jul 27 '22 at 12:34
  • I suspect no guide is provided because building a browser rendering engine is not a trivial project. (Otherwise we'd have a lot more rendering engines...) I can only think of Webkit, Blink and Gecko - though there are, apparently, a handful of others. See: https://en.wikipedia.org/wiki/Browser_engine and https://en.wikipedia.org/wiki/Comparison_of_browser_engines – Rounin Jul 27 '22 at 13:44
  • Well, unfortunately I chose HTMl renderer as a college project and I aim to render basic html and css not everything in html only very basic and I am able to create a DOM(sort of) and working on CSSOM and I have no idea on how to proceed further to create a render tree and calculating layout and stuffs. I don't think I can do much reading wikipedia. – lorem1213 Jul 27 '22 at 13:57
  • 1
    Please take another look at the first illustration on https://web.dev/critical-rendering-path-render-tree-construction/ - I think it has enough for you to see what's happening. I'm sure you could put a list of rules together which determine whether any node in the DOM gets rendered or not and _how_ it gets rendered, given the constraints of the CSSOM. (Maybe write out a process chart to clarify things? That would be an excellent start to clarify your algorithm in your own head.) And, yes, you can learn a lot reading around the subject on wikipedia and elsewhere. – Rounin Jul 27 '22 at 16:20
  • 1
    Building a browser engine is many man-years of effort. But having got a DOM and a CSSOM, the next step in the process is to resolve the cascade and inheritance. At the end of that process, every element should have been assigned a computed value for every CSS property. Use the [Cascade spec](https://www.w3.org/TR/css-cascade-5/) as your guide to doing that. – Alohci Jul 28 '22 at 01:06

0 Answers0