This page describes the next project of PHP Font Image Generator 2

Introduction

The web font facility, one of which was defined in the CSS2 Font specification, makes it difficult to use particular font in website. An ideal way to embed font is to specify the @font-face rule and its descriptors, however, the only implementation is Microsoft's WEFT as far as I know. Unfortunately for web designers, the WEFT only supports Internet Explorer and it seems to be not spread widely for that reason or the others if any. I like the web standard, but coincidentally don't have any idea why we use it where few browsers support. In fact, the W3C mentioned a disadvantage of the CSS2 Font in the SVG Font specification.

Over the past few years, there has been plenty of discussions about the Fahrner Image Replacement (FIR), and now is so famous as to become a web standard technique. Although many revisions sprouted up (Dave Shea consolidated them excellently), the original idea of FIR is to embed text image in the background of hidden text content though CSS. It would be friendly for search engines and screen readers, but soon afterward Joe Clark pointed out the facts and problems of its behavior on screen readers.

Instead of unsafe CSS hacks of FIR, Peter-Paul Koch proposed the JavaScript Image Replacement (JIR). The approach of JIR is to replace DOM text nodes with an image element after determining whether the browser supports displaying images, on the assumption of screen readers not loading them. Stewart Rosenberger extended it with dynamic text generation and support for printed media, in which normal texts are rather desirable than low-resolution images.

More recently, the Scalable Inman Flash Replacement (sFIR) provided a web font solution using Flash plugin. Like the JIR, this replaces DOM text nodes with a Flash element in accordance with the CSS defined in webpage. I think this is the best way to embed font in consideration of rendering quality, accessibility, and simplicity.

All those techniques are well considered and practical. But a problem is that they don't support inline text replacement under the CSS's inline formatting context, where normal texts and text images are smoothly layouted in mixture, where its line will break at the edge of the bounding rectangle of the container block dynamically expanding and shrinking itself.

The PHP Font Image Generator had too many bugs and potential problems on handling font metrices, regular expression, and image transparency. For not to repeat the same mistake, and to realize the inline text replacement, I've been working on the next project for a few months. One part of the project is the Sgss Library which provides general-purpose PHP 5 classes to handle font, graphics and related data. Nearly 80% of its development has been completed at this time. Another part is the Scalable Inline Font Image Replacement (Sifir). This will support dynamic image replacement of text nodes with images, and response to text resizing in browsers.

Basic Concepts

Marginal Adjustments

In order to layout text images in the same way to that of notmal texts, each words or characters will be splitted into individual images. The bounds of the image must be the least rectangle that encloses shape of every glyphs (vlB). Each images or corresponding elements have marginal adjustments consisting of top, right, bottom and left margin properties and vertical align. Given the ascent and descent of its font, and height of the line to which the images are to be inserted, marginal adjustment will follow:

top_margin = (line_height + ascent + descent) / 2 + llB.y1 right_margin = llB.x2 - vlB.x2 bottom_margin = (line_height - ascent - descent) / 2 + llB.y2 left_margin = llB.x1 - vlB.x1

With this adjustments, text images will be smoothly layouted in mixture with normal texts. For example in the same font size (left shows without adjustments, and right shows those applied):

When the size of text images are larger than that of normal texts:

And when text images are inserted onto empty lines:

A remaining problem is that the images will overflow or underflow the edge of containing block, when the left/right most glyph has the left/right side bearing whose absolute value is considerably large.

Glyph Transformations

I received some requests of kerning, horizontal/vertical scaling, and slanting like Photoshop. While GD does not supports any transformation of image coordinates, I decided to make the transition to ImageMagick as the graphic engine, which is available for PHP in the Imagick PECL extension or the MagickWand for PHP.The ImageMagick supports two-dimensional affine transformation (see Sgss_Graphcis_Transformation). Now we can linearly map any two-dimensional geometry!

Kerning simply adds or subtracts the location of glyph origins. Horizontal/vertical scaling also simply transforms glyph from its origin. Slanting transforms glyph as the following affine transformation matrix:

[ 1 -tan(o) 0 ] A = [ 0 1 0 ] [ 0 0 1 ]

where o denotes oblique angle.

Additionally, rotation transform follows:

[ cos(r) -sin(r) {w - v * cos(r) - u * sin(r)} / 2 ] A = [ sin(r) cos(r) {u * (cos(r) - 1) - v * sin(r)} / 2 ] [ 0 0 1 ]

where

w = {advance * |cos(r)| * hs} + {(ascent - descent) * |sin(r)| * vs} u = (ascent + descent) * vs v = advance * hs

and r denotes rotation angle, hs and vs denotes horizontal/vertical scaling factor.

continues...