Measuring image text width and height using ColdFusion 8

Yesterday I saw an interesting question on houseoffusion.com about how to measure the width and height of a text string drawn on an image. Curious, I checked the image functions in the documentation but did not find anything suitable. So I checked the java API's and found that the TextLayout object can be used to obtain the width and height of a graphical text string.

Now originally I had thought of using a method called getStringBounds() in the FontMetrics class. But I decided against it after reading in the API that "the logical bounds does not always enclose all the text... To obtain a visual bounding box, which encloses all the text, use the getBounds method of TextLayout".

So I ran some tests using TextLayout with a few different characters, fonts and styles and it appeared to work correctly. So I suggested the poster try using TextLayout and started to write up an entry about it.

As often happens, you get a neat idea and then find out someone else beat you to it. Case in point, today I saw a post by Ben Nadel mentioning an entry he did a few months ago, based on Barney Boisvert's work. The entry dealt with images and text measurement. I went to read the entry and the first thing that caught my attention was that it uses the getStringBounds() method. That piqued my curiosity. So I decided to test the veracity of the API and run the two methods side by side.

First I created a new image and drew some text. I deliberately selected a few funky characters that were likely to stretch outside the normal bounds. For illustration purposes, I also drew a rectangle to show the text bounds as reported by FontMetrics and TextLayout.

On the left (in red) are the dimensions reported by FontMetrics. If you look closely, you will see the text is slightly wider than the FontMetrics width would lead you to believe. The TextLayout dimensions (in blue) appear to be slightly more accurate.



Note, the positioning of the rectangles is slightly off. Since I am not drawing the text directly onto the image I cannot take advantage of the boundary x,y coordinates.


Another interesting difference is the FontMetric height includes the leading value. Whereas the TextLayout height does not. Roughly translated, the leading value is the distance between lines of text.

So it looks like the API was correct and that TextLayout provides a more accurate measurement of text width and height. Having said that, from everything I have read so far, font measurement is a complex topic. Especially when handling some of the more exotic character sets. So I would not expect this technique to be as useful with those character sets.

If you are interested in learning more about the java classes have a look at the API and/or graphics tutorials on the sun.com site.


Test code - Create Image

<cfscript>
    // initialize the text properties
    Font = CreateObject("java", "java.awt.Font");
    text =  { x = 50, y = 100, string = "ÀÇŸÍÊÃ" };
    text.prop = { font="Times New Roman", style="bolditalic", javaStyle= BitOr(Font.BOLD, Font.ITALIC), size=25 };

    // create a new image and draw the text
    img = ImageNew("", 450, 150, "rgb", "lightgray");
    ImageSetDrawingColor( img, "black" );
    ImageDrawText( img, text.string, text.x, text.y, text.prop );
</cfscript>

Test FontMetrics dimensions

<cfscript>
    // get the underlying graphic of the image
     graphics = ImageGetBufferedImage( img ).getGraphics();

    // recreate the font used to draw the text
    currentFont = Font.init( javacast("string", text.prop.font), 
            javacast("int", text.prop.javaStyle), 
            javacast("int", text.prop.size) 
        );

    // get text measurements using font metrics
    fontMetrics = graphics.getFontMetrics( currentFont );
    fontBounds = fontMetrics.getStringBounds( javacast("string", text.string), graphics );
            
    // draw a rectangle indicatating the font bounds
     Color = createObject("java", "java.awt.Color");
     graphics.setColor(Color.RED);
    graphics.drawRect( 
            javacast("int", text.x),
            javacast("int", text.y) - fontMetrics.getAscent(), 
            fontBounds.getWidth(), 
            fontBounds.getHeight()
        );

    // get the dimensions
    dimensions.type = "FontMetrics";
    dimensions.width = fontBounds.getWidth();
    dimensions.height = fontBounds.getHeight();
    dimensions.leading = fontMetrics.getLeading();
    dimensions.ascent = fontMetrics.getAscent();
    dimensions.descent = fontMetrics.getDescent();
    graphics.dispose();
</cfscript>

<cfdump var="#dimensions#">
<cfimage action="writeToBrowser" source="#img#">        

Test TextLayout dimensions

<cfscript>
    // get the text measurements using text layout
    graphics = ImageGetBufferedImage( img ).getGraphics();
    context = graphics.getFontRenderContext();
    TextLayout = createObject("java", "java.awt.font.TextLayout");    
    layout = TextLayout.init( text.string, currentFont, context );    
    layoutBounds = layout.getBounds();
    
    // draw a rectangle to indicating the layout bounds
    Color = createObject("java", "java.awt.Color");
    graphics.setColor( Color.BLUE );
    graphics.drawRect( javacast("int", text.x) - layout.getLeading() - 2,
            javacast("int", text.y) - layout.getAscent() + 1, 
            layoutBounds.getWidth(), 
            layoutBounds.getHeight()
        );

    // get the dimensions
    dimensions.type = "TextLayout";
    dimensions.width = layoutBounds.getWidth();
    dimensions.height = layoutBounds.getHeight();
    dimensions.leading = layout.getLeading();
    dimensions.ascent = layout.getAscent();
    dimensions.descent = layout.getDescent();

    graphics.dispose();
</cfscript>

<cfdump var="#dimensions#">
<cfimage action="writeToBrowser" source="#img#">