Senior software engineer at the Washington Post
Creating Poly, a new programming language for the web (poly.dev)
Public
Edited
Dec 9, 2022
show(wordWrap(lorem, 100))
function isSpace(char) {
return char === " ";
}
function formatText(text) {
const blocks = [];
if (text.length === 0) return blocks;
let prevBlock = 0;
let i = 0;
let prevEncountered = isSpace(text.charAt(0)) ? "space" : "text";
function flush() {
const blockText = text.substring(prevBlock, i);
if (blockText.length === 0) return;
blocks.push({ type: prevEncountered, text: blockText });
prevBlock = i;
prevEncountered = prevEncountered === "space" ? "text" : "space";
}
for (i = 0; i < text.length; i++) {
const c = text.charAt(i);
if (prevEncountered === "text" && isSpace(c)) {
// Push text
flush();
} else if (prevEncountered === "space" && !isSpace(c)) {
// Push space
flush();
}
}
flush();
return blocks;
}
function wordWrap(text, width = 80) {
if (width <= 0) return text;
// Convert the text to a series of alternating word and space objects
const blocks = formatText(text);
const newBlocks = [];
let linePosition = 0;
for (const block of blocks) {
if (linePosition + block.text.length >= width) {
if (block.type === "space") {
// Dealing with a space that puts us over the edge
// Convert to newline
newBlocks.push({ type: "space", text: "\n" });
linePosition = 0;
} else {
// Dealing with text that puts us over the edge
if (linePosition !== 0) {
// The previous block is a space that we will convert to newline
newBlocks[newBlocks.length - 1].text = "\n";
}
// Add the text block in, word wrapping if needed
const newBlock = { ...block };
while (newBlock.text.length >= width) {
// Add what we can
newBlocks.push({
type: "text",
text: newBlock.text.substring(0, width)
});
// Push a newline
newBlocks.push({ type: "space", text: "\n" });
newBlock.text = newBlock.text.substring(width);
}
// Push the remaining text normally
newBlocks.push(newBlock);
linePosition = newBlock.text.length;
}
} else {
if (block.type === "space" && linePosition === 0) {
// Skip leading space
continue;
}
newBlocks.push(block);
linePosition += block.text.length;
}
}
// Return the collected text
return newBlocks.map((block) => block.text).join("");
}
formatText(lorem)
lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
function show(text) {
const pre = html`<pre>`;
pre.textContent = text;
return pre;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
