0

So any idea why does Chrome (17.0.963.79) & Opera (12.12) ignores my "letter-spacing: 0.03em;" to the body text? While in Mozilla and IE it works.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />
    <title>test page</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            font: normal 100%/1.375  Georgia, serif;
        }
        html { background-color: #333; }
        body { 
            margin: auto; 
            max-width: 75em;
            padding-top: 1.375em;
            background-color: #fff;  
            }
        h1 {
            font-weight: normal;
            word-spacing: -0.05em;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            }
    </style>
</head>

<body>

    <h1>Hello World</h1>

</body>

</html>
cimmanon
  • 67,211
  • 17
  • 165
  • 171
Jack
  • 172
  • 8
  • 1
    Without you posting any code, it's quite difficult to say. – jmoerdyk Feb 14 '13 at 21:00
  • 3
    As a general comment, don't expect all browsers to display subtleties identically. Browsers have different interpretations, bugs, and quirks that become more pronounced the further you stray from simple declarations. When you say 'IE works' for example, each version of IE 'works' **very** differently. – sscirrus Feb 14 '13 at 21:03
  • 2
    You're dealing with subpixel calculation and rendering. Results can and will vary; even the device display (e.g. a high DPI display) can impact the final result. – Tim M. Feb 14 '13 at 21:50
  • 1
    See also: http://stackoverflow.com/questions/7811225/is-there-a-way-to-make-css-letter-spacing-0-5-px?rq=1. This appears to be a bug in webkit. – Tim M. Feb 14 '13 at 22:00

1 Answers1

1

I tried your code on Chrome (Version 24.0.1312.57 m) with a 1680×1050 screen. When I flipped between your letter-spacing: 0.03em; and letter-spacing: 0.0em; it looked the same at default size, but when I zoomed in one level (CTRL +), the 0.03em text rendered wider than the 0.0em text.

So, I see several possible answers to your question:

  • At default zoom level (CTRL 0), the 0.03em letter-spacing isn't wide enough to show any difference, but zoom level +1 (CTRL +) does show a difference.
  • Maybe your down-level Chrome (17.0.963.79) doesn't handle sub-pixel letter-spacing: [tiny]em; as well as Chrome (24.0.1312.57 m) handles it.
  • Maybe your screen resolution isn't large enough to show a difference.
Steve
  • 423
  • 2
  • 7
  • 17
  • 1
    I checked on 1600x900 and 1920x1080 screen resolution. really, it works, but I had to set zoom level +2 – Jack Feb 19 '13 at 16:46
  • Interesting. I think part of the answer is what **sscirrus** wrote in a comment to the original question: rendering varies between browsers. That's obviously true between different browsers, and between different major versions of browsers, but it's probably also true between minor versions, and even the exact same browser on different video drivers and such. – Steve Jul 10 '14 at 20:54