CodeProject: A Professional HTML Renderer You Will Use. Free source code and programming help

Announcements

Monthly Competition

Articles

Desktop Development

Web Development

Enterprise Systems

Content Management Server

Microsoft BizTalk Server

SQL Reporting Services

Platforms, Frameworks & Libraries

Windows Communication Foundation

Windows Presentation Foundation

Windows Workflow Foundation

Cryptography & Security

Threads, Processes & IPC

Development Lifecycle

Debug Tips

Design and Architecture

Uncategorised Technical Blogs

Services

Code-signing Certificates

Job Board

CodeProject VS2008 Addin

Feature Zones

Product Showcase

WhitePapers / Webcasts

IBM DeveloperWorks

ASP.NET Web Hosting

Advanced Search

Report

Discuss

114 votes for this article.

Popularity: 9.88 Rating: 4.80 out of 5

(See history for list of changes.)

Introduction

This is a library of 100% managed code that draws beautifully formatted HTML. It comes along with three WinForms controls:

HtmlPanel
HtmlLabel
HtmlTooltip

And a static method ready to draw HTML:

HtmlRenderer.Render(Graphics g, string html, RectangleF area, bool clip)

Note: The drawing engine is based on the CSS Level 2 specification.

Background

For years, I have been planning for a project like this. I prepared myself quite well. I went through the entire CSS Level 2 specification along with the HTML 4.01 specification.

One of the most interesting things I found is this: Drawing HTML is no more than laying out a bunch of boxes with borders margins and paddings. Once you overpass this paradigm, everything else is to help the code actually place the boxes on the right place, and then paint the string each box contains.

Imagine the power that drawing full-rich-formatted HTML on your controls can give to your applications. Use bold when you need it, italics on every message, and borders and fonts as you may like or need everywhere on the desktop application. One of the first projects where I will use it is on the tooltips of my Ribbon Project.

Although I have not tested it on mono yet, there should be no problem at all, since all of the code in the library is managed code and the methods it uses to paint are quite basic. It draws lines, rectangles, curves and text.

For now, the render looks really nice. Sometimes it can fool you to think you're using a real Web browser, trust me, download the demo, it is just an EXE and a DLL.

Using the Code

The library locates the code under the System.Drawing.Html namespace. The controls that render HTML are under the System.Windows.Forms namespace.

The renderer follows the CSS Box Model. Box model is nothing but a tree of boxes, just as the tree of HTML, each of these boxes is represented by a very used class called CssBox. The start node is represented by the class InitialContainer.

All the known CSS properties apply to each of these boxes. Each box may contain any number of child boxes and just one parent. The only box that has no parent at all is the so called Initial Container.

A typical use of an Initial Container to draw HTML would look like this:

//Create the InitialContainer
InitialContainer c = new InitialContainer("<html>");
 
//Give bounds to the container
c.SetBounds(ClientRectangle);
 
//Measure bounds of each box on the tree
c.MeasureBounds(graphics);

//Paint the HTML document
c.Paint(graphics);

First a label, then a panel and at last a ToolTip, all of which support HTML rendering.

You may never use it, since I provided controls and methods that create this object for you.

HtmlPanel

A panel that is ready to accept HTML code via its Text property. Its full name is System.Windows.Forms.HtmlPanel.

The only properties you need to know are:

AutoScroll. Activates/Deactivates the auto-scroll capabilities as you know. It is set to true by default.
Text. Gets/Sets the HTML source.

The panel will update the bounds of the elements as you scroll or resize the control.

HtmlLabel

A label that is ready to accept HTML code via its Text property. Its full name is System.Windows.Forms.HtmlLabel.

The only properties you need to know are:

AutoScroll. Activates/Deactivates the auto-scroll capabilities as you know. It is set to true by default.
AutoSize. Sets the size of the label automatically if activated.
Text. Gets/Sets the HTML source.

Some interesting things:

The label will update the bounds of the elements as you scroll or resize the control.
The label can be transparent.
The panel has better performance than the label.

HtmlToolTip

Works exactly like the ToolTip you already know, with the little difference that this tooltip will render HTML on it. It's full name is System.Windows.Forms.HtmlToolTip.

There are no properties here to learn. Use it just the way you use the ToolTip that comes with the framework. Internally, it just handles the OwnerDraw event.

Some Features of my Own

