Skip to content

Instantly share code, notes, and snippets.

@andrewbranch
Last active July 31, 2019 22:07
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save andrewbranch/6995056 to your computer and use it in GitHub Desktop.
Save andrewbranch/6995056 to your computer and use it in GitHub Desktop.
Responds to window resize events. Max font size taken from initial font size (specify with CSS).
(function($) {
function getTextWidth($element) {
var tester = $("<div/>").text($element.text())
.css({ "position": "absolute", "float": "left", "white-space": "nowrap", "visibility": "hidden", "font": $element.css("font"), "text-transform": $element.css("text-transform"), "letter-spacing": $element.css("letter-spacing") })
.appendTo($element.parent()),
width = tester.innerWidth();
tester.remove();
return width;
}
function AutoShrinker($element) {
this.$element = $element;
this.$parent = $element.parent();
this.initialFontSize = parseFloat($element.css("fontSize"));
this.currentFontSize = this.initialFontSize;
this.leftMarginRatio = parseFloat($element.css("marginLeft")) / this.initialFontSize;
this.resize = function() {
var maxWidth = this.$parent.width(),
newSize = this.currentFontSize * (maxWidth / getTextWidth(this.$element));
newSize = newSize > this.initialFontSize ? this.initialFontSize : newSize;
this.$element.css({
"fontSize": newSize,
"marginLeft": newSize * this.leftMarginRatio
});
this.currentFontSize = newSize;
};
}
$.fn.autoshrink = function() {
return this.each(function() {
var shrinker, $this = $(this);
$this.data("autoshrinker", shrinker = new AutoShrinker($this));
shrinker.resize();
$(window).on("resize", function() {
shrinker.resize();
});
});
};
})(jQuery);
<script>
$("h1").autoshrink();
</script>
<div>
<h1>Shrink Me</h1>
</div>
@reintroducing
Copy link

beautiful, saved me a ton of time when other solutions couldn't. i modified a bit to add some extra functionality but this was exactly what i was looking for. thanks alot, it's appreciated.

@ouija
Copy link

ouija commented Jan 2, 2015

Doesn't work in IE8 -- calculates a font size of 0; Trying to debug and will post back if I find a solution.

@alioguzhan
Copy link

this is great. thanks. saved me so much time.

@zachabernathy
Copy link

Just what I needed. Thanks!

@kudataz
Copy link

kudataz commented Aug 29, 2016

@tylerfowle
Copy link

hey, found an issue with this. it doesn't work in Firefox because "font": $element.css("font"), is failing.

Retrieval of shorthand CSS properties (e.g., margin, background, border), although functional with some browsers, is not guaranteed. For example, if you want to retrieve the rendered border-width, use: $( elem ).css( "borderTopWidth" ), $( elem ).css( "borderBottomWidth" ), and so on.

here is a solution that seems to be working for me.
changing:

"font": $element.css("font"),

to:

"font-style": $element.css("font-style"),
"font-variant": $element.css("font-variant"),
"font-weight": $element.css("font-weight"),
"font-stretch": $element.css("font-stretch"),
"font-size": $element.css("font-size"),

@deva606
Copy link

deva606 commented Oct 16, 2018

Thanks! This is exactly what I was looking for. Super simple and easy to use!

@Braindea7
Copy link

Thanks for this easy solution!

I needed a small improvement for live editing (like an live preview text from an input field). May someone need it, too :)

$.fn.autoshrink = function(eventdata) {
        return this.each(function() {
            var shrinker, $this = $(this);
            $this.data("autoshrinker", shrinker = new AutoShrinker($this));
            shrinker.resize();
            $(window).on("resize", function() {
                shrinker.resize();
            });
            if(eventdata != null && eventdata != undefined && eventdata != "null"){
                $(eventdata[0]).on(eventdata[1],function(e){
                    shrinker.resize();
                });
            }
        });
    };

Call example: $(id+'>h4').autoshrink(['input#id','keyup']);

Sorry for not the cleanest code, isn't my main language..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment