better songtitle alignment

src/css/songselect.css

@@ -34,25 +34,33 @@ ul li{
     height: 100%;
 }
 
+.song-title-char {
+    text-align: center;
+    width: 45px;
+    display: block;
+}
+
+.song-title-char:before {
+    content: attr(alt);
+    position: absolute;
+    -webkit-text-stroke: 0.25em #000;
+    z-index: -1;
+}
+
 .song-title{
     float: right;
-    width: 0px;
-    padding: 12px 24px;
+    width: 45px;
+    padding: 10px 0px;
     word-wrap: break-word;
     font-size: 22pt;
     color: white;
-    margin-right: 10px;
     position: relative;
     z-index: 1;
     line-height: 28px;
 }
 
-.song-title:before {
-    content: attr(alt);
-    position: relative;
-    -webkit-text-stroke: 0.25em #000;
-    z-index: -1;
-    word-wrap: break-word;
+.song-title-space {
+    line-height: 25px;
 }
 
 .song{

src/js/songselect.js

@@ -106,8 +106,13 @@ function SongSelect(){
 			var songTitle = songDir.substr(songID.length+1, songDir.length-(songID.length+1));
 			var songTitleSpace = songTitle.replace(/ /g, ' ');
 			
-			_code += "<div id='song-"+songID+"' class='song'><div class='song-title stroke-sub' alt='"+songTitleSpace+"'>"+songTitleSpace+'</div>';
-			_code += "<ul class='difficulties'>";
+			_code += "<div id='song-"+songID+"' class='song'><div class='song-title'>";
+			for (var c=0; c<songTitle.length; c++) {
+				var ch = songTitle.charAt(c) == ' ' ? '&nbsp;' : songTitle.charAt(c);
+				var cl = ch == '&nbsp;' ? 'song-title-char song-title-space' : 'song-title-char';
+				_code += '<span class="' + cl + '" alt="' + ch + '">' + ch + '</span>';
+			};
+			_code += "</div><ul class='difficulties'>";
 			
 			for(var j=0; j<songDifficulties.length; j++){
 				
@@ -148,12 +153,6 @@ function SongSelect(){
 		}
 		
 		$("#song-container").html(_code);
-		$('.song').each(function(){
-			var title = $(this).find('.song-title');
-			var height = $(title).height();
-			$(title).css('margin-top', '-' + height/2 + 'px');
-			document.styleSheets[0].addRule('#'+$(this).attr('id')+' .song-title:before','top:'+height/2+'px;');
-		});
 		$('.difficulty').hide();
 	}