I took the liberty of adding a couple of features:

Background gradients
Rounded corners

These are achieved through the following CSS properties:

background-gradient: (color)
background-gradient-angle: (number)
corner-ne-radius: (length)
corner-nw-radius: (length)
corner-se-radius: (length)
corner-se-radius: (length)
corner-radius: (length){1,4} (shorthand for all corners)

What's Currently Supported by the Renderer?

Most border, padding and margin and positioning CSSproperties (except for the height property)
Text alignment horizontally and vertically, text indents too
Lists, ordered and unordered. Advanced numbering is not yet supported
Tables, almost all of it. Cell combinations work quite well as far as I tested them
Fonts (partially) and Colors
Backgrounds (just color)

Points of Interest

What can I say, this is one of the most fun projects I've ever been involved with. And so far, it runs beautifully and checks its original design goals.

I am planning to give it full rendering support, to the day that you may visualize a web page just as a good web browser would; and why not, make a WYSIWYG HTML editor to give amazing HTML editing power to your applications.

I'm also planning to make sure it runs perfectly well on Mono and on Mobile platforms.

In the next few days, I'll publish a list of supported HTML tags and CSS properties.

History

Jan 08 2009: First release
Jan 29 2009: Minor bugs fixed
- Text Encoding of samples
- Large paragraphs and fonts because of Culture
- License

License

This article, along with any associated source code and files, is licensed under The BSD License

About the Author

Jose M. Menendez Poó

Member

Jose Manuel Menéndez Poó

- I've been programming Windows and Web apps since 1997.
- My greatest concern nowadays is user interface usability.

Visit my site: www.menendezpoo.com

New Site!
www.amazingpedia.com

Occupation:	Team Leader
Location:	Mexico

Other popular GDI+ articles:

Image Processing Lab in C#
A tool and library for image processing
Image Processing for Dummies with C# and GDI+ Part 1 - Per Pixel Filters
The first in a series of articles which will build an image processing library in C# and GDI+
A 3D Plotting Library in C#
A library which draws 3D images on any GDI+ Graphics object.
A lovely goldfish desktop pet (using alpha-PNG and GDI+)
Using alpha-PNG and GDI+ technology to implement a desktop pet fish!
Image Processing for Dummies with C# and GDI+ Part 5 - Displacement filters, including swirl
In the fifth installment, we build a framework for generating filters that work by changing a pixel's location, rather than colour.

Article Top

You must Sign In to use this message board.

FAQ
Noise Tolerance Layout Per page

Msgs 1 to 25 of 112 (Total in Forum: 112) (Refresh)

FirstPrevNext

Problems with spaces after punctuation and " "

JPaula

14:03 25 Jun '09

Spaces after punctuation (comma, point, colon; etc.) shouldn't disappear. I don't now where is the best place to deal with this situation. Any suggestions?   wasn't being delt with, so I added a Replace(" "," ") in the WordBox Text property. Joel
Sign In·View Thread·PermaLink

Font Size not honoured - trying to fix it [modified]

JPaula

12:01 23 Jun '09

Thank you for a fantastic project and a very good work!

I need Font Tags to honour the size attribute. So I tried to fix it by adding code in HtmlTag.TranslateAttributes:

                    case HtmlConstants.size:
                        switch (t)
                        {
                            case HtmlConstants.HR:
                                box.Height = TranslateLength(value);
                                break;
                            case HtmlConstants.FONT:
                                int idx;
                                if (int.TryParse(value, out idx))
                                {
                                    string[] fsize = { "xx-small", "x-small", "small"
                                                       , "medium", "large", "x-large", "xx-large" };
                                    if (idx > 0 && idx < 8) { box.FontSize = fsize[idx-1]; }
                                }
                                else
                                {

                                    box.FontSize = value;
                                }
                                break;
                        }

                        break;

It seems to be working ok, but when the font size is bigger then the rest of the font in the same line/paragraph, any link (<A> tag) is displayed with underline in the wrong y position. Links start looking like ~~Strike Through~~ text.

image example: http://i40.tinypic.com/mlle1i.gif[^]

Any ideas to fix this will be greatly apreciated.

Joel

modified on Tuesday, June 23, 2009 5:24 PM

BR was not working.

dnaprice

6:41 18 Jun '09

