The TextFlow class allows you to flow text between text fields easily in Flash player 9. It has configurable support for orphans and widows (lines left at the start and end of a field respectively), as well as a simple API for getting the "overflow" from any field (or the whole flow).
It builds on the TextFlowLite class I posted a few days ago, sharing the same functionality and adding the following APIs:
// change orphans and widows (defaults to 2): myTextFlow.orphans = 3; myTextFlow.widows = 2; // get any text that overflows past the bottom of the last text field in the flow: // this can be handy for paging. myTextFlow.getOverflow(); // get the text that overflows past the 2nd text field in the flow: myTextFlow.getOverflow(1); // change the flow's text fields: myTextFlow.textFields = [fld1,fld2,fld3];
Here are a couple of demos. The first is nearly identical to the demo for TextFlowLite, but it takes advantage of the getOverflow method to display a "more" indicator when the text overflows the last field. It also has orphans and widows set to 2, so you should never have a single line of text dangling at the top or bottom of a field.
This second demo shows another use for these classes: fitting dynamic text to a shape, or flowing it between shapes. I'm actually kind of happy with how my vector Christmas decorations turned out. :)
You can download TextFlow and both of the demos by clicking here.
The third version of this set "TextFlowPro" will be released next week some time. It supports selection, copying, tab ordering, editing, and more. I had forgotten how complex it was, and it's going to take me a while to clean it up. Even with that, it might still be mostly a tech demo due to some minor issues I haven't been able to resolve.
Comments (7)
Aww, I was working on exactly that (fitting a text in a shape). Uhm, ok, less work to do then... I'll start to work now on stop poverty (hint hint ;D).
Nice one Grant! :D
Posted by: Mr.doob at January 7, 2009 12:55 PMURL: http://mrdoob.com
very nice work!
Posted by: valentino at January 7, 2009 02:36 PMevery time i read your classes they seem like poetry :) keep up the good work!
URL: http://www.fuoridalcerchio.net
Great work Grant! Since you've already paid so much attention to the widows/orphans situation you might also be interested in addressing the 'other' meaning of 'widow' - '...an uncomfortably short (e.g., a single word or two very short words) final line of a paragraph.'
In my typesetting days we'd never allow a single word as the final line of a paragraph. I know it's nit-picking but I suspect that's the same reason you wrote the widow/orphan functionality in the first place... This would just be the icing on the cake!
Posted by: Chris at January 7, 2009 03:32 PMURL: http://www.chrisfoster.com.au
Wow that x-mas demo is very impressive!
Posted by: dVyper at January 8, 2009 01:08 AMURL: http://www.fatal-exception.co.uk
Hi Grant,
Well the text flow class is a great idea, I can see a lot of places where it could go. As an usability enhancement for the first example, I would make the "more" indicator a button that shows the entire text via a tween. Well anyway, great class.
Posted by: radu at January 9, 2009 01:47 AMURL:
Great Class! I, like Chris, was also taught that a widow can also be a single word on its own line, much like the word "instance" in the 3rd paragraph of your first example. We go so far as to look for these types of widows in our Quality Assurance process. If there is one word alone, we'll push another word down to be with it, or we'll expand the textbox until there isn't a widow.
Posted by: Tim K at January 12, 2009 06:58 AMURL: http://timkindberg.com
What about do flow HTML text? Can you do it? I need to use htmlText and I can figure out how to flow htmlText.
Posted by: Marcos Sbert at January 27, 2009 04:28 AMURL: