Fl_Html_View - a new HTML widget and framework for FLTK

The purpose of this widget is a replacement of limited and rather buggy Fl_Help_View widget and to add new HTML capabilities for FLTK. The code does not depend on any external library and although the classes and functions have Fl_* prefix, most of the code is fltk-independent and can be used with other drawing systems.

The purpose is not to write a web-browser but to have a viewer with much improved rendering and navigation capabilities than original Fl_Help_View. It is also extensible so that new features and tags can be easily added keeping binary compatibility (that is without the need of recompilation of the library - any existing Fl_Html_Wiew source files).

The library also adds support for HTML Fl_Labeltype so that (const char *) strings can be interpreted and rendered as HTML for all widgets labels. The original Fl_Help_View cannot be used for that purpose because of its hard-codded implementation and hacky nature.

HTML Features:

Compilation & Usage

Just compile all .cxx files from html/src directory and include the header html/FL/Fl_Html_View.H wherever uou want to use the widget or FL_HTML_LABEL* labeltype. You can start with html/test/main.cxx as an example code which renders this page.

Todo & future work

Go to Features


Some testing:

TABLE
align=left
style=margin:5
cellspacing=0
Lorem ipsum Quam nullam et
TABLE
align=right
style=margin:5
cellspacing=0
Lorem ipsum Quam nullam et
Testing text-flow with various floats: this is a "justify-aligned" paragraph which at the beginning includes one left and one right-aligned table. After English text there is included right-aligned image (for King Crimson fans: "Discipline" cover, graphics created by Steve Ball and reusable under CC 3.0 SA) with 10% width specification and another left-aligned table. Further down a greyed-out "Lorem Ipsum" text is included with an inlined table and an inlined image.
Another left-table
Lorem ipsum Quam nullam et
Lorem ipsum dolor sit amet, sed vel lobortis, integer ab veniam, mi nec pharetra nec at eligendi volutpat. Dolor a erat sed, lectus dolor, ridiculus eu orci vulputate eros lacinia.
inlinedtable
Quis dictum neque nisl non nonummy nonummy, etiam faucibus nunc, dolor vestibulum eu nibh augue amet, qui leo quam. Sed nec consectetur velit. Proin vel est sit amet lorem ultrices rhoncus. Maecenas risus velit, dapibus sed eleifend condimentum, sagittis nec augue. Nunc aliquam venenatis nisi nec cursus.
At the end of the paragrapg there is a <br style="clear:both"/> tag so that following content continues after all left and right-aligned floats.

A nested table properties: border align = right
width = 50% style = "margin: 5"
This table is "pure" dynamic with no width or height specifications of the cells with exeption of the nested table to the right in this cell: The table has the width specified as 50% so it occupies half-width of the cell

Cell: colspan=2 align=justify

Pro ex alia constituto Ne eam quot fabulas Vis illud fabulas Ius, nobis fabulas

Cell: align=center

A cell with rowspan 2

This is second line in the cell

At mei illum iisque
This is another nested table Amet oratio erroribus nec et In sea errem dolor soleat. Ei autem scriptorem Fabulas singulis
This text is right and bottom aligned Eos ea quem offendit interpretaris. Pri habemus repudiare Image to the left occupies 40% of the cell width
Fierent constituto ex sed, Constituto ex sed Pro no inermis
Align right Meis libris numquam Qui ut augue
This is title

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6
Some underlinedned text and an image.

This is a tex after <dt> tag (within <dl>)
This is <dd> text
Second line after <br>...
Another <dt> text followed by two <dd> lines.
Scelerisque id orci, quam nulla sit felis in leo, inceptos vitae diam congue nullam pharetra.
Habitant libero sit tortor, ultrices nonummy amet cubilia orci ac.

Some nested lists...

