Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

@reintroducing reintroducing commented Apr 23, 2014

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

This comment has been minimized.

Copy link

@ouija 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

This comment has been minimized.

Copy link

@alioguzhan alioguzhan commented Jan 28, 2016

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

@zachabernathy

This comment has been minimized.

Copy link

@zachabernathy zachabernathy commented Feb 4, 2016

Just what I needed. Thanks!

@kudataz

This comment has been minimized.

Copy link

@kudataz kudataz commented Aug 29, 2016

@tylerfowle

This comment has been minimized.

Copy link

@tylerfowle tylerfowle commented Sep 29, 2016

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

This comment has been minimized.

Copy link

@deva606 deva606 commented Oct 16, 2018

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

@Braindea7

This comment has been minimized.

Copy link

@Braindea7 Braindea7 commented May 22, 2019

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