jalexanderfox/dabblet.css

## dabblet.css
/**
 * rotated heading
 */
#testwrap { border:1px solid red; height:300px; position:relative; width:80% }

#testwrap:before { content:"test"; background:blue; color:orange; }
#testwrap:before {

transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
	transform-origin: top left;
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	white-space:nowrap;
	display:block;
	left: 103%;
/*right: 0px;*/
top: 0px;
	position: absolute;
	outline: solid 2px green; /* green outline for containing div */
	width:auto;
	height:1.3em;
	font-family:inherit;
	color:#000;
}
h2 {
	/*margin-top: -5px;*/
	background: pink;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="testwrap"><div id="test"><h2>some longer text here bla bla you can add</h2></div></div>
<!--add more text inside the h2 tag, or delete text and see what happens-->

## settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* rotated heading
	*/
	#testwrap { border:1px solid red; height:300px; position:relative; width:80% }

	#testwrap:before { content:"test"; background:blue; color:orange; }
	#testwrap:before {

	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform-origin: top left;
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	white-space:nowrap;
	display:block;
	left: 103%;
	/right: 0px;/
	top: 0px;
	position: absolute;
	outline: solid 2px green; /* green outline for containing div */
	width:auto;
	height:1.3em;
	font-family:inherit;
	color:#000;
	}
	h2 {
	/margin-top: -5px;/
	background: pink;
	}
	<!-- content to be placed inside <body>…</body> -->
	<div id="testwrap"><div id="test"><h2>some longer text here bla bla you can add</h2></div></div>
	<!--add more text inside the h2 tag, or delete text and see what happens-->