b2ku/lure

Lua User Interface Rendering engine

Lua User Interface Rendering Engine

LURE is a ambitious project to provide a HTML/CSS based rendering engine primarily targeting the Love2d game engine. LURE does not intend to impliment a fully standards compliant web browser. In so far as practicality permits, LURE aims to impliment documented and undocumented portions of HTML/Browser specs that support the parsing and rendering of HTML to a graphical subsystem.

Status

LURE is currently under development and cannot yet produce rendered content. Much of the DOM and associated subsystems are still under heavy design and development. A prior naive implimentation was written many years ago and for reference purposes is found in the legacy folders of many of the project's sub-directories, which was capable of rendering some very primitive DOM elements and text.

Motivation

I started LURE some many years ago as a curiosity in parsing HTML. The final goal was to use XML/HTML markup to build ingame UI for my game projects. Since then it has become a project in building a closer approximation of a proper HTML/CSS parser and renderer.

There are many quiet periods of development, but I always return to this project because the complexity of parsing and rendering HTML/CSS has always facinated me and I regard HTML/CSS as the most advanced and flexable UI framework to-date, even with its many warts and peculiarities.

If I could modify a historical quote to sum up my motivations on this project:

We choose to [build a html/css rendering engine in pure lua] and do the other things, not because they are easy, but because they are hard; because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one we intend to win ...

― John F. Kennedy

Goals

• To provide an easy to use UI library for the Love2d Game Engine using only HTML/CSS and lua script
• To showcase an approximation of web browser parser and renderer technologies and standards in pure lua.
• To eventually be able to pass ACID1 tests (phew!! what a goal)
• To eventually allow rendering with other lua graphics subsystems (not just Love2d!)

Remarks

Building any type of HTML parser/renderer is a time consuming, character building experience. I have found that the vast majority of the DOM is well documented for reference, and building a naive HTML parser and DOM implimentation is not that critically difficult.

What I have found incredibly difficult is mating any DOM implimentation with a sufficiently advanced renderer that can efficiently and logically render the results of parsing and building HTML/CSS, and do so in a way that is predictable, supports future expantions into new functionality, and is easy to understand and modify.

The rendering aspect of HTML/CSS and the DOM is highly undocumented. Any resources around the web only give you a high level concept of what a real web browser might do for rendering, and the details are shroud in decades old web browser code and implimentations (Firefox Gecko, Webkit etc). Thus many assumtions must be made on how to actually render your DOM implimentation, for which I expect this project to make many misteps along the way to its ultimate goal.

For anyone willing to contribute, I say "coder beware". Here be dragons and be prepared to conduct some of the hardest Software Engineering outside of AI and naming things.

lure's Issues

Refactor DOM and ROM Construction To Use DOM Event Model

Depends On Issue: #5

This will require considerable refactoring of the following objects:

lure//dom//lure_dom_DOMParser.lua: Implement callback functionality using DOM event model, allowing the parser to pass back to the live contentDocument newly parsed nodes for insertion. This should allow the document to be built and rendered as it is parsed, instead of final build after parsing has completed.

Impliment EventTarget, EventListener, Event, DocumentEvent Interfaces

http://www.w3.org/TR/DOM-Level-2-Events/events.html

inline and css styles won't parse correctly with space preceding stylename

EXAMPLE 1:

div{ font-size:10px; padding-left:10px; }

where padding-left has a space before it, the style parser finds ' padding-left' as invalid. Same applies to inline styles:

EXAMPLE 2:

<div style="font-size:10px; padding-left:10px;"></div>

TODO:
1.) Review style parser and trim style declarations properly.

Implementing From Existing Project

Hello,
I haven't really programmed in C, nor am I an expert in web browsing, HTML, CSS, or other web browser languages, but my impression is that this project is trying to reinvent the wheel. Web browsers have already been created, and many people (I am sure) have needed HTML rendered in their applications before.
I wanted to ask if it were possible to implement Modest, https://github.com/lexborisov/Modest/ , and basically code the "glue" ("bind" might be the official term I'm looking for) between LOVE2D/Lua and an already existing project that might have a lot more backing than what you are currently getting.
Similarly, people don't (or shouldn't) try to recreate OpenSSL, because it's already been created, tested, used by and worked on by hundreds of people. From my understanding, is that what is a good practice is to code OpenSSL bindings to bring the library/code and make it available to specific needs, not to recode it.

Inline element styles not always applying to element's resulting computed style

In some cases, an elements inline style is not being applied to the elements computed style (element.computedStyle).

This may be due to function: 'lure.dom.applyCssRuleToElementComputedStyle(pCssRule, pElement)' where inline styles don't get applied to an element where a particular element is not a subject of any cssRule

TODO
1.) Move inline to computed style computation to its own function. Walk the dom and apply for all elements.
2.) naming: lure.dom.applyInlineStyleToElementComputedStyle(pElement)

Refactor draw operations to paint to canvas

Refactor ROM draw operations. Split operations between Paint() and Draw()

paint(): make all draw operations to global love canvas object living in the primary viewport object
draw(): draw the viewport canvas

Tag Implimentations: div, img, p, span

Ensure the following tag implimentations are in place:

div
img
p
span

How to use it

Sorry for posting here, but I didn't find where else I can ask my question.
Can you please write at least a simple guide on how to use it?