Permalink
Browse files

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

  • Loading branch information...
0 parents commit 27013e3c1548aafd049ebed992640ad38219656b @alexch committed Apr 25, 2011
Showing with 94 additions and 0 deletions.
  1. +4 −0 fonzie.html
  2. +34 −0 fonzie.js
  3. +39 −0 mkbookmarklet
  4. +17 −0 readme.md
@@ -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.
+
@@ -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);
@@ -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`;
@@ -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.