Automatic Faux Tab Stops

Automatically add faux tab stops to elements on load.

by disfated

HTML

<b><u>Tab separated table:</u></b>
<div class="tab_stops">
Lorem ipsum:								A				B C D		C
Lorem ipsum dolor sit amet:	A B C		B				C
Lorem:											A				B				C D E
</div>

<br>
<b><u>Space separated table:</u></b>
<div class="tab_stops">
Lorem ipsum:                 A       B C D   C
Lorem ipsum dolor sit amet:  A B C   B       C
Lorem:                       A       B       C D E
</div>

CSS

body {
  font-family: sans-serif;
  font-size: 11pt;
}
table {
	border-collapse: collapse;
	td {
		/* border: 1px dotted gray; */
		padding-right: 1.5ch;
	}
}

JavaScript

for (let elem of document.querySelectorAll(".tab_stops")) {
	let table = document.createElement('table')
	for (let line of elem.textContent.trim().split(/\n/)) {
		let row = document.createElement('tr')
		row.append(...line.trim().split(/(?:\t+| {2,}) */).map(cell => Object.assign(document.createElement('td'), { textContent: cell.trim() || '\xA0' })))
		table.append(row)
	}
	elem.replaceWith(table)
}