5

I noticed that Web-kit browsers like Chrome and Safari (Windows) tend to round em values to nearest pixel, while Firefox, IE, ? Opera ? can use sub-pixel values. This is normally not a big issue, but when I use em to precisely align letter spacing or use text-shadows for consistent effect in different client resolutions this causes me headache. Take a look in the following test case.

You will see that in FF even the smallest letters still have a shadow, while Chrome rounds down the em value to zero and the first two paragraphs have no shadow.

EDIT This is not about the units. If you replace 0.03em with 0.9, 0.8, 0.7 .. px FF will display smaller and smaller shadow, while when Chrome goes below 1px it suddenly displays nothing.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="bg" xml:lang="bg" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <style type="text/css">body {font-size: 18px;} p {color: cyan; text-shadow: -0.03em -0.03em 0 rgb(0, 0, 0);}</style>
</head>
<body>

<p style="font-size:1em">No Shadow Test</p>
<p style="font-size:1.5em">No Shadow Test</p>
<p style="font-size:2em">Test</p>
<p style="font-size:2.5em">Test</p>
<p style="font-size:3em">Test</p>
<p style="font-size:3.5em">Test</p>
<p style="font-size:4em">Test</p>
<p style="font-size:4.5em">Test</p>
<p style="font-size:5em">Test</p>

</body>

