Skip to content

Instantly share code, notes, and snippets.

@tow8ie
Last active March 21, 2016 23:00
Show Gist options
  • Save tow8ie/0d61cd8d91c88ee3f231 to your computer and use it in GitHub Desktop.
Save tow8ie/0d61cd8d91c88ee3f231 to your computer and use it in GitHub Desktop.
WhatFont Bookmarklet that can be served via HTTPS, so that it works in Firefox.
@-webkit-keyframes slideDown {
from {
max-height: 0
}
to {
max-height: 250px
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
* {
cursor: default!important
}
.__whatfont_basic {
background: transparent;
border: 0 solid black;
border-bottom: 0 solid black;
border-left: 0 solid black;
border-right: 0 solid black;
border-top: 0 solid black;
border-radius: none;
-moz-border-radius: none;
-webkit-border-radius: none;
bottom: auto;
box-shadow: none;
-moz-border-radius: none;
-webkit-box-shadow: none;
clear: none;
color: inherit;
cursor: auto;
float: none;
font: inherit;
height: auto;
left: auto;
list-style: none;
margin: 0;
max-height: none;
max-width: none;
min-height: none;
min-width: none;
overflow: visible;
padding: 0;
position: static;
right: auto;
text-align: inherit;
text-decoration: none;
text-indent: 0;
text-shadow: inherit;
text-transform: none;
top: auto;
visibility: visible;
width: auto;
z-index: auto;
zoom: 1;
-webkit-font-smoothing: antialiased
}
.__whatfont_basic * {
color: inherit
}
.__whatfont_basic a,
.__whatfont_basic a:visited .__whatfont_basic a:hover,
.__whatfont_basic a:active {
color: inherit;
cursor: pointer!important;
text-decoration: none
}
.__whatfont_elem {
background: rgba(0, 0, 0, 0.9);
background: -moz-linear-gradient(top, rgba(30, 30, 30, 0.95), rgba(0, 0, 0, 0.9));
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(30, 30, 30, 0.95)), to(rgba(0, 0, 0, 0.9)));
border: 1px solid black;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: inset 0 0 1px #555, 0 0 5px #000;
-moz-box-shadow: inset 0 1px 0 #555, 0 0 5px #000;
-webkit-box-shadow: inset 0 1px 0 #555, 0 0 5px #000;
color: #fff;
font-family: "Helvetica Neue", sans-serif;
font-size: 14px;
line-height: 1.286;
padding: 0;
text-shadow: 0 -1px 0 #111;
z-index: 2147483647
}
.__whatfont_button {
background: #333;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#555), color-stop(0.5, #333), color-stop(0.51, #333), to(#222));
background: -moz-linear-graident(top, #555 50%, #333 1%, #222);
border: 1px solid #000;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: inset 0 0 1px #aaa, 0 1px 0 #111;
-moz-box-shadow: inset 0 0 1px #aaa, 0 1px 0 #111;
-webkit-box-shadow: inset 0 0 1px #aaa, 0 1px 0 #111;
font-weight: 500;
padding: 3px 6px;
text-shadow: 0 1px 0 #000;
text-align: center
}
.__whatfont_tip {
display: none;
font-weight: 500;
line-height: 1;
opacity: .9;
padding: 4px 5px 6px 5px;
position: absolute;
z-index: 2147483647
}
.__whatfont_control {
box-shadow: inset 0 0 1px #555, 0 0 2px #000;
-moz-box-shadow: inset 0 1px 0 #555, 0 0 2px #000;
-webkit-box-shadow: inset 0 1px 0 #555, 0 0 2px #000;
padding: 4px 8px;
position: fixed;
right: 10px;
top: 10px
}
.__whatfont_exit {
cursor: pointer;
font-weight: 500
}
.__whatfont_help {
color: #eee;
font-size: 12px
}
.__whatfont_help strong {
font-weight: 500
}
.__whatfont_panel {
padding: 0;
position: absolute;
width: 260px;
z-index: 214748364
}
.__whatfont_panel_title {
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.3)), color-stop(0.6, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0)));
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
color: #fff;
font-size: 1.1em;
font-weight: bold;
padding: 4px 16px 4px 10px;
position: relative;
text-align: center;
text-transform: capitalize
}
.__whatfont_panel_title:before,
.__whatfont_panel_title:after {
border-style: solid;
content: '.';
display: block;
height: 0;
position: absolute;
text-indent: -30000px;
width: 0
}
.__whatfont_panel_title:before {
border-color: black transparent;
border-width: 0 7px 7px 7px;
left: 7px;
top: -8px
}
.__whatfont_panel_title:after {
border-color: #666 transparent;
border-width: 0 6px 7px 6px;
left: 8px;
top: -6px
}
.__whatfont_close_button {
font-size: 18px;
bottom: 0;
cursor: pointer;
display: inline-block;
line-height: 22px;
margin: 0;
height: 22px;
padding: 1px;
position: absolute;
right: 7px;
top: 0;
vertical-align: middle
}
.__whatfont_close_button:hover {
color: #aaa
}
.__whatfont_panel_content {
overflow: hidden;
padding-bottom: 10px;
-webkit-animation: slideDown .4s 0 1 ease-in-out
}
.__whatfont_clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
}
.__whatfont_panel_content .__whatfont_panel_label,
.__whatfont_panel_content div.__whatfont_panel_label,
.__whatfont_panel_content dt.__whatfont_panel_label {
color: #aaa;
font-size: 12px;
font-weight: bold;
line-height: 1.5;
text-shadow: 0 -1px 0 black
}
.__whatfont_panel_content ul.__whatfont_panel_properties>li {
border-bottom: 1px solid #000;
border-top: 1px solid #4a4a4a;
margin: 0 6px;
padding: 5px 4px
}
.__whatfont_panel_content ul.__whatfont_panel_properties>li:first-child {
border-top: 0;
margin-top: 0;
padding-top: 0
}
.__whatfont_panel_content ul.__whatfont_panel_properties>li:last-child {
border-bottom: 0;
margin-bottom: 0;
padding-bottom: 0
}
.__whatfont_panel_content .__whatfont_panel_value,
.__whatfont_panel_content div.__whatfont_panel_value,
.__whatfont_panel_content dt.__whatfont_panel_value {
font-weight: 500;
text-shadow: 0 1px 0 black
}
.__whatfont_panel_content .__whatfont_fniu {
text-decoration: line-through
}
.__whatfont_panel_content .__whatfont_fiu {
font-style: italic
}
.__whatfont_panel_content .__whatfont_size {
float: left;
width: 48.6%;
zoom: 1
}
.__whatfont_panel_content .__whatfont_line_height {
margin-left: 50%;
width: 48.6%;
zoom: 1
}
.__whatfont_highlighted {
cursor: default!important
}
.__whatfont_panel dt.__whatfont_typeface {
color: white;
font-size: 16px
}
.__whatfont_type_preview {
background: #444;
box-shadow: 0 0 2px #555, inset 0 0 2px #111;
-moz-box-shadow: 0 0 2px #555, inset 0 0 2px #111;
-webkit-box-shadow: 0 0 2px #555, inset 0 0 2px #111;
border: 1px solid #111;
color: #eee;
font-size: 1.25em;
margin: .25em 0;
overflow: hidden;
padding: 5px 10px;
text-shadow: none;
-webkit-font-smoothing: subpixel-antialiased
}
.__whatfont_panel_content .__whatfont_font_services {
line-height: 1;
text-align: right
}
ul.__whatfont_font_service {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0
}
ul.__whatfont_font_service li {
display: inline-block;
margin: 0;
padding: 0
}
.__whatfont_service_icon {
color: white;
display: inline-block;
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0.6)))
}
.__whatfont_service_icon:hover {
cursor: pointer
}
.__whatfont_panel_content .__whatfont_panel_tools {
color: #eee;
font: bold 11px "Lucida Grande", "Lucida Sans Unicode", verdana, sans-serif;
line-height: 12px;
margin: 12px 6px 0;
padding: 0 4px
}
.__whatfont_panel_content .__whatfont_panel_tools .__whatfont_panel_tools_left {
float: left;
width: 49.5%
}
.__whatfont_panel_content .__whatfont_panel_tools .__whatfont_panel_tools_right {
margin-left: 50%;
text-align: right
}
.__whatfont_panel_content .__whatfont_color_info_sample {
border: 1px solid #666;
display: inline-block;
height: 12px;
margin-right: 6px;
width: 12px;
-webkit-transition: border-color .2s;
-moz-user-select: none;
-webkit-user-select: none
}
.__whatfont_panel_content .__whatfont_color_info_sample:hover {
border-color: #bbb
}
.__whatfont_panel_content .__whatfont_panel_tools .__whatfont_tweet_icon {
background: url("img/tweet.png") no-repeat left top;
display: inline-block;
margin: 0;
opacity: .7;
padding-left: 22px;
-webkit-transition: opacity .3s
}
.__whatfont_panel_content .__whatfont_panel_tools .__whatfont_tweet_icon:hover {
opacity: 1
}
function _whatFont() {
var b, j, d, h, f, m, l, g;
j = {
STYLE_PRE: "__whatfont_",
CSS_URL: "https://cdn.rawgit.com/tow8ie/0d61cd8d91c88ee3f231/raw/e7d13a0cd51de2ee07541de1a32f3ed47706e7c1/whatfont.css",
LINK: null,
init: function() {
if (j.CSS_URL) j.LINK = b("<link>").attr({
rel: "stylesheet",
href: j.CSS_URL
}).appendTo("head")
},
restore: function() {
b(j.LINK).remove()
},
getClassName: function(a) {
a = typeof a === "string" ? [a] : a;
return j.STYLE_PRE + a.join(" " + j.STYLE_PRE)
}
};
d = {
ALPHABET: "abcdefghijklmnopqrstuvwxyz",
FILLSTYLE: "rgb(0,0,0)",
HEIGHT: 50,
SIZE: 40,
TEXTBASELINE: "top",
WIDTH: 600,
HISTORY: {},
init: function() {
d.CANVAS_SUPPORT = !!b("<canvas>")[0].getContext
},
restore: function() {},
mkTextPixelArray: function(a) {
var c = b("<canvas>")[0],
e = c.getContext("2d");
c.width = d.WIDTH;
c.height = d.HEIGHT;
e.fillStyle = d.FILLSTYLE;
e.textBaseline = d.TEXTBASELINE;
e.font = a.style + " " + a.variant + " " + a.weight + " " + d.SIZE + "px " + a.family;
e.fillText(d.ALPHABET, 0, 0);
return e.getImageData(0, 0, d.WIDTH, d.HEIGHT).data
},
sameArray: function(a, b) {
var e = d.WIDTH * d.HEIGHT * 4,
k;
for (k = 0; k < e; k += 1)
if (a[k] !== b[k]) return !1;
return !0
},
fontInUse: function(a) {
var c = a.family.split(","),
e = d.mkTextPixelArray(a.family),
k = 0,
n;
for (n = c.length; k < n; k += 1) {
var i = d.mkTextPixelArray(c[k]);
if (d.sameArray(e, i) && d.sameArray(d.mkTextPixelArray({
style: a.style,
variant: a.variant,
weight: a.weight,
size: a.size,
family: c[k] + ",serif"
}), d.mkTextPixelArray({
style: a.style,
variant: a.variant,
weight: a.weight,
size: a.size,
family: c[k] + ",sans-serif"
}))) return b.trim(c[k])
}
return "(default font)"
},
firstFont: function(a) {
return b.trim(a.split(",")[0])
},
detect: function(a) {
a = {
family: b(a).css("font-family"),
style: b(a).css("font-style"),
variant: b(a).css("font-variant"),
weight: b(a).css("font-weight"),
size: b(a).css("font-size")
};
return d.HISTORY[a.family] = d.HISTORY[a.family] || d.CANVAS_SUPPORT ? d.fontInUse(a) : d.firstFont(a.family)
},
weight: function(a) {
return b(a).css("font-weight")
},
style: function(a) {
return b(a).css("font-style")
},
variant: function(a) {
var b = {
bold: "Bold"
}[d.weight(a)] || d.weight(a),
a = {
italic: "Italic",
oblique: "Oblique"
}[d.style(a)] || d.style(a);
return b === "normal" && a === "normal" ? "Regular" : b === "normal" ? a : a === "normal" ? b : b + " " +
a
},
getFontStyle: function(a) {
return {
"font-family": b(a).css("font-family"),
"font-style": b(a).css("font-style"),
"font-weight": b(a).css("font-weight")
}
}
};
g = {
CSS_NAME_TO_SLUG: {},
FONT_DATA: {},
SERVICES: {},
init: function() {
g.typekit();
g.google()
},
typekit: function() {
var a = function() {
var a = null;
b("script").each(function() {
var b = this.src.match(/use\.typekit\.com\/(.+)\.js/);
if (b) return a = b[1], !1
});
return a
}();
a && b.getJSON("https://typekit.com/api/v1/json/kits/" + a + "/published?callback=?", function(a) {
if (!a.errors) g.SERVICES.typekit =
a.kit, b.each(a.kit.families, function(a, c) {
b.each(c.css_names, function(a, b) {
g.CSS_NAME_TO_SLUG[b.toLowerCase()] = c.slug
});
g.FONT_DATA[c.slug] = g.FONT_DATA[c.slug] || {
name: c.name,
services: {}
};
g.FONT_DATA[c.slug].services.Typekit = {
id: c.id,
url: "http://typekit.com/fonts/" + c.slug
}
})
})
},
google: function() {
b("link").each(function(a, c) {
var e = b(c).attr("href");
e.indexOf("fonts.googleapis.com/css?") >= 0 && (e = e.match(/\?family=([^&]*)/)[1].split("|"), b.each(e, function(a, b) {
var c = b.split(":")[0],
e = c.replace(/\+/g, " "),
d = e.replace(/ /g, "-").toLowerCase();
g.CSS_NAME_TO_SLUG[e] = d;
g.FONT_DATA[d] = g.FONT_DATA[d] || {
name: e,
services: {}
};
g.FONT_DATA[d].services.Google = {
url: "http://www.google.com/webfonts/family?family=" + c
}
}))
})
},
getFontDataByCSSName: function(a) {
a = a.replace(/^"|'/, "").replace(/"|'$/, "");
return (a = g.CSS_NAME_TO_SLUG[a]) && g.FONT_DATA[a] ? g.FONT_DATA[a] : null
},
getFontNameByCSSName: function(a) {
a = a.replace(/^"|'/, "").replace(/"|'$/, "");
return (a = g.CSS_NAME_TO_SLUG[a]) && g.FONT_DATA[a] ? g.FONT_DATA[a].name : null
}
};
h = {
TIP: null,
init: function() {
h.TIP = b.createElem("div", ["tip", "elem"], "");
b(h.TIP).appendTo("body");
b("body *:visible").mousemove(h.update);
b("body").mouseout(h.hide)
},
restore: function() {
b(h.TIP).remove();
b("body :visible").unbind("mousemove", h.update);
b("body").unbind("mousemove", h.update);
b("body").unbind("mouseout", h.hide)
},
hide: function() {
b(h.TIP).hide()
},
updateText: function(a) {
b(h.TIP).text(a).css("display", "inline-block")
},
updatePos: function(a) {
b(h.TIP).css({
top: a.pageY + 12,
left: a.pageX + 12
})
},
updateTextPos: function(a,
b) {
h.updateText(a);
h.updatePos(b)
},
update: function(a) {
this.tagName === "IMG" ? h.updateTextPos(d.detect(this) + " (May be incorrect on images)", a) : this.tagName === "EMBED" ? h.updateTextPos(d.detect(this) + " (May be incorrect on Flash)", a) : h.updateTextPos(d.detect(this), a);
a.stopPropagation()
}
};
f = {
PANELS: [],
FONT_SERVICE_ICON: {},
init_tmpl: function() {
f.tmpl = function() {
var a = b('<div class="elem panel"><div class="panel_title"><span class="title_text"></span><a class="close_button" title="Close">&times;</a></div><div class="panel_content"><ul class="panel_properties"><li><dl class="font_family"><dt class="panel_label">Font Family</dt><dd class="panel_value"></dd></dl></li><li><div class="size_line_height clearfix"><dl class="size section"><dt class="panel_label">Font Size</dt><dd class="panel_value"></dd></dl><dl class="line_height"><dt class="panel_label">Line Height</dt><dd class="panel_value"></dd></dl></div></li><li class="panel_no_border_bottom"><dl class="type_info clearfix"><dt class="panel_label"></dt><dd class="type_preview">AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz</dd></dl><div class="font_services panel_label" style="display:none;">Font Served by </div></li></ul><div class="panel_tools clearfix"><div class="panel_tools_left"><div class="color_info"><a title="Click to change color format" class="color_info_sample">&nbsp;</a><span class="color_info_value"></span></div></div><div class="panel_tools_right"><a href="https://twitter.com/share" class="tweet_icon" target="_blank">Tweet</a></div></div></div></div>');
return function() {
return a.clone()
}
}()
},
init: function() {
b("body :visible").click(f.pin);
f.init_tmpl();
f.FONT_SERVICE_ICON.Typekit = b("<span>").addClass("service_icon service_icon_typekit").text("Typekit");
f.FONT_SERVICE_ICON.Google = b("<span>").addClass("service_icon service_icon_google").text("Google Web Fonts")
},
restore: function() {
b("body :visible").unbind("click", f.pin);
b.each(f.PANELS, function(a, c) {
b(c).remove()
})
},
convertClassName: function(a) {
a.find("*").add(a).each(function(a, e) {
var d = b(e).attr("class");
if (d = d === "" ? "basic" : d + " basic") d = d.split(" "), b(e).attr("class", j.getClassName(d))
});
return a
},
typePreview: function(a, c) {
b(c).find(".type_preview").css(d.getFontStyle(a));
return c
},
fontService: function(a, c) {
var e = d.detect(a),
e = g.getFontDataByCSSName(e),
k;
k = b("<ul>").addClass("font_service");
e ? (b.each(e.services, function(a, c) {
b("<li>").append(b("<a>").append(b(f.FONT_SERVICE_ICON[a]).clone()).attr("href", c.url).attr("target", "_blank")).appendTo(k)
}), b(c).find(".font_services").append(k).show()) : b(c).find(".font_services").hide();
return c
},
fontFam: function(a, c) {
var e = b(a).css("font-family").replace(/;/, "").split(/,\s*/),
k = d.detect(a),
h = !1,
i;
ff = b(a).css("font-family");
fiu = d.detect(a);
ff = ff.replace(/;/, "").split(/,\s*/);
fiuFound = !1;
for (i = 0; i < e.length; i += 1)
if (e[i] !== k) e[i] = "<span class='fniu'>" + e[i] + "</span>";
else {
e[i] = "<span class='fiu'>" + e[i] + "</span>";
h = !0;
break
}
e = e.join(", ") + ";";
h || (e += " <span class='.fiu'>" + k + "</span>");
e = "<div class=" + j.getClassName("fontfamily_list") + ">" + e + "</div>";
b(c).find(".font_family>dd").html(e);
return c
},
sizeLineHeight: function(a, c) {
var e = b(a).css("font-size"),
d = b(a).css("line-height");
b(c).find(".size>dd").text(e);
b(c).find(".line_height>dd").text(d);
return c
},
color: function(a, c) {
var e = b(a).css("color"),
d = b(c).find(".color_info_sample"),
h = b(c).find(".color_info_value"),
i, f, g;
e.indexOf("rgba") !== -1 ? b(c).find(".color_info").hide() : (i = e.match(/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/), f = parseInt(i[1], 10).toString(16), g = parseInt(i[2], 10).toString(16), i = parseInt(i[3], 10).toString(16),
f = f.length === 1 ? "0" + f : f, g = g.length === 1 ? "0" + g : g, i = i.length === 1 ? "0" + i : i, hex_color = "#" + f + g + i, colors = [e, hex_color], color_type = 0, d.css("background-color", e).click(function(a, b, c) {
return function(e) {
b = (b + 1) % a.length;
c.text(a[b]);
e.preventDefault();
return !1
}
}(colors, color_type, h)).click())
},
tweet: function(a, c) {
var e = b(c).find(".tweet_icon"),
h = e.attr("href"),
f = d.detect(a),
f = g.getFontNameByCSSName(f) || f;
h += "?text=" + encodeURIComponent("I like this typography design with " + f + ".") + "&via=What_Font";
e.attr("href",
h)
},
panelContent: function(a, c) {
b(["typePreview", "fontService", "fontFam", "sizeLineHeight", "color", "tweet"]).each(function(b, d) {
f[d](a, c)
})
},
panelTitle: function(a, c) {
var e = d.detect(a),
e = (g.getFontNameByCSSName(e) || e) + " - " + d.variant(a);
b(c).find(".title_text").html(e).css(d.getFontStyle(a));
(function(a) {
b(a).find(".close_button").click(function(c) {
b(a).remove();
c.stopPropagation();
return !1
})
})(c);
return c
},
get: function(a) {
var c = f.tmpl();
f.panelTitle(a, c);
f.panelContent(a, c);
f.convertClassName(c);
b(c).click(function() {
b(this).find("*").css("-webkit-animation",
"none");
b(this).detach();
b(this).appendTo("body")
});
return c
},
pin: function(a) {
var c;
h.hide();
c = f.get(this);
b(c).css({
top: a.pageY + 12,
left: a.pageX - 13
}).appendTo("body");
f.PANELS.push(c);
a.stopPropagation();
a.preventDefault()
}
};
m = {
TOOLBAR: null,
init: function() {
var a = b.createElem("div", "exit", "Exit WhatFont");
b.createElem("div", "help", "<strong>Hover</strong> to identify<br /><strong>Click</strong> to pin a detail panel");
m.TOOLBAR = b("<div>").addClass(j.getClassName(["elem", "control"])).append(a).appendTo("body");
b(a).click(function() {
l.restore()
})
},
restore: function() {
b(m.TOOLBAR).remove()
}
};
l = {
shortcut: function(a) {
if ((a.keyCode || a.which) === 27) l.restore(), a.stopPropagation()
},
restore: function() {
b("body :visible").unbind("mousemove", l.updateTip);
b("body :visible").unbind("click", l.pinPanel);
d.restore();
m.restore();
h.restore();
f.restore();
j.restore();
b("body").unbind("keydown", l.shortcut);
_WHATFONT = !1
},
init: function() {
!b && jQuery && (b = jQuery);
if (typeof _WHATFONT !== "undefined" && _WHATFONT || !b) return !1;
_WHATFONT = !0;
b.createElem = function(a, c, e, d) {
var f = b("<" + a + ">"),
c = c || [],
e = e || "",
c = typeof c === "string" ? [c] : c;
c.push("basic");
f.addClass(j.getClassName(c));
typeof e === "string" ? f.html(e) : e.constructor === Array ? b.map(e, function(a) {
return f.append(a)
}) : f.append(e);
f.attr(d);
return f[0]
};
j.init();
d.init();
h.init();
f.init();
m.init();
g.init();
b("body").keydown(l.shortcut)
}
};
return {
setJQuery: function(a) {
b = a
},
setCSSURL: function(a) {
j.CSS_URL = a
},
getVer: function() {
return "1.6.1"
},
init: function() {
l.init()
},
restore: function() {
l.restore()
}
}
}
(function() {
var j, d;
j = _whatFont();
d = window.document.createElement("script");
d.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js";
d.onload = function() {
j.setJQuery(jQuery.noConflict(!0));
j.init();
};
window.document.getElementsByTagName("head")[0].appendChild(d)
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment