Web-Kit and sub-pixel values, workaround?

Asked 13/4, 2011 at 21:12 Answered 2/10, 2012 at 17:45

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>

Kassandra answered 13/4, 2011 at 21:12 Comment(8)

I wouldn't rely on pixel-perfect designs. They only way you can achieve them is to use an image... – Comatulid 13/4, 2011 at 21:16

My design is everything, but pixel perfect. I don't use pixels anywhere. – Kassandra 13/4, 2011 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. – Comatulid 13/4, 2011 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. This is why you should use em for width values and ex for height values when using units relative to font for elements. – Antivenin 13/4, 2011 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. – Antivenin 13/4, 2011 at 22:6

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. – Kassandra 13/4, 2011 at 22:9

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.) – Diannediannne 13/4, 2011 at 22:15

I suppose you are right. The text shadow effect is not that important of course. I am just curious about it. – Kassandra 13/4, 2011 at 22:18

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.

String answered 2/10, 2012 at 17:45 Comment(0)

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.

Antivenin answered 13/4, 2011 at 21:32 Comment(3)

Thanks! Nice write up, but I don't know if the units are the problem. Please, see my edit. – Kassandra 13/4, 2011 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. – Antivenin 13/4, 2011 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. – Kassandra 13/4, 2011 at 22:16

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)

Tracheostomy answered 13/4, 2011 at 21:16 Comment(15)

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. – Antivenin 13/4, 2011 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. – Kassandra 13/4, 2011 at 21:22

I disagree. Paul Irish, a staple in the dev community, uses px instead of em for font sizes as shown here. – Linguistics 13/4, 2011 at 21:44

@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. :) – Antivenin 13/4, 2011 at 21:57

@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. – Antivenin 13/4, 2011 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. – Kassandra 13/4, 2011 at 22:0

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. – Diannediannne 13/4, 2011 at 22:0

@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. – Antivenin 13/4, 2011 at 22: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. – Antivenin 13/4, 2011 at 22:2

PLEASE, LEAVE THE PIXELS AND SEE MY EDIT. The question is not about that! – Kassandra 13/4, 2011 at 22:7

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. – Diannediannne 13/4, 2011 at 22:11

@avok00, @Kevin Peno - I understood it was about subpixels, I was just mentioning what Paul Irish 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 and Html5Boilerplate. The guy knows standards and best practices like no other I've seen on the web. – Linguistics 14/4, 2011 at 15:6

@avok00, @Kevin Peno - And in response to your whole iOS double pixel comment, if you DID use the Html5Boilerplate 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. – Linguistics 14/4, 2011 at 15:14

I wish there was a universal unit that would show the same across all devices. – Tracheostomy 14/4, 2011 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... – Tracheostomy 14/4, 2011 at 19:18

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags