abernier/README.md

## README.md

      
    Raw
  

              README.md
            
          
## index.coffee
alert $('body').baseline()

## index.html
<!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.baseline.coffee
$ = @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))
	<!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))