Layout and Rendering Notes

RmlUi follows CSS closely, but not completely, and this integration has a few properties of its own. These are the differences that cost time when they are not known.

Layout

• A width is not derived from left and right. An absolutely positioned element given both has no width of its own, and its children shrink-wrap; inside a scrolling container that collapses a whole panel to one character wide. Give it width: 100%, or make it a flex item.

• box-sizing is content-box: width: 100% plus padding overflows the parent.

• float: right only works beside something that shrink-wraps, such as an inline-block; beside a block it lands on the next line. Inside a white-space: nowrap row it also drops to the line below – size the row’s cells as inline-blocks in source order instead.

• A display: block child of such a row resolves width: 100% wider than the row; leave it auto.

• Bare text directly inside a display: flex element does not draw. Wrap a caption in a block, and centre it with padding or line-height.

• A style rule for div does not match <section>; RCSS matches tag names literally.

• An unstyled scrollbar collapses its box. The moment an overflow-y: auto element overflows, RmlUi creates a scrollbarvertical element inside it; with no rule giving that element a width, the content is laid out at zero width and every child collapses to one word per line, whatever width it declares. It looks like a flex or percentage bug and is neither. Give the scrollbar a width and a colour:

  scrollbarvertical { width: 6dp; }
  scrollbarvertical sliderbar { background-color: #888; }
  

  and the content lays out at the box’s width minus the bar.

Rendering

• A subtree with a transform renders nothing in this build. Centre with a full-width row and an inline-block, and drive a progress bar by width.

• box-shadow does not render correctly in this build; avoid it in RCSS.

• The 2D scene graph (aspect2d, render2d) draws over the RmlUi region. Anything parented there has to be hidden together with the screen it belongs to.

Contexts

• The font engine keeps a context’s glyph atlases after the context is destroyed (a few textures per context; a later context on the same address reuses them). This is bounded, but it is a reason to create a context once per process where possible and to load and unload documents, not contexts, when screens change.

• A destroyed context’s name is released only once its region is gone. When a region is replaced within a frame, give the new one a fresh name.

Debugging

RmlRegion.init_debugger() installs RmlUi’s inspector on the region; RmlRegion.debugger_visible shows it. Log messages from the library go to the rmlui notify category, so notify-level-rmlui debug in a prc file reports context creation, document loading and every RCSS error.