Skip to content

Commit

Permalink
Ayy! This is a bookmarklet that tells you what font you're looking at.
Browse files Browse the repository at this point in the history
  • Loading branch information
alexch committed Apr 25, 2011
0 parents commit 27013e3
Show file tree
Hide file tree
Showing 4 changed files with 94 additions and 0 deletions.
4 changes: 4 additions & 0 deletions fonzie.html
@@ -0,0 +1,4 @@
<a href="javascript:var%20msg%20=%20%22Fonzie%20says:%20\%22Ayy!%20%22;var%20sel%20=%20window.getSelection();var%20n%20=%20sel.anchorNode;if%20(n)%20{msg%20+=%20sel%20+%20%27%22\n%27;var%20s%20=%20getComputedStyle(n.parentNode);atts%20=%20[%22font-family%22,%22font-size%22,%22font-style%22,%22font-variant%22,%22font-weight%22,%22line-height%22,%22text-align%22,%22text-decoration%22,%22text-indent%22,%22text-rendering%22,%22text-shadow%22,%22text-overflow%22,%22text-transform%22,%22outline-color%22,%22outline-style%22,%22outline-width%22,%22color%22,%22background-color%22];for%20(var%20i=0;i<atts.length;++i)%20{var%20a=atts[i];msg%20+=%20a%20+%20%22:%20%22%20+%20s.getPropertyValue(a)%20+%20%22\n%22;}}%20else%20{msg%20+=%20%22If%20you%20select%20some%20text,%20I%27ll%20tell%20you%20what%20font%20it%20is.\%22%22;}alert(msg);">Fonzie</a>

The print function is one of the most frequently used parts of Perl. You use it to display things on the screen or to send information to a file (which we'll discuss in the next article). It takes a list of things to output as its parameters.

34 changes: 34 additions & 0 deletions fonzie.js
@@ -0,0 +1,34 @@
var msg = "Fonzie says: \"Ayy! ";
var sel = window.getSelection();
var n = sel.anchorNode;
if (n) {
msg += sel + '"\n';
var s = getComputedStyle(n.parentNode);
atts = [
"font-family",
"font-size",
"font-style",
"font-variant",
"font-weight",
"line-height",
"text-align",
"text-decoration",
"text-indent",
"text-rendering",
"text-shadow",
"text-overflow",
"text-transform",
"outline-color",
"outline-style",
"outline-width",
"color",
"background-color"
];
for (var i=0;i<atts.length;++i) {
var a=atts[i];
msg += a + ": " + s.getPropertyValue(a) + "\n";
}
} else {
msg += "If you select some text, I'll tell you what font it is.\"";
}
alert(msg);
39 changes: 39 additions & 0 deletions mkbookmarklet
@@ -0,0 +1,39 @@
#!/usr/bin/env perl
#
# http://daringfireball.net/2007/03/javascript_bookmarklet_builder
# modified by Alex Chaffee

use strict;
use warnings;
use URI::Escape qw(uri_escape_utf8);
use open IO => ":utf8", # UTF8 by default
":std"; # Apply to STDIN/STDOUT/STDERR

my $src = do { local $/; <> };

# Zap the first line if there's already a bookmarklet comment:
$src =~ s{^// ?javascript:.+\n}{};
my $bookmarklet = $src;

for ($bookmarklet) {
s{^\s*//.+\n}{}gm; # Kill comments.
s{\t}{ }gm; # Tabs to spaces
s{[ ]{2,}}{ }gm; # Space runs to one space
s{^\s+}{}gm; # Kill line-leading whitespace
s{\s+$}{}gm; # Kill line-ending whitespace
s{\n}{}gm; # Kill newlines
}

# Escape single- and double-quotes, spaces, control chars, unicode:
$bookmarklet = "javascript:" .
uri_escape_utf8($bookmarklet, qq('" \x00-\x1f\x7f-\xff));

print "<a href=\"${bookmarklet}\">Bookmarklet</a>\n";

# print "// $bookmarklet\n" . $src;

print length($bookmarklet);
print " chars long\n";

# Put bookmarklet on clipboard:
`/bin/echo -n '$bookmarklet' | /usr/bin/pbcopy`;
17 changes: 17 additions & 0 deletions readme.md
@@ -0,0 +1,17 @@
# Fonzie

Ayy! This is a bookmarklet that tells you what font you're looking at.

# Install

Drag the link "Fonzie" to your bookmarks bar.

# Usage

Select some text on the page. Click the "Fonzie" bookmark link. See the font.

# License and Credits

Fonzie was written by [Alex Chaffee](http://alexch.github.com) and is in the public domain.

Built using [Bookmarklet Builder](http://daringfireball.net/2007/03/javascript_bookmarklet_builder) by John Gruber.

0 comments on commit 27013e3

Please sign in to comment.