HTML Renderer

Patch Uploaded: #4760

kkenneth — Tue, 29 Dec 2009 09:35:41 GMT

kkenneth has uploaded a patch.

Description:
A slightly cleaner way to deal with link clicks that can be handled by user code.
This is more or less the same as patch 3732.

Created Issue: Enhancement proposals [3580]

kkenneth — Wed, 16 Dec 2009 18:23:36 GMT

I have used the HTML panel for a little test.
I have already submitted code that supports classnames a little better.

I propose that the DOM elements are exposed, so the user can create html nodes with html fragments, like
new CssBox("<div class=\"xx\">sample</div>")

And then attaching the new node to the existing tree.

When doing this, you will notice that the current method of pusing inherited values onto child elements,
wont't work, because you attach the node after the style has been applied.

Instead, the attributes should be nullable, and default null. Whenever encountering a null value,
the parents value should be used instead. Using this approach, you can freely move items in the tree, and they will
render as expected.

I can do some of the work, if you like.

Patch Uploaded: #4669

kkenneth — Wed, 16 Dec 2009 10:45:02 GMT

kkenneth has uploaded a patch.

Description:
This patch fixes the following problems:
1) Support for file and http:// style CSS, and images
2) Support for multiple declarations in CSS, eg. .class {prop: 1; prop: 2}
3) Support for multiple classnames, and inheritance of classnames

Let me know if you want me to explain the changes further.

New Post: HTMLLabel transparent background

ikky — Tue, 15 Dec 2009 22:59:04 GMT

In the description on the main page is says that the HTML Label object can have a background = transparent. I have tried to set the background to transparent and it says it is not a valid parameter.

Anyone run into this problem or even better, know how to get around it?

Thanks in advance.

New Post: 1 px difference on render

abentov — Wed, 11 Nov 2009 15:51:10 GMT

hi,

when using:

System.Drawing.Html.HtmlRenderer.Render(
                        g,
                        "<html><head></head><body>$<font style=\"font:24px Verdana; color:red;\">99,457</font>.55</b></body></html>",
                        new RectangleF(new PointF(0.0F, 0.0F),new SizeF(500.0F,500.0F)),
                        false);

the image generated has the following problem: the larger text part's baseline (99,457) is placed 1 or 2 pixels above the smaller text baseline.

i myself tried to figure out a way to equalize the baselines for all sizes, with no success.

i've rounded the resulting size up and down, tried to extract some consistent logic for adding or subtracting pixels - no success. do u have any idea of how to solve that?

the 1 px mismatch drives me crazy.

i thought of working with the web-browser control, grabbing the non-transparent region. the baseline problem wont happen there, but then i remembered that there will be no text antialiasing there.

this is where i am out of ideas.

this is the fn, which causes the iritating baseline diff:

private static SizeF Get_concatSize(String s, Font f, StringFormat sformat, Graphics g)
        {
            SizeF size = new SizeF();

            if (String.IsNullOrEmpty(s)) return size;

            CharacterRange[] characterRanges = {
                new CharacterRange(0, s.Length) };

            StringFormat sf = new StringFormat(sformat);

            sf.SetMeasurableCharacterRanges(characterRanges);

            // Measure whole string.
            Region[] stringRegions = new Region[1];

            stringRegions = g.MeasureCharacterRanges(
                s, f, new RectangleF(), sf);

            RectangleF measureRect = stringRegions[0].GetBounds(g);

            Single fontHeight = f.GetHeight(g);
            Single fontAscentHeight =
                (fontHeight / f.FontFamily.GetLineSpacing(f.Style)) *
                f.FontFamily.GetCellAscent(f.Style);

            size.Width = measureRect.Width;
            size.Height = fontAscentHeight;

            return size;
        }

Reviewed: HTML Renderer 1.0.0.0 (2) (okt 22, 2009)

JonOdgaard — Thu, 22 Oct 2009 19:42:03 GMT

Rated 5 Stars (out of 5) - Incredible work! Any plans on implementing selecting parts of html document using rendered output? Or maybe moving on to the next step and enable actual WYSIWYG editing of the rendered document (not the raw HTML)?

Commented Issue: Crash when clicking an anchor that has an URL with an equal sign [2547]

UweKeim — Fri, 04 Sep 2009 22:00:16 GMT

When having the following example script:

<html>
<body>This is text with <a href="http://www.my-page.com/index.html?token=value">a hyperlink</a> inside.</body>
</html>

