Litehtml

Projects | 2015 – 2016 | Links: GitHub

litehtml is the lightweight HTML rendering engine with CSS2/CSS3 support. Note that litehtml itself does not draw any text, pictures or other graphics and that litehtml does not depend on any image/draw/font library. You are free to use any library to draw images, fonts and any other graphics. litehtml just parses HTML/CSS and places the HTML elements into the correct positions (renders HTML). To draw the HTML elements you have to implement the simple callback interface document_container. This interface is really simple.

When working on JIRA, we found ourselves in need of a new, flexible UI framework. The Mojito Engine, in which JIRA was written, had already seen a fair amount of UI frameworks like GameSWF, libRocket, Chromium Embedded Framework and custom frameworks. None however, were capable of delivering responsive UI on mobile devices, without learning a new custom language or tool. We already had experience writing HTML code, so litehtml seemed like a good fit for us.

Our contributions

We started integrating litehtml into Mojito. To accomplish this, we had to wire up litehtml to our internal renderer and input system. Litehtml exposes an easy API to accomplish this. We noticed some discrepancies in litehtml compared to other html rendering engines and fixed those. This involved reading the w3c standard quite extensively and implementing features according to the spec.

Notable contributions:

• Parsing improvements
• Positioning fixes when using percentages
• Positioning fixes when using viewport dimensions
• Use of margins when using position: absolute
• complex CSS selector fixes
• Const correctness of the library
• Implementation of the opacity property
• Implementation of the input element
• Implementation of the audio element
• Implementation of the lang selector
• Support of html “partials” and multiple pages rendered in the same window (top and bottom UI in different files, both visible in the same window)
• Performance improvements
• Mouse event handling. Includes bubble logic

litehtml profiles itself to be a rendering engine, without script support. For our needs, we needed some scriptable interaction with the UI (clicking buttons and animations for example).

Mojito had best scripting support for Lua, and we already started writing JIRA in Lua. For this reason, we decided to add Lua script support to litehtml. We created a simple library called mQuery, mimicking some of the handy features of jQuery, but in Lua.