Some enumerated lists...

  1. Tempor et suspendisse sit nonummy ac proin, sed quam neque pede donec justo, nam aliquet nascetur cras laboriosam.
  2. Consequat nibh morbi urna mauris euismod at, morbi fermentum hendrerit lorem phasellus, vulputate lobortis lobortis sagittis et bibendum nonummy, interdum metus
  3. Sed vel, ac pede diam ipsa nec quam erat, ac urna viverra eleifend et aliquam sed, pellentesque suspendisse lobortis condimentum sed.
    1. Nested, letter-enumerated list
    2. Scelerisque amet at fringilla, justo ac lacus lobortis in deserunt commodo.
    3. Pretium lacus molestie. Erat dolor ipsum est praesent lobortis lorem, gravida amet malesuada sit sagittis, malesuada nullam metus risus pharetra fringilla tincidunt.
    4. Quis vel accumsan mollis ut. Elit metus ut sem at mi turpis, aliquam class turpis, fames morbi sit sollicitudin, ligula libero.
      1. Third level list, this time capital letter enumerated
      2. Scelerisque amet at fringilla, justo ac lacus lobortis in deserunt commodo.
      3. Pretium lacus molestie. Erat dolor ipsum est praesent lobortis lorem, gravida amet malesuada sit sagittis, malesuada nullam metus risus pharetra fringilla tincidunt.
      4. Quis vel accumsan mollis ut. Elit metus ut sem at mi turpis, aliquam class turpis, fames morbi sit sollicitudin, ligula libero.
    5. Pretium lacus molestie. Erat dolor ipsum est praesent lobortis lorem, gravida amet malesuada sit sagittis, malesuada nullam metus risus pharetra fringilla tincidunt.
    6. Quis vel accumsan mollis ut. Elit metus ut sem at mi turpis, aliquam class turpis, fames morbi sit sollicitudin, ligula libero.
  4. Tempor et suspendisse sit nonummy ac proin, sed quam neque pede donec justo, nam aliquet nascetur cras laboriosam.
  5. Consequat nibh morbi urna mauris euismod at, morbi fermentum hendrerit lorem phasellus, vulputate lobortis lobortis sagittis et bibendum nonummy, interdum metus
  6. Sed vel, ac pede diam ipsa nec quam erat, ac urna viverra eleifend et aliquam sed, pellentesque suspendisse lobortis condimentum sed.

Similar lists as above but with small padding (style="padding-left:5")

Other browsers might cause collisions if padding is smaller than bullet sizes... Impossibility of element collisions in Fl_Help_View can be called either feature or bug but its not gonna change just to match rendering exactly as in the other browsers.
  1. Tempor et suspendisse sit nonummy ac proin, sed quam neque pede donec justo, nam aliquet nascetur cras laboriosam.
  2. Consequat nibh morbi urna mauris euismod at, morbi fermentum hendrerit lorem phasellus, vulputate lobortis lobortis sagittis et bibendum nonummy, interdum metus
  3. Sed vel, ac pede diam ipsa nec quam erat, ac urna viverra eleifend et aliquam sed, pellentesque suspendisse lobortis condimentum sed.
    1. Nested, letter-enumerated list
    2. Scelerisque amet at fringilla, justo ac lacus lobortis in deserunt commodo.
    3. Pretium lacus molestie. Erat dolor ipsum est praesent lobortis lorem, gravida amet malesuada sit sagittis, malesuada nullam metus risus pharetra fringilla tincidunt.
    4. Quis vel accumsan mollis ut. Elit metus ut sem at mi turpis, aliquam class turpis, fames morbi sit sollicitudin, ligula libero.
      1. Third level list, this time capital letter enumerated
      2. Scelerisque amet at fringilla, justo ac lacus lobortis in deserunt commodo.
      3. Pretium lacus molestie. Erat dolor ipsum est praesent lobortis lorem, gravida amet malesuada sit sagittis, malesuada nullam metus risus pharetra fringilla tincidunt.
      4. Quis vel accumsan mollis ut. Elit metus ut sem at mi turpis, aliquam class turpis, fames morbi sit sollicitudin, ligula libero.
    5. Pretium lacus molestie. Erat dolor ipsum est praesent lobortis lorem, gravida amet malesuada sit sagittis, malesuada nullam metus risus pharetra fringilla tincidunt.
    6. Quis vel accumsan mollis ut. Elit metus ut sem at mi turpis, aliquam class turpis, fames morbi sit sollicitudin, ligula libero.
  4. Tempor et suspendisse sit nonummy ac proin, sed quam neque pede donec justo, nam aliquet nascetur cras laboriosam.
  5. Consequat nibh morbi urna mauris euismod at, morbi fermentum hendrerit lorem phasellus, vulputate lobortis lobortis sagittis et bibendum nonummy, interdum metus
  6. Sed vel, ac pede diam ipsa nec quam erat, ac urna viverra eleifend et aliquam sed, pellentesque suspendisse lobortis condimentum sed.