Number off-center in notification bubble


#1

I’m seeing this in Chrome on OS X:

The number is high of center after the last update.

cc @simurai @codinghorror


#2

Yeah, looks like Chrome changed something how text is rendered. If you compare http://codepen.io/simurai/pen/8bd11e96ac9e94eb971b626973e36f36

Chrome

Safari

So in Chrome the “space” at the top is missing. I’m not too much into typography, so maybe it’s the correct way but harder to vertical center numbers like that.

Update

Seems like Opera and Firefox also do it like that (screenshot Firefox):

So if this is the correct way, then counter balance with more padding-top would work, but would be wrong in Safari.


#3

Interesting … thanks for the hint on how to debug something like this!


#4

Seems it’s font related:


#5

Curse those font metrics! :laughing: So is Safari custom aligning things whereas the other browsers aren’t?


#6

Yeah, this is basically just a nightmare in CSS. Most fonts are made to sit on a line, not in the middle of a box. CSS however somehow wants to have them in the middle of the “line-height”, a concept that didn’t previously exist. So while fonts are drawn in a box, that box doesn’t need to be filled fully and there was previously no reason for that box to have the same amount of space at the top as it has at the bottom: as long as it sits on the baseline it used to be fine. Most fonts we still use, like Helvetica (1957) or Courier (1955), are pretty much ancient.
This creates problems: a font might not visually sit in the vertical middle of a box in CSS. In fact, it may vary wildely between fonts (i.e. Helvetica,Arial,sans-serif could go all over the place depending on the font selected).
In my experience Safari on OS X is very reliable, perhaps because compensates for a lot of fonts. The rest is basically a crap-shoot and you’re left making presumptions about sizes and relative amounts of padding required.

So there is no right way, frustratingly. Safari implements it in accordance with the intention of CSS in a way you can actually make stuff look right. Font rendering on Apple software is still ages beyond the rest in every possible way. The others are perhaps more “straight” but in a way that’s almost impossible to work with.

The solution? :tired_face:


#7

Thought some more on this. As I said the problem originates with old fonts not being designed with css text alignment in mind. New fonts sometimes are though. Take a look at these:

From left to right: Chrome 40, Firefox 35, Safari 8

Helvetica Neue

Source Sans Pro (Adobe, 2013)

Open Sans (Steve Matteson for Google, 2010)

So, web fonts to the rescue?


#8

Looks like. Would be cool if browsers would ship with a few of the newer fonts like Open Sans or so. Could be used like system fonts. But maybe tricky with licensing.


#9

Usually not actually. These two examples are released under the Open Font License which basically allows you to do anything you like with it, and you can freely package them in software.