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

  • Select an option

    Learn more about clone URLs
  • Save bdelespierre/c8046e7d61cf13904004dda8d3a42c0e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
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
Copy Markdown
Author

bdelespierre commented Nov 29, 2016

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
Copy Markdown

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