search

necolas / griddle

A CSS grid constructor
http://necolas.github.com/griddle
MIT License
367 stars 28 forks source link

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

Open philwareham opened 11 years ago

philwareham commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

Like this one? https://github.com/necolas/griddle/blob/212aa11709a5c46243ecea044579138487e2505b/griddle.scss#L36

philwareham commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

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

necolas commented 11 years ago

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 commented 9 years ago

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