Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Baseline detection
alert $('body').baseline()
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title></title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script>
<script src="jquery.baseline.coffee" type="text/coffeescript"></script>
<script src="index.coffee" type="text/coffeescript"></script>
</head>
<body>
</body>
</html>
$ = @jQuery ? require 'jQuery'
detectBaseline = (el = 'body') ->
###
+----+ ^
| +-+| | baseline
|.|A|| v
| +-+|
+----+
###
$container = $('<div style="visibility:hidden;"/>')
$smallA = $('<span style="font-size:0;">A</span>')
$bigA = $('<span style="font-size:999px;">A</span>')
$container
.append($smallA).append($bigA)
.appendTo(el);
setTimeout (-> $container.remove()), 10
$smallA.position().top / $bigA.height()
$.fn.baseline = ->
detectBaseline(@get(0))