Multi-Column Layouts in Flash and Flex
Did some research and experimentation with multi-column layouts in Flash and Flex, or, more generally, having a single string get wrapped across multiple text fields. The demo below shows the progress so far.
This simple demo shows a string of text being automatically wrapped across four text fields.
When I first started looking into the problem I was happy to find a class for multi-column layouts in Adobe's newspaper layout example. Unfortunately, this implementation relied on the user specifying the number of lines per column.
In contrast, my version lets you place as many text fields as you like on the stage. Each text field can have different dimensions as well as different font styles. You simply tell the text wrapper manager the order of the text fields and what string to display and it automatically wraps the text.
The problem I've hit now, though, is dealing with HTML text. I figure the content will need to be at least partially parsed so you can maintain a list of which tags are open. Then, when you get to the end of the text field, you can close them all and re-open them at the beginning of the next text field.
However, even if that will work, I'm sure there will be some problems with text metrics of HTML content so I'll have to leave this problem for later.
Update: here's the source code for the above test using multi-column text.
Delicious
Digg
Reddit
Facebook
Google
Yahoo
Technorati
Comments
I've been doing the same thing and found that the ease of html parsing depends on your source html. Over here i'm dealing with extremely simple html - one string encapsulated by <p> tag with <br /> for breaks and <h1> to indicate headers. I manually add a </p> at the end of every textfield column in multicolumnview.as and start with one as well.
field.htmlText = "<p>" + remainder + "</p>";
or something like that
Thats enough for simple styling, but to be honest, we're moving the project into flex cuz strictly as3 css styling doesn't seem to be robust enough.
btw, why no source?
No good reason for leaving out the source code so it's up now (see update above). And yeah, having HTML that is guaranteed to be limited in complexity would definitely help. Having several nested tags makes for more work but it doesn't mean it's impossible.
Your example works as I expected in restricting drag selection of text to a single TextField. Buzzword somehow allows users to drag select across multiple paragraphs, and even across intervening tables. As far as I can tell each table cell is formed from a separate TextField as text flow across multiple lines works fine within table cells. Any idea how they were able to do that?
One theory (as yet untested) is to set event handlers on each of the text fields and manage the selection from event handlers. A manager would then need to keep track of all fields that have been selected. A further theory is that the tables are implemented as img elements that reference a movie clip id, that contains the table. The table is itself composed from multiple text fields with the borders drawn separately.
I am also curious as to how buzzword allows users to change the bullet character without including the bullet character in the text buffer. The AS3 documentation doesn't give any indication of how to do that. Of course you could stick a bullet character in the text, and fiddle around with tab stops, indent and blockindent, but that would make the bullet selectable and in buzzword it isn't. I tried the obvious idea of setting the TextFormat bullet property to a character value, but the value doesn't have any effect other than it being zero (no bullet) or non-zero (default bullet).
and what about the flash.text.engine package introduced in astro? examining it loosely, one will have more and detailed control over typography on all aspects; i guess the new TextBlock class would satisfy us graphical coders.
Post new comment