Resizing text with ems

[jimmyoneshot]

I want to be able to resize some text I have in a part of my site. What I mean is this - If the text is changed to a word that has so many letters that it exceeds the width or height of the p tag or container it is in it will automatically resize smaller to fit in. Is this possible with ems? If so I'm not sure how to implement it into my code.

Here's my container so far:-

    <div id="item_container" style="border:1px solid #CCCCCC; width:152px; height:100px; float:left;">
       <p id="r_text" style="float:left; width:152px; height:100px; line-height:100px; text-align:center; margin:0; padding:0; font-size:2em; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#cccccc">EXPIRED</p>                 
    </div> 

[jimmyoneshot]

Can I get an answer please?

[Ribeyed]

Hi,

em is the prefered method of sizing font because some browsers (IE) doesn't allow for pixels to be resized and therefore are not accessible.

In short by using em instead of pixel to declare your font size will not allow for dynamically altering the size of the <p> tag, what it does do is allows the browser to resize the text correctly when zooming in and out.

here is a couple of em articles:

http://clagnut.com/blog/348/

http://www.dave-woods.co.uk/index.ph...r-font-sizing/


regards


Ribs

[jimmyoneshot]

Aha gotchya.

What I need is the p tag containing the text to have it's font size resize if the font text within it exceeds it's width.

So for this would I need a javascript function of some sort which checks the width of the area the p tag is in and changes the font size to one that would fit in it based on some sort of calculation?

Does anyone know of any examples of this perhaps in jquery that is if regular css and html can't do it of course?

[Ribeyed]

Hi Jimmy,

Yes to your question. I'm not sure of the javascript code for an example however similar code for checking string size in pixels is c# would be:

Graphics graphics = this.CreateGraphics();
SizeF textSize = graphics.MeasureString("How long am I?", this.Font);

once you got the size of the string its simple to check if thats less than or equal to the size of area you want for the text.

regards

Ribs

[jimmyoneshot]

Cheers Ribeyed. I'll look into it.

JUST OFF TOPIC I noticed in your sig it says you are into Silverlight. I'm a freelance web developer and my main specialty is using Flex for RIA development but recently I've been going back to HTML, CSS and JavaScript as the RIA industry around my area is pretty lacking in the job market.

I was wondering how does Silverlight compare to Flex in the sense of it's syntax and actually learning how to use it? Is it an RIA area where a lot of jobs are available at the moment or what?

I'm trying to learn as many different web developing languages and platforms as possible to expand my opportunities. My idea is to learn a fair bit of everything and CLAIM I know a lot about everything in my cv then if an opportunity comes up in 1 specific area hammer that area like crazy before the job starts until I have a good knowledge of it.

Next I'm thinking of learning Ajax or Silverlight which is why I'm asking.