Resizing

**Webino** · 10-10-2012 01:43 PM

Hi!

I'm having a problem with resizing text. I uploaded picture for illustrative purposes.
http://i46.tinypic.com/34ys9s7.png

The problem is. The big box is the parent div in which there is a smaller div (smaller box) that contains an image. The rest of the bigger div should be filled with text (red/pink lines). Text is formatted in paragraphs (<p> .... </p> <p> .... </p>) and there are some links within text.

Sizes of divs are dynamic, they change when window size changes. So I want the font size to change to fit the main div. Is there any solution? I would really appreciate it.

Cheers!

**cbVision** · 10-10-2012 04:00 PM

It sounds like you're looking for "responsive font size." If so, here's a great plugin:
http://fittextjs.com/

**Webino** · 10-10-2012 04:16 PM

Hey there!

Thank you for your response. Still I have one question - how can I use mentioned script in html... let's say I have html code somewhat like this:

<html>

<head>
</head>

<body>
<div id="main_div">
<div id="image_div"></div>
<p> text </p>
<p> text </p>
</div>
</body>

</html>

**cbVision** · 10-11-2012 08:37 AM

Something like this?

$('#main_div p').fitText();

**Webino** · 10-11-2012 10:41 AM

Shouldn't i write <script> something something </script> somewhere with the path of the script.
And where should I place this line you wrote?

Sorry for those questions, I haven't done anything like this before. Yet, I would like to make a website by myself. So all the help is appreciated. Thanks!

**cbVision** · 10-11-2012 03:21 PM

Can you post your current code? I'll tell you where to place it then.

**Webino** · 10-12-2012 02:47 AM

Hey! Thanks for your response

Here's my html code:

<html>
<head>
</head>

<body>
<div id="taust" align="justify">

<img src="images/1.png" width="30%" height="auto" alt="1" id="top_foto">
<img src="images/A.png" width="auto" height="15%">

<p> text </p>
<p> text </p>
<p> text </p>
<p>text <a href="link" target="_blank">Link</a>!</p>

</div>
</body>
</html>

As you can see, there is the main div called "taust" and there is div "top_foto" inside it. There's also one additional photo and text with hyperlinks.

**cbVision** · 10-12-2012 11:01 AM

Alright, I think I'm getting a better understanding on what you're trying to achieve. Give this a look:
http://jsfiddle.net/QPdh9/3/

**Webino** · 10-12-2012 12:09 PM

Thanks for your response, but I have to admit it, it does not work the way I would like. This fits the last row of each paragraph, but I would like to fit whole text into the div "taust". Because if I change my browser's window size, the size of the div "taust" changes, but the text size does not change, and breaks out of the div, but I would like the text to fit the div, yet I would not like to stretch my div. So I would like to manipulate the font size in order to fit it in the div. I think it is not possible just using html and/or css, that's why I would like to know, how to use the script you mentioned.

As you can see, text breaks out of the div
http://jsfiddle.net/QPdh9/7/

**Webino** · 10-14-2012 07:24 AM

Hey, can anyone show me how to use this script: https://github.com/davatron5000/FitT...ery.fittext.js

in this code, so that the text would fit into div
http://jsfiddle.net/QPdh9/28/

I would be really grateful!

**cbVision** · 10-15-2012 10:26 AM

Webino,

I'm still looking at this. That script seems to handle fitting text horizontally. It sounds like you need something that will fit the text both horizontally and vertically.

**Webino** · 10-16-2012 04:48 AM

Yeah, it should be simple procedure - if the text breaks out of the div, then decrease font-size. And function should do it until it fits. I would do it myself, but I don't have the skills writing javascript.

Still, thanks for your time and effort! Seems like no-one is able to help me

Thread: Resizing

Thread Tools

Display

Resizing

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions