Skip to content

Instantly share code, notes, and snippets.

@andrewbranch

andrewbranch/autoshrink.js

Last active July 31, 2019 22:07
Download ZIP

Revisions

  1. andrewbranch revised this gist Dec 19, 2013. 1 changed file with 34 additions and 31 deletions.
    65 changes: 34 additions & 31 deletions autoshrink.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,37 +1,40 @@
    (function($) {

    function getTextWidth($element) {
    var tester = $("<div/>").text($element.text())
    .css({ "position": "absolute", "float": "left", "white-space": "nowrap", "visibility": "hidden", "font": $element.css("font") })
    .appendTo(document.body),
    width = tester.width();
    tester.remove();
    return width;
    }
    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.resize = function() {
    var maxWidth = this.$parent.width(),
    newSize = this.currentFontSize * (maxWidth / getTextWidth(this.$element) - 0.1);
    newSize = newSize > this.initialFontSize ? this.initialFontSize : newSize;
    this.$element.css({ "fontSize": newSize });
    this.currentFontSize = newSize;
    };
    }
    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();
    });
    });
    };

    $.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);
  2. andrewbranch revised this gist Oct 15, 2013. 3 changed files with 44 additions and 20 deletions.
    37 changes: 37 additions & 0 deletions autoshrink.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    (function($) {

    function getTextWidth($element) {
    var tester = $("<div/>").text($element.text())
    .css({ "position": "absolute", "float": "left", "white-space": "nowrap", "visibility": "hidden", "font": $element.css("font") })
    .appendTo(document.body),
    width = tester.width();
    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.resize = function() {
    var maxWidth = this.$parent.width(),
    newSize = this.currentFontSize * (maxWidth / getTextWidth(this.$element) - 0.1);
    newSize = newSize > this.initialFontSize ? this.initialFontSize : newSize;
    this.$element.css({ "fontSize": newSize });
    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);
    7 changes: 7 additions & 0 deletions example.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    <script>
    $("h1").autoshrink();
    </script>

    <div>
    <h1>Shrink Me</h1>
    </div>
    20 changes: 0 additions & 20 deletions jquery.textfill.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,20 +0,0 @@
    (function($) {
    $.fn.textfill = function(maxFontSize) {
    maxFontSize = parseInt(maxFontSize, 10);
    return this.each(function(){
    var ourText = $("span", this),
    parent = ourText.parent(),
    maxHeight = parent.height(),
    maxWidth = parent.width(),
    fontSize = parseInt(ourText.css("fontSize"), 10),
    multiplier = maxWidth/ourText.width(),
    newSize = (fontSize*(multiplier-0.1));
    ourText.css(
    "fontSize",
    (maxFontSize > 0 && newSize > maxFontSize) ?
    maxFontSize :
    newSize
    );
    });
    };
    })(jQuery);
  3. @mekwall mekwall revised this gist Oct 5, 2011. 1 changed file with 4 additions and 3 deletions.
    7 changes: 4 additions & 3 deletions jquery.textfill.js
    View file
    Original file line number Diff line number Diff line change
    @@ -7,12 +7,13 @@
    maxHeight = parent.height(),
    maxWidth = parent.width(),
    fontSize = parseInt(ourText.css("fontSize"), 10),
    multiplier = maxWidth/ourText.width();
    multiplier = maxWidth/ourText.width(),
    newSize = (fontSize*(multiplier-0.1));
    ourText.css(
    "fontSize",
    (maxFontSize > 0 && fontSize > maxFontSize) ?
    (maxFontSize > 0 && newSize > maxFontSize) ?
    maxFontSize :
    (fontSize*(multiplier-0.1))
    newSize
    );
    });
    };
  4. @mekwall mekwall revised this gist Oct 5, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion jquery.textfill.js
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,7 @@
    parent = ourText.parent(),
    maxHeight = parent.height(),
    maxWidth = parent.width(),
    fontSize = parseInt(ourText.css("font-size"), 10),
    fontSize = parseInt(ourText.css("fontSize"), 10),
    multiplier = maxWidth/ourText.width();
    ourText.css(
    "fontSize",
  5. @mekwall mekwall revised this gist Oct 5, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion jquery.textfill.js
    View file
    Original file line number Diff line number Diff line change
    @@ -15,5 +15,5 @@
    (fontSize*(multiplier-0.1))
    );
    });
    }
    };
    })(jQuery);
  6. @mekwall mekwall created this gist Oct 5, 2011.
    19 changes: 19 additions & 0 deletions jquery.textfill.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    (function($) {
    $.fn.textfill = function(maxFontSize) {
    maxFontSize = parseInt(maxFontSize, 10);
    return this.each(function(){
    var ourText = $("span", this),
    parent = ourText.parent(),
    maxHeight = parent.height(),
    maxWidth = parent.width(),
    fontSize = parseInt(ourText.css("font-size"), 10),
    multiplier = maxWidth/ourText.width();
    ourText.css(
    "fontSize",
    (maxFontSize > 0 && fontSize > maxFontSize) ?
    maxFontSize :
    (fontSize*(multiplier-0.1))
    );
    });
    }
    })(jQuery);