</html>
Boris Hamanov
  • 3,085
  • 9
  • 35
  • 58
  • I wouldn't rely on pixel-perfect designs. They only way you can achieve them is to use an image... – Blender Apr 13 '11 at 21:16
  • My design is everything, but pixel perfect. I don't use pixels anywhere. – Boris Hamanov Apr 13 '11 at 21:24
  • `em` is based upon the height of the `m` with the current font size. As that's based on pixels, so is the `em`. – Blender Apr 13 '11 at 21:35
  • @Blender: Actually I think you mean that `em` is based on the width of the capital `M` in the current font face. `Originally the unit was derived from the width of the capital "M" in the currently used typeface` - [Wiki](http://en.wikipedia.org/wiki/Em_(typography)). This is why you should use `em` for width values and `ex` for height values when using units relative to font for elements. – Kevin Peno Apr 13 '11 at 21:38
  • @avok00: What happens if you set it to 1.2px, 1.6px, etc? This would verify that it is indeed a rounding error. – Kevin Peno Apr 13 '11 at 22:06
  • You can try it. FF still scales and changes appearance on values 1.2, 1.4 etc, while Chrome only changes things on 1px steps. Due to that inaccuracy I have problems in other areas of my site, but the text shadow is the most obvious. – Boris Hamanov Apr 13 '11 at 22:09
  • I believe anything but whole pixels makes the user agent interpret it even more than usual. There must be a lot more problems than just Chrome with this if you want the text to look exactly the same? (also with XP/Vista/7/OSX etc.) – plebksig Apr 13 '11 at 22:15
  • I suppose you are right. The text shadow effect is not that important of course. I am just curious about it. – Boris Hamanov Apr 13 '11 at 22:18

3 Answers3

3

The problem is that chrome won't position text and text shadows at sub-pixel increments, so it rounds to the nearest pixel.

You can see the same effect with letter-spacing where firefox will allow non-integer values in pixels, while chrome will round the closest pixel.

Kostia
  • 6,284
  • 1
  • 18
  • 15
3

First thing I would suggest is that you use ex units for y coordinates and height values as a fonts may have a separate x-heights. This may help curve rounding errors in your favor, but probably not. The worst case is that it is at least accurate to the font itself.

Second, unfortunately I cannot find any reference in the spec that says what a browser should in this case which is why we are seeing the differences? If I'm wrong, you could always file a bug with the webkit team?

As far as a solution I can only suggest you determine the best path in this case. Think of it as similar to IE not supporting text-shadow. If the rounding fails, it won't appear. Then make decisions on your design based on this stance.

What I personally do is use pixels for things I know are likely to have rounding errors, such as shadows and borders.

Kevin Peno
  • 9,107
  • 1
  • 33
  • 56
  • Thanks! Nice write up, but I don't know if the units are the problem. Please, see my edit. – Boris Hamanov Apr 13 '11 at 21:56
  • @avok00: the only advice I can give is already in my answer. You know that webkit rounds to 0 in some cases, so using pixels in cases where rounding could happen is probably the best option. – Kevin Peno Apr 13 '11 at 22:12
  • Actually in very low resolutions (phones) I will need values of 0.4px for example, something that FF/IE displays (smaller than the 1px setting, don't know how) and Web-kit does not. – Boris Hamanov Apr 13 '11 at 22:16
0

I wouldn't suggest em. I'd use px (pixels). Here is an EM to PX converter: http://convert-to.com/446/pixels-px-to-em-conversion.html

PX is the same across all browsers (as far as I know)

alexyorke
  • 4,224
  • 3
  • 34
  • 55
  • 2
    Pixels are relative to screen resolution, while ems are relative to font size (font size is also relative to the font face/family itself). Also note that em to px "converters" assume a ton about a font, typically by assuming that 16px = 1em, which is not always the case. – Kevin Peno Apr 13 '11 at 21:19
  • Do you know how 10px text looks on 800X600 and how does it look on 1920X1080 ? VERY DIFFERENT. The days of good fixed pixel designs are in the past. – Boris Hamanov Apr 13 '11 at 21:22
  • 2
    I disagree. Paul Irish, a staple in the dev community, uses px instead of em for font sizes _**[as shown here](http://na.isobar.com/standards/#_pixels_vs_ems)**_. – Code Maverick Apr 13 '11 at 21:44
  • 2
    @Scott, do that then. Then, when you deal with drastic screen changes like the iPhone doubling pixels in the screen area, don't complain that you have to effectively write a new stylesheet. Honestly, I'm not trying to start a pixel vs. font sizing battle here. Just stating the facts. Both are relative units, you pick which way to be relative. :) – Kevin Peno Apr 13 '11 at 21:57
  • 1
    @Scott: Also, it should be noted that, in the page you linked, it is stated that `We use the px unit of measurement to define font size`, not `you should use this cause it is the best way`. His preference is for pixels. – Kevin Peno Apr 13 '11 at 21:58
  • I also use px for font-size. The base size that is. And I calculate that from client resolution. Paul or John or Dexter may use whatever he wants, fixed width and pixel designs suck and they suck hard. They are easy to make due to W3C obsolete specifications if that is the main thing for you. – Boris Hamanov Apr 13 '11 at 22:00
  • 1
    10 pixel text is 10 pixels, no matter what resolution you've got, that's the whole point of it. And there's hardly a single computer with less than 1280xXXX nowadays anyway. Pixel fonts give the most consistent look imo. – plebksig Apr 13 '11 at 22:00
  • 1
    @Alexy, the problem with percents is that a percent on an element and a percent on font related css properties is totally different from one another. `width: 100%` means "100% of the parent element" while `font-size: 100%` works similar to `font-size: 1em`. Because of that I'd suggest against using percentages unless you actually mean 100% of the element. – Kevin Peno Apr 13 '11 at 22:01
  • 1
    @NeXib: 10px is always 10px, however it's size is relative to the area of pixels on the screen. You can say that there is hardly a computer with less than 1280x#### pixel screen, but it is quite obvious that you don't design with mobile in mind. – Kevin Peno Apr 13 '11 at 22:02
  • 1
    PLEASE, LEAVE THE PIXELS AND SEE MY EDIT. The question is not about that! – Boris Hamanov Apr 13 '11 at 22:07
  • Kevin Peno: The device scales that on it's own, at least all proper mobile devices do, it's not like a device can render anything smaller than a pixel anyway. – plebksig Apr 13 '11 at 22:11
  • @avok00, @Kevin Peno - I understood it was about subpixels, I was just mentioning what [Paul Irish](http://www.paulirish.com) says with respect to fonts, px, and em due to your guys' first comments on this answer. With all due respect, I think I will listen to the guy who is a jQuery team member, a Google Chrome team member, and the lead developer for [Modernizr](http://www.modernizr.com) and [Html5Boilerplate](http://www.html5boilerplate.com). The guy knows standards and best practices like no other I've seen on the web. – Code Maverick Apr 14 '11 at 15:06
  • @avok00, @Kevin Peno - And in response to your whole iOS double pixel comment, if you DID use the [Html5Boilerplate](http://www.html5boilerplate.com) you'd see that in your style.css, under the media queries section, all you'd have to do is simply uncomment this line: `html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }`, thereby telling iOS and WinMobile not to mobile-optimize your text. No extra style-sheet. One simple line. – Code Maverick Apr 14 '11 at 15:14
  • I wish there was a universal unit that would show the same across all devices. – alexyorke Apr 14 '11 at 19:14
  • I used -0.3px instead of -0.03em and it displayed the same. 1px looks different than 0.3px, so it doesn't round it in Safari... – alexyorke Apr 14 '11 at 19:18