rotates the header row text using canvas. closes dorey#3

dorey · dorey · commit d4d091de8a0d · 2013-11-11T21:56:52.000-08:00
diff --git a/coffee/comparison_table.coffee b/coffee/comparison_table.coffee
@@ -92,12 +92,17 @@ do ->
   testEquality(`[[]]==[[]]`, "`[[]]`", "==")
   testEquality(`[]==[]`, "`[]`", "==")
 
+supportsCanvas = do ->
+  el = document.createElement "canvas"
+  !!(el.getContext && el.getContext("2d"))
+
 @buildComparisonTable = (values, comparator)->
   comps = (new ForComparison(v) for v in values)
   $table = $("<table>", class: "comparisons")
   $headRow = $("<tr>").append("<td>").appendTo($table)
   for comp in comps
-    $("<td>", class: "header col").html($("<span>", text: comp.asString)).appendTo($headRow)
+    $el = if supportsCanvas then rotateText(comp.asString) else $("<span>", class: "rotate", text: comp.asString)
+    $("<td>", class: "header col").html($el).appendTo($headRow)
   for valX, x in comps
     $tr = $("<tr>").appendTo($table)
     $("<td>", class: "row header").text(valX.asString).appendTo($tr)
@@ -113,12 +118,22 @@ do ->
   comps = (new ForComparison(v) for v in values)
   $table = $("<table>", class: "comparisons")
   for comp in comps
-    $tr = $("<tr>").html($("<td>", text: comp.asString)).appendTo($table)
+    $tr = $("<tr>").html($("<td>", class: "header row", text: comp.asString)).appendTo($table)
     $td = $("<td>", class: "cell").html($("<div>", html: "&nbsp;")).appendTo($tr)
     val = (new Function("if(#{comp.asString}){return true}else{return false}"))()
     if val
       $td.addClass("green")
     expression = " if (#{comp.asString}) { /* #{if val then 'executes' else 'does not execute'} */ } "
     $("<td>", class: "expression").html(expression).appendTo($tr)
+  $table
 
-  $table  
+rotateText = (txt, cHeight=80)->
+  canv = document.createElement("canvas")
+  canv.width = "25"
+  canv.height = cHeight
+  c = canv.getContext("2d")
+  c.rotate(Math.PI / 2)
+  c.font = "15px Monospace"
+  c.textAlign = "right"
+  c.fillText(txt,cHeight,-10)
+  canv
diff --git a/js/comparison_table.js b/js/comparison_table.js
diff --git a/simple.css b/simple.css
@@ -1,6 +1,13 @@
 table.comparisons {
     border-spacing: 0;
 }
+table.comparisons td.row.header {
+  text-align: right;
+  font-family: Monospace;
+  font-size: 15px;
+  font-weight: 600;
+  padding-right: 14px;
+}
 table.comparisons td.cell {
     padding: 1.5px;
 }
@@ -19,15 +26,18 @@ table.comparisons td.cell.green div {
   border-color: #0b6c0b;
 }
 table.comparisons td.header.col {
-	height: 100px;
+	height: 90px;
 }
-table.comparisons td.header.col span {
-	position: absolute;
-	-moz-transform:rotate(90deg);
-  	-webkit-transform:rotate(90deg);
-  	-o-transform:rotate(90deg);
-  	-ms-transform:rotate(90deg);
-  	transform:rotate(90deg);
+table.comparisons td.header.col span.rotate {
+  position: absolute;
+  font-family: Monospace;
+  font-size: 15px;
+  font-weight: 600;
+  -moz-transform:rotate(90deg);
+  -webkit-transform:rotate(90deg);
+  -o-transform:rotate(90deg);
+  -ms-transform:rotate(90deg);
+  transform:rotate(90deg);
 }
 table.comparisons .expression {
   font-size: 13px;
