Introduction
This example code allows you to create rotated vertical text images in an ASP.NET web page using a custom HTTP Handler and the .NET Graphics libraries - GDI+.
Background
In a recent project, I was asked to display a table of data like the one above with rotated vertical text column headings. For a tabular report that may have many columns, vertical text is sometimes the only way a user can view the data. Internet Explorer offers a way to display vertical text using style="writing-mode:tb-rl"
but no other browsers support it and I wanted a solution that would work in Firefox and other browsers.
Creating Vertical Text Images
The ImageCreationLibrary.cs file is in charge of creating and saving vertical text images in the format we want using the Microsoft's .NET GDI+ features.
The strategy that worked for me was to use StringFormatFlags.DirectionVertical
to draw out the text. The tricky part is that it defaults to write the text reading from top to bottom so you have to rotate the image 180 degrees and translate it appropriately. Most people I think are more comfortable reading vertical text bottom-up because the first letter in each word will be lined up in the same position.
The main code in ImageCreationLibrary.cs is inside the CreateVerticalTextImage
method:
public string CreateVerticalTextImage(string stText, Font f)
{
string stFileName = Toolbox.GetMD5String(stText);
string stFullFilePath = this._baseImagePath + stFileName + ".jpg";
if (!File.Exists(stFullFilePath))
{
StringFormat stringFormat = new StringFormat();
stringFormat.FormatFlags = StringFormatFlags.DirectionVertical;
SizeF imageSize = _graphics.MeasureString(stText, f, 25, stringFormat);
System.Drawing.Image i = (Image)new Bitmap((int)imageSize.Width,
(int)imageSize.Height);
Graphics g = Graphics.FromImage(i);
g.FillRectangle(Brushes.White, 0, 0, i.Width, i.Height);
g.TranslateTransform(i.Width, i.Height);
g.RotateTransform(180.0F);
g.DrawString(stText, f, Brushes.Black, 0, 0, stringFormat);
i.Save(stFullFilePath, System.Drawing.Imaging.ImageFormat.Jpeg);
}
return stFullFilePath;
}
CreateVerticalTextImage
generates an MD5 hash based on the text passed in; you could do something else, this is just a way to ensure there are no invalid characters in the file path and that the names are somewhat unique. Then it creates a white box large enough to fit the text in. Using the graphics object, we then call TranslateTransform
to translate our image back to where we want it based on the 180 degree rotation. Then we call RotateTransform
, passing 180 degrees to actually do the Rotation transformation we want. Finally CreateVerticalTextImage
calls DrawString
on the graphics object to draw our vertical text, and saves the image.
Using the Code
Well, that's all very nice and snazzy, but how do I use this code to actually include a vertical text image in my web page? I've created a custom HttpHandler
: ImageViewer.cs, the ImageViewer
class extends from IHttpHandler
and within the ProcessRequest
method calls CreateVerticalTextImage
passing it the GET
parameter we've called "text
".
string stText = context.Request.QueryString["text"];
if (stText != null && stText != "")
{
string stFileName = this.imageLib.CreateVerticalTextImage
(stText, new System.Drawing.Font(System.Drawing.FontFamily.GenericSerif, 12));
this.WriteImageFile(context, stFileName);
}
The WriteImageFile
method inside ImageViewer.cs simply sets the content type based on the image file extension and calls Response.WriteFile(stFilePath)
on our HttpContext
object.
Make sure to register the custom HttpHandler
in the Web.Config file so we ensure requests to get_image.aspx get processed by ImageViewer.cs.
<system.web>
<httphandlers>
...
</httphandlers></system.web>
Finally, to include our image in a web page, we need to UrlEncode
the text we want on our image and pass it in the querystring to get_image.aspx like so:
string stGET = System.Web.HttpUtility.UrlEncode(stText);
string stImageTag = "<img src=\"get_image.aspx?text=" + stGET + "\"/>";
Points of Interest
When working with the GDI+ and matrix transformations, you learn (or remember) much from Linear Algebra, it helps to use that F1 key within Visual Studio on methods you are using such as TranslateTransform
and RotateTransform
and read the docs and examples and experiment with it. One thing to keep in mind: according to the docs, these methods work by prepending the specified translation or rotation to the transformation matrix, so in my example the rotation is actually done first and then the translation is performed.
References
I was assisted by the many great references I found (some from CodeProject) when trying to solve this problem: Many thanks to Horia Tudosie's Vertical Labels in Web Pages article which is very complete and helped me figure out some of the GDI+ code for rendering the text properly. I decided to share my code because I wanted a simple example from a slightly different perspective that also saved the created files so that it only has to generate the images once. Another good vertical text GDI+ article I found on CodeProject (VB) is Vertical Label Control in VB.NET.
CSS Alternatives
Recently, I came across some CSS alternatives which may not work in every browser and you may have to fight with the positioning a little bit to have it look the same in all browsers, but I thought I would update this article with some information on my findings.
Scott Gale has a post on CSS Vertical Text that does a nice job explaining how to do rotated text in CSS using Internet Explorer's writing-mode and Mozilla and webkit's transform rotate attributes. However, because Internet Explorer's writing-mode does not support text rotated 270 degrees (or -90 degrees), you need to something a bit more fancy (and pretty hacky in my opinion). Jonathan Snook also has an article on Text Rotation with CSS using Internet Explorer's filter attribute you can achieve this vertical 270 degree text rotation. Here is a full CSS class you can use to apply to your pages to try it out:
.css-vertical-text {
-webkit-transform:rotate(270deg);
-moz-transform:rotate(270deg);
-o-transform: rotate(270deg);
white-space:nowrap;
display:block;
padding-left: 15px;
position:absolute;
right:-5px;
top:0px;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
History
- 05/23/2007 - Created article
- 08/19/2010 - Updated article to include alternatives in CSS