Introducing Adobe Blank | Hacker News Reader

Introducing Adobe Blank

blogs.adobe.com

68 pointsmaguay30 comments

tl;dr: It is a fall-back font of which every glyph is zero width. It can be, for example, used as a substitute font while the actual web font loads; the text width of zero indicates that the web font is yet to be loaded.

This seems like a whole lot of effort for nothing. Why not just use the onerror callback of an image to check if it's loaded?

Because "an image" is not the webfont you're actually interested in maybe?

You're not using an actual image, just an image object. Set the src attribute of the image object to the URL of the webfont and the browser will call the onerror callback when it finishes loading.

See here:

http://stackoverflow.com/a/5371426

Just because a font has "loaded" does not mean it's ready to be used. This very problem makes it hard to load @font-face fonts on demand in <canvas> apps as there is a certain amount of time you must wait for the font to actually load that is not exposed or accounted for in any browser APIs. Even if you include a font in @font-face with a data: URI, you cannot immediately start using it.

Saw the title and thought it was an early April fools. Got ready to comment how knowing adobe even an app showing just a blank screen would be full of tons of security vulnerabilities and need biweekly updates.

I assumed it was a screensaver.

That was my first thought to but skimmed it and sounded like there might be some uses for it. Then reached the link at the bottom "this font was built using only AFDKO tools" and immediately thought that AFD stood for "April Fools Day", I had been fooled, and clicking the liked would just be a page explaining the joke. I couldn't figure out what the KO could stand for though so I clicked and turned out the abbreviation was just for "Adobe Font Development Kit for OpenType".

The terrible kerning makes this font barely readable.

What? It has great keming!

Very dean and modem.

Flatter than flat.

Not sure if Serif or Sans, though...

it is sans, obviously. a font without serifs (and this one has definetly no serifs) can not be serif.

I would've gone with "monospace", but I guess I can't argue with your approach...

I'm interested in the technique suggested for font loading. As an exercise I just created a font containing a single character at zero width. The resulting file size is considerably smaller than Blank (1440 bytes, versus 80k) which makes it nicer to inline, but should be able to serve the same purpose for font loading:

Create a span containing the character, with the font family referring to the font being loaded and the empty font (inlined in the css) and when the width is non-zero the font is loaded.

the generalized form of this technique (which you can also use to see if somebody has a font installed locally) is to basically create two rules:

    .load-base { font-family: comicsans-ms, verdana; }
    .load-test { font-family: fancyfont, comicsans-ms, verdana; }

and periodically check that the width of a line of nonsense text for both classes is not the same. Blank has the obvious benefit that it will be obvious when 0 != something else, but you can do it if you have some reasonable expectation that some other common font will exist with different metrics than your fancy font.

interesting to see the process behind the font, though.

As you say, if you know that the font you're loading has different metrics this approach will work, but if you have to make that sort of assumption it's not a generalised approach.

If you know that one font has zero width dimensions and one does not, then it greatly simplifies matters.

What does "All code points are rendered using a non-spacing and non-marking glyph." mean?

It means any and all text rendered in it is gonna be blank and take no space.

There's an interesting issue with invisible fonts that hasn't been pointed out in the comments thus far.

In a job interview last year, I was asked to name some ways to hide an element on a page. I think I came up with seven or eight ways and listed upsides and downsides of each.

Besides obvious ones like opacity, visibility, display: none, z-index, moving the elements off-screen, setting font-size to 0, etc., one idea I came up with on the spot was to design a font with blank characters in case the div was simply text. The text would be visible to search engines but not to users.

(Since I was interviewing at a large search company, I also raised the point that they might want to start analyzing custom fonts to make sure they're not simply empty characters, if they're not already.)

The issue isn't unique to invisible fonts - in all the cases you mentioned the text would be visible to search engines but not users.

I don't think the GP made the claim that the issue was unique in that way; just that it is another way that such a phenomena can happen.

The blog post is about a new font. I see no use of it on the page. And there's not even a picture of it in the blog post.

That's a really bad way to introduce it.

Or am I missing something? (I'm on Mac OSX 10.8, Chrome 26)

You missed reading the article. The font is blank. As such, it's not very picturesque.

You wanted a picture of a zero-width font? One could argue that there were an infinite number of pictures of that font in use on that page.

Maybe you wanted to see something like this: http://d.pr/i/OaFV

‘Adobe Blank’

So they finally ran out of names for new products. It had to happen some day.

lol DDoS by Hackers News is a common curse for small websites. But "Error establishing a database connection" for only 16 points on Hackers News is a shame for Adobe.

Loading fine at 23. Perhaps you experienced an edge case load? Did a simple refresh fix it? Either way, performance seems totally fine on my end.

Reply on news.ycombinator.com