I was looking for a hack to specifically target Chrome, but apparently it’s not possible wich CSS only because Chrome uses the same engine as Safari ; a hack would target both browsers. Correct me if I’m wrong.
That’s very well if they do render pages the same way but what if they don’t?
I’m not having any major issue here, it’s just the letter-spacing which doesn’t render the same way in both browsers and I don’t know if I should leave it as it is or look for a fix.
I’ve set the letter spacing of my H2 to -0.02em and it looks the way I want it to look on Safari; but for Chrome I’d have to set it to -0.04em to see the same result.
Have you experienced similar discrepancies?
Thx
How can you tell? .02em? That’s only 1px at em = 50px.
They both use the Webkit engine, but they may employ different rounding algorithms. Does one or the other round everything down? Up? Or, does one round up at =>.5px and down at <.5px? No matter which method used, there will be no more than 1px difference in the letter spacing.
Why don’t you just set {letter-spacing: -1px;}?
cheers,
gary
Hi Gary,
I’m not sure about the specifics, all I can say is that adding a -0.02em letter-spacing to my headings makes a subtle but noticable difference to the text on FF and IE8, exactly the way I designed the site in Photoshop.
However for Chrome to display the same thing it would need a -0.04em value.
I tend to only use relative values for font sizes so I wouldn’t like to use pixels for letter spacing.
In this case, why not? For any font size <50px computed size, the letter spacing for -.02em won’t exceed 1px.
There are reasons for multiple metrics.
cheers,
gary
Remember also that people have different fonts, font settings, and resolution sizes. And Safari has this weird… Safari font system thing going on.
exactly the way I designed the site in Photoshop.
It may be a nice thing to strive for, but browsers can’t really compare to Photoshop… mainly because browsers have traditionally sucked with graphics and lettering, and because users have a lot of control (even when they don’t know this) while people have little to no control when looking at something made in PS.
Compare to print, where someone can set how everyone sees a billboard. The billboard’s the same size for everyone. It has the same fonts. It has the same colours.
Put that on a web page, and suddenly the size, font and colours are whatever people have sitting around on their OS, what they’ve set, what their windowing system has set.
You may already be aware of this, but I had to say it. I recently had some trouble on the forums because I downloaded a font imitation which didn’t come with bold… took me a while to figure out why stuff wasn’t working right suddenly : )
You’re right, it’s a pretty good solution. It actually looks better accross most browsers except for the latest FF on Mac where the letters are a bit too close to each other. That’s because it renders my font thicker there. That’s another issue I’m having which I described in a different post
I think this will do though, thanks Gary.
Stomme poes you’re right, I shouldn’t have said that because it’s not what I meant. I’m happy with the fact that my web page will look slightly different in each browser and platform - that’s part of the job.
However when I apply a CSS rule and I see that it has no effect on one browser but it does make a difference on other browsers, I try to solve that problem.
What I meant is that in Photoshop I had planned for headings to have a negative letter spacing so I expected to see that in all browsers even with minor differences.
Since you’re testing on Macs (and Windows I presume?) you’re already seeing what different windowing systems do. Since Macs make text look chunky monkey everywhere anyway, I go ahead and assume Mac users like it… if they didn’t, they’d switch to Linux : ) So FF and everyone gets fatter letters than on another OS… then see how Windows users with and then without ClearType get it… monstrous.
Now check your Firefox 3.5 on a Linux distro running Gnome : ) Then compare to Opera on Gnome. I’ve fought the same battles, and usually lost : )
Epiphany also uses webkit (like Safari and Chrome). It’s completely different with the fonts… mostly a similar problem it had back when it was Gecko-based (like Mozilla): normal text too small and button text too large.
Oh dear oh dear, I didn’t know there were such discrepancies. I test websites on 7 different browsers across 2 platforms (Mac and Windows). Thankfully I don’t test on Linux or I’d go mental 
Most of the time I design with dark text on light background which is probably why I have never noticed such difference in the interpretation of fonts. It’s much more obvious with light text on dark background.
If you have fought those battles before then I will accept that we’ve lost and move on 
I kind of like the fact that making websites isn’t an exact science.
If you have fought those battles before then I will accept that we’ve lost and move on
Well, now, don’t give up on my account. I’m also known to be extremely lazy most of the time : ) But it’s something I noticed and still notice now and then (things like, in FF on Gnome, people have a search input and a search button all in one line, which wraps on Linux but not on Windows… and the cause? Gnome apparently). Opera, on the other hand, doesn’t seem to listen to Gnome and other than taking fonts from the system, it pretty much renders like Opera on Windows (I’ve always been curious if Opera renders the same on a Mac, but I’ve actually never heard of Opera on a Mac!).
I gave up on browsers like Epiphany and Konqueror quite a while ago, but that doesn’t mean I don’t still check stuff in them regularly… at least be aware of how crappy something I’ve built looks like in them, or maybe it’s an easy fix to get them in line without ruining the other browsers…
I’m only giving up for now because I have to move on and do some work. I will keep my eyes open to solutions in the future.
I don’t bother testing in some of the browsers you’re talking about and I don’t even know what the hell is Gnome (I will look into it though). I guess what matters is to know who’s your audience.
If you’re working on a website for geeks then I suppose you need to test it on half a million browsers and platforms. Luckily for me, my client’s clients are rarely geeks! Thanks God for that.
Careful, Ubuntu’s default windowing system is Gnome (also known as a Desktop Environment) and Ubuntu’s the most popular Linux distro out there… possibly because it’s very Windows-like on the surface. Though fonts and spacing in general is mostly the differences you see, so it’s not a big deal.
Though FF’s new “png colour managment” disaster is affecting FF on Macs and Linux, but not sure if all of them. My own website looks awful on Linux because of it… on Windows it’s fine (not sure why). There’s been an uproar against Mozilla for this so hopefully they’ll ship future versions with the “feature” turned off. And I wouldn’t “fix” a website for something FF does goofy on one OS.
Agreed. Very wise, thanks.
I can say for sure that there’s very real differences between Chrome and Safari, more-so than the differences between Firefox Win and Mac. Google are consistently overhauling their browser increasing JavaScript performance (using their own rendering engine), adding support for new and upcoming web standards… and Safari has become the “slug” of the open source renderers - it’s bulky, ugly and rarely updated. I always recommend people test in both Safari and Chrome no matter what OS they use, however the discrepancies in gecko have also begun to worry me… as if we didn’t have enough to be troubled about 
For the record, and possibly off-topic, but Gnome in general is slowly moving away from mozilla stuff and switching to webkit-based rendering… which is a problem because while webkit has excellent accessibility (Apple is always working on it) on Macs, it has about zero on Gnome/Linux.
That chrome differs is not surprising… Chrome was never made specifically for the Mac OS, though as far as I know, when they make Chrome updates they are webkit updates…
remember when Safari 3 had that adjacent selector bug? Chrome had it too (Chrome 1 I guess). Safari 4 beta came out with that bug (and some rtl bugs) fixed. Later I did a manual Chrome upgrade and was happy to see that Chrome 2? had also done a webkit update. So the base is the same, but other factors outside base engine affect rendering.
What sort of differences are we talking about? Major ones that would affect the layout of a page or more subtle ones like font rendering?
Sorry if I’m off topic here but I wonder, how many browsers and platforms do you guys do testing on?
Some developers seem to test on 35 browsers across different platforms, this sounds crazy to me. Surely it would take a lot of time. I have enough work dealing with IE6, IE7, IE8, FF on Windows and Mac, Chrome, Safari, Opera and I never test on Linux. Is it really worth testing on a lot more browsers unless your audience is extremely geeky?
Nothing that would affect the layout of the page (FF Mac VS PC has those issues) but it’s just the odd thing which quirks between the two browsers (minor stuff).
I tend to test in : IE6, IE7, IE8, FF, S, C, O, L (Lynx) and on a load of mobile platforms.
Sounds like a reasonable amount of testing to me
I must say I’ve never looked into Lynx
Lynx is just a text-only browser and it’s quite interesting to see how your pages you build stand up to it ;).