Scalebar

dabblet.css

/**
 * Scalebar
 * I need to rotate the image in place, without pushing content down or overlapping.
 * Is there anyway to do this in CSS? 
 */
.wrap {
	float: left;
}
.scalebar  {
	transform: rotate(-90deg);
	transform-origin: 50% 0;
	position: relative;
	margin-bottom: -100%;
}

dabblet.html

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sollicitudin mattis nibh, in luctus leo aliquet ut. Etiam nibh erat, vehicula ut lacus sed, ultrices ornare mauris. Donec semper ipsum a lobortis congue. Maecenas vel elit non tortor varius feugiat nec ac sapien. Curabitur sed ligula consectetur, ultrices nisl eu, adipiscing ligula. Ut ultrices ante quis aliquam feugiat. Curabitur vel euismod risus, commodo cursus mauris. Curabitur accumsan risus eget consectetur pellentesque.</p>
<div class="wrap"><img class="scalebar" src="http://earthserver.pml.ac.uk/thredds/wms/CEFAS/resoutcut.nc?REQUEST=GetLegendGraphic&LAYER=Cod__adult_&COLORSCALERANGE=null,null&logscale=false&colorbaronly=true&WIDTH=25&HEIGHT=100"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sollicitudin mattis nibh, in luctus leo aliquet ut. Etiam nibh erat, vehicula ut lacus sed, ultrices ornare mauris. Donec semper ipsum a lobortis congue. Maecenas vel elit non tortor varius feugiat nec ac sapien. Curabitur sed ligula consectetur, ultrices nisl eu, adipiscing ligula. Ut ultrices ante quis aliquam feugiat. Curabitur vel euismod risus, commodo cursus mauris. Curabitur accumsan risus eget consectetur pellentesque.</p>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}