2f:Tebc,{ // ── CONFIGURACIÓN ────────────────────────────────────────── const W = width; const H = 940; const FONT_SIZE = 10; const FONT_FAMILY = "arial"; const LINE_H = 10; const FONT = `${FONT_SIZE}px ${FONT_FAMILY}`; const BG_COLOR = color; const TEXT_COLOR = "#ffffff"; const ISLAND_SCALE = 0.7; const ISLAND_X = W * 0.15; const ISLAND_Y = H * 0.1; const ISLAND_MARGIN = 5; // ─────────────────────────────────────────────────────────── const { prepareWithSegments, layoutNextLine } = pretext; const islandW = W * ISLAND_SCALE; const islandH = H * ISLAND_SCALE; const offscreen = document.createElement("canvas"); offscreen.width = W; offscreen.height = H; const octx = offscreen.getContext("2d"); octx.drawImage(islandSvg, ISLAND_X, ISLAND_Y, islandW, islandH); const pixels = octx.getImageData(0, 0, W, H).data; function isIsland(x, y, margin = 0) { const check = (px, py) => { if (px < 0 || px >= W || py < 0 || py >= H) return false; const i = (py * W + px) * 4; const r = pixels[i], g = pixels[i + 1], b = pixels[i + 2], a = pixels[i + 3]; if (a < 128) return false; const isSea = r > 100 && r < 140 && g > 155 && g < 195 && b > 205 && b < 240; const isWhite = r > 230 && g > 230 && b > 230; return !isSea && !isWhite; }; for (let dx = -margin; dx <= margin; dx++) for (let dy = -margin; dy <= margin; dy++) if (check(x + dx, y + dy)) return true; return false; } function getFreeSegments(y, margin = ISLAND_MARGIN) { const PAD = 8, blocked = []; let inBlock = false, blockStart = 0; for (let x = PAD; x <= W - PAD; x++) { const b = isIsland(x, y, margin); if (b && !inBlock) { blockStart = x; inBlock = true; } if (!b && inBlock) { blocked.push([blockStart, x]); inBlock = false; } } if (inBlock) blocked.push([blockStart, W - PAD]); const segs = []; let cur = PAD; for (const [a, b] of blocked) { if (cur < a - margin) segs.push({ x: cur, width: a - margin - cur }); cur = b + margin; } if (cur < W - PAD) segs.push({ x: cur, width: W - PAD - cur }); return segs; } const longText = "las malvinas son argentinas ".repeat(500); const prepared = prepareWithSegments(longText, FONT); let cursor = { segmentIndex: 0, graphemeIndex: 0 }; const lines = []; for (let y = 6; y < H - LINE_H; y += LINE_H) { for (const seg of getFreeSegments(y + LINE_H / 2)) { if (seg.width < 30) continue; let result = layoutNextLine(prepared, cursor, seg.width); if (!result) { cursor = { segmentIndex: 0, graphemeIndex: 0 }; result = layoutNextLine(prepared, cursor, seg.width); } if (!result) continue; lines.push({ text: result.text, x: seg.x, y }); cursor = result.end; } } const div = document.createElement("div"); div.style.cssText = `position:relative;width:${W}px;height:${H}px;background:${BG_COLOR};overflow:hidden`; div.innerHTML = lines .map( (l) => `${l.text}` ) .join(""); const img = document.createElement("img"); img.src = islandSvg.src; img.style.cssText = `position:absolute;top:${ISLAND_Y}px;left:${ISLAND_X}px;width:${islandW}px;height:${islandH}px;pointer-events:none`; div.appendChild(img); return div; }30:[{"id":"b459f561c4f3e6aaea9b6e22bbbb1da8e836bcbe8303131ae7b35c03f7a92977df7898c4b5df2f83402c681016db7d8315759bd368cfb72667efd3ab079b1ac8","href":"https://static.observableusercontent.com/files/b459f561c4f3e6aaea9b6e22bbbb1da8e836bcbe8303131ae7b35c03f7a92977df7898c4b5df2f83402c681016db7d8315759bd368cfb72667efd3ab079b1ac8","name":"Flag-map_of_the_Malvinas_Islands@2.svg","type":"image/svg+xml","lastModified":1775129003095.216,"size":94515}] 2d:{"title":"Hello PRETEXT: Malvinas edition","cells":[{"id":0,"value":"# Hello PRETEXT: Malvinas edition","pinned":false,"hidden":false,"mode":"md"},{"id":35,"value":"viewof color = Inputs.color({label: \"Favorite color\", value: \"#4682b4\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"pretext = import(\"@chenglou/pretext\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"islandSvg = FileAttachment(\"Flag-map_of_the_Malvinas_Islands@2.svg\").image()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}