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:
This is the code that ideally I could use because it doesn't generate any out output other than the size:
Thanks!
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><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>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
}var renderedImage = HtmlRender.RenderToImage(contentHtml, (int) width);- 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]()
-
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?
Thanks!