Older Output

index.html

<ul>
		<li class="numbers">01<br />02<br />03</li>
		<li>
			<div class="text">
				Some super-sexy first line.<br />
				--------------------------------------------------------<br />
				And on with the data!
			</div>
		</li>
		<li class="numbers">01<br />02<br />03</li>
</ul>

Older-Output.markdown

Older Output

I wanted to output some raw data to users in a way that was reminiscent of older, dot matrix printers, while still being useful and readable.

Most of all the text needed to be selectable without the line numbers. Granted, this is horrendously ugly. Sorry about that.

A Pen by mattfinch on CodePen.

License.

style.css

ul {
			font-size: 0.875em;
			background-color: white;
			border: 1px solid lightgrey;
			padding: 10px 0;
			list-style: none;
			font-family: 'Consolas';
			line-height: 16px;
			overflow: hidden;
			display: table;
    	 margin: 50px auto;
		}
		ul li {
			float: left;
		}
		ul li:last-child {
			float: right;
		}
		ul .text {
       background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAgCAYAAADT5RIaAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAAfSURBVBhXY1h7a+l/hv9AwLTu9jIGylkMQEA1goEBAK2bMoMFfl81AAAAAElFTkSuQmCC);
			overflow: hidden;
			padding: 0 5px;
			min-width: 450px;
			max-width: 1000px;
		}
		ul .numbers {
		  font-family: sans-serif;
        font-size: 0.875em;
			padding: 0 10px;
			color: darkgreen;
		}