- This topic is empty.
March 5, 2013 at 2:59 am #43149
I don’t know how many of you have experimented with inline-block layouts, but you probably know the huge downfall of having white space awareness between the HTML elements. I want to keep HTML syntax clean so I started to look at possible solutions.
The best way to combat the issue without external resources seems to be word-spacing. It can be used quite well to disable the space between elements, but it has a major downfall of it’s own: whatever value you use, it’ll depend on font in use. For example I found out that the value of -.5625em (or was it -.5265…) to hit the sweet spot with Times New Roman and Arial, but switching font to Verdana broke the layout.
A nice solution to this might be the use of a webfont so you know what will be the exact right value for that particular font, and then just trust that the browser is capable of displaying the font. Which got me thinking a bit further: why not create a font with zero width space?
Test page: http://piittinen.name/html5css3/zerowidth/ (don’t mind the text there)
Unfortunatenaly it seems this **doesn’t work in Chrome**. For whatever reason Chrome doesn’t use the space defined in the ZeroWidth webfont. Firefox and IE seem to work perfectly with this.
Other things that might cross your mind:
1. font-size: 0px; doesn’t work: Chinese Chrome always has a minimum size of 12pt. You don’t want to break your solution only because someone uses a different language.
2. negative margin: harder solution than word-spacing, you don’t want first element of each row to have negative margin for an example. Both use the same value though.
3. Place HTML comments between elements so there can’t be white space: cumbersome.
4. Just write the elements tightly next to each other: visually hard on eyes while writing code, but is the most reliable method.
I’d be interested to see if anyone can get the ZeroWidth font solution to work with Chrome or if any better solution than the #4 on the list above exists.March 5, 2013 at 3:53 am #126981Kitty GiraudelParticipant
As far as I can tell, the word-spacing method doesn’t work anymore since WebKit recently changed the way inline-blocks and word-spacing behave (http://trac.webkit.org/changeset/137494).
If no mistake the best way so far are negative margin or HTML comments, depending on what you want to edit.March 5, 2013 at 4:06 am #126983
I wonder if Chrome now works incorrectly when it adds spaces between inline-blocks even when the space in the font is zero width? It seems as if it treats the space between the inline-blocks to be of the same font as in the inline-block. Guess I need to test more when I have the time.March 5, 2013 at 4:28 am #126991
Inline-block menu using font-size:0 in UL–>
Works fine in Chrome.March 5, 2013 at 4:37 am #126993
The problem is that different locales have different default settings. As far as I know Chinese Chrome forces minimum font-size of 12pt and you can’t override it via CSS.March 5, 2013 at 4:42 am #126995
Then I guess you are limited to floats, unless….March 5, 2013 at 5:10 am #126996
Thanks for that. Then I guess to keep things consistent a globally working method for removing the white space would be:
This ought to always work unless there are other browsers that go ahead and force a minimum font-size? Of course adding the zero width font trick would give a double security.March 5, 2013 at 5:22 am #126999joshuanhibbertMember
I almost always use
margin-right: -.25em;March 5, 2013 at 12:02 pm #127066TheDocMember
It’s not the prettiest, but I really like using comments for this.SomethingAnother Div
A shame it works so well, really, because it’s ugly as hell.March 5, 2013 at 12:08 pm #127069chrisburtonParticipantMarch 5, 2013 at 12:28 pm #127072
I’m surprised at the comment from @joshuanhibbert …because he turned me on to inline-block in the first place.March 5, 2013 at 4:41 pm #127093
I did a test page: http://cdpn.io/wyasd
You can change stuff there by clicking radio and check boxes. These reveal that margin-right: -.25em; is not suitable automatically and you need to vary the value depending on which font you use. It is also potentially risky on bigger projects as simple changes such as changing the font or manipulating HTML code to remove white space (it could happen!) cause margin-right based solution to break. For personal projects it is safe enough, I think.
font-size: 0; is much more reliable. There are still some slight oddities between browsers and this particular example is very hard on Opera. I always succeed in finding the weaknesses of Opera so nothing new here: just don’t make things as complex as I have done on that page and it is probably OK on most sites :)March 5, 2013 at 5:10 pm #127098chrisburtonParticipant
Both font-size solutions work for me in Chrome.March 5, 2013 at 5:40 pm #127102
>Both font-size solutions work for me in Chrome.
DittoMarch 5, 2013 at 5:40 pm #127103
I added word-spacing: .25em; to the examples. It has the advantage over margin-right that the HTML syntax can be pretty much anything. The value still depends on font though so that is a weakness over the font-size solution.
The Chrome issue only displays on Chinese (or other Far East Asian) locale. For me it wasn’t enough to switch the language to Chinese, I guess I’d need to be running Chinese OS to give it a true test myself.
- The forum ‘CSS’ is closed to new topics and replies.