ShowHN:(my weekend hack): SafariShot: Screenshots like it's running on a mac | Hacker News Reader

ShowHN:(my weekend hack): SafariShot: Screenshots like it's running on a mac

ksat.me

6 pointsksat15 comments

Even though the intent is to make the screenshot look more professional, there is a flaw that makes the result look unprofessional. The flaw is that the text in the title bar and the location bar isn't rendered as it would be on a Mac. See the difference in this reference screenshot I found: http://macamour.com/blog/wp-content/uploads/2008/06/safari4_....

Here are the problems with the text rendering that I could spot:

• The current text has too much hinting and not enough anti-aliasing. Use different font smoothing settings in whatever code you're using to overlay the text.

• The font appears to be Aktiv Grotesk, but should be Lucida Grande.

• The baseline of the URL text is not aligned with the baseline of "Google" in the search bar.

On the other hand, the light-gray-shadow embedding effect of the title looks good.

As a side note, the explanatory text has very many small grammar and capitalization errors. Getting the text revised by a friend might help. But it's not too bad, because the controls are really all you need to use the site, and the controls are explained pretty clearly.

Also, I like the fact that you give default values for everything, so you can see exactly how the app works without digging around for an image.

* I'll see what I can do. * I am using Lucida Grande, but it needs to be installed on the machine. * Should I move it down like 2 pixles? Seems fine on my machine though

Thanks for the feedback. I am not english native - ran the blog through a online-grammer-checker something and it said everything is fine :)

Would the average person who prefers "professional" screenshots be able to tell the difference between Aktiv Grotesk and Lucida Grande? You have a sharp eye, but I would think 99.9% of the population looking at these screenshots would not complain about Aktiv Grotesk.

Actually, from looking at the generated image, I was only able to tell that the font looked vaguely "wrong". I found out it was specifically Aktiv Grotesk only by going through many steps on Identifont: http://www.identifont.com/identify?22+%20+9J+39+1R6+26RB+4PW....

But still, I agree that most people would probably not notice the font being off at all. And the font smoothing difference jumps out at me the most; if the use of Aktiv Grotesk was the only difference from real Safari, I might not have noticed anything.

The reason Safari screenshots may be considered more "professional" looking may also be the reason it is my preferred browser - the interface chrome is minimal and monochrome, making it easier for me to focus on the content.

Yeah thats true. But frankly I never got why practically "everybody" takes their screenshots on a mac - It's almost like I've to go buy a mac just to take the screenshots and do my screencasts.

P.s: I did buy a mac last year.

The developers may actually be using Linux/Windows, but the designers have quite a bit of influence if they control the final presentation of the product to the user. The bias towards Mac screenshots could be due to designers typically using Macs (a stereotype that has proven to be true more often than not from my experience).

One of the reasons is that type looks much better on a mac.

In general, I agree that Helvetica looks much prettier on a Mac than on Windows (one of the main reasons I despise seeing font-family:Helvetica,Arial,sans-serif; on pages). Some other fonts don't look too bad on Windows, though.

I don't know much about font rendering; this is just what I've noticed. For what it's worth, some screenshots of the same text with font-family set to Helvetica [0], Myriad Pro, and Segoe UI on Windows 7, Firefox.

Helvetica(/Arial): http://snag.gy/Jneor.jpg Myriad Pro: http://snag.gy/f2IJx.jpg Segoe UI: http://snag.gy/ujvpX.jpg

[0] This actually defaults to Arial, I believe, because afaik Helvetica is not bundled with Windows. (Is there no way to use asterisks on HN?)

Hi OP Here: Safarishot is a Js tool that will wrap your screenshots (taken on any os) in a nice safari window running on a mac.

add the ability to go grab the screenshot (just give it the url) and you've got a winner

:), thanks, that'll cost server resource. I don't know if I can run it for free. I'll try though

Neat idea. But cannot save my image on chrome

Hi. Thanks. Yeah noticed that too. Seems like bug in chrome? Can you try on firefox. That's the one where everything seems to be working just fine. reading localfiles, canvas and save image.

Why was this article removed from HN home page?

Reply on news.ycombinator.com