Posted By

marcio on 02/13/10


Tagged

jquery typography rythm


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

bostonbasso


jMetronome: Using jQuery to keep typographic rhythm


 / Published in: jQuery
 

URL: http://www.fortes.com/2008/jmetronome-using-jquery-to-keep-typographic-rhythm

  1. $(function() {
  2. var lineHeight = parseInt($('body').css('line-height'));
  3. function balanceHeight(el) {
  4. var h = $(el).outerHeight();
  5. var delta = h % lineHeight;
  6. if (delta != 0)
  7. {
  8. /* For images and objects, we want to align the bottom w/ the baseline, so we
  9. * pad the top of the element. For other elements (text elements that have a
  10. * scrollbar), we pad the bottom, to keep the text within on the same baseline */
  11. var paddingDirection = ($(el).is('img') || $(el).is('object')) ?
  12. 'padding-top' : 'padding-bottom';
  13.  
  14. /* Adjust padding, because margin can get collapsed and cause uneven spacing */
  15. var currentPadding = parseInt($(el).css(paddingDirection));
  16. $(el).css(paddingDirection, currentPadding lineHeight - delta);
  17. }
  18. }
  19.  
  20. /* Depending on your content, you may want to modify which elements you want to adjust,
  21.   * by modifying the selector used below. By default, we grab all img, pre, and object
  22.   * elements. */
  23. $('img, pre, object').each(function() {
  24. /* Only works if we're manipulating block objects */
  25. if ($(this).css('display') == 'inline')
  26. {
  27. $(this).css('display', 'block');
  28. }
  29.  
  30. /* Images need to load before you get their height */
  31. if ($(this).is('img'))
  32. {
  33. $(this).load(function(){ balanceHeight(this); });
  34. }
  35. else
  36. {
  37. balanceHeight(this);
  38. }
  39. });
  40. });

Report this snippet  

You need to login to post a comment.