Skip to content

Instantly share code, notes, and snippets.

@abernier
Last active January 27, 2018 10:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save abernier/3157389 to your computer and use it in GitHub Desktop.
Save abernier/3157389 to your computer and use it in GitHub Desktop.
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="https://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.12.8/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))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment