March 21, 2005
Full Justified Text Component for Flash

I just stumbled over an older experiment of mine that I somehow forgot to publish: it's a tiny component that allows to render fully justified dynamic textfields. Here is a demo that shows how it behaves - you can drag the lower right corner to resize the textfield:







As usual with my experiments, there's no documentation, but I hope that if you take a look at the FLA it shouldn't be too difficult to grasp how it works. Download QM_fullJustifiedText.fla here.

UPDATE: I just uploaded version 1.1 which has a "snap to pixels" option in order to render pixel fonts properly

UPDATE: as many people were asking for it I have created a version that supports a scrollbar. I didn't test this version thoroughly, but I hope it behaves well. Download it here

Posted at March 21, 2005 01:16 PM | Further reading
Comments

Very nice! I'm curious as to how you did it... would you be interested in sharing the source?

Posted by: Marcus on March 21, 2005 03:45 PM

This works pretty straightforward: split the whole text into words, add as many words to each line as the width (plus tolerance) allows. There is an optional limit up to which amount of words in a line get split up into single letters in order to squeeze or distribute them.

I tried this with CSS first in order to maintain a single textfield, but it is too imprecise especially with non-embedded text.

If you download the FLA you can see the source. It's released under the Creative Commons Attribution-ShareAlike 2.0 License: http://creativecommons.org/licenses/by-sa/2.0/deed.en

Posted by: Mario Klingemann on March 21, 2005 03:58 PM

Cool! - Do you have any dynamic (XML/TXT etc) considerations with this component?

What would you do to fill it up with external content? ;)

/Chief

Posted by: Chief on March 21, 2005 05:50 PM

The concept of the component is to take the content + format of an already EXISTING textfield and create justified text within the bounds of that textfield - so if you want to use external content you may do so - you just have to fill the target text field with the stuff you load and then tell the component to rerender it.

Posted by: Mario Klingemann on March 21, 2005 06:01 PM

Very nice, think I will link this one ;)
Joe

Posted by: eyezberg on March 21, 2005 09:10 PM

"The concept of the component is to take the content + format of an already EXISTING textfield and create justified text within the bounds of that textfield - so if you want to use external content you may do so - you just have to fill the target text field with the stuff you load and then tell the component to rerender it."

Any suggestions or example's anyone? ;)

Posted by: Chief on March 22, 2005 04:23 PM

Great component.

Is it feasible adding htmlText support ?

Posted by: Michael on March 29, 2005 11:38 PM

Great component, thanks !!
Can i scroll txt?
I'm having some problems,... ;-) one problem i can't.

Thanks again.

Frate

Posted by: Frate Aubets on March 30, 2005 06:50 AM

Scrolling, huh? Sounds like a good idea. Maybe I can include that in the next version.

Posted by: Mario Klingemann on March 30, 2005 11:00 AM

htmlText is pretty difficult that's why I didn't include it in this version. Maybe I give it a try once, but don't wait for it.

Posted by: Mario Klingemann on March 30, 2005 11:03 AM

It does not seem to be compatible with some code I am trying to use for actual location of htmlText

http://www.bit-101.com/forum/viewtopic.php?t=4085&highlight=

Although maybe possible to integrate it into your code?

Posted by: Justin L Mills on April 6, 2005 04:55 PM

As all words are placed "manually" by the component it should indeed be possible to add a method that would allow to return the _x/_y locations of single letters or words - at least for normal text that is. As I stated before to use htmlText it would make it necessary to parse the whole text first which is some effort that I tried to avoid until now.

Posted by: Mario Klingemann on April 6, 2005 05:17 PM

Very cool... I'm glad I stumbled on this, I always wondered why macromedia didn't include full justified text in the first place. They definitely need more text control.

What I was actually looking for was a way to create text fields that are not simply rectangular. Maybe a way to dynamically fill any shape. Circle, star, whatever. Circular would be the most effective.

Have any of you seen anything like this, I've been searching like mad trying to find it.

Posted by: elliot on April 11, 2005 11:47 PM

This is really nice.

One question, You state above that after loading external/dynamic text into the field all one needs to do is "then tell the component to rerender it." I'm curious how one would do this (trigger the component to re-render the text).

Any advice would be hugely appreciated.

Posted by: rich on April 15, 2005 11:25 PM

To rerender or reflow the text just call the component's refresh() method.

Posted by: Mario Klingemann on April 16, 2005 01:31 AM

amazing... thanks.

Posted by: flabbygums on April 16, 2005 02:59 AM

hehehe... very nice!
I did something very similar some time ago... but in form of a prototype "createJustifiedText(name, depth, x, y, width, text, format); "... It's pretty much the same but simpler, and probably slower ... you can check it out here:
http://www.ventdaval.com/foros/justifiedText.html
http://www.ventdaval.com/foros/justifiedText.as

Cheers...

Posted by: Ventd'Aval on May 3, 2005 03:21 PM

Very nice. The challenge still remains to build this with htmlText and make it work with mixed formatted text (like different font sizes / fonts etc. within the same text block). Anybody daring enough to give it a try?

Posted by: Mario Klingemann on May 3, 2005 03:28 PM

I would rather wait for MM to solve this issue...

yeah, I chicken out :P

but actually it shouldn't be so hard if you do first an html parser, and then the actual format is given by the textFormat properties... uhmm... maybe :P

Posted by: Ventd'Aval on May 3, 2005 03:46 PM

Yes - one idea I still have to test is to use the XML Object to parse the html. Well, maybe I should give it a try...

Posted by: Mario Klingemann on May 3, 2005 03:49 PM

Well, I always found something very interesting on your blog! Nice work, keep flashing :)

Posted by: Denis - Najgori on May 7, 2005 04:01 PM

Great component !!

but the big questions is, it's posible to print ?

Posted by: cHarlos on May 25, 2005 10:32 AM

I have read all the comments, and where Mario says to call the refresh method... but I have no clue on how to access the components method within my flash file after the text is loaded. I have searched for about an hour or so and have not figured out how to call methods in a component.

Can anyone explain or show the exact line of code needed to call the method?

Posted by: Hackit98 on May 26, 2005 08:21 AM

So no one has any idea on how to call the refresh method?? The least someone could do would be to give a link to a tutorial or help site on how to do it. Just anything. Mario? Why is there not an email on your site for you?

Posted by: Hackit98 on May 27, 2005 08:12 PM

Well, it should actually be this.demoBlock.refresh() if you use the demo file as an example.

Posted by: Mario Klingemann on May 27, 2005 09:53 PM

i tried the component, love it.
but i wish there was an as 2.0 class version also. So, i'm planning to expand the component to a class.
and i'll try to:
fasten the algorithm so that it will work much faster with large blocks of text;
implement additional methods such as setWidth(), setHeight(), etc.
define the text field itself as a property of the class.
write documentation...

i'll inform you when i'm done...

Posted by: afxrephlex on June 7, 2005 01:11 AM

oh, i forgot;

i'm also a planning to embed a scrolling mechanism to it.

and maybe i can try the htmlText support...

Posted by: afxrephlex on June 7, 2005 01:14 AM

Shouldn't be too difficult to convert it to a AS2.0 class. BTW - I've already written the HTML parser (in AS 2.0), only the layout engine is not done yet. Here is a quick example: http://www.quasimondo.com/scrapyard/htmlParser.swf - on the right side is a normal textfield with HTML formatted text. On the left side it's split up into single textfields that are individually positioned. Here's the source: http://www.quasimondo.com/scrapyard/htmlParser.swf

Posted by: Mario Klingemann on June 7, 2005 11:18 AM

Hallo!
Very good tut!
I have only ONE big request!! VERY BIG!
How can I put it to the scroll dynamic text?
I have done the dynamic txt form this tut - http://otljarocin.sisco.pl/webmaniak/kurs/web_kurs/web_kurs6.php and I can`t put your tut to it....

Can you help me??

Posted by: matys on September 12, 2005 12:19 AM

Hello:
It doesn,t work if you use a mask for the text in the player 8. It,s posible to repair this?

Posted by: pfphoto on September 25, 2005 12:45 PM

If you use Flash player 8 you will not need my component anymore because the new player supports full justification in textfields natively.

Posted by: Mario Klingemann on September 25, 2005 02:37 PM

Hi Mario:
I use MX2004 but with the new player 8. But I find the solution. It was a problem with the mask. I repeat the movie and now your component works perfect.
Thanks a lot
Are you planning a version to use scrollbar?

Posted by: pfphoto on September 28, 2005 12:12 AM

man u r legend!!!!!!! thanks a lot.........

Posted by: ankit on December 12, 2005 01:42 PM

can we have scroller in it........pls if u r done with the update post the demo

Posted by: kid on December 12, 2005 03:00 PM

this is fantastic ..It helps me a lot

Posted by: alex on February 17, 2006 01:33 PM
Post a comment
Name:


Email Address:


URL:


Comments:


Remember info?



Thank you!

Most Visited Entries
Sketches, Works & Source Code
Lectures
Contact
Backlog
In Love with
Powered by
Movable Type 2.661

© Copyright Mario Klingemann

Syndicate this site:
RSS 1.0 - RSS 2.0

Quasimondo @ flickr
Quasimondo @ LinkedIn
Quasimondo @ Twitter
Quasimondo @ Facebook
Quasimondo @ MySpace
Quasimondo is a Bright
Citizen of the TRansnational Republic
My other blog in german
Impressum


My family name is written Klingemann,
not Klingelmann, Klingeman, Klingaman, Kingemann,
Kindermann, Killingaman, Klingman, Klingmann, Klingonman
Klingemman, Cleangerman, Klingerman or Kleangerman

profile for Quasimondo at Stack Overflow, Q&A for professional and enthusiast programmers