Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A jquery typography plugin.
<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

This comment has been minimized.

Copy link
Owner 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

This comment has been minimized.

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
You can’t perform that action at this time.