There are a lot of nice text features in the new flash text layout framework but obviosly there is still one important feature missing: Hyphenation. Until today, there is no native hyphenation support in the flashplayer. I decided to fill this gap by porting the Hyphenator.js library by Mathias Nater to ActionScript: as3hyphenation. In this post I’ll demonstrate text hyphenation in flash.

Demonstration

Here you see the hyphenation in action. You can choose one of the currently supported languages and resize the text field to see the hyphenation changes.

Usage

The usage is pretty simple. To hyphenate the text of a textfield you only have to call the hyphenateTextField() function and provide the text language and the textfield instance as parameters.

// creating a new textfield first
var tf: TextField = new TextField();
tf.multiline = true;
tf.width = 400;
tf.text = 'long text that goes over multiple lines';
addChild(tf);
// let's hyphenate
Hyphenator.hyphenateTextField('en', tf);

Download & License

You can download as3-hyphenation from Github. It is published under LGPL. Update (May 20, 2010): the hereby presented algorithm does only work for textfields without stylesheets. I’ll try to extend it in the next weeks. Update: I extended the Hyphenation class with support for html text and stylesheets. Thanks to Gary McGhee an his port of John Resig’s HtmlParser.

Comments

Murat Bezel (May 20, 2010)

The point is that the rendering of Firefox & Co. with @font-face is horrible and for me unusable. With flash the fonts look great even at small sizes and still remain selectable text (opposed to cufón) - I think I should do an example comparison page for everyone to see. So I want to try to do all font work on my website with sIFR. I’m really only missing the combination with hyphenation that is almost there.

I had a look if I could do it myself - only 400 lines of code and Flash telling you the lines with errors if you just try to compile the script as AS2, but there is nothing on the web concerning back porting, so I’m stuck already with “package net.vis4.text.hyphenation”. Obviously the package definition is new to AS2 and there is no explanation on how to do that in AS2.

Murat Bezel (May 19, 2010)

Any chance to do this in AS2? That is needed to make it work in conjunction with sIFR.

Gregor (May 19, 2010)

I think the back porting of as3-hyphenation to AS2 won’t be that difficult since the main class is only about 400 lines of code. Unfortunately, I have to earn some money so don’t have the time to do this right now. By the way, why do you want to use sIFR while there are so many other nice ways of doing dynamic text replacements like @font-face or cufón?

Murat Bezel (May 20, 2010)

typo: “new to AS3” and not “new to AS2”

Martial (Sep 23, 2010)

Ok It’s been a long time.

But the package definition in AS2 doesn’t exist, however if you want to use packages you’ll have to do this :

Let’s say we have a package bar.foo with a class CustomClass, it will become :

class bar.foo.CustomClass

Tom (Oct 28, 2010)

Hi,

I would like to know if you’ll update your class to support TLF Textfield ? Thanks.

Chetan (Aug 08, 2012)

Thx for this useful class. I used it and it worked like a charm. But when I set the TextFormat property and embedded fonts, it breaks and doesn’t seem to hyphenate it. Could you point me to an example as the .swf file example is also broken on your website.