Skip to content

Instantly share code, notes, and snippets.

@bdelespierre

bdelespierre/hatchshow.js

Forked from charliepark/hatchshow.js
Last active August 4, 2017 19:47
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bdelespierre/c8046e7d61cf13904004dda8d3a42c0e to your computer and use it in GitHub Desktop.
Save bdelespierre/c8046e7d61cf13904004dda8d3a42c0e to your computer and use it in GitHub Desktop.
Download ZIP
A jquery typography plugin.
Raw
hatchshow.js
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$('.hsjs').hatchShow();
});
(function($){
jQuery.fn.hatchShow = function(){
return $(this).css({
display: 'inline-block',
whiteSpace: 'pre'
}).each(function(){
var parent = $(this).parent(),
fontSize = parseInt($(this).css('font-size').replace('px', '')),
maxWidth = parent.width() - (parent.outerWidth(true) - parent.width());
while ($(this).outerWidth(true) < maxWidth) {
$(this).css('font-size', ++fontSize);
}
while ($(this).outerWidth(true) > maxWidth) {
$(this).css('font-size', --fontSize);
}
})
}
})(jQuery);
</script>
@bdelespierre
Copy link
Author

demo:

<!DOCTYPE html>
<html>
<head>
    <title>Hatchshow</title>
    <style type="text/css" media="screen">
    html, body {
        widht: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
    }

    body {
        font-family: arial, helvetica, sans-serif;
        text-transform: uppercase;
        font-weight: bold;
        color: #2c3e50;
    }

    b {
        color: #c0392b;
        font-weight: bolder;
    }

    i {
        color: #27ae60;
    }

    p {
        margin: 50px;
        background: #ecf0f1;
        padding: 50px;
        border: 20px double #95a5a6;
    }
    </style>
</head>
<body>
    <p>
        <span>Have a <b>good day</b>, sir</span>
        <span>and <i>fuck you</i></span>
        <span>I do not give a fuck</span>
        <span>About what you <b>think</b></span>
    </p>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8">
    $(function(){
        $('span').hatchShow();
    });

    (function($){
        jQuery.fn.hatchShow = function(){
            var els = $(this); return $(window).resize(function(){
                els.css({ display: 'inline-block', whiteSpace: 'pre' }).each(function(){
                    var parent = $(this).parent(),
                        fontSize = parseInt($(this).css('font-size').replace('px', '')),
                        maxWidth = Math.max(parent.width() - (parent.outerWidth(true) - parent.width()), parent.width());

                    while ($(this).outerWidth(true) < maxWidth) {
                        $(this).css('font-size', ++fontSize)
                    }

                    while ($(this).outerWidth(true) > maxWidth) {
                        $(this).css('font-size', --fontSize)
                    }
                })
            }).resize(), els
        }
    })(jQuery);
    </script>
</body>
</html>

@dnw6
Copy link

dnw6 commented Jan 20, 2017

This was useful, ta

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