Click here to Skip to main content
Click here to Skip to main content

A Professional HTML Renderer You Will Use

, 29 Jan 2009
Rate this:
Please Sign up or sign in to vote.
100% managed code that draws HTML on any device

(See history for list of changes.) 

HtmlDemo

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);

renderer_002.jpg

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

Share

About the Author

Jose Menendez Póo
Team Leader
Mexico Mexico
I'm in game programming now: https://itunes.apple.com/us/app/ugly-aliens-training-center/id859271884?ls=1&mt=8
 
Jose Manuel Menéndez Poó
 
- I've been programming Windows and Web apps since 1997.
- My greatest concern nowadays is user interface usability.
 
Questions and stuff by twitter: @menendezpoo
 
Blog
menendezpoo.com

Comments and Discussions

 
QuestionLife Saver PinmemberClutch23422-May-14 6:18 
QuestionThis control is great! But there's an issue on CJK layout Pinmemberwmjordan12-Jul-13 20:53 
AnswerRe: This control is great! But there's an issue on CJK layout Pinmemberthekingarthur11-Sep-13 21:15 
GeneralRe: This control is great! But there's an issue on CJK layout Pinmemberwmjordan12-Sep-13 18:09 
GeneralMy vote of 5 PinmemberAmitosh S.M.10-Jul-13 20:31 
GeneralMy vote of 5 Pinmemberpartha chakraborti1-Jul-13 4:48 
QuestionJavascript Pinmemberfilmee2424-Jun-13 20:27 
NewsThe project is actively developed on CodePlex! Pinmemberthekingarthur11-Mar-13 3:13 
GeneralRe: The project is actively developed on CodePlex! Pinmemberwmjordan19-Oct-13 3:44 
QuestionAdding CssBoxes Pinmembersolalem4-Mar-13 1:00 
GeneralMy vote of 5 Pinmemberkasatkin.aleksandr26-Feb-13 5:12 
Questionimg locking file Pinmembersvenvermeulen18-Feb-13 22:30 
QuestionWord wrap and width calculation PinmemberMRyndin26-Dec-12 1:53 
BugHi PinmemberYaseer Arafat24-Dec-12 13:05 
GeneralMy vote of 5 PinmemberYaseer Arafat21-Dec-12 11:47 
QuestionBR Tag not working. PinmemberMember 953116517-Nov-12 7:24 
AnswerRe: BR Tag not working. PinmemberJay Kappel20-Sep-13 13:42 
GeneralMy vote of 5 PinmemberSayan_dreams20-Sep-12 3:20 
QuestionCode path link in VB program Pinmembernbrege3-Aug-12 8:37 
QuestionNew version with height property? PinmemberSean Ortiz26-Jul-12 12:54 
QuestionProblem using HtmlToolTip with TreeView PinmembererSitzt26-Jun-12 23:45 
QuestionKudos to your work PinmemberThread30828-May-12 19:30 
AnswerRe: Kudos to your work PinmemberJose Menendez Póo29-May-12 3:43 
GeneralMy vote of 5 PinmemberProEnggSoft24-Feb-12 5:08 
GeneralMy vote of 5 Pinmembermanoj kumar choubey13-Feb-12 18:16 
GeneralMy vote of 5 Pinmemberring_026-Nov-11 2:12 
QuestionPossible to use it from an ASP.NET web site? Pinmemberboeledi7-Oct-11 14:07 
QuestionImage problem when using the renderer from VB PinmemberJohnny J.31-Aug-11 19:45 
AnswerRe: Image problem when using the renderer from VB PinmemberJohnny J.31-Aug-11 20:48 
GeneralRe: Image problem when using the renderer from VB PinmemberJohnny J.31-Aug-11 20:50 
QuestionQuestions ... PinmemberJerry Evans31-Jul-11 7:36 
GeneralMy vote of 4 PinmemberMarqW26-Jul-11 4:09 
GeneralRe: My vote of 4 PinmemberJohnny J.31-Aug-11 21:39 
QuestionRight To Left Pinmembermhmasoodi18-Jul-11 23:22 
Hi
Your renderer is perfect but i don't draw righttoleft html tag.I thinks this renderer can not support "dir=rtl" , can you help me how righttoleft this dll ?
BugLinks PinmemberAlan PSF18-Jul-11 8:13 
QuestionCopying Text PinmemberF.8.R17-Jul-11 13:46 
QuestionWhat Standard Are You Using for LineBreak Tag <br> PinmemberPeter Lee24-Jan-11 19:10 
QuestionMy 5, but... how about WPF port? PinmemberSAKryukov25-Dec-10 6:20 
GeneralBeyond all expectation. My 5+++ PinmemberSAKryukov25-Dec-10 6:19 
GeneralMy vote of 5 PinmemberVithidom7-Nov-10 11:37 
Ranttry to place google results to your renderer... Pinmember~Dim~9-Sep-10 21:42 
GeneralAnother control PinmemberChristopher Wells12-Aug-10 14:17 
GeneralVery nice Pinmembersha219110-Aug-10 21:41 
QuestionUpdate/ or add HTML5/CSS3 specification - perhaps HXTML Strict as well? PinmemberMember 243865319-Jul-10 2:07 
GeneralExcellent work PinmemberTotalQuazar17-Jun-10 6:31 
GeneralGreat stuff - but doesn't work with the FlowLayoutPanel control PinmemberSpankley6-Apr-10 5:29 
GeneralGreat work, compatibility issues, but great work so far PinmemberE D MacInnes10-Mar-10 6:19 
GeneralThis is fantastic PinmemberKo2 Hunter23-Feb-10 4:59 
GeneralAnchor tags Pinmemberjaylien18-Jan-10 18:04 
QuestionDocument Height PinmemberiPodSync14-Dec-09 5:12 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140826.1 | Last Updated 30 Jan 2009
Article Copyright 2009 by Jose Menendez Póo
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid