Text Resizing

[azayor]

Is there any way to automatically resize text relative to the text's containing element, using CSS? For example : If the box element containing the text expands the text size itself will proportionately expand. If not using CSS is there any other way of doing it?

[jeffman]

Offhand, that sounds more like javascript. I'm curious: what makes the box expand? Does it do so dynamically, or does it simply assume a size at page-load?

[azayor]

Offhand, that sounds more like javascript. I'm curious: what makes the box expand? Does it do so dynamically, or does it simply assume a size at page-load?

Lets say you have a web page with a liquid layout, so all of the containing boxes scale relative to the browser windows size. If you increase the size of the browser window, the containing boxes expand, but the text size stays the same size. Is there a way to automatically resize the text relative to its containing boxes size?

[aspnetguy]

if you do this

#container { font-size: 18px; }#child { font-size: 80%; }<div id="container">  <div id="child">some text</div></div>

The child containers text will be 80% of 18px. If you change the parent containers size the child will always be 80% of that size.

[azayor]

if you do this

#container { font-size: 18px; }#child { font-size: 80%; }<div id="container">  <div id="child">some text</div></div>

The child containers text will be 80% of 18px. If you change the parent containers size the child will always be 80% of that size.

It didn't work, But.. Yes, you are correct. The child's text will always be 80% of 18px which = 14.4px. However because the % is relative to the px not to the container element the font is a set number and will always stay the same, even when the container element is expanded.So how do you set the font relative to the container size?

[Synook]

So how do you set the font relative to the container size?

I think you'll have to use JS.

[Kingy]

Yes I would imagine so, you can maybe set it in increments so if you detect around a certain range of width it will change the font size. I'll show you a quick example BUT mind you what I've got here is something I'm working on and it detects screen widths. All I'm giving is insight, not a solution.I set up my variables like this

var width = screen.width;var res = (((!(128-width))*1)+((!(176-width))*2) etc.. you should get the idea rom here.

Then I asked it to load a stylesheet depending on width.

if(!(res)) res = 4;if (res=='1') {document.write('<link rel="stylesheet" type="text/css" href="style_mob.css"/>');}

Here my default res is my 4th one that I've set. The top code basically defines a number for each width. So my second code is if the resolution fits that particular one then write this stylesheet in. That's a little more than you need to be honest. But I suggest following something like that and use getElementById for your box maybe with regards to the width as opposed to the screen width. Because you got this dynamic div what I don't recommend is making a separate stylesheet like I have because like I said mine is for a different purpose. I hope that gives you a little direction.[edit]By the way I forgot to mention it's javascript in case you didn't know.

[aalbetski]

you may want to conside using zoom (may not be supported everywhere)<div style="zoom:200%">This is x2 text </div>then you can change the value in code on a resize event

[azayor]

Yes I would imagine so, you can maybe set it in increments so if you detect around a certain range of width it will change the font size. I'll show you a quick example BUT mind you what I've got here is something I'm working on and it detects screen widths. All I'm giving is insight, not a solution.I set up my variables like this

var width = screen.width;var res = (((!(128-width))*1)+((!(176-width))*2) etc.. you should get the idea rom here.

Then I asked it to load a stylesheet depending on width.

if(!(res)) res = 4;if (res=='1') {document.write('<link rel="stylesheet" type="text/css" href="style_mob.css"/>');}

Here my default res is my 4th one that I've set. The top code basically defines a number for each width. So my second code is if the resolution fits that particular one then write this stylesheet in. That's a little more than you need to be honest. But I suggest following something like that and use getElementById for your box maybe with regards to the width as opposed to the screen width. Because you got this dynamic div what I don't recommend is making a separate stylesheet like I have because like I said mine is for a different purpose. I hope that gives you a little direction.[edit]By the way I forgot to mention it's javascript in case you didn't know.

Thanks, I'll try it out.

[Kingy]

you may want to conside using zoom (may not be supported everywhere)<div style="zoom:200%">This is x2 text </div>then you can change the value in code on a resize event

Huh? Zoom? Correct me if i'm wrong but that's CSS3 isn't it? If so I wouldn't recommend using it because it's not widely supported YET.So until that day comes, seems like the majority vote javascript.

[aalbetski]

Huh? Zoom? Correct me if i'm wrong but that's CSS3 isn't it? If so I wouldn't recommend using it because it's not widely supported YET.So until that day comes, seems like the majority vote javascript.

Vote? This isn't a contest. Its a sharing of information. I mentioned it because it is out there (and I noted that it may not yet be supported). How do I (or you) know what his application is. I work in a company where we require a certain browser etc... In my case that is the best answer. Put the knowledge on the table and take what you want, or not at all, but at least be aware

[Kingy]

I know it's not a contest, I used the word vote loosely there to suggest that people posting in this thread seem to suggest the same thing. I got no problems with him using it if it's alright for him to use, but just pointing out that it's not supported widely because we're not sure what the nature of his work is.