Text inside an irregularly shaped container?

[AtoZ]

I'm in the early stages of developing a stack where I want (ideally) to flow text into non-rectangular shapes such as a circles, ovals, or even more irregular shapes. This will happen repeatedly with different text, so I can't just fake it by hand placing the text on a card.

Unless I missed it, LiveCode does not have a built-in capability for doing this. I can think of a couple of approaches that might allow me to simulate the look I need (using the formattedWidth command and multiple passes through a loop). But before I invent the wheel again, I thought I would ask if anyone else has already come up with a way to do this.

[Mark]

Hi,

If you have really, really, really good ideas to do this, then I'll be happy to help for free because I need such a type of control too.

Best regards,

Mark

[AtoZ]

The approach I'm thinking about is absolutely NOT a "really, really, really good idea," since it won't be very efficient or particularly easy to implement. It won't even be quick and dirty -- try slow and dirty instead.

In the project I working on, I have a series of images, each of which has a different irregular area in which text will be placed. This is how I'm thinking of doing this:

1) Determine the width and starting position for each line in the in the shape:

a) Each image will be placed, one at a time, on a temporary card. (Their size has already been determined).

b) Call a short procedure (which I will write) that will replicate a series of single-line fields stacked down the depth of the card.

c) The amount of vertical space between the fields will be included as a parameter for the procedure. The desired vertical spacing is a function of the font being used. This will be determined in advance by simply experimenting with the line spacing for each font being used. (I actually plan to choose three different sizes for each font, with the final choice being made a run-time, depending on the length of the text being placed.)

d) Initially the fields generated above will all be the same width, which will be wide enough to cover the widest part of the irregular shape. This will be measured in advance and passed to the field generating procedure as another parameter.

e) I will then move the fields over the area of the image where the text is to go, and one by by one, manually adjust the width of each line so that it fits within the shape. Any empty lines above or below the fill area will be deleted.

f) Next, another procedure (also yet to be written) will record the number of fields on the card, the width of each line, and each line's top/left starting points. This info will be stored in the image's custom properties.

g) This will have to be done three times for each image for short, medium, and long texts.

2) At run-time, the text to be placed will be put in a looping procedure:

a) The number of characters in the text will be used to determine which size of type to use, and the appropriate data for the field positions will be pulled from the stored info in the image's properties.

b) The text will be placed in the first field, and using LiveCode's formattedWidth property, the text that will fit into the first line will be determined and the remaining text cut from the field and saved.

c) The procedure will then loop through to the second field with the remaining text place in it and the text for the second line will be determined as above,

d) The loop will continue until all the text has been placed.

That's what I have so far. As I said before, it slow and dirty. Any suggestions for improvements will be greatly appreciated. If there is any interest, I will post the final code (although it's hard to imagine that anyone else will have the same needs, or indeed patience, to do this).

[Mark]

Hi,

Using the formattedWidth is a good idea, but rather static approach isn't useful to me. I would be interested in a dynamic approach, using a polygon and trying to keep lines (or fields) within the boundaries of the polygon, without having to set the field widths manually.

I wouldn't use the number of characters in the text to decide on font size. I'd just reduce the fontsize by 1 point and run the whole procedure again as soon as the user types more text than fits in the field(s). You can adjust the field heights to the formattedheight of one single line.

Kind regards,

Mark

[AtoZ]

Mark, thanks for the suggestion about reducing point sizes, that will indeed save me a lot of time in setting up the program (I’m just hoping that the reiterations of the loop don’t take too long).

I was just reading in LiveCode's newsletter (for February) about some of the new features coming soon in version 5.5. One of them is paragraph level style setting. This means that instead of creating individual fields for each line and then resizing them, I will be able to more simply keep one large field for the text, and use a loop to break each formatted line (using the formatted Width command) into it's own paragraph then use the new textAlign to indent each line as needed. This will be useful enough for me, that I now plan to work on other aspects of my program first and wait for version 5.5 before tackling this challenge.

Thanks again for the input and suggestions. Hopefully in some future release of LiveCode we'll get the support for text in irregularly shaped objects.

[Mark]

Hi,

I don't know whether the formattedWidth will include the indentation. If that's the case, then you may be unable to use formattedWidth with individually formatted parapgraphs in LC 5.5. You'll have to test this.

Kind regards,

Mark