31:T4e9,md`# Elastic Tabstops [Elastic Tabstops](http://nickgravgaard.com/elastic-tabstops/) is a simple idea designed to align text in a way that is useful to programmers. It was invented by Nick Gravgaard in 2006. __How it works__: When displaying text with elastic tabstops, any _tab character_ "\`\\t\`" is interpreted as the boundary of a _cell_. The n^th cell of a line is joined to the n^th cells of the previous line and next line—if they exist. All cells that are transitively joined in this way form a _block_, whose width is defined as the width of its largest cell. Each cell is then expanded to the width of its block when displaying. __A minimal implementation__: Here, we implement a few functions for this idea: one to calculate the _blocks_ found in a given text, another to display the text using spaces to fill the blocks, and another to color the blocks for demonstration. __Try it below!:__ The following example program is annotated with colored blocks using one of our functions. You cannot modify the colored text since it is a static output of our minimal implementation, but you can modify the code found in the function call below it and press Shift+Enter to update. `32:T639,// Computes the size of all elastic tabs in the given text. function computeElasticTabs(text) { // We ignore the last cell of each line // since the standard says we only count cells _behind_ a tab character. const table = text.split("\n").map(line => line.split("\t").slice(0, -1)); // result objects const tableUnpruned = text.split("\n").map(line => line.split("\t")); const cellBlocks = {}; // map a cell coordinate `${row},${col}` to a block index const blockWidths = []; // map a block index to a width // cells by coordinate const numRows = table.length; const numCols = Math.max(...table.map(cells => cells.length)); const getCell = (r, c) => ({ r, c, text: table[r][c] }); // for each column, we group cells into blocks for (const c of range(numCols)) { // Get every cell in this column. const column = range(numRows) .map(r => getCell(r, c)) .filter(({ text }) => text != null); // Group contiguous cells into blocks. const blocks = splitArray(column, (curr, prev) => curr.r !== prev.r + 1); // process each block for (const cells of blocks) { // compute block width const w = Math.max(...cells.map(({ text }) => text.length)); // create a new index to identify this block const blockI = blockWidths.length; // associate each of our cell coordinates to this block for (const { r } of cells) { cellBlocks[`${r},${c}`] = blockI; } // store the width of the block blockWidths.push(w); } } return { table: tableUnpruned, cellBlocks, blockWidths }; }33:[] 2f:{"title":"Elastic Tabstops","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"// NOTE: pipes are placed after each tab like '\\t|' only to make each tab easier to see in input and output\nexample = expandAndColorElasticTabs(\n `\n#include \n\nint someDemoCode(\\t|int fred,\n \\t|int wilma)\n{\n \\t|x(); \\t|/* try making \\t|*/\n \\t|print(\"hello again!\"); \\t|/* this comment \\t|*/\n \\t|makeThisFunctionNameShorter(); \\t|/* a bit longer \\t|*/\n \\t|for (i = start; i < end; ++i)\n \\t|{\n \\t| \\t|if (isPrime(i))\n \\t| \\t|{\n \\t| \\t| \\t|++numPrimes;\n \\t| \\t|}\n \\t|}\n \\t|return numPrimes;\n}\n\n`,\n { blockPad: 0, minBlockWidth: 4 } // configure spacing\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":262,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"// View the given text with the elastic tabs expanded into spaces.\nfunction expandElasticTabs(text, { blockPad = 1, minBlockWidth = 3 } = {}) {\n const { table, cellBlocks, blockWidths } = computeElasticTabs(text);\n const expandCell = (r, c) => {\n const text = table[r][c];\n const i = cellBlocks[`${r},${c}`];\n const w = Math.max(minBlockWidth, blockWidths[i]);\n return text.padEnd(w);\n };\n const numRows = table.length;\n const numCols = r => table[r].length;\n const lines = range(numRows).map(r => {\n const cells = range(numCols(r)).map(c => expandCell(r, c));\n const pad = \" \".repeat(blockPad);\n return cells.join(pad);\n });\n return lines.join(\"\\n\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":354,"value":"md`## Coloring`","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"// View the given text with the elastic tabs expanded into spaces.\nfunction expandAndColorElasticTabs(\n text,\n { blockPad = 1, minBlockWidth = 3 } = {}\n) {\n const { cellBlocks, blockWidths } = computeElasticTabs(text);\n const table = text\n .replace(//g, \">\")\n .split(\"\\n\")\n .map(line => line.split(\"\\t\"));\n const expandCell = (r, c) => {\n const text = table[r][c];\n const i = cellBlocks[`${r},${c}`];\n const w = Math.max(minBlockWidth, blockWidths[i]);\n const color = blockColor(i);\n return `${text.padEnd(w)}`;\n };\n const numRows = table.length;\n const numCols = r => table[r].length;\n const lines = range(numRows).map(r => {\n const cells = range(numCols(r)).map(c => expandCell(r, c));\n const pad = \" \".repeat(blockPad);\n return cells.join(pad);\n });\n const fullText = lines.join(\"\\n\");\n return html`

${fullText}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"function blockColor(i) {\n const a = 0.4;\n const colors = [\n `rgba(255, 0, 0, ${a})`,\n `rgba(0, 255, 0, ${a})`,\n `rgba(0, 0, 255, ${a})`,\n `rgba(0, 255, 255, ${a})`,\n `rgba(255, 0, 255, ${a})`,\n `rgba(255, 255, 0, ${a})`\n ];\n return colors[i % colors.length];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"md`## Utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"function range(start, stop, step = 1) {\n if (stop === undefined) [start, stop] = [0, start];\n const result = [];\n for (let i = start; i < stop; i += step) {\n result.push(i);\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"function splitArray(array, shouldSplit) {\n const n = array.length;\n if (n === 0) return [];\n\n // get each position in the array where a split should occur\n let indexes = range(1, n).filter(i => shouldSplit(array[i], array[i - 1]));\n\n // insert start/end points\n indexes = [0, ...indexes, n];\n\n // group elements between the indexes\n return range(0, indexes.length - 1).map(i =>\n array.slice(indexes[i], indexes[i + 1])\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"// from: https://stackoverflow.com/a/784698/142317\nfunction htmlEncode(s) {\n const el = document.createElement(\"div\");\n el.innerText = el.textContent = s;\n return el.innerHTML;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}