CODEWITHSUNDEEP
wordpressdynamicwordpress-themingfont-size
ndp
ndp

Reputation: 893

adjust font-size based on container size

I'm adapting a wordpress theme and it would be nice to have the text of the whole page scale depending on the width of each container div.

So far all the widths are in % but as w3c mentions the font-size property only takes into account the font-size of the parent and not the size of the container div.

As multiple other answers hint, I could do that with javascript and target each container div, which though being a very helpful answer from my point of view doesn't apply to my problem because I dont know all the possible container ids or classes since I have to account for future plugin installations which could output text, e.t.c.

so is there any other way to do this?

Upvotes: 1

Views: 436

Answers (2)

Ben
Ben

Reputation: 57237

Not without Javascript. CSS bases font-size percentages based on height of a line, there are no width-based controls.

I'd strongly recommend changing your design.

If you want to try to go with it, I'm not sure how proficient you are at Javascript, but you could iterate through DOM nodes, look for a common condition, find the width of the DIV, and move forward that way.

Upvotes: 1

ndp
ndp

Reputation: 893

one possible solution could be to target only the body element and change its font-size, this way every font-size should adapt due to the parent changing.

this solution combined with media queries to target the most common screen size should be perfect.

Based on that, I pieced together the following ( http://jsfiddle.net/8TrTU/73/ )

function adaptFontSize() {
var defaultW = 100;
var defaultFontSize = 16;
var  width = parseInt($("#header").width());
var fontSize = (defaultFontSize * width)/defaultW+"px";

$("#page").css('font-size', fontSize);

// alert(width +" "+ defaultFontSize * width+ " " fontSize);
}
$(document).ready(adaptFontSize);
$(window).resize(adaptFontSize);

opinions? possible improvements?

Upvotes: 0

Related Questions