31:T496,{ yield md`This cell registers a ResizeObserver instance to track changes of the container above and when a modification happens it changes the size of the internal view accordingly.`; const div = viewof resizableContainer; const view = div.querySelector(".view"); const viewContainer = div.querySelector(".view-container"); const resizeObserver = new ResizeObserver((entries) => { const entry = [...entries].find((e) => e.target === div); if (!entry) return; let size; if (entry.contentBoxSize) { if (entry.contentBoxSize[0]) { size = entry.contentBoxSize[0].inlineSize; } else { size = entry.contentBoxSize.inlineSize; } } else { size = entry.contentRect.width; } const scale = size / W; Object.assign(viewContainer.style, { width: `${viewW * scale}px`, height: `${viewH * scale}px` }); Object.assign(view.style, { // transform: `translate(-50%, -50%) scale(${scale}) translate(50%, 50%)` transformOrigin: "top left", transform: `scale(${scale})` }); }); resizeObserver.observe(div); invalidation.then(() => resizeObserver.unobserve(div)); }32:T456,html`

Styles

Open this cell to see the styles applied in this notebok.

`33:[] 2f:{"title":"HTML re-scaling with CSS Transformations","cells":[{"id":71,"value":"# HTML re-scaling with CSS Transformations \n\nThis notebook contains an example of CSS transformations used to re-scale content of a `div`.\n\nReferences:\n* https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin","pinned":false,"hidden":false,"mode":"md"},{"id":300,"value":"## Manual Rescaling","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"viewof scale = Inputs.range([0.02, W / viewW], {\n label: \"Scale\",\n step: 0.01,\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"viewof container = {\n const view = newContent();\n const container = html`

${view}

`;\n Object.assign(container.style, {\n width: `${W}px`,\n height: `${H}px`,\n backgroundColor: \"#eee\"\n });\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"function newContent() {\n return html`\n

Lorem ipsum dolor sit amet

Nunc non rhoncus elit. Maecenas eget ultrices urna. Vivamus eu risus vestibulum,

Nullam cursus, ipsum in egestas pharetra, augue orci luctus ligula.

\n\n

Item One

Item Two

Item Three

Item Four

Item Five

Item Six

\n\n

Consectetur adipiscing elit. Proin condimentum tincidunt magna. Lorem ipsum dolor sit amet.

\n\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"{\n let s = scale.toFixed(2);\n yield md`This cell updates the content of the next HTML element by the factor of ${\n +s === scale ? scale : `~` + s\n }.`;\n const c = viewof container;\n const viewContainer = c.querySelector(\".view-container\");\n Object.assign(viewContainer.style, {\n width: `${viewW * scale}px`,\n height: `${viewH * scale}px`\n });\n const view = c.querySelector(\".view\");\n Object.assign(view.style, {\n // transform: `translate(-50%, -50%) scale(${scale}) translate(50%, 50%)`\n transformOrigin: \"top left\",\n transform: `scale(${scale})`\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":0,"value":"## Automatic Rescaling With a Resize Observer\n\nIn this section we use the ResizeObserver to track modifications of the container itself to re-scale the view proportionally. \n\n> "The [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) interface reports changes to the dimensions of an Element's content or border box, or the bounding box of an SVGElement."\n>
\\-- [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)\n\nExample: https://mdn.github.io/dom-examples/resize-observer/resize-observer-text.html ","pinned":false,"hidden":false,"mode":"md"},{"id":212,"value":"viewof containerSize = Inputs.range([W * 0.05, W], {\n label: \"Container size\",\n value: W\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"viewof resizableContainer = {\n const view = newContent();\n const container = html`

${view}

`;\n Object.assign(container.style, {\n padding: `${padding}px`,\n width: `${W}px`,\n height: `${H}px`,\n backgroundColor: \"#eee\"\n });\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"{\n let s = containerSize.toFixed(1);\n yield md`(The size of the view container above is ${\n Math.round(containerSize) === containerSize\n ? containerSize\n : `~` + Math.round(containerSize)\n }px.)`;\n const div = viewof resizableContainer;\n Object.assign(div.style, {\n width: `${containerSize}px`,\n height: `${(containerSize * H) / W}px`\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":275,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"## Used Parameters","pinned":false,"hidden":false,"mode":"md"},{"id":117,"value":"padding = 15","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"W = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"H = Math.round(W * (viewH / viewW))","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"viewW = 480","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"viewH = 320","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}