https://github.com/joshmarinacci/rust-minibrowser

minibrowser written in rust
https://github.com/joshmarinacci/rust-minibrowser

Last synced: 2 months ago
JSON representation

minibrowser written in rust

• Host: GitHub
• URL: https://github.com/joshmarinacci/rust-minibrowser
• Owner: joshmarinacci
• License: mit
• Created: 2020-02-25T00:16:08.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-04-26T15:32:31.000Z (over 4 years ago)
• Last Synced: 2024-08-03T09:12:04.684Z (5 months ago)
• Language: Rust
• Size: 6.66 MB
• Stars: 100
• Watchers: 5
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# rust-minibrowser

mini-browser written in rust

The point of this project is to prove we can build a web-browser in just a few thousand lines of code, provided

we don't care about:

* speed

* implementing the full specs

* error handling

* javascript

currently the project is less than 10k lines of Rust code, and probably a quarter of the code is unit tests.

The other point of this project is to teach myself Rust.

So far the mini-browser can:

* parse CSS files (not the full spec yet)

* parse HTML files (not the full spec yet)

* layout a page with simple block and simple inline layout

* render with the properties for display, color, background-color, border-color, padding, margin, border-width.

* load HTML and CSS over the network or from a local file

* load and render images (JPG and PNG)

It does not yet, but will soon:

* handle nested inline styles (spans, em, strong, etc.)

* handle clicking on links (a) 

![](res/screenshot1.png)

This project is derived from the excellent [Rust browser tutorial](https://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html) by Matt Brubeck. The original only got as far as block layout with backgrounds. I've added inline layout with text drawing. 

# How it works

This project is a simplified version of what goes on in real browsers.

* First it fetches and downloads the HTML page

* parse the HTML page into a tree of `Node` objects.

* next it scans the HTML page for any `style` elements which would contain CSS

* it parses the CSS into a `Stylesheet` object

* with the Node tree and Stylesheet in hand, it processes them in the style module to produce a style tree. This does all of the matching of nodes to the styles in the stylesheet.

* next the styled tree is processed to produce a layout tree.

* call layout on the layout tree to produce a render tree

* draw the render tree on the screen

# LOC & dependencies

The source is currently 6000 lines, which is mostly Rust (4180) code. About a quarter of that is unit tests.  While the app written from scratch it does have some third party dependencies.

* serde_json for parsing JSON config files

* pom: parser lib used to write the CSS & HTML parsers

* reqwest: for making network requests to HTTP servers

* image: for parsing JPG and PNG images

* url: for parsing URLs

* lazy_static: for lazy init of the list of css colors

* cgmath for matrix math

* glium for opengl and making windows

* glium-glyph for text rendering