Vertical Text in HTML - Creating Dynamic Vertical Text Images in Webpages

• Download example - 8.17 KB

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);

            //flip the image 180 degrees
            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".

//get the text passed in
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>
        <add type=""VerticalTextExample.ImageViewer"" verb=""*"" path=""get_image.aspx"" />
    </add />
    ...
</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