Outline Text, Part 1

Introduction

I am an avid fan of animes(Japanese animations). As I do not understand the Japanese language, the animes which I watched, have English subtitles. These fan-subbed animes have the most beautiful fonts and text. Below is a screenshot of the "Tales of the Abyss", an anime based on a fantasy game with the same name.

I was fascinated by the outline text. I searched on the web for an outline text library which allows me to do outline text. Sadly I found none. Those that I found, are too difficult for me to retrofit them to my general purpose and I do not fully understand their sparsely commented codes. I decided to roll up my sleeves to write my own outline text library.

Single Outline

Above is an example outline text. Below is the generic GDI+ code to display such a text, using GraphicsPath class. Generally, to draw outline text, you have to get the text path, then render the outline with the text path and render the text by filling the interior of the path.

Before you rush to make your own outline library, I have to tell you one pitfall of GDI+. GDI+ cannot handle Postscript OpenType fonts; GDI+ can only handle TrueType fonts. I have searched for a solution and found Sjaak Priester's Make GDI+ Less Finicky About Fonts. His approach is to parse the font file for its glyph and draw its outline. Sadly, I cannot use his code as his library is using the GNU license as I want to make my code free for all to use. I racked my brains for a solution. Since GDI(not GDI+) can display Postscript OpenType fonts and GDI supports path extraction through BeginPath/EndPath/GetPath. I decided to use just that to get my path into GDI+. Below is the comparison of the GDI+ path and GDI path. Note: Both are rendered by GDI+, it is just that their path extraction is different; one is using GDI+ while the other is using GDI to get the text path.

The top one is using GDI+ path and the bottom one is using GDI path. Looks like GDI paths are inferior and inaccurate. But GDI paths can do rotated text trick, like below, which GDI+ cannot do because GDI GraphicsPath's AddString takes in a FontFamily object, not a Font object. My OutlineText class provides the GdiDrawString method if you have the need to use PostScript OpenType fonts. The effect below is a Franklin Gothic Demi font, size 36, Italic text rotated 10 degrees anti-clockwise.

Outline Text, Part 1

Double Outline

[DblOutline.PNG]

I also provide a way for the users to do double outline. The Chinese tabloids in my home country, Singapore, like to do double outline text in their news headlines. Generally, to make double outline text, you have to render the bigger outline first, then the smaller outline, followed by the text.

Text Glow

[TextGlow.JPG]

Above image is an example is the text glow effect. It is easy to achieve this effect: Just set the drawing pen for the outline with a very low alpha value and keep drawing this outline while increase the width of this pen progressively. Below, it is the generic GDI+ code to do it.

Outline Text using DirectWrite

(Courtesy of Tom Mulcahy) The way to do this is to get the text contents as an ID2D1GeometrySink (See IDwriteFontFace::GetGlyphRunOutline). You can then call ID2D1RenderTarget::DrawGeometry to draw the outline of the text (specifying any color and width you want). Next call ID2D1RenderTarget::FillGeometry to fill the text (again you can specify any color you want).

Conclusion

In this part 1 of the article series, we have learnt how to do text effect with single outline, double outline and text glow. I am planning to port this library to .Net and do a fast cached rendering version, suitable for HD video rendering; I will be updating this article often. So be sure to check out this article when it is updated! This is 3 part article. In the 2nd installation of the article, I'll show you how to render text shadows and in the final installation, I'll show you how to do really advanced and cool outline text effects! I hope you have enjoyed reading this article as much as I have enjoyed writing it. Any feedbacks or bugs, please do let me know, so that I can improvise on this article. I'll leave you a preview image of what to expect in the part 2 of the article.

[Shadow.PNG]

Please read OutlineText, Part 2 article here if you are interested to know about implemeting shadows for the text. Also visit the Codeplex for a more updated source code download.

References

History

8th October 2009: Fixed the bug of exceptional sharp edges in some fonts by using rounded line joins. And making the demo application more user friendly by remembering the previous font and colors selected and take away the annoying exit application prompt.

30th April 2009 : First Release on Codeguru

About the Author

Wong Shao Voon

Rather than to write an accolade of skills which I currently possess, these are the technologies, I am currently exploring:

Top White Papers and Webcasts

The 2014 State of DevOps Report — based on a survey of 9,200+ people in IT operations, software development and technology management roles in 110 countries — reveals:
Companies with high-performing IT organizations are twice as likely to exceed their profitability, market share and productivity goals.
IT performance improves with DevOps maturity, and strongly correlates with well-known DevOps practices.
Job satisfaction is the No. 1 predictor of performance against organizational …

Today, users, applications, and data exist in more places than ever before, creating an unprecedented challenge for IT. How can IT achieve the flexibility and agility it needs to offer multiple types of applications in multiple locations? To better serve business demands for information everywhere, enterprises must develop new strategies for optimizing multiple kinds of networks. Read this white paper to learn how hybrid networks provide an unprecedented level of network dynamism, enterprise agility, and the …