Click here to Skip to main content
15,867,308 members
Articles / Desktop Programming / MFC

A Simple HTML Drawing Class

Rate me:
Please Sign up or sign in to vote.
4.72/5 (27 votes)
5 Aug 20034 min read 165.7K   5.3K   67   39
Drawing HTML text onto a device context

Sample Image - HTMLDrawer.gif

Introduction

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 here. 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.

Background

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.

C++
/////////////////////////////////////////////////////////////
// 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.

Remarks

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.

History

  • 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 upperbound 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!)

Written By
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!


Comments and Discussions

 
Generalnice Pin
nyeboy8-Apr-11 4:50
nyeboy8-Apr-11 4:50 
Generalthat thing doesn't work on Windows Mobile Pin
glook11-Sep-08 1:34
glook11-Sep-08 1:34 
GeneralRe: that thing doesn't work on Windows Mobile Pin
BadJerry11-Sep-08 5:14
BadJerry11-Sep-08 5:14 
AnswerRe: that thing doesn't work on Windows Mobile Pin
glook11-Sep-08 6:27
glook11-Sep-08 6:27 
GeneralRe: that thing doesn't work on Windows Mobile Pin
BadJerry11-Sep-08 23:26
BadJerry11-Sep-08 23:26 
GeneralRe: that thing doesn't work on Windows Mobile Pin
glook15-Sep-08 2:39
glook15-Sep-08 2:39 
QuestionHow do I get the source code of html? Pin
shertay6-Feb-06 16:36
shertay6-Feb-06 16:36 
Instead of inputting the source code, I would like to get the source code from the html but I do not know how to get it. Any idea?
AnswerRe: How do I get the source code of html? Pin
BadJerry7-Feb-06 22:38
BadJerry7-Feb-06 22:38 
GeneralNice Work + A Bug + Enhancement Pin
Aamir Butt6-Oct-04 23:29
Aamir Butt6-Oct-04 23:29 
GeneralRe: Nice Work + A Bug + Enhancement Pin
BadJerry7-Oct-04 3:31
BadJerry7-Oct-04 3:31 
Generalmeasure end atom of 1 page.. Pin
handera12-Aug-03 17:50
handera12-Aug-03 17:50 
GeneralRe: measure end atom of 1 page.. Pin
BadJerry12-Aug-03 23:46
BadJerry12-Aug-03 23:46 
GeneralThanks! Thanks! Thanks! Pin
handera16-Aug-03 23:03
handera16-Aug-03 23:03 
GeneralRe: Thanks! Thanks! Thanks! Pin
pranavamhari17-Aug-03 20:33
pranavamhari17-Aug-03 20:33 
QuestionHow to reduce sentence's gap? Pin
Lee C.H.6-Aug-03 22:00
Lee C.H.6-Aug-03 22:00 
AnswerRe: How to reduce sentence's gap? Pin
BadJerry6-Aug-03 23:55
BadJerry6-Aug-03 23:55 
GeneralGood .......but how about table Pin
_skidrow_vn_6-Aug-03 21:05
_skidrow_vn_6-Aug-03 21:05 
GeneralRe: Good .......but how about table Pin
I'm a code monkey6-Aug-03 21:33
I'm a code monkey6-Aug-03 21:33 
GeneralRe: Good .......but how about table Pin
BadJerry7-Aug-03 0:17
BadJerry7-Aug-03 0:17 
GeneralRe: Good .......but how about table Pin
_skidrow_vn_7-Aug-03 13:35
_skidrow_vn_7-Aug-03 13:35 
GeneralBug Pin
pranavamhari1-Aug-03 21:41
pranavamhari1-Aug-03 21:41 
GeneralRe: Bug Pin
BadJerry3-Aug-03 23:46
BadJerry3-Aug-03 23:46 
GeneralOne suggestion Pin
Amit Dey27-Apr-03 3:31
Amit Dey27-Apr-03 3:31 
GeneralAll fetichists welcome Pin
BadJerry1-May-03 0:06
BadJerry1-May-03 0:06 
GeneralRe: All fetichists welcome Pin
Anonymous1-May-03 12:16
Anonymous1-May-03 12:16 

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.