jQuery plugin, calculates the font-size and word-spacing needed to match a line of text to a specific width.
Home Page: http://www.zachleat.com/web/bigtext-makes-text-big/
License: MIT License
Make BigText available as a Bower component
I'm using BigText for a project I'm working on, but when using fonts from Google Webfonts, the text often (not always) overflows the h1 element, as seen in the image below:
My HTML file contains this:
<!DOCTYPE html>
<html lang="da">
<head><link href='http://fonts.googleapis.com/css?family=Alegreya+SC:400,900,400italic' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style_test.css" type="text/css" />
</head>
<body>
<h1 id="bigtext"><div>Big fat</div><div>Bold Headline</div></h1>
<h1 id="bigtext2"><div>Big fat</div><div>Bold Headline</div></h1>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="scripts/bigtext.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script type="text/javascript">$(function() {
WebFont.load({
custom: {
families: ['Alegreya SC'], // font-family name
urls : ['style_test.css'] // URL to css
},
active: function() {
$('#bigtext').bigtext();
$('#bigtext2').bigtext();
}
});
});
</script>
</body>
</html>
My CSS file looks like this:
#bigtext {
font-family:"League Gothic";
text-transform: uppercase;
}
#bigtext2 {
font-family: "Alegreya SC";
}
h1 {
width:500px;
border:1px solid #999;
}
h1 > div {
line-height:1;
white-space: nowrap;
}
BigText is cross-browser compatible right now.
However, WebKit doesn't respect em font sizes in BigText to the thousandths. That's why we also use word-spacing to account for that. The different branch for WebKit means that the CSS generated by BigText cannot be copied and pasted to use statically (since WebKit requires word-spacing and other browsers require no word-spacing).
However, if we move BigText to use px font sizes instead of ems, we might alleviate this need, and as a byproduct the CSS generated by BigText could be copied and pasted into a static style tag and still work correctly.
I use BigText (and freaking love it!) on my site ( http://chrisnager.com ) and found that it does not work immediately, or sometimes at all, on the iPhone in portrait mode or in Firefox 3.6. Strangely enough, if you switch to landscape mode on the iPhone and then back to portrait, it will work. Sometimes if you wait long enough, it will work in Firefox 3.6.
I have a site that I want to resize the text only if the title is not filling a line.
For example:
This short title could be larger - want it automatically filling the width: http://allaboutchris.org/blog/2012/being-judas/
Whereas this long title, I want to keep at 44px, since it doesn't need to be any larger: http://allaboutchris.org/blog/2012/why-windows-8-is-going-to-be-rubbish-lowrys-law/
Any ideas?
Bless,
Chris
So...this plugin is awesome. And I'm psyched to bake it into a project I'm working on. But, I'm running into a problem. Let me first outline what I'm trying to do.
I have a div that will contain text that will be provided by a user, so I won't know how long it will be. So observe these examples:
example 1:
User-Provided Text: Viva La Vida
In this example (1), the text would be large if the div were like 600px. Awesome. If it shrinks down to 200px, the text will be small, but readable. Awesome.
example 2:
User-Provided Text: This Is The Name Of an Album Title, And It's Really Long, Cuz I'm A Really Indie Artist.
In this example (2), the text would be readable at 600px like this: http://cl.ly/CO5e
Awesome.
But if the container shrunk down to say, 500px, here's what it would like: http://cl.ly/CO0y
Not awesome.
So my thought process is, in options there should be something like minfontsize: BigText.DEFAULT_MIN_FONT_SIZE_PX
that say if you set to 12, the font size would shrink no further and just wrap the line at that minimum text. So whatever div width calculates a size 12 font, if the div shrinks below that the font-size is frozen at 12 and just wraps normally, or responds to text-overflow or whatever. Does that make sense?
So I'm wondering if I'm just missing an option for this or spacing on an easy workaround. Thanks for taking the time to respond!
In the README it says the max font size default is 48px, but it seems like it's 528px?
Line 11 in 3b9031c
Hi - thanks for the plugin - I'm trying to cycle through different divs containing text using the famous jQuery Cycle but if you resize your browser on desktop - or change orientation on mobile it breaks
could this be to do with the way Cycle 'hides' the next slides in the cycle?
here's a test http://safeasmilk.org/wordthing/things-test/
Text is too big in IE7 and IE8.
Also the tests fail in those browsers which confirms the bug.
IE7 and IE8 use whole-pixel positioning of text which means that rounding of font-size occurs. Read more here: http://msdn.microsoft.com/en-us/library/hh237264%28v=vs.85%29.aspx
This should be taken into account when calculating the font-size to use. Some text strings will overflow their container at certain sizes due to these rounding errors.
@media only all or min-width/max-width (or compound) query to only apply text sizing at a certain breakpoints.
First of all, thanks Zach for the plugin! I'm using it for headers on my new site and it is working great and giving me the exact outcome I wanted except for in this one instance.
On my contact page I am trying to use my email as both a link and a header, but I can't seem to get the BigText to be a clickable link (below is how I have my js and html setup). First I tried putting the mailto link outside of the bigtext div because I wanted all the BigText to be one clickable link, but that seemed to disable the BigText completely. So then I tried putting the mailto link inside both the child divs, which seemed to work, only problem is they aren't clickable links. However, they are being recognized as links because the text changed to the color of my links & for a brief second when the page is loaded they can be clicked, but it seems as soon as the resize happens they're unclickable. I even tried changing the child selectors to a links, but that pretty much gave the same result.
Any help would be much appreciated, thanks in advance!
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/library/js/bigtext.js"></script>
<script>
$(function() {
$(".bigtext").bigtext();
});
</script>
<div class="bigtext">
<div>HOLLA</div>
<div>@juroto.com</div>
</div>
We've had very good times using bigtext.js in our mobile project however, near the final release, we found that we was loading jquery just to use bigtext.js; so a vanilla or zepto version will be a great addition for mobile developers.
We're not able to fully translate it on our own but with some help it does not seem such an hard problem to solve. Any suggestion?
Commit
Error started with commit 284a898. Before that everything worked fine.
Web Page
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js">
<script type="text/javascript" src="/expertisen/js/bigtext/bigtext.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(
function() {
$("#content_header").bigtext( { minfontsize: 18, maxfontsize: 28 } );
}
);
//]]>
</script>
(....)
<div id="content_header">
<div>Content here</div>
</div>Error Messages
Uncaught TypeError: Cannot call method 'getPropertyValue' of null bigtext.js:36
BigText.test.noFractionalFontSize bigtext.js:36
(anonymous function) bigtext.js:39
(anonymous function) bigtext.js:276
Uncaught TypeError: Object [object Object] has no method 'bigtext' 12:30
(anonymous function) 12:30
l jquery.js:2913
c.fireWith jquery.js:3025
x.extend.ready jquery.js:398
S jquery.js:93
Hi there!
I'm having a problem when using maxfontsize and resizing the screen to the point at which the font size should start to reduce.
When I resize the preview window, the font doesn't start to resize until the window is ~20px smaller than the text. As I continue to reduce the size of the window the font size judders for the next ~20px before the font then starts to reduce in size more smoothly.
Video: http://quick.as/Zm66F7jx
This is using Chrome 37 on OS X Mavericks. In Safari and Firefox the behaviour is similar, but less jerky.
If you have an element that has letter-spacing set in the css, the resulting bigtext calculation will result the text spilling out of the container width. If you remove the letter-spacing, the font-size is correct.
Hi, great plugin! I got this working with Flexslider using $(window).load but it still only works for the first slide - any suggestions on how to get it to work for text in all slides? Thanks!
Given the test file,
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="BigText/bigtext.js"></script>
a Javascript error appears:
Uncaught TypeError: Cannot call method 'getPropertyValue' of null (bigtext.js:36)
Note that if I paste the block into the JS console, ret is calculated properly:
var test = $('<div/>').css({
position: 'absolute',
'font-size': '14.1px'
}).appendTo(document.body).get(0),
fontSize = window.getComputedStyle( test, null ).getPropertyValue( 'font-size' ),
ret = fontSize === '14px';
Hi.
I've implemented bigtext. The text is only resized to the parent element after I resize the browser window.
Why is that?
This is my js:
$(document).ready(function() { $('#bigtext').bigtext(); });
This is my html:
<div id="bigtext" style="width: 100%"><div class="temp">28.50°</div></div>
This is my css:
.temp{ font-family: "league-gothic",sans-serif; font-weight: 400; color: #2EA959; line-height: 1; }
I load the typekit font via standard snipets. not with the fontloader api.
It happens in webkit and also in FF.
I have managed to get a JS based countdown clock to work with BigText.js locally (although I did have to manually fire a page resize event to get to scale down correctly)
Im trying to add it to a page of a wordpress site. I'm working with MAMP - running WordPress 3.8.3 and http://emilolsson.com/hi-response/ as the theme.
I keep getting " Uncaught TypeError: undefined is not a function "
at the point BigText is called.
jQuery(window).load(function () {
$('#container').bigtext();
});
This works locally using
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>Hi Response includes
jquery-1.10.2.min.js
jquery-2.0.2.min.js
in its JS folder.
if this doesn't help I will upload my working demo. I am about to try a vanilla install of WP and see if I can get it working with that.
Thanks in advance.
I have some html like this:
<div class="event-info">
<div class="event-name-wrapper" style="width:700px">
<h1>Really long event name that needs to be resized down</h1>
</div>
<h2>February 3, 2012</h2>
<h3>The location of the event</h3>
</div>
<script type="text/javascript">
$(".event-name-wrapper").bigtext({
childSelector: '> h1',
maxfontsize: 36
});
</script>
But the text does not resize until i resize the browser window. I am assuming this is a bug. Not sure how else to explain it other than that.
also, your website/blog post announcing this project is offline.
Currently, they use the BigText default starting font size.
I posted this on stackoverflow before coming here: http://stackoverflow.com/questions/10504243/jquery-bigtext-plugin-not-working-when-parent-class-is-identified-in-css
Basically if I do this:
.bigtext{
font-family:Arial
}
the plugin works as intended.
http://jsfiddle.net/pF5bQ/3/
If I do this:
.theme .bigtext{
font-family:Arial
}
it doesn't.
http://jsfiddle.net/pF5bQ/4/
I can not seem to find any way to stop/remove bigtext at a certain screen size. Is there anywhere that all of the options are listed out? I know the readme has a bunch of things, showing examples, but I can't find anything in there for stopping bigtext. Is there and type of minimum screen size option?
For some reason this plugin was generating a negative font size for a long title which was causing it to instead use the default size (which was far too large).
I couldn't figure out where the calculation was going wrong, but I was able to fix it by modifying the generateCSS function so that the for loop instead reads (line 78):
(linesFontSizes[j] > 0 ? ' font-size: ' + linesFontSizes[j] + 'px;' : ' font-size: 25px;') +
I had to hardcode the min font size because "minFontSizes" seemed to be a boolean instead of a numeric value.
If I add a letter-spacing rule to the parent element that .bigtext() gets applied to, there seems to be a certain threshold over which the resizing calculation no longer works and the text is under-sized. In the following JSFiddle, the first headline has letter-spacing: 10px and the second headline has letter-spacing: 11px.
This simple example does not seem to work in Firefox 25.0.1 on OS X (it works in other browsers):
The issue seems to be a NotSupportedError on line 35 of bigtext.js.
Forgive me if I'm missing something obvious.
Need to attempt to reproduce on Ubuntu 12.04 LTS Server Edition 64 bit.
Tests are passing fine on Mac OS (Chrome 29, Firefox 23, Safari 6, Opera 12) and Windows 7 (IE10, IE9, IE8)
Wondering if anyone has had any similar issues to this. I have a scrolly inforgraphic thing and using big text for the titles and labels but in IE9 only 21 of the boxes actually resize the rest display at usual font size despite having the JS applied to them.
All other browsers are fine its just IE9... anyone any ideas?
In some Windows I'm getting at the time I'm typing a BSOD.
I trie this on Firefox and works fine. Also in Mac Chrome and Linux (Mint) Chrome I have no problem, only in some Windows and only in Chrome.
The BSOD shows me a Bad Pool Head, which is a crash within Chrome. This happend by the second or third key I press. I tried everyhing I can think of.
For testing (that will ask for a Facebook App permission) you can go here: http://facebook.puntopy.com/pasodelostoros/corta/cargarTexto.php
Once you have all the permission, reload this URL I give you for you to test the app well.
I don't know if is because I use font-face or because I do some more keyboard checks when typing, since I enable only 140 characters (like Twitter).
Any clue or light in this matter could reaaally help!
I have problems getting it to display Javascript generated output.
jsFiddle here: http://jsfiddle.net/j7PXv/
Great plugin!
Works great - but I had some problems getting the line-heights sensible in "auto mode" without looking at the history.
I did a quick test with a mod of the bigtext script. Would provide a pull request, but I guess others will make this one more clever and even pluggable... The "random values" chosen below works fine for my headlines (bepsays.com) - but this is a work in progress.
generateCss: function(id, linesFontSizes, lineWordSpacings, minFontSizes)
{
var css = [];
var linesLineHeights = [];
BigText.clearCss(id);
var lastLineHeight = 0;
for(var j=0, k=linesFontSizes.length; j<k; j++) {
var currentFontSize = linesFontSizes[j];
var currentLineHeight = currentFontSize;
if(lastLineHeight > 0 && lastLineHeight < (currentLineHeight * 0.25)) {
currentLineHeight *= 0.25;
}
linesLineHeights[j] = Math.floor(currentLineHeight);
lastLineHeight = linesLineHeights[j];
}
for(var j=0, k=linesFontSizes.length; j<k; j++) {
css.push('#' + id + ' .' + BigText.LINE_CLASS_PREFIX + j + ' {' +
(minFontSizes[j] ? ' white-space: normal;' : '') +
(linesFontSizes[j] ? ' font-size: ' + linesFontSizes[j] + 'px;' : '') +
(lineWordSpacings[j] ? ' word-spacing: ' + lineWordSpacings[j] + 'px;' : '') +
(linesLineHeights[j] ? ' line-height: ' + linesLineHeights[j] + 'px;' : '') +
'}');
}
return BigText.generateStyleTag(BigText.getStyleId(id), css);
}
eventName = 'smartresize.' + eventNamespace;
"eventNamespace is not defined" error when running strict mode on FF.
Assume it is supposed to be 'eventName' rather? :)
(These may not belong in a single issue/request, but I believe the solutions could be directly related)
It would be great if BigText were compatible with CSS media queries, which I suppose means calling the script whenever the window is resized, to test if the width of the containing element has been changed in a media query block. At the moment, it doesn't appear to realize the containing element has been assigned a new size.
This test led me to try using percentages and ems to size the container element, which does not seem to work either.
David DeSandro's Masonry (http://desandro.com/resources/jquery-masonry/) monitors window size in this way, and works beautifully with media queries (but not ems/percentages for element widths, sadly) so there may be some inspiration in that plugin.
Here's what I get:
jQuery 2.1.1
Resizing on items that have 'font-weight:lighter; letter-spacing: 0; text-transform: uppercase' produces strange resize results.
e.g.
.js_bigtext { width: 100%; margin: 22px 0 0 0; }
h1 { display: block; width: 100%; font-weight: lighter; letter-spacing: 0; text-transform: uppercase; }
<div class="js_bigtext">
<h1>Title Here</h1>
</div>$('.js_bigtext').bigtext({
childSelector: '> h1'
});Simpler API
HTML
<div style="width: 400px">Size this text.</div>
JavaScript
$('div').bigtext();
This happens in IE10+ (not sure if it ALSO occurs in IE9).
It ends up that the following line in noFractionalFontSize does not like document.body to be null:
var test = $('<div/>').css({
position: 'absolute',
'font-size': '14.1px'
}).appendTo(document.body).get(0),
computedStyle = window.getComputedStyle( test, null );
Adding a check on document.body being null fixes the problem:
noFractionalFontSize: (function() {
if( !( 'getComputedStyle' in window ) || !( 'body' in document ) || document.body == null ) {
return true;
}
BigText is not working in IE9 and Firefox 30.0. It's still failing on "Window.getComputedStyle".
I've just run all your unit tests in both browsers. A lot of them seem to fail.
Hi all,
I'm working on a site using BigText and I can't seem to get it to load on an iPhone. Has anyone else had this issue?
When testing using a user agent switch in Firefox, it works as it should. However on an iPhone, it doesn't, which makes it hard to test.
Thought I'd check here if someone had some advice for me.
Thanks,
Rick.
Is it possible to use the (smallest font size) in a container that has multiple rows to affect the other rows, so the following would have the same font size despite being on different rows
Ben
Happy 18th Birthday dude!
love Mum & Dad xx
Size is calculated based on actual html text width, not the text width after css text transforms are applied (such as text-transform:uppercase).
This is documented on the known issues: "Do not use #your-id CSS rules to style."
Remove this restriction.
In your demo the font is re-sized using EM, but when I use it on my site, it uses PX. How do i get it to use the EM font size. Or even a percentage font size.
Thanks
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.