Jump to content

Text Resizing


azayor
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...