necolas / griddle

As discussed briefly in issue #15, latest changes to the word-spacing rule introduced in v0.2.2 can cause layout problems under certain conditions (issue appears in Safari v6.0.3, Chrome v26 Mac, works correct in Firefox v20 Mac).

I have uploaded an example of the problem here: http://www.boxberry.co.uk/griddle-test.php

If I remove the Nimbus Sans font rules from the CSS then the problem is corrected again in these browsers. It worked fine in v0.2.1 though.

Seems to be a result of the font face you're using. It requires a slightly greater negative letter-spacing (like -0.32em). Monospace fonts are also know to behave differently. v0.2.1 results in the cells overlapping.

Yeah, it's definitely the choice of font that causes it. Maybe just an extra comment in the CSS to make people aware that this can happen would suffice?

Like this one?

griddle/griddle.scss

Line 36 in 212aa11

* 3. Remove inter-unit whitespace that appears between `inline-block` child

Well, that's a little bit vague since Nimbus Sans obviously isn't a monospace font, but I guess so.

What if the letter-spacing was increased to -0.32em anyway? That'd give a bit more tolerance for fonts that have uncommon letter spacing. Or does that extra 0.01em introduce other width problems?

I guess it could be possible to detect the type of the font (serif, sans-serif or monospace) and apply letter-spacing accordingly. I'll work on a small prototype to see if the idea could work.

Edit: here is what I came up with: http://codepen.io/HugoGiraudel/pen/c3aecd5c38f5c39acd278d1067e289bc. It requires a variable listing fonts as you would normally do with the font-family property. Then it parses the last item from this variable and applies letter-spacing accordingly.

Edit2: another solution would be to use some kind of boolean at the top of the file, specifying the type of the used font (instead of detecting it) like $font-type: sans-serif !default. Requires manual work, but since you have to specify grid and gutter size, I guess it could work as well.

I'm getting the issue in Safari 6.0.2 and Chrome 26.
My font stack is: verdana, arial, helvetica, sans-serif

Seems like the whitespace hacks are now no longer reliable. Probably going to have to go back to collapsing the whitespace in the source when using inline-block layouts :/

Maybe using the ch unit as I suggested on another issue would work?

amends to `word-spacing` in v0.2.2 causing layout breakage