Vanilla JavaScript: Resize font-awesome to fit container
Add the class .jcfResize
to any elements containing font which should be resized.
Add the following javascript code to the page/site:
function jcfResizeText() {
var elements = document.getElementsByClassName('jcfResize');
if (elements.length < 0) {
return;
}
_len = elements.length;
for (_i = 0; _i < _len; _i++) {
var el = elements[_i];
el.style.fontSize = "100%";
for (var size = 100; el.scrollHeight > el.clientHeight; size -= 10) {
el.style.fontSize = size + '%';
}
}
}
jcfResizeText();
window.addEventListener('resize', jcfResizeText);
Have text scale up in size to fit the container
One thing that I have done that isnt perfect but can get the job done in some cases is to use a @media rule for screen sizes smaller then X pixels, set the font size smaller or larger.
h2{
font-size:25px
}
@media screen and (max-width: 850px){/* for screens smaller then 850px, set the font size smaller */
h2{
font-size:19px;
}
}
Of course this would only work assuming the texts container size is based on the window size in some way.
Font scaling based on size of container
If the container is not the body, CSS Tricks covers all of your options in Fitting Text to a Container.
If the container is the body, what you are looking for is Viewport-percentage lengths:
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist.
The values are:
vw
(% of the viewport width)vh
(% of the viewport height)vi
(1% of the viewport size in the direction of the root element's inline axis)vb
(1% of the viewport size in the direction of the root element's block axis)vmin
(the smaller ofvw
orvh
)vmax
(the larger orvw
orvh
)
1 v* is equal to 1% of the initial containing block.
Using it looks like this:
p {
font-size: 4vw;
}
As you can see, when the viewport width increases, so do the font-size
, without needing to use media queries.
These values are a sizing unit, just like px
or em
, so they can be used to size other elements as well, such as width, margin, or padding.
Browser support is pretty good, but you'll likely need a fallback, such as:
p {
font-size: 16px;
font-size: 4vw;
}
Check out the support statistics: http://caniuse.com/#feat=viewport-units.
Also, check out CSS-Tricks for a broader look: Viewport Sized Typography
Here's a nice article about setting minimum/maximum sizes and exercising a bit more control over the sizes: Precise control over responsive typography
And here's an article about setting your size using calc() so that the text fills the viewport: http://codepen.io/CrocoDillon/pen/fBJxu
Also, please view this article, which uses a technique dubbed 'molten leading' to adjust the line-height as well. Molten Leading in CSS
Creating dynamic font-size based on container height: What am I doing wrong?
$('#front-page-blue-strip').attr('font-size', ($(this).height() / 20).toString() + 'px');
By doing this you are simply adding attribute to element which is not predefined
property, rather its a property of one of predefined property style
.
Instead try this
$('#front-page-blue-strip').css('font-size', ($(this).height() / 20).toString() + 'px');
or
$('#front-page-blue-strip')
.attr('style','font-size:'+ ($(this).height() / 20).toString() + 'px');
Resize font text (inside multiple divs) within container to fit perfectly
Right. Third attempt (and I really do have it cracked this time).
The number of digits is static. Let's call it 100 digits.
Digits are taller than they are wide, so we need a grid of tall, narrow divs
. 10x10 is no good. Let's set up a 20x5 grid instead.
Now all we need to do is work out:
- how large the digit
font-size
would be based only on the width of the viewport; and - how large the digit
font-size
would be based only on the height of
the viewport;
Whichever is the smaller can be the font-size
applied to the digits.
var binaryMatrix = document.getElementById('binaryMatrix');var binaryMatrixDivs = binaryMatrix.getElementsByTagName('div');
function applyNewFontSize() {
var newVerticalFontSize = (window.innerHeight / 5.5); var newHorizontalFontSize = (window.innerWidth / 20.5); var newFontSize = (newVerticalFontSize > newHorizontalFontSize ? newHorizontalFontSize : newVerticalFontSize);
for (var i = 0; i < binaryMatrixDivs.length; i++) { binaryMatrixDivs[i].style.fontSize = newFontSize + 'px'; binaryMatrixDivs[i].style.lineHeight = newFontSize + 'px'; }
}
window.addEventListener('resize',applyNewFontSize,false);window.addEventListener('load',applyNewFontSize,false);
body {margin: 0;padding: 0;}
#binaryMatrix {width: 100vw;height: 100vh;}
#binaryMatrix div {display: inline-block;float: left;width: 5vw;height: 20vh;text-align: center;color: rgb(163,163,163);}
<div id="binaryMatrix"><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div></div>
Resize font-size according to div size
In regards to your code, see @Coulton. You'll need to use JavaScript.
Checkout either FitText (it does work in IE, they just ballsed their site somehow) or BigText.
FitText will allow you to scale some text in relation to the container it is in, while BigText is more about resizing different sections of text to be the same width within the container.
BigText will set your string to exactly the width of the container, whereas FitText is less pixel perfect. It starts by setting the font-size at 1/10th of the container element's width. It doesn't work very well with all fonts by default, but it has a setting which allows you to decrease or increase the 'power' of the re-size. It also allows you to set a min and max font-size. It will take a bit of fiddling to get working the first time, but does work great.
http://marabeas.io <- playing with it currently here. As far as I understand, BigText wouldn't work in my context at all.
For those of you using Angularjs, here's an Angular version of FitText I've made.
Here's a LESS mixin you can use to make @humanityANDpeace's solution a little more pretty:
@mqIterations: 19;
.fontResize(@i) when (@i > 0) {
@media all and (min-width: 100px * @i) { body { font-size:0.2em * @i; } }
.fontResize((@i - 1));
}
.fontResize(@mqIterations);
And an SCSS version thanks to @NIXin!
$mqIterations: 19;
@mixin fontResize($iterations) {
$i: 1;
@while $i <= $iterations {
@media all and (min-width: 100px * $i) { body { font-size:0.2em * $i; } }
$i: $i + 1;
}
}
@include fontResize($mqIterations);
Related Topics
Calculate Position of Selected Text JavaScript/Jquery
Remove Specific HTML Tag with Its Content from JavaScript String
Twitter's Typeahead.Js Suggestions Are Not Styled (Have No Border, Transparent Background, etc.)
How to Generate Image Sprites in Ember-Cli Using Compass
Modify Pseudo-Element :After's Width Using JavaScript
How to Check What Fonts Are Installed on MAChines via the Web
Fading Visibility of Element Using Jquery
How to Remove the White Border from Chart.Js Pie Chart
JavaScript Hide/Show Div on Checkbox: Checked/Unchecked
Switch Window Between Normal and Full-Screen Mode
How to Remove the Parent Element Using Plain JavaScript
Running JavaScript in New Window.Open
How to Automatically Close Alerts Using Twitter Bootstrap
JavaScript - Check If String Is Valid CSS Color
Change Svg Text to CSS Word Wrapping
How to Force Jquery to Center an Element When It Is Dragged to and Snapped to Another Container
Display a Message Within the Kendo Grid When It's Empty
Chosen Dropdown Within Bootstrap Modal Is Hidden Behind Modal Footer