Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Support em width & text resizing. #227

Closed
brycenesbitt opened this Issue Jul 24, 2012 · 3 comments

Comments

2 participants

I would like masonry to support a columnWidth expressed in em units. I try to use em's rather than pixels where possible in order to support low vision users who increase the text size.

Masonry works fine with div's expressed in em units, but the columnWidth feature appears to require pixels. To make this work I'd need to calculate the complete div width in em's including the margin/border/padding.

See also:
http://stackoverflow.com/questions/8084885/masonry-container-with-fluid-margins-in-em
http://stackoverflow.com/questions/11210468/can-i-set-jquery-masonry-columnwidth-in-ems-so-text-zoom-works

Note that many browsers support both zoom and text size. Zoom just makes pixels bigger. Text size scales the fonts without affecting pixels. Both have their place. Masonry generally works with pixel zoom, and not with text zoom. See also:
http://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages

Owner

desandro commented Jul 24, 2012

Hi there!

Thanks for this support request. I totally get the need for expressing columnWidth in em. However, JavaScript and jQuery tend to keep size units in px. But, we might have a solution. By using the font-size we can calculate what an em actually is. See http://codepen.io/desandro/pen/xAJcF

  var $container = $('#container');
  var em = parseFloat( $container.css('font-size') );
  $container.masonry({
    columnWidth: 10 * em
  });

Hmm. Interesting. But the moment I press CTRL+ in Firefox 11, the text overflows the containers. There's also margin/padding/border to contend with. You've got .5 em of border in that codepen (as of this writing), which should mean 11em (10 + 1) is a good columnWidth, but it lays out with extra space.

Owner

desandro commented Jul 31, 2012

I'm unable to reproduce the text overflowing on zoom in Firefox 11 on Mac.

Take another look at the CSS.

 9em width + 2 * 0.25em padding + 2 * 0.25 margin = 10em columnWidth
19em width + 2 * 0.25em padding + 2 * 0.25 margin = 20em columnWidth

But, the bottom line is a em size feature, while potentially useful, lies outside the scope of Masonry. I'm recommending to take an approach like font-size calculation above, which can be used for stuff outside Masonry. Closing at wontfix.

@desandro desandro closed this Jul 31, 2012

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