<BR> or <BR /> tag was not working.
Sign In·View Thread·PermaLink	5.00/5 (2 votes)

Same here

JPaula

15:43 23 Jun '09

Can't figure out where in the code I can make it behave normally.
Sign In·View Thread·PermaLink

Missing Navigating Event

Jan Prochazka alias jena

0:59 16 May '09

Hello,

I am using this control when rendering information about application state nicely and when showing shortcuts to some application actions (like in Explorer). Standard WebBrowser didn't work properly under Mono and Ubuntu, this very nice renderer works in my case under Mono without any problems.

First thing, which caused problems, is missing of Navigating event, which is present in WebBrowser control. There is possibility to call static methods, when clicked on link, but I need to process custom link strings (like: <a href="menu:file/open"> ). I solved it by hacking source code and adding this event directly to HtmlPanel.

Second small problem is not supporting single quoted parameters (<table width='100%'> doesn't work, <table "width=100%"> yes)

Thanks for great work
Jan Prochazka

Re: Missing Navigating Event

Member 6038196

0:48 22 May '09

Hi, Can you publishing the changes, because i also need a Navigating Event. thx
Sign In·View Thread·PermaLink

Re: Missing Navigating Event

Jan Prochazka alias jena

10:00 25 May '09

Hi,
I used this hack (all changes are in file HtmlPanel.cs):
put this somewhere in HtmlPanel class:

            
#region Events
public event LinkClickEventHandler LinkClick;
#endregion

in the OnMouseClick method, replace

CssValue.GoLink(box.GetAttribute("href", String.Empty));

with


string href = box.GetAttribute("href", string.Empty);
if (LinkClick != null)
{
      LinkClickEventArgs ev = new LinkClickEventArgs();
      ev.Href = href;
      LinkClick(this, ev);
      if (ev.Handled) return;
}
CssValue.GoLink(href);

Put somewhere in the some namespace (eg. after definition of class HtmlPanel) definitions of delegate and event class:


public class LinkClickEventArgs : EventArgs
{
      public string Href;
      public bool Handled = false;
}

public delegate void LinkClickEventHandler(object sender, LinkClickEventArgs e);

hope this helps...

Possible browser?

The Dogcow Farmer

13:54 12 May '09

You could possibly make a browser by using HTTP requests, caching it, then feeding it the code. I am not sure how it would handle images though.

EDIT: HTTP linking are opening in FF, and throwing an exception.

People think it must be fun to be a super genius, but they don't realize how hard it is to put up with all the idiots in the world. - Calvin (from Calvin and Hobbes)(The Indispensable Calvin and Hobbes, p105-3)

Base64 encoded images support

Fco. Javier Marin

5:44 6 May '09

Hi Jose Manuel,

I have made some changes for support base64 encoded images in the renderer (you can find more info at http://dean.edwards.name/weblog/2005/06/base64-ie/[^])

I need to change only two sections of code:

HtmlTags.cs Constructor:

Change:


foreach (Match att in atts)
            {
                //Extract attribute and value
                string[] chunks = att.Value.Split('=');

                if (chunks.Length == 1)
                {
                    if(!Attributes.ContainsKey(chunks[0]))
                        Attributes.Add(chunks[0].ToLower(), string.Empty);
                }
                else if (chunks.Length == 2)
                {
                    string attname = chunks[0].Trim();
                    string attvalue = chunks[1].Trim();

                    if (attvalue.StartsWith("\"") && attvalue.EndsWith("\"") && attvalue.Length > 2)
                    {
                        attvalue = attvalue.Substring(1, attvalue.Length - 2);
                    }

                    if (!Attributes.ContainsKey(attname))
                        Attributes.Add(attname, attvalue);
                }
            }

With:


    foreach (Match att in atts)
            {
                //Extract attribute and value
                int splitIndex = att.Value.IndexOf('=');
                string name = (splitIndex > 0 ? att.Value.Substring(0, splitIndex) : att.Value).Trim().ToLower();
                string value = splitIndex > 0 ? att.Value.Substring(splitIndex+1).Trim() : string.Empty;

                if (value.StartsWith("\"") && value.EndsWith("\"") && value.Length > 2)
                    value = value.Substring(1, value.Length - 2);

                if (!Attributes.ContainsKey(name))
                    Attributes.Add(name, value);
            }

Css Value.cs

Add

using System.Text.RegularExpressions;

Change the function public static Image GetImage(string path) with this code:


/// <summary>
        /// Gets the image of the specified path
        /// </summary>
        /// <param name="path"></param>
        /// <returns></returns>
        public static Image GetImage(string path)
        {
            //Check if is a base64 encoded image
            Regex base64encoded = new Regex("^data:(.*);base64,(.*)", RegexOptions.IgnoreCase);

            Match match = base64encoded.Match(path);
            if (match.Success)
            {
                using (MemoryStream buffer = new MemoryStream(Convert.FromBase64String(match.Groups[2].Value)))
                {
                    return Image.FromStream(buffer);
                }
            }

            //Find source path
            object source = DetectSource(path);

            FileInfo finfo = source as FileInfo;
            PropertyInfo prop = source as PropertyInfo;
            MethodInfo method = source as MethodInfo;

            try
            {
                if (finfo != null)
                {
                    if (!finfo.Exists)
                        return null;
                    return Image.FromFile(finfo.FullName);
                }
                if (prop != null)
                {
                    if (!prop.PropertyType.IsSubclassOf(typeof (Image)) && !prop.PropertyType.Equals(typeof (Image)))
                        return null;
                    return prop.GetValue(null, null) as Image;
                }
                if (method != null)
                {
                    if (!method.ReturnType.IsSubclassOf(typeof (Image)))
                        return null;
                    return method.Invoke(null, null) as Image;
                }

                return null;
            }
            catch
            {
                return new Bitmap(50, 50); //TODO: Return error image
            }
        }

Saludos

----
Apuntes, trabajos, resúmenes, problemas y exámenes
Chuletas

Changes to support Transparency

JoaoGouveia

16:28 24 Apr '09

I did the following changes to HtmlPanel (under VS2008):

1. Removed the following line in OnPain()

if (!(this is HtmlLabel)) e.Graphics.Clear(SystemColors.Window);

2. Replaced in the constructor

SetStyle(ControlStyles.Opaque, true);
by
SetStyle(ControlStyles.SupportsTransparentBackColor, true);

and now it supports transparent background!
And it doesn't seems to interfere with the demo examples that use a specific stylesheet.

5.00/5 (1 vote)

Re: Changes to support Transparency

Jose M. Menendez Poó

16:15 27 Apr '09

Great! I'll include it on the next release. Jm www.menendezpoo.com
Sign In·View Thread·PermaLink

Not Supported.

Abydosgater

16:23 16 Apr '09

Hi, Great Great Project You Have Here. Works so well, but i notice you have not added support for a simple html line break? ( < br > / < br /> ) Could someone advise me on adding support for this tag? Thanks, Andy
Sign In·View Thread·PermaLink

Seems nice. <table style="height: 100%"> not being honored

TK_dna

8:38 8 Apr '09

Seems like a nice control. Great job!

I'm trying to use the control to render an html table and I want the table to cover the full height and width of the control (have a background color for the table). A width specification of 100% seems to be honored properly, but not a height specification of 100% -- that is, a blank area is displayed beneath the html table. Any suggestions?

Example html that I'm using:

<html>
<head>
<style type="text/css">
body
{
border: 1px solid #6ba8de;
margin: 0px;
padding: 4px;
font: 9pt 'Segoe UI';
background-color: #E7EBF7;
}
.header
{
font: 12pt;
}
.key
{
color: #404080;
font-weight: bold;
border-style: none;
}
.value
{
color: #404040;
border-style: none;
}
.summary
{
border-style: none;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<table class="summary">
<tr>
<td colspan="2" class="header">Container</td>
</tr>
<tr>
<td class="key">Type</td>
<td class="value">$Type</td>
</tr>
...
</table>
</body>
</html>

Re: Seems nice. <table style="height: 100%"> not being honored

Jose M. Menendez Poó

11:04 8 Apr '09

Mi Friend, height property is not currently working on the table algorithm. Know for sure that it will be on the next release (It's causing me some trouble right now Jm www.menendezpoo.com
Sign In·View Thread·PermaLink

Scrollbars

todna

7:23 10 Mar '09

Make please option for visibility Horizontal scrollbar or automaticly WordWrapper option.
Sign In·View Thread·PermaLink

One feature is important

Seraph_summer

1:48 21 Feb '09

I want to edit the HTML text and then save it,it seems the current version does not support it.
Sign In·View Thread·PermaLink

other functions supported: search, copy and so on...

Seraph_summer

0:38 21 Feb '09

great works and keep on going, I like it very much!
Sign In·View Thread·PermaLink

HTMLRender ignores the Location.Y

OlafD

6:43 19 Feb '09

HtmlRender ignores the Location.Y Maybe the error ist here InitialContainer.SetBounds(..) or InitialContainer.MeasureBounds but i cant find it.
Sign In·View Thread·PermaLink

Re: HTMLRender ignores the Location.Y

JPaula

10:14 23 Jun '09

I ended correcting this in CssBox.cs, line 2693 from:

                    float top =
                        (prevSibling == null && ParentBox != null ? ParentBox.ClientTop : 0) +
                        MarginCollapse(prevSibling, this) +
                        (prevSibling != null ? prevSibling.ActualBottom + prevSibling.ActualBorderBottomWidth : 0);

                    float top = Location.Y +
                        (prevSibling == null && ParentBox != null ? ParentBox.ClientTop : 0) +
                        MarginCollapse(prevSibling, this) +
                        (prevSibling != null ? prevSibling.ActualBottom + prevSibling.ActualBorderBottomWidth : 0);

Support for css hover link visited?

roshihans

2:59 17 Feb '09

Does your htmlrenderer support css dynamic pseudo-class such as a.hover, a.link, a.visited, and a.active? Finally, you got my 5 for this excellent control! Thanks, Roshi
Sign In·View Thread·PermaLink

Very nice

Mike Ellison

9:18 13 Feb '09

Hi Jose. I just wanted to compliment you - this is a very nice piece of work. In the past I've built applications that output and display html-structured reports. I liked using HTML for the report format because it was so flexible and easy. To get around using the WebBrowser control, I would end up creating files in the user's temp directory and launching the default browser to point to them. The user would then print from the browser. It worked well enough, but of course it's nicer to stay within the context of your own application.

I was hoping that someday, someone would put something like this rendering engine out there. I can easily see using it for supporting print-preview and printing functions in my html-based reporting apps.

You got my 5, and then some. It would be even more fantastic if you are able to, at some point, introduce text/image selection (to support copy/paste in particular) in the HtmlPanel. But until then (if at all), great job, and thanks for making the code available.

Re: Very nice

Jose M. Menendez Poó

14:20 13 Feb '09

Thanks a lot, I'm working on a way to make it a very reliable print system. Really, thank you very much. Jm www.menendezpoo.com
Sign In·View Thread·PermaLink

Tables will fail if tbody exists

Fashtas

16:59 11 Feb '09

Took be a little while to figure it out, but if you use a tbody tag inside a table with this renderer, the entire table will fail (Every cell in the table gets written at position 0,0 on the render surface)
Sign In·View Thread·PermaLink

JavaScript/VBScript support via ActiveScript

Unruled Boy

3:16 3 Feb '09

http://www.codeplex.com/activescriptdotnet[^] hope it helps. Regards, unruledboy_at_gmail_dot_com http://www.xnlab.com
Sign In·View Thread·PermaLink

CSS3 border radius

c-smile

17:49 30 Jan '09

CSS3 border radius is here:
http://www.w3.org/TR/css3-background/#the-border-radius[^]

And yet it is not clear what background-gradient: (color) means in your article.

I am using[^] background-color: {1,4} definition where four color values define colors in corners of padding box. So you do not need angles for defining linear gradients.

For pretty good table layout implementation I would suggest to grab code from my Harmonia:
http://harmonia.terrainformatica.com/doku.php[^]
It is fastest around as far as I can tell. Link to Harmonia sources (in D language) is at the bottom of its front page. Module harmonia/html/tablengine.d.

Code looks pretty good, if you would ask me. Some design decisions are questionable (e.g. regexp based parsing) but that is because version is 1.0 I think.

( I don't think that making HTML DOM and renderer in managed code is very good idea - to much work for GC.
That is just my personal opinion, educated one though ).

Congratulations!

Last Visit: 4:25 4 Jul '09 Last Update: 4:25 4 Jul '09

12 3 4 5 Next »

General News Question Answer Joke Rant Admin

PermaLink | Privacy | Terms of Use
Last Updated: 29 Jan 2009
Editor: Deeksha Shenoy