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

[philwareham]

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.

[necolas]

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.

[philwareham]

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?

[necolas]

Like this one?

griddle/griddle.scss

Line 36 in 212aa11

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

[philwareham]

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?

[KittyGiraudel]

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.

[simmo]

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

[necolas]

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 :/

[joeyhoer]

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