Changes between Initial Version and Version 1 of April 2012 Write Your Own Render Object


Ignore:
Timestamp:
Apr 20, 2012 2:09:41 PM (9 years ago)
Author:
dpranke@chromium.org
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • April 2012 Write Your Own Render Object

    v1 v1  
     1= Write Your Own Render Object =
     2
     3Eric Siedel
     4
     5Dirk Pranke, scribe
     6
     7* Goal: give you some comfort if you have to write a rendering patch next week
     8* Give you some idea about how to create a new object
     9
     10* There is an intro talk on Youtube from Eric from a few years ago on this ...
     11* There is a page linking to Hyatt's blog posts
     12
     13* There are render objects and a render tree
     14* There is also a line box tree that does text handling and line - we're largely going to ignore this
     15  * Everything with "inline" in the name
     16* There is also RenderLayer, which can mostly be ignored unless you're doing compositing or other more advanced things
     17
     18The 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
     19
     20== Class hierarchy ==
     21
     22* RenderObject
     23  * RenderText  - holds text and keeps a line box tree. Some things need different styling and become subclasses, e.g.
     24    * RenderCombineText, RenderTextFragment, etc.
     25  * 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)
     26    * RenderBlock - if you have text children that need to flow or if you need to be a containing block
     27    * RenderInline - for SPAN, etc. ... are rendered by their containing block
     28
     29* What do you subclass from?
     30  * RenderBlock - if you have children
     31  * RenderFixed - if you are a single element with a fixed size
     32  * RenderObject - if you need to do something unusual
     33
     34* What do you need to implement?
     35  * layout()
     36  * paint()
     37
     38First figure out how big you are : figure out your width. then size your kids, and then compute your height as necessary to fit everything
     39
     40== Pause for Questions - what do people want to know about? ==
     41
     42* transforms?
     43* RenderText vs inline text boxes?
     44* xpos / ypos ? have been replaced by accumulated offsets - how do these relate to absolute positioning?
     45* logical vs. physical coordinate spaces (e.g., RTL - does x mean "from left" or "from start")?
     46
     47== Transforms ==
     48
     49* done in two separate parts of the tree, one for html/css, one for svg
     50* for html/css, done in RenderLayer - the layer handles transforms, masking, clipping, etc. RenderObjects are supposed to be dumb.
     51* in svg, all of the objects know how to handle transforms intrinsically
     52
     53== RenderText vs. InlineTextBox ==
     54
     55* 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.
     56* A RenderTextFragment splits off the first letter to handle "first-letter"
     57* "first-line" is split off into a different InlineText box
     58
     59
     60
     61