= Write Your Own Render Object =

Eric Siedel

Dirk Pranke, scribe

* Goal: give you some comfort if you have to write a rendering patch next week
* Give you some idea about how to create a new object

* There is an intro talk on Youtube from Eric from a few years ago on this ...
* There is a page linking to Hyatt's blog posts

* There are render objects and a render tree
* There is also a line box tree that does text handling and line - we're largely going to ignore this
  * Everything with "inline" in the name
* There is also RenderLayer, which can mostly be ignored unless you're doing compositing or other more advanced things

The RenderTree is kind of like a scene list/graph or a display list - it's a fast way of figuring out what to draw rather than having to go back to the DOM

== Class hierarchy ==

* RenderObject
  * RenderText  - holds text and keeps a line box tree. Some things need different styling and become subclasses, e.g.
    * RenderCombineText, RenderTextFragment, etc.
  * RenderBoxModelObject - where most new elements come in for elements in the CSS box model (there are either inline or boxes in the CSS box model)
    * RenderBlock - if you have text children that need to flow or if you need to be a containing block
    * RenderInline - for SPAN, etc. ... are rendered by their containing block

* What do you subclass from?
  * RenderBlock - if you have children
  * RenderFixed - if you are a single element with a fixed size
  * RenderObject - if you need to do something unusual

* What do you need to implement?
  * layout()
  * paint() 

First figure out how big you are : figure out your width. then size your kids, and then compute your height as necessary to fit everything

== Pause for Questions - what do people want to know about? ==

* transforms?
* RenderText vs inline text boxes?
* xpos / ypos ? have been replaced by accumulated offsets - how do these relate to absolute positioning?
* logical vs. physical coordinate spaces (e.g., RTL - does x mean "from left" or "from start")?

== Transforms ==

* done in two separate parts of the tree, one for html/css, one for svg
* for html/css, done in RenderLayer - the layer handles transforms, masking, clipping, etc. RenderObjects are supposed to be dumb.
* in svg, all of the objects know how to handle transforms intrinsically

== RenderText vs. InlineTextBox ==

* parts of the render tree are dumb and just contain data (e.g., text nodes) - these don't layout or paint themselves. In this case the containing object creates a list of lines of text (the line box tree) and the containing object may have to deal with RTL direction, ligatures, etc.
* A RenderTextFragment splits off the first letter to handle "first-letter"
* "first-line" is split off into a different InlineText box 
*