Flex Font Explorer
A question came across an internal email list the other day about how to get font metrics from within a Flex application. Flex is ultimately Flash content, and the Flash Player has some ability to determine and provide your application with basic font metrics. In Flash this is generally accomplished by using the TextField.getTextFormat() and TextFormat.getTextExtent() methods. In Flex however the Label class, or similar class, is used to display text, not the raw TextField class itself. How then does one determine and display content using font metrics in Flex?
Lucky enough for us, the TextFormat class can be instantiated without having to make a reference to an existing TextField object. The TextFormat constructor expects various pieces of information about the font you want to display (or in our case want to measure) - font family, point size, bold, italics, etc. Flex provides us a way to access these font details through styles. By combining the two, it is possible to access the font settings for a specific UI control and construct a TextFormat class with that information. Once the TextFormat object is created, a call to TextFormat.getTextExtent() will give us the metrics we desire.
To get a list of fonts available on the client, you can use the static method TextField.getFontList() which returns an array of font names.
For whatever reason, this question got under my skin, and I started building out a Flex application that would allow me to easily change font styles and view the corresponding metrics. Since the question was inspired by the Java FontMetrics class, I thought it would also be fun to see how the JVM powering the Flex application would display and report on the metrics given the style information. The challenge then was how to display the server view of that font in a Flash application.
To render the server view, I created an image on the server containing simply the string of specified text using the provided font values. The remote object that manages this returns the path to the image and the metrics as reported by Java on the server. The application subsequently loads the image from the server and reports the metrics.
I take the liberty of cleaning up the last image requested by the client before the next image is created. I name my files via timestamp, which would likely only scale so far. Ideally one might use the session ID in combination with some other fairly unique value.
How a font will display is ultimately dependant upon many factors beyond basic style information. For example, a font displayed on a screen of 150 dpi will look substantially different from the same font displayed on a screen of 60 dpi. In the end, my application is really an exploration of those various differences as well as the font itself.
I run Flex on my Windows XP laptop and view the application(s) on the same system, so the reporting of the font metrics is expected to be very similar if not exactly the same between Flash and Java. This is indeed the case with differences varying only a small number of pixels if at all. It would be really interesting to see the Font Explorer application viewed on one OS while being powered by Flex on another OS.
At the end of the day, this is not a particularly useful application, but it is something I just had to build. And as is the norm, a Captivate demonstration of the application follows. I have also made the source for both the Flex application and the Java remote object available for download.