Raphael Text Wheel - Fix vertical font alignment issues

Raphael-vertical-text-alignment-test-wheel.js

// Show and Fix Raphael.js vertical text alignment issues
// Paste the code bellow in Raphael Playground at http://raphaeljs.com/playground.html

// Set font size, anchor and font parameters here:  
size=48, anchor='end', font='Verdana'

// Set target size, set it to 0 to disable font-size animation
target_size = 12
duration = 8 // animation duration in seconds

// The offset is in pixels as a base for corrections
// You can play with the offset to see the effects or see mis-alignments when set to 0 under IE
get_offset = function( size, sin, cos ) {
  var o = Raphael.vml ? 2.2 + size / 15: 0
  return [-o * sin, +o * cos]
}

get_baseline_offset = function( size, sin, cos ) {
  var o = - size / 3 // align all browsers on baseline
  return [-o * sin, +o * cos]
}

// Center point for the circle
cx = 320, cy = 240

// Radius for the circle based on anchor
r = { 'end': 220, 'start': 60, 'middle': 140 }[anchor]

// attributes for markers
a = { stroke:'red' }
font = { "text-anchor":anchor, "font-family":font }
text = 'expect'

// Display the wheel
paper.circle( cx, cy, r ).attr( a )

// Maximize number of steps according to font size, by 15 degrees increments
step = Math.ceil( Math.sqrt( size ) / 4 ) * 15

// Display labels around the wheel
var shapes = []
var box = null
draw_wheel = function( size ) {
  for ( angle=0; angle < 360; angle += step ) {
    var radians = angle * Math.PI / 180
    var cos = Math.cos( radians ), sin = Math.sin( radians )
    var p = [cx + r * cos, cy + r * sin]
    if ( shapes[angle] ) {
      shapes[angle].remove()
    } else {
      paper.path( ['M', p[0] -20 * cos, p[1] -20 * sin, 'l', 40 * cos, 40 * sin].join(' ') ).attr( a )
    }
    var o = get_offset( size, sin, cos )
    var bo = get_baseline_offset( size, sin, cos )
    var p1 = [p[0] + o[0] + bo[0], p[1] + o[1] + bo[1]]
    font['font-size'] = size
    var t = shapes[angle] = paper.text( p1[0], p1[1], text ).attr( font ).rotate( angle, p1[0], p1[1] )
    if ( angle == 0 ) {
      // Display the bounding box, with the offset removed
      bb = t.getBBox()
      box && box.remove()
      box = paper.rect( bb.x, bb.y, bb.width, bb.height ).attr( a )
    }
  }
}

draw_wheel( size )

duration *= 1000
lap = 1000
var time = 0;
interval = setInterval( function() {
  if ( ( time += lap ) > duration ) { clearInterval( interval ); return }
  draw_wheel( Math.round( size - ( size - target_size ) * time / duration ) )
}, lap )