Forums

XaviJr

I have some div with 250px width and 500px height and here's what i want to do:
- put some words in that div with br's next to it
- adapt font size so that those words occupy all div width (bigger words with small font size and vice versa)

Is this possible with only css? If not, is it possible with anything?! :p

Thanks in advance!

Johnnyb

Hey, this isn't going to be achievable with CSS alone, but you could certainly do this using jquery/javascript. For example you could enclose each word in a span, measure the width of that span, divide the width of the parent div by the span width, then multiply the font-size of the span text by that number.

i.e: (div width/span width) * span font-size

XaviJr

well, i'm not an expert with javascript but i will try archieve your sugestion. thank you!

Johnnyb

I was kind of interested to test it out so I threw it together for you real quick:

http://jbdes.net/dev/js/fontsize.html

Let me know if that works as you wanted!

joomlawebdesigner

Hi,
set your html and body to height:100% on both
then make your container div height:auto and min-height:100%

#container
{
height:auto;
min-height:100%;
}.

selector {
min-height:500px;
height:auto !important;
height:500px;
}

XaviJr

Thanks guys! Johnnyb, i didn't have yet time to test your solution, but it appears to be what i want. I've saved your page so i will put my feedback here when test it.

Johnnyb

Hey no problem, let me know if you need anymore help!

John

mmoubarak

Johnyb..I see your method works on words only (no spaces in between). Is there a way i can apply the resizing to a sentence and not just a word?
For example your first sentence "fits the width of the parent" would be adjusted to fit on a single line.

Thanks

kunibert

Thanks Johnnyb for that snippet. Thought I share a tiny deviation for the following scenario:

Want text to scale div stretching entire browser window. Want 250 px margin for picture.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script&gt; <!--JQuery-->

<script type="text/javascript">

$(window).load(function() {
	var originalFontSize = 12;
	var sectionWidth = $(window).width()-250;
	
	$('#logo span').each(function(){
		var spanWidth = $(this).width();
		
		var newFontSize = (sectionWidth/spanWidth) * originalFontSize;
		$(this).css({"font-size" : newFontSize, "line-height" : newFontSize/1.2 + "px"});
	});
});
</script>

note: had to use $(window).load ... otherwise the resize did not happen (guess a sequence problem) *shrugs*

jeremyhawes

Thanks @johnnyb
That jQuery script helped fix my problem too.
cheers

TheDoc

http://fittextjs.com/

HugoGiraudel

Am I the only one thinking about vw and vh?

Paulie_D

As far as I know (after googling vw & vh)...with vw/vh, we can only size elements to be relative to the size of the viewport and not the containing element.

Or am I misreading?

HugoGiraudel

I misunderstood the problem I guess. Indeed, vw and vh are relative to the viewport dimensions, and not the parent dimensions. Then it won't help much.

If someone needs an example: http://jsfiddle.net/jWUU7/.

JoniGiuro

If find this topic is interesting so I decided to give it a shot, but I'm having some trouble. Anyone wanting to check my code and see if you can figure out what's wrong?

testpage: http://zhereicome.com/experiments/statics/title-justify/

code:

function resizeFont(elemToR){ parentW = elemToR.width(); elemToR.find('.row').each(function(n){ curRow = $(this); curWidth = curRow.width(); console.log(curWidth) console.log(parentW) var ratio = parentW / curWidth; console.log(ratio) $(this).css('font-size', ratio * initialSize + 'px'); }); }

$(window).load(function(){ initialSize = 10; $('.justify-this').each(function(){ resizeFont($(this)); }) })

$(window).resize(function(){ $('.justify-this').each(function(){ resizeFont($(this)) })

})

thanks!

JoniGiuro

Anyone? I created a fiddle (had problems on codepen)

http://jsfiddle.net/UwarH/

na_na

http://jsfiddle.net/UwarH/115/

kinsport

Here's the best code i've come across up to date while working on sportkin I found the following to be very useful as it works well in Ie too

http://www.dhtmlgoodies.com/?whichScript=text_fit_in_box

patrick123

Awesome topic and thank you for the great tips.

treehouse : what would you like to learn today?

Forums

Is it possible to adapt font size to div width?