This is a personal project to learn computer programming. I took a look at this: https://www.udacity.com/course/viewer#!/c-cs262

The following is the approach taken in it:

1. Abstract Syntax Tree is created. But javascript is still not completely broken down in order not to confuse with the html tags.

2. Then the javascript interpreter is called on it. Javascript interpreter stores the text from the write() and document.write() to be used later.

3. Then a graphics library in Python is called which will convert everything to a pdf file and then we convert it into png or jpeg and then display it.

My Question: I want to display the actual text in a window (which I will design later) like firefox or chrome does instead of image files so that the data can be selected, copied, etc by the user of the browser. How do I accomplish this? In other words, what are the other elements of a bare bone web browser that I am missing?

I would prefer to implement most of the stuff in C++ although if things seem too complicated I might go with Python to save time and create a prototype and later creating another bare bone browser in C++ and add more features. This is a project to learn more. I do realize we already have lots of reliable browsers like firefox, etc.

The way I feel it is done: I think after all the broken down contents have been created by the parsers and interpreters, I will need to access them individually from within the window's code (like qt) and then decide upon a good way to display them. I am not sure if it is the way this should be done.

Additions after useful comment by Kilian Foth:

I found this page: http://friendlybit.com/css/rendering-a-web-page-step-by-step/

14. A DOM tree is built out of the broken HTML
15. New requests are made to the server for each new resource that is found in the HTML source (typically images, style sheets, and JavaScript files). Go back to step 3 and repeat for each resource.
16. Stylesheets are parsed, and the rendering information in each gets attached to the matching node in the DOM tree
17. Javascript is parsed and executed, and DOM nodes are moved and style information is updated accordingly
18. The browser renders the page on the screen according to the DOM tree and the style information for each node
19. You see the page on the screen

I need help with step 18. How do I do that? How much work do Webkit and Gecko do? I want to use a readymade layout renderer for step number 18 and not for anything that comes before that.