CSS: Scale font-size to fit DIV?

Hi

I’ve got a DIV container (fixed height/width) that will contain dynamic text.

Is there a way to use CSS (failing that, DHTML?) to scale the dynamic sentence to always fit within the div containers dimensions?

Hope to hear from someone soon

Thanks

Haris

Can we see at a sample yet?

Do you mean the text is scrolling across the screen or is different text generated each time the page is opened?

You can set the text size via CSS but Firefox will always let the visitor override the font size. IE won’t on standard settings. Short of having a container that is fluid in size I guess there may be some javascript method of restricting it.

If I’m not understanding your problem properly, please feel free to elaborate! :stuck_out_tongue:

Thanks for the quick reply fisherboy!

Sorry I haven’t made an accessible sample yet,

no, not scrolling text but dynamically generated (PHP) text which remains static on the page after each page load.

The dynamic sentence will be from 6 to 9 words long, sitting in a banner at the top of the page. This banner/container is of fixed dimensions. The container musn’t change shape. I want the text’s font-size to change in order to fit this DIV snugly.

If there is no native way to do it with CSS, I’d be happy to receive pointers on achieiving this with javascript?

Thanks

Haris

I think you’ll run into problems doing this because even if you get the text to resize to fit the box on the screen - what happens if someone increases the font-size in their browser? It’s likely to break the layout.

fair point, do pixel size values resize too?

The dynamic sentence will be from 6 to 9 words long, sitting in a banner at the top of the page.

If you are coding this in php then I suppose you could add a different class to the sentence dynamically depending on the number of words etc (e.g. class6,class7,class8,class9). You would then just need to set the font-size of those classes accordingly in the css.

Otherwise this is more of a scripting question :).

Hey! I could count the number of letters in the string and even write an inline CSS statement to contain a dynamically generated font-size pixel value.

Sounds good to me Paul, thanks for the advice!

Haris

That is definitely the way to go. FF will still allow users to change font size and break the layout but this can happen anyway.

Good luck.

Will you show us the result?

Thanks Fisherboy! As soon as I have it up and running I’ll post you a note to let you know.

You’ve made me a little concerned about FF though… Do FF users have to actively change their settings AFTER the page has loaded or would their presets effect the original design?..

If presets change the design I may rethink using CSS(pixel fonts)/PHP for this…

I may then turn to a flash component for the banner… can FF users mess with that!? :slight_smile:

Do FF users have to actively change their settings AFTER the page has loaded or would their presets effect the original design?..

Leave the user alone :slight_smile: he can change the size of text if he wants - after all its his browser :slight_smile:

You can’t control everything as I could load my own stylesheet anyway. Just make sure that if text is resized via the browses then your layout scales well enough to be usable. It doesn’t have to be pixel perfect at larger font-sizes but it should still be usable.

<chuckle> I understand your point Paul, but this is more of a design experiment rather than a public site that is intended to be accessible under every circumstance.

If I WAS designing a highly accessible site for this case I wouldn’t be so concerned about the aesthic design however… I am! :wink:

@user: It’s my design you hear! mine! Go find a WIKI or something!..hehe

lol - i understand where you are coming from but i thought I’d just mention that in the end it will still be the users choice. Whatever you do I can undo (with the right browser in tow).

I could even switch it off :slight_smile: (rarely happens though)

I agree, it should be the users choice. After all if the site is built to serve a userbase it had better well serve them content in a form that ‘they’ wish to access it.

I like your picture btw, I’m finding it difficult to look at and not titter :lol:

I like your picture btw

lol - That was a gift from andy (frozentoast - mentor) our graphics wizard :slight_smile:

:slight_smile: I’d like to see a fight between him and Mr Blobby. Haven’t decided who I’d bet on yet…