The renderer crashes with "EmptyURL" when clicking the hyperlink.

This happens with any URL that contains an equal sign "="

Question: Any idea how to correct this?
Comments: ** Comment from web user: UweKeim **

OK, I think I fixed it by doing the following:

------------------------

1.) Changed the RegEx in "Parser.cs" due to the hint at http://stackoverflow.com/questions/317053/regular-expression-for-extracting-tag-attributes/574968#574968 to the following:

public const string HmlTagAttributes = "(?<name>\\b\\w+\\b)\\s*=\\s*(?<value>\"[^\"]*\"|'[^']*'|[^\"'<>\\s]+)";

2.) Modified the constructor in "HtmlTag.cs" to the following:

public HtmlTag(string tag)
: this()
{
tag = tag.Substring(1, tag.Length - 2);

int spaceIndex = tag.IndexOf(" ");

//Extract tag name
if (spaceIndex < 0)
{
_tagName = tag;
}
else
{
_tagName = tag.Substring(0, spaceIndex);
}

//Check if is end tag
if (_tagName.StartsWith("/"))
{
_isClosing = true;
_tagName = _tagName.Substring(1);
}

_tagName = _tagName.ToLower();

//Extract attributes
MatchCollection atts = Parser.Match(Parser.HmlTagAttributes, tag);

foreach (Match att in atts)
{
if (!att.Value.Contains(@"="))
{
if (!Attributes.ContainsKey(att.Value))
Attributes.Add(att.Value.ToLower(), string.Empty);
}
else
{
//Extract attribute and value
string[] chunks = new string[2];
chunks[0] = att.Value.Substring(0, att.Value.IndexOf('='));
chunks[1] = att.Value.Substring(att.Value.IndexOf('=') + 1);

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

------------------------

Hopefully this if of help to someone.

Commented Issue: Crash when clicking an anchor that has an URL with an equal sign [2547]

UweKeim — Fri, 04 Sep 2009 21:37:17 GMT

Seems that the definition

public const string HmlTagAttributes = "[^\\s]*\\s*=\\s*(\"[^\"]*\"|[^\\s]*)";

inside "Parser.cs" is not capable of handling equal signs inside attributes. I am currently trying to figure out how to solve.

Created Issue: Crash when clicking an anchor that has an URL with an equal sign [2547]

UweKeim — Fri, 04 Sep 2009 21:04:44 GMT

Patch Uploaded: #3732

bravenewnerd — Tue, 01 Sep 2009 15:18:21 GMT

bravenewnerd has uploaded a patch.

Description:
Added virtual method "LinkClicked(CssBox)" to allow for other methods of handling anchors than using CssValue.GoLink. Version submitted simply forwards request to CssValue as before. All changes are at the end of the HtmlPanel.cs file

Created Issue: Cookie passed through to anchor href

bravenewnerd — Tue, 01 Sep 2009 10:22:41 GMT

Would like to have a method to pass a unique id through to a method:<Class>.<Method>. E.g. if you dynamically create a list of links that all point to the same static method we need a way to distinguish which link in the list was clicked. Perhaps using the id attribute of the anchor?

New Post: Plans for WPF

mcdirmid — Sat, 25 Jul 2009 00:04:34 GMT

+1 for a WPF backend. There is a huge need for a WPF friendly HTML rendering component and not the crippled hack that is currently System.Windows.WebBrowser. For example, if we had an HTML renderer in WPF, we could apply basic WPF transformations (rotate and scale) as well as pixel shader effects to web pages. This would make your project really popular.

Created Issue: HtmlRenderer.Render methods do not take Y coordinate into account

SomeoneElse — Tue, 26 May 2009 18:40:13 GMT

The static HtmlRenderer.Render methods do not take the passed in RectangleF.Y or PointF.Y coordinate into account, so all rendering seems to be defaulting to Y = 0.

Using new RectangleF(0,0,100,100) works great since it should start at 0. Using new PointF (0,0) also works correctly.

Using new RectangleF(50,50,100,100) or new PointF(50,50) on the other hand results in incorrect rendering. The X will start at 50 (correct) but Y will be 0 (incorrect, should be 50). If clip = true there is a chance that nothing will be rendered since it is outside of the visible bounds. If clip = false then rendering will take place, but Y will start at 0 instead of the passed in Y coordinate.

System.Drawing.Graphics workaround:

// create graphics container to reset graphics object after translation
System.Drawing.Drawing2D.GraphicsContainer con = g.BeginContainer();

// use translate method to set desired x and y
g.TranslateTransform(50, 50);

// call HtmlRenderer.Render method passing in x = 0 and y = 0
// new RectangleF(0, 0, width, height) or new PointF(0, 0)
System.Drawing.Html.HtmlRenderer.Render(g, "<strong>this is a simple html test</strong>", new RectangleF(0, 0, 100, 50), false);

// reset graphics
g.EndContainer(con);

HtmlRenderer source code change:

I don't fully understand the code yet (I haven't had a chance to just sit down for a while and dig through all the methods), but I was able to make a change that worked for me. I have not tested the change with HtmlLabel, HtmlPanel, or HtmlToolTip since I have been using the static Render methods in HtmlRenderer.

Look around line 2693 in CssBox.cs under the MeasureBounds(Graphics g) method. That calculates the top (Y) location. ContainingBlock.Location.Y is not used, this is probably why Y is defaulting to 0 instead of the passed in Y coordinate. If ContainingBlock.Location.Y is added into the calculation then it sets Y to the desired location.

Again, this change works for the static HtmlRenderer.Render method but I don't know what it will do to the Html controls. It is probably a better idea to use the graphics workaround method mentioned above until an official fix is released.

Created Issue: Add static MeasureHtml methods to HtmlRenderer

SomeoneElse — Tue, 05 May 2009 06:25:06 GMT

It would be great to have some static MeasureHtml (MeasureBounds) methods on HtmlRenderer to help determine how much space is needed when using the static HtmlRenderer.Render method.

New Post: Plans for WPF

abadura — Mon, 04 May 2009 08:28:16 GMT

Are there any plans to upgrade (or provide alternative version) this control to Windows Presentation Framework?

Note that this way you could skip adding own CSS styles and support a rich WPF styling possibilities.

Created Issue: bug and Style issues

IBlueSun — Mon, 23 Mar 2009 19:15:23 GMT

Hi,

:) first what a great library you've made

I was hacking your code for making PDF file from HTML and found some issues

hope you like it ;)

1) <TBODY> not supported in tables {however I didn't read the html specs so I don't know if it is standard or not}

2) IMPORTANT :(
something wrong goes with the styles when the property name is being in small letter

for example

A) <TABLE style="DISPLAY: inline; BORDER-COLLAPSE: collapse; FONT-SIZE: 1em" border=1> {This renders correctly}

B) <table style="display:inline;border-collapse:collapse;font-size:1em" border=1> {This behaves wrong}

more over its spread all over the tags that contain lower case styles in property name

<TD style="VERTICAL-ALIGN: top" class=ms-rtetablecells> [THIS IS RENDERS CORRECTLY]

<td style="vertical-align:top" class=ms-rtetablecells> [THIS WILL not RENDER CORRECTLY :(]

please find the attached html file {if you want it to be rendered remove <tbody> tags and then see the style issues

Thank you
Ahmed Sadek

this

Reviewed: HTML Renderer 1.0.0.0 (2) (Mar 12, 2009)

BalabanS — Thu, 12 Mar 2009 20:30:59 GMT

Rated 5 Stars (out of 5) - I like it really. I'll try the future releases too.

New Post: Minor grammar correction suggestion for home page

menendezpoo — Fri, 30 Jan 2009 14:43:24 GMT

Corrected. Thanks a lot

Updated Wiki: Home

menendezpoo — Fri, 30 Jan 2009 14:43:04 GMT

This is a library of 100% managed code that draws beautifully formatted HTML.

It comes along with three WinForms controls:

HtmlPanel
HtmlLabel
HtmlTootlip

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 my self quite well. I went through the entire CSS Level 2 specifiation 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 on the library is managed code and the methods it use to paint are quite basic. It draws lines, rectangles, curves and text.

For now, the render looks really nice. Some times it can fool you to think your'e using a real Web Browser, trust me, download the demo, 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 this 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 this 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 Inital 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 creates this object for you.

HtmlPanel

A panel that is ready to accept HTML code via its Text property. It's 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. It's 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 copule of features:

Background gradients
Rounded corners

These are achieved thru 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 at all of it. Cell combinations work quite well as far as I tested them.
Fonts (partially) and Colors
Backgrounds (just color)

Created Feature: Home, End, Page Up, Page Down

menendezpoo — Fri, 30 Jan 2009 14:40:13 GMT

Add support for the scroll navigation keys:

Home, End, Page Up, Page Down