| | 1 | = Write Your Own Render Object = |
| | 2 | |
| | 3 | Eric Siedel |
| | 4 | |
| | 5 | Dirk 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 | |
| | 18 | 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 |
| | 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 | |
| | 38 | 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 |
| | 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 | |
