Click here to Skip to main content
Click here to Skip to main content
Articles » Multimedia » GDI+ » Applications » Downloads
 
Add your own
alternative version

A Professional HTML Renderer You Will Use

, 29 Jan 2009 BSD
100% managed code that draws HTML on any device
HtmlDemo.002.zip
System.Drawing.Html.dll
Html Demo.exe
HtmlDemo.zip
System.Drawing.Html.dll
Html Demo.exe
System.Drawing.Html.002.zip
System.Drawing.Html
Html Demo
bin
Debug
Html Demo.exe
Html Demo.vshost.exe
HtmlDemo.zip
System.Drawing.Html.dll
Html Demo.csproj.user
Properties
Settings.settings
Resources
comment16.gif
delete16.gif
delete32.gif
exclamation32.png
favorites32.png
font32.png
formula32.png
image32.png
method16.gif
paly32.png
property16.gif
property32.png
refreshdocument32.png
web_pallete.gif
Window.gif
Samples
System.Drawing.Html.suo
System.Drawing.Html
bin
Debug
System.Drawing.Html.dll
System.Drawing.Html.vshost.exe
Properties
Settings.settings
System.Drawing.Html.zip
Html Demo.exe
Html Demo.vshost.exe
System.Drawing.Html.dll
Html Demo.csproj.user
Settings.settings
comment16.gif
delete16.gif
delete32.gif
exclamation32.png
favorites32.png
font32.png
formula32.png
image32.png
method16.gif
paly32.png
property16.gif
property32.png
refreshdocument32.png
web_pallete.gif
Window.gif
System.Drawing.Html.suo
System.Drawing.Html.dll
System.Drawing.Html.vshost.exe
Settings.settings
<html>
	<head>
		<title>Text</title>
		<link rel="Stylesheet" href="property:Html_Demo.Bridge.StyleSheet" />
	</head>
	<body>
	   <h1>Text</h1>
	   <blockquote>
	   
	   <h2>Alignment</h2>
	   <p>Simple paragraphs can be used to create a document. Alignment can be used as you already know.</p>
	   
	   <p><font color=red>Warning:</font>P tags must be closed. In fact all tags with the end tag <a href="http://www.w3.org/TR/1999/REC-html401-19991224/index/elements.html">marked as optional</a>, must be closed. It may be fixed by next release.</p>
	   
	   <h3>Left aligned</h3>
	   <p align="left" class="gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare mollis elit. Integer sagittis. Fusce elementum commodo felis. Vivamus lacinia eleifend libero. Donec lacus. Nam sit amet urna. Nullam nulla. Donec accumsan porta magna. Mauris a dolor eu elit rutrum commodo. Nam iaculis turpis non augue. Nullam lobortis egestas risus. Nulla elementum dolor ac mauris. Ut tristique. In varius volutpat metus. Integer leo dolor, tristique a, dignissim ac, iaculis eget, elit. Donec arcu.</p>
	   
	   <h3>Center aligned</h3>
	   <p align="center" class="gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare mollis elit. Integer sagittis. Fusce elementum commodo felis. Vivamus lacinia eleifend libero. Donec lacus. Nam sit amet urna. Nullam nulla. Donec accumsan porta magna. Mauris a dolor eu elit rutrum commodo. Nam iaculis turpis non augue. Nullam lobortis egestas risus. Nulla elementum dolor ac mauris. Ut tristique. In varius volutpat metus. Integer leo dolor, tristique a, dignissim ac, iaculis eget, elit. Donec arcu.</p>
	   
	   <h3>Right aligned</h3>
	   <p class="gray" align="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare mollis elit. Integer sagittis. Fusce elementum commodo felis. Vivamus lacinia eleifend libero. Donec lacus. Nam sit amet urna. Nullam nulla. Donec accumsan porta magna. Mauris a dolor eu elit rutrum commodo. Nam iaculis turpis non augue. Nullam lobortis egestas risus. Nulla elementum dolor ac mauris. Ut tristique. In varius volutpat metus. Integer leo dolor, tristique a, dignissim ac, iaculis eget, elit. Donec arcu.</p>
	   
	   <h3>Justifed</h3>
	   <p class="gray" align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare mollis elit. Integer sagittis. Fusce elementum commodo felis. Vivamus lacinia eleifend libero. Donec lacus. Nam sit amet urna. Nullam nulla. Donec accumsan porta magna. Mauris a dolor eu elit rutrum commodo. Nam iaculis turpis non augue. Nullam lobortis egestas risus. Nulla elementum dolor ac mauris. Ut tristique. In varius volutpat metus. Integer leo dolor, tristique a, dignissim ac, iaculis eget, elit. Donec arcu.</p>
       
       <hr>
       
       <h2>Formatting</h2>
       
       <p>You can use all the well known tags and CSS properties to format text, fonts and colors.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Curabitur</b> ornare mollis elit. Integer sagittis. Fusce elementum commodo felis. <span bgcolor=yellow>Vivamus lacinia eleifend libero. Donec lacus. Nam sit amet urna.</span> Nullam nulla. Donec accumsan porta magna. <font color=blue>Mauris a <b>dolor</b></font> eu elit rutrum commodo. Nam iaculis turpis non augue. Nullam lobortis egestas risus. Nulla elementum dolor ac mauris. Ut tristique. In varius volutpat metus. Integer leo dolor, tristique a, dignissim ac, iaculis eget, elit. Donec arcu.</p>
       
       <p><b color=red>Important Note:</b> Background colors are not drawn when the block has text-align property of <code>justify</code>. It may be fixed by the next release.</p>
       
       <h2>Preformatted text</h2>
       <p>The preformatted text is fully supported, like this C# code demo:</p>
       <pre style="background-color:white">
<span color=green>//Example of code using preformatted text</span>
<span color=blue>public class</span> HelloWorld
{
    <span color=blue>public</span> HelloWorld()
    {
        <span color=#099>MessageBox</span>.Show(<span color=maroon>"Hello World"</span>);
    }
}
       
       </pre>
       
       <p></p>
       <hr />
       
       <h2>Lists</h2>
       
       <p>Both UL and OL tags are supported, though, all the CSS properties related with lists are not still <i>fully supported.</i>. The maximum you will get is bullets and numbers. Image bullets and better numbering support may be added by next release.</p>
       
       <h3>Unordered list</h3>
       <ul>
       <li>Item one</li><li>Item two</li><li>Item three</li><li>Item four</li><li>Item five</li>
       </ul>
       
       <h3>Ordered list</h3>
       <ol>
       <li>Item one</li><li>Item two</li><li>Item three</li><li>Item four</li><li>Item five</li>
       </ol>
       
       <h3>List nesting</h3>
       <ol>
       <li>Item one</li><li>Item two</li><li>Item three
       <ul style="margin-top:0;margin-bottom:0">
       <li>Item one</li><li>Item two</li><li>Item three</li><li>Item four</li><li>Item five</li>
       </ul>
       </li><li>Item four</li><li>Item five</li>
       </ol>
       
       <p></p>
       <hr />
       
       <h1>Right to left direction</h1>
       
       <p>It may not behave exactly like the specification says, but it can be useful if you use it for right-to-left languages. All you have to do is to alter the <code>direction</code> property like this:</p>
       <pre>.myparagraph { <span color=maroon>direction:rtl;</span> }</pre>
       
       <h2>Left aligned</h2>
	   <p class="gray" align="left" style="direction:rtl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare mollis elit. Integer sagittis. Fusce elementum commodo felis. Vivamus lacinia eleifend libero. Donec lacus. Nam sit amet urna. Nullam nulla. Donec accumsan porta magna. Mauris a dolor eu elit rutrum commodo. Nam iaculis turpis non augue. Nullam lobortis egestas risus. Nulla elementum dolor ac mauris. Ut tristique. In varius volutpat metus. Integer leo dolor, tristique a, dignissim ac, iaculis eget, elit. Donec arcu.</p>
	   
	   <h2>Center aligned</h2>
	   <p class="gray" align="center" style="direction:rtl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare mollis elit. Integer sagittis. Fusce elementum commodo felis. Vivamus lacinia eleifend libero. Donec lacus. Nam sit amet urna. Nullam nulla. Donec accumsan porta magna. Mauris a dolor eu elit rutrum commodo. Nam iaculis turpis non augue. Nullam lobortis egestas risus. Nulla elementum dolor ac mauris. Ut tristique. In varius volutpat metus. Integer leo dolor, tristique a, dignissim ac, iaculis eget, elit. Donec arcu.</p>
	   
	   <h2>Right aligned</h2>
	   <p class="gray" align="right" style="direction:rtl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare mollis elit. Integer sagittis. Fusce elementum commodo felis. Vivamus lacinia eleifend libero. Donec lacus. Nam sit amet urna. Nullam nulla. Donec accumsan porta magna. Mauris a dolor eu elit rutrum commodo. Nam iaculis turpis non augue. Nullam lobortis egestas risus. Nulla elementum dolor ac mauris. Ut tristique. In varius volutpat metus. Integer leo dolor, tristique a, dignissim ac, iaculis eget, elit. Donec arcu.</p>
	   
	   <h2>Justifed</h2>
	   <p class="gray" align="justify" style="direction:rtl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare mollis elit. Integer sagittis. Fusce elementum commodo felis. Vivamus lacinia eleifend libero. Donec lacus. Nam sit amet urna. Nullam nulla. Donec accumsan porta magna. Mauris a dolor eu elit rutrum commodo. Nam iaculis turpis non augue. Nullam lobortis egestas risus. Nulla elementum dolor ac mauris. Ut tristique. In varius volutpat metus. Integer leo dolor, tristique a, dignissim ac, iaculis eget, elit. Donec arcu.</p>
	   
	   <blockquote>
	   <p>If you know about right-to-left and know exactly how it should behave, please write to me: <a href="http://www.menendezpoo.com">www.menendezpoo.com</a></p>
	   </blockquote>
	   
       </blockquote>
       
       
	</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

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

| Advertise | Privacy | Mobile
Web03 | 2.8.141022.2 | 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