Menu
Here is the project this is for: http://phlak.github.com/jColorClock/. As you can see, right now the text size is just set to a static size. I'd like the text to always be ~90% of the width of the window but to also scale the vertical size accordingly. Is there a relatively easy way of doing this?
741
Syntax: font-size-adjust: number|none|initial|inherit; Below are the examples that illustrates the use of font-size-adjust property.
In HTML, you can change the size of text with the <font> tag using the size attribute. The size attribute specifies how large a font will be displayed in either relative or absolute terms. Close the <font> tag with </font> to return to a normal text size.
The font size can be set with vw (viewport) unit, which means the viewport width. The viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.
The font-size property is used to control the size of fonts. Possible values could be xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, size in pixels or in %.
Hell yeah!
Set your <body> font size when the window is resized with a little javascript. (I've used jQuery for convenience here:
$( document ).ready( function() { var $body = $('body'); //Cache this for performance var setBodyScale = function() { var scaleSource = $body.width(), scaleFactor = 0.35, maxScale = 600, minScale = 30; //Tweak these values to taste var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor: if (fontSize > maxScale) fontSize = maxScale; if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums $('body').css('font-size', fontSize + '%'); } $(window).resize(function(){ setBodyScale(); }); //Fire it when the page first loads: setBodyScale(); }); Because your font size is set in em's (perfect) adjusting the percentage font-size of the body element acts as a universal 'text zoom'. This will scale any text set in em's - if you want to be more specific, you could set the percentage font-size on a <div> that surrounds just the elements you want to scale.
Here's a quick example: http://www.spookandpuff.com/examples/dynamicTextSize.html
117
New units were added in CSS3 that will allow you to do this. Sitepoint has a good overview. You definitely want to provide a fallback for older browsers, but this is by far the simplest solution:
font-size: 35vmin; If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
