Is HTML Renderer suitable for measuring the size of rich text?

Nov 12, 2014 at 4:56 PM
I am trying to come up with a solution to determine whether rich text entered by a user on a website through a rich text editor is of appropriate size to fit in a box of a (variable) predefined size.

I have been trying to use HTML Renderer for this task but have had some difficulty. The text entered by the user comes from the TinyMCE editor.

Here's an example of the markup:
<p>
    <span class="arial letter-spacing " style="color: #000000; font-size: 7pt;">2010</span>
    <span class="arial letter-spacing " style="color: #ec008c; font-size: 7pt;"> Pink </span>
    <span class="arial letter-spacing " style="color: #69bd45; font-size: 7pt;">Green </span>
    <span class="arial letter-spacing underline" style="color: #69bd45; font-size: 7pt;">Underlined</span>
    <span class="arial letter-spacing " style="color: #69bd45; font-size: 7pt;"> 1800</span>
    <span class="arial letter-spacing " style="color: #ec008c; font-size: 7pt;"> Item</span>
    <span class="arial letter-spacing " style="color: #000000; font-size: 7pt;"> #: ... $500.00</span>
</p>
To use it, I then add additional code around it so that it is valid html like this:
<html>
    <head>
        <style> p { margin: 0; } div { margin: 0; } span { margin: 0; } body { padding: 0; }</style>
    </head>
    <body>
        <div style="line-height: 6px; font-family: Arial; z-index: -1; letter-spacing: -.2px; text-align: left;">
            <p>
                <span class="arial letter-spacing " style="color: #000000; font-size: 7pt;">2010</span>
                <span class="arial letter-spacing " style="color: #ec008c; font-size: 7pt;"> Pink </span>
                <span class="arial letter-spacing " style="color: #69bd45; font-size: 7pt;">Green </span>
                <span class="arial letter-spacing underline" style="color: #69bd45; font-size: 7pt;">Underlined</span>
                <span class="arial letter-spacing " style="color: #69bd45; font-size: 7pt;"> 1800</span>
                <span class="arial letter-spacing " style="color: #ec008c; font-size: 7pt;"> Item</span>
                <span class="arial letter-spacing " style="color: #000000; font-size: 7pt;"> #: ... $500.00</span>
            </p>
        </div>
    </body>
</html>
I'm using the following code to get some measurements:

This is the code that ideally I could use because it doesn't generate any out output other than the size:
            using (var image = new Bitmap(1000, 1000, PixelFormat.Format32bppArgb))
            using (var g = Graphics.FromImage(image))
            {
                var res = HtmlRender.Measure(g, contentHtml, (float) width);

               ..... do something with result
            }
This is what I've used for getting images that I can examine:
var renderedImage = HtmlRender.RenderToImage(contentHtml, (int) width);
Some of the problems I have been having are:
  1. There always seems to be an extra margin of whitespace around the text in the created image so that I can't get an accurate measure. See here: Image
  2. Wrapping doesn't seem to happen as I would expect. One thing I'm trying to do is if the user puts "..." in their text, that ... expands to as many periods as needed to make the text take up the entire space. The idea is to get the price at the end of the last line. I don't have a good example in front of me right now, but there have been a number of times where it seems that a word should easily fit on a line but it doesn't. Are there any known issues with word wrapping?
Is what I'm trying to do possible with this library? Am I on the right track but just using this library a bit wrong? Should I be looking for a different solution? Any thoughts would be appreciated.

Thanks!
Developer
Nov 14, 2014 at 9:20 AM
yes, you can use HTML Renderer to measure size.
  1. you don't have to wrap the html snippet, you can measure it directly and provide separate CSS styles.
  2. no need to create image, you can create Graphics object by "Graphics.FromHwnd(IntPtr.Zero)".
  3. be sure to remove all default margins see CssDefaults.cs. I think you see 8px body margin.
  4. i'm not aware of any text wrapping issues, also will not advice to do it in the first place, better to handle it using alignment, maybe put it in a table.
Nov 14, 2014 at 6:49 PM
Thanks for the response. The Graphics.FromHwnd(IntPtr.Zero) tip was a good one. Very helpful.

Also, I kept tracking down my problem. It seemed that my problem was actually this rule on the stylesheet that you linked:

p { margin: 1.12em 0 }

Html Renderer is working great for me now. Thanks!