Making Text Fit

steve holmes's picture

I am sure this has come up but I haven't been able to find anything on it. I am trying to do some setups that displays text in fixed areas of the screen. I am not sure now much text will be used and I don't want it to over run over other items on screen. So what I am trying to do is use maths to change the font size depending on the character count. Has anyone successfully do this and anyone have any tips. Cheers Steve

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

cybero's picture
Re: Making Text Fit

Actually the idea of using character count and some scripting to get the screen to re-adjust the text display is very neat.

Obviously font size will affect how much screen space is required to render a given number of characters, offset and shift will also make some real difference too.

The key items with Image with String patch are the width and height input.

See attached file for demonstration.

Apropos where on the screen to put the text, I like to put each individual text item into its own macro patch and then govern its position from there - do remember to check it on custom and fixed ratios and also full screen to make sure you've covered all the positional bases you need to cover.

PreviewAttachmentSize
imagestring.qtz4 KB

steve holmes's picture
Re: Making Text Fit

I get the idea of using the height and width settings in image with string, but what I am trying to do is have a fixed sized 'box'. So fixed width and height for image with string, and what I need to do is change the font size to make sure all the text in the string (read from a file) is displayed in this area. Cheers Steve

psonice's picture
Re: Making Text Fit

I guess it's possible, but you'll have to use fixed-width fonts. Otherwise text with many iiiis will be much shorter than text with many wwwwws, and the size will be really hard to predict.

You'll also have to consider line breaks - a sentence with lots of short words will wrap nicely, but one with a few long ones might leave half a line of whitespace.

cybero's picture
Re: Making Text Fit

Even though Fixed width fonts are somewhat more predictable , it all seems to boil down to the following..

Is the text dynamic and of a fluctuating number of characters ?

If so then some form of character count and resetting of the Image width and Image Size as well as possibly altering the font size could be programatically achieved. The exact requirements of the Image Width / Height resize will inevitably depend to some extent upon the type of font used, fixed width or not, you can easily spill over the bounds of the renderer patch you're using. Percentage based seems the way to go for adjusting the font size, at least for calculating how much to shift up or down if the aim were to be say to completely fill a fixed area regardless of text amount.

The 'good' thing about too much text is that it simply doesn't render once the render space fed into has been used up.

Is the text fixed and immutable?

Then you have an entirely separate requirement that doesn't need such a procedure in place - interesting problem though it is.

The Image width and the Image Height of the String in Image patch makes a whole lot of difference.

Once you've decided where your text boxes are going to be then you can simply give them their respective absolute position as Billboard or as Sprite.

That position will be respected , relatively speaking, at full screen.

Unless you want to have each text box blocking out anything else beneath it you can easily set its Blending to Alpha.

Of course the other item that can also be altered is the physical dimension of the rendering space. Sprite and Billboard have x and y position, but Sprite also has the facility to shrink back along the z axis and of course to zoom up along the same axis.

If you really do have an elastic amount of text, of a dynamic and mutable kind, then , in conjunction with dedicated text spaces of fixed position, with the pre-measured set of space requirements for the text to be rendered, e.g, knowing that for every x+ or x- number of characters you need to decrease or increase your Image Width and Image Height accordingly you could feed that in.

Finally, although Fixed Width are pretty predictable, they aren't the best for Quartz Composer, as other fonts are far more readable and character count and screen space wise they don't seem to take up much more space per 100 characters than Monaco and are equally predictable. Other fonts are however totally out of wack size and rendering wise and seem to follow rules entirely of their own :-)

Above all else , I'd stick to using Dynamic Dimensions, possibly exploit some negative kerning shift and rest assured that whatever else, my text items will only render in the space they are given.

cwright's picture
Re: Making Text Fit

taking a different approach from character counting and kerning tweaks etc, what if you render the string, and then use Image Resize to fix it to the size you need? With some logic to keep aspect ratio stuff sane, you should be in business.

Here's an example without any aspect protection (so long strings get squished)

PreviewAttachmentSize
fixed string size.qtz3.38 KB

leegrosbauer's picture
Re: Making Text Fit

Off topic, but ... thank you for the Patch Time + Math Expression timer on the multiplexer. I do see how time and source count are adjusted. I hadn't known how to do any of that. Useful. I made a clip of it. Thanks.

jersmi's picture
Re: Making Text Fit

That is a very good solution, Mr. Wright. Using render in image with the Image Resize options and Image with String height/width, it's quite versatile.

jersmi's picture
Re: Making Text Fit

Off topic using your patch, Chris-- is there a way to get keypresses to update the signal with the Kineme String to File patch while typing in, say, TextEdit (QC not in focus)? Or on file save or something?

cybero's picture
Re: Making Text Fit

Nice and simple solution works AOK with fairly short bursts of text.

For lengthier text segments some different and more considerate resizing , conditionally set is what I've been looking for since picking up on this post.

Noted that you used Dynamic Dimensions setting. I'd been finding it much easier to get my head around than using Fixed Dimensions. However I've been experimenting recently :-)

As it happens I am retracting my preference previously as stated regarding using only Dynamic Dimensions, having gotten some interesting and readable results using Fixed Dimension font settings, some of the settings for which seem quite counter intuitive even though they are actually pixel based and not units based.

It comes as something of a shock to see just how high the font size needs to get to render the text string.

See attached example. Still has lots of rough edges but I am seriously interested in getting some type of effective resizing on the fly setup for text boxes.

Another really nice thing about Fixed Dimensions is that you seem to get fuller formatting of left, right and justify and so on.

Next line count and character count, taken directly from the Image with String patch how to incorporate these into the responsive re-sizer.

Quick postscript - just did a revamp of the fixed string and replaced the existing strings you used with even more Samuel Beckett's Waiting for Godot Act 1 to excellent results :-)

Still got plenty of experimenting to do , Cheers for the original multiplexed example.

PreviewAttachmentSize
WaitingforGodot.qtz286.02 KB
fixed string size fixed dimensions.qtz4.11 KB

steve holmes's picture
Re: Making Text Fit

What I am working on is using the charchter count and string length and compare the 2 if they are equal all the text appears on screen, if not then I am working on a stop watch into maths into font size. When all the text fits it stops the stop watch and holds the text size. I have feed this into a numeric range to speed the process up. It works nicely but the conditional patches do not always work 'instantley so there is a variablity. Has anyone got an idea to implement this in javascript very quickly I would like the view not to see the text till it fits. I suppose I could feed it in once it fits and the conditonal statment is true.

Anyway hope this helps someone. Cheers Steve

PreviewAttachmentSize
text fit.qtz5.78 KB