Example of jQuery textVolume plugin

This plugin is a work-in-progress that aims to provide an easy way to express voice volume in typography a la Robert Massin. See Robert Massin's Cantatrice Chauve: http://www.typogabor.com/ionesco_massin/pages/Massin_Ionseco_22.html

by pixeline

HTML

<div id="container">
  <img src="http://www.sophiebassouls.com/medias/image/photo/Massin_Robert_2010-09-19/Massin_Robert_2010-09-19_0000.jpg">
  <p class="volume-up">My name is, my name is, my name is... Robert Massin!</p>
</div>
<p><small>Image copyright: Sophie Bassouls  (portrait of Robert Massin)</small>
</p>

CSS

i.jqVolume {
  font-style:normal;
}
#container {
  position:relative;
}
#container img {
  position:absolute;
}
.volume-up {
  position:absolute;
  width:240px;
  left:20px;
  top:60px;
  line-height:32px;
  background:white;
  color:black;
  padding:16px;
  word-wrap:break-word;
  border-radius:34px;
transform: rotate(353deg) scale(1) skew(1deg) translate(0px);
-webkit-transform: rotate(353deg) scale(1) skew(1deg) translate(0px);
-moz-transform: rotate(353deg) scale(1) skew(1deg) translate(0px);
-o-transform: rotate(353deg) scale(1) skew(1deg) translate(0px);
-ms-transform: rotate(353deg) scale(1) skew(1deg) translate(0px);
}

JavaScript

/*
 *	name: jquery textVolume
 *	description: visually express the incremental volume of a voice in typography (yelling) or the contrary (tone down). Inspired by Robert Massin http://www.typogabor.com/ionesco_massin/
 *	author: [email protected]
 *	version: 16 Jan 2013
 */
(function ($) {
  jQuery.fn.textVolume = function (options) {

    var settings = $.extend({
      'maxSize': 300,
        'minSize': 10,
        'direction': 'up'
    }, options);

    return this.each(function () {
      var $this = $(this);
      var text = $this.text();
      var characters = text.split("");
      var size, originalSize = parseInt($this.css('font-size'), 10); // gets the size in pixels
      var multiplier = ((originalSize * (settings.maxSize / 100)) - (originalSize * (settings.minSize / 100))) / characters.length;
      text = '';
      for (var i = 0; i < characters.length; i++) {
        if (settings.direction === 'up') {
          size = (originalSize * (settings.minSize / 100)) + i * multiplier;
        } else {
          size = (originalSize * (settings.maxSize / 100)) - i * multiplier;
        }
        text += '<i class="jqVolume" style="font-size:' + size + 'px">' + characters[i] + '</i>';
      }
      $this.empty().html(text);

    });


  };
})(jQuery);

$('.volume-up').textVolume({
  direction: 'up',
  maxSize: 400,
  minSize: 100
});