

ShowHN:(my weekend hack): SafariShot: Screenshots like it's running on a mac - ksat
http://ksat.me/safarishot-your-webpage-on-safari-on-osx/

======
roryokane
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_...](http://macamour.com/blog/wp-
content/uploads/2008/06/safari4_screenshot.png).

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.

~~~
veemjeem
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.

~~~
roryokane
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...](http://www.identifont.com/identify?22+%20+9J+39+1R6+26RB+4PW+2L+G39+8W+30D+2BT+42+1U9+1KU+53K+4A+19+6X5+1R0+1KK+1T+9Z).

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.

------
pirateking
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.

~~~
ksat
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.

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

~~~
revolutions
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?)

------
ksat
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.

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

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

------
sleveless
Neat idea. But cannot save my image on chrome

~~~
ksat
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.

------
ksat
Why was this article removed from HN home page?

