Click here to Skip to main content
13,201,763 members (72,689 online)
Click here to Skip to main content
Add your own
alternative version


67 bookmarked
Posted 5 Apr 2003

A Simple HTML drawing class

, 5 Aug 2003
Rate this:
Please Sign up or sign in to vote.
Drawing HTML text onto a device context
<!-- Article image -->Sample Image - HTMLDrawer.gif<!-- Add the rest of your HTML here -->


For one of my projects, I needed to display some rich text in a Windows environment and in a browser and wanted them to appear roughly the same. I did not need to embed images or hyper-links, only some simple text formatting like the colour, the font name and the bold/italic/underline attributes. I also wanted to be able to control the background appearance. Using a HTML or a Rich Text control was therefore not an obvious option.

My intent was not to re-invent the wheel and provide a real HTML parser, simply a reduced HTML viewer that I could use almost anywhere. Feel free to improve the code and add support to other HTML tags (or your own if needed). Keep me posted of any improvements you make so I can upgrade the source (oh and my project).

I was then informed that Hans Dietrich had done a very similar development Looking at his control and inspired by a few of the comments posted there, I decided to create another control CHTMLStatic that would support hyperlinks and the <p> tag.


Now comes the condescending section! Anyway, here is the list of tags supported by the Drawer:

  • <B> and </B> or <STRONG> and </STRONG> : sets the text between the tags in bold
  • <I> and </I> or <EM> and </EM>: sets the text in italic
  • <U> and </U>: underlines the text
  • <FONT> and </FONT>: sets the font name, size and colour (The attributes supported are FACE, COLOR and SIZE). You can specify a colour by its rgb values or by its name (entering the list was rather painful)
  • <BR>: adds a line break.
  • <P>: Defines a paragraph. The only supported attribute is ALIGN (values can be left, center or right).
  • <CENTER>: Defines a centered paragraph.
  • <A HREF=url>: Defines an hyperlink.

Two main points are not in compliance with HTML:

  1. When 2 spaces are encountered, HTML assumes there is only one. I don't
  2. The new line character is interpreted as a space in HTML, not here

These would be easy to implement if you need them.

Using the code

You can either use the code with CHTMLDrawer and its static function DrawText. This would only render the HTML and not allow you to use the hyperlinks.

// DrawText
// Parameters:
// pDC : Device context
// strText: Text to be drawn
// fntDefault : Default font to be used
// rctPosition : Rectangle in which the text is to be drawn
// nAlignment: 0 (left) or 1 (centered) or 2 (right)
void CHTMLDrawer::DrawText(CDC * pDC, const CString & strText,
            const CHTMLFont & fntDefault,CRect & rctPosition,short nAlignment)

Alternatively, you could use the control CHTMLStatic. You can define its background colour, the default font used, the color of a highlighted hyperlink and if it is underlined when highlighted.

CHTMLFont encapsulates the definition of a font (name, attributes, size and colour). You will need it to define the default font used. CHTMLAtom is used as a temporary storage class and you will probably not need to refer to it in your code.

How it is done:

  1. Try to break the text into smaller parts that would have the same font settings. This is what I call an atom. This is done in ParseHTMLText()
  2. Then whenever an atom overruns the right side of the rectangle, it is broken into smaller atoms (trying to break it where there are spaces). This function also computes the positions of atoms for their display. Check BreakIntoLines() for details.
    We also keep track of the atoms linked to a URL.
  3. Finally, we find the position of the lowest atom to centre the text vertically and apply the alignments in ApplyAlignments
  4. The actual drawing is done in DrawAtoms


The whole thing is not too complicated, although I am pretty sure there are still a few bugs left and much room for optimization. Feel free to use it as much as you want as long you do not make me responsible for undesirable side effects!

Portions of the code were inspired (or copied) from Hans Dietrich who himself borrowed from Chris Maunder who himself is an avid reader of Paul DiLascia's MSJ column.


  • 23/3/2003: v1.0
  • 11/4/2003: v1.1
    Added the control CHTMLStatic which supports hyperlinks (and the text stays nicely in the boundaries - thanks Doc McClenny).
    Added support of the following tags: <P>, <CENTER>, <A HREF=url> and <EM>.
    Text of different font sizes is correctly aligned and removed the 7 upperboud for a font size (thanks to Chopper for his comment).
    And finally thanks to Hockey for showing me Hans Dietrich's article that I have shamelessly looted...
  • 4/8/2003: v1.2
    I have a corrected a few bugs on CHTMLStatic, the control encapsulating the drawer - resize problems and flickering of the cursor (thanks to Pranavamhari's remark)
    I have also added a new sample encapsulating the drawer into a view which allows a vertical scroll bar (this was Koh Zi Chun's idea... thanks for the positive feedback!)


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Web Developer
United Kingdom United Kingdom
Known as "The Wandering Geek", I have had to often change identities and countries due to the low quality level of the numerous software I have left behind.
Never wrote a software that did more than sorting 3 numbers which actually worked.
Hey but feel free to download my stuff!

You may also be interested in...

Comments and Discussions

Generalnice Pin
nyeboy8-Apr-11 4:50
membernyeboy8-Apr-11 4:50 
Generalthat thing doesn't work on Windows Mobile Pin
glook11-Sep-08 1:34
memberglook11-Sep-08 1:34 
GeneralRe: that thing doesn't work on Windows Mobile Pin
BadJerry11-Sep-08 5:14
memberBadJerry11-Sep-08 5:14 
AnswerRe: that thing doesn't work on Windows Mobile Pin
glook11-Sep-08 6:27
memberglook11-Sep-08 6:27 
GeneralRe: that thing doesn't work on Windows Mobile Pin
BadJerry11-Sep-08 23:26
memberBadJerry11-Sep-08 23:26 
GeneralRe: that thing doesn't work on Windows Mobile Pin
glook15-Sep-08 2:39
memberglook15-Sep-08 2:39 
QuestionHow do I get the source code of html? Pin
shertay6-Feb-06 16:36
membershertay6-Feb-06 16:36 
AnswerRe: How do I get the source code of html? Pin
BadJerry7-Feb-06 22:38
memberBadJerry7-Feb-06 22:38 
GeneralNice Work + A Bug + Enhancement Pin
Aamir Butt6-Oct-04 23:29
memberAamir Butt6-Oct-04 23:29 
Very nice work mate. You get my 5.

Well, I think I have found a bug in it as well. I was trying to use this code with CMetaFileDC and I got an Assert followed by a crash at GetTextExtent & GetTextMetrics calls. I have simply replaced these two by GetOutputTextExtent & GetOutputTextMetrics and now its working fine.

I am set to enhance it to include some more tags which include , , <SELECT> and <IMG>. I hope to get these done early and will surely post a message here when I am done.


<Font size = 1, color=BLUE>
Imagine that you are creating a fabric of human destiny with the object of making men happy in the end, giving them peace and rest at last, but that it was essential and inevitable to torture to death only one tiny creature..and to found that edifice on its unavenged tears, would you consent to be the architect on those conditions? Tell me, and tell me the truth!

-Fyodor Dostoevsky, The Brothers Karamazov
GeneralRe: Nice Work + A Bug + Enhancement Pin
BadJerry7-Oct-04 3:31
memberBadJerry7-Oct-04 3:31 
Generalmeasure end atom of 1 page.. Pin
Lee C.H.12-Aug-03 17:50
sussLee C.H.12-Aug-03 17:50 
GeneralRe: measure end atom of 1 page.. Pin
BadJerry12-Aug-03 23:46
memberBadJerry12-Aug-03 23:46 
GeneralThanks! Thanks! Thanks! Pin
Lee C.H.16-Aug-03 23:03
sussLee C.H.16-Aug-03 23:03 
GeneralRe: Thanks! Thanks! Thanks! Pin
pranavamhari17-Aug-03 20:33
memberpranavamhari17-Aug-03 20:33 
QuestionHow to reduce sentence's gap? Pin
Lee C.H.6-Aug-03 22:00
memberLee C.H.6-Aug-03 22:00 
AnswerRe: How to reduce sentence's gap? Pin
BadJerry6-Aug-03 23:55
memberBadJerry6-Aug-03 23:55 
GeneralGood .......but how about table Pin
_skidrow_vn_6-Aug-03 21:05
member_skidrow_vn_6-Aug-03 21:05 
GeneralRe: Good .......but how about table Pin
I'm a code monkey6-Aug-03 21:33
memberI'm a code monkey6-Aug-03 21:33 
GeneralRe: Good .......but how about table Pin
BadJerry7-Aug-03 0:17
memberBadJerry7-Aug-03 0:17 
GeneralRe: Good .......but how about table Pin
_skidrow_vn_7-Aug-03 13:35
member_skidrow_vn_7-Aug-03 13:35 
GeneralBug Pin
pranavamhari1-Aug-03 21:41
memberpranavamhari1-Aug-03 21:41 
GeneralRe: Bug Pin
BadJerry3-Aug-03 23:46
memberBadJerry3-Aug-03 23:46 
GeneralOne suggestion Pin
Amit Dey27-Apr-03 3:31
memberAmit Dey27-Apr-03 3:31 
GeneralAll fetichists welcome Pin
BadJerry1-May-03 0:06
memberBadJerry1-May-03 0:06 
GeneralRe: All fetichists welcome Pin
Anonymous1-May-03 12:16
sussAnonymous1-May-03 12:16 
GeneralRe: All fetichists welcome Pin
BadJerry1-May-03 23:22
memberBadJerry1-May-03 23:22 
GeneralSimilar control Pin
Hockey8-Apr-03 12:10
memberHockey8-Apr-03 12:10 
GeneralRe: Similar control Pin
Chopper8-Apr-03 22:40
memberChopper8-Apr-03 22:40 
GeneralRe: Similar control Pin
Hockey10-Apr-03 14:20
memberHockey10-Apr-03 14:20 
GeneralRe: Similar control Pin
Chopper10-Apr-03 22:31
memberChopper10-Apr-03 22:31 
GeneralRe: Similar control Pin
BadJerry9-Apr-03 4:59
memberBadJerry9-Apr-03 4:59 
GeneralRe: Similar control Pin
Hockey10-Apr-03 14:22
memberHockey10-Apr-03 14:22 
Questiondoesn't check text extent? Pin
Doc McClenny7-Apr-03 8:59
memberDoc McClenny7-Apr-03 8:59 
AnswerRe: doesn't check text extent? Pin
BadJerry7-Apr-03 23:36
memberBadJerry7-Apr-03 23:36 
GeneralNeeds some work Pin
Chopper7-Apr-03 3:28
memberChopper7-Apr-03 3:28 
GeneralRe: Needs some work Pin
BadJerry7-Apr-03 4:09
memberBadJerry7-Apr-03 4:09 
GeneralRe: Needs some work Pin
Chopper7-Apr-03 4:34
memberChopper7-Apr-03 4:34 
GeneralRe: Needs some work Pin
BadJerry7-Apr-03 5:23
memberBadJerry7-Apr-03 5:23 
GeneralRe: Needs some work Pin
Johan Rosengren15-Jun-04 22:05
memberJohan Rosengren15-Jun-04 22:05 

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

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

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171020.1 | Last Updated 6 Aug 2003
Article Copyright 2003 by BadJerry
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid