live text
—
Booting

04 Export

actual text, not a canvas

The artwork on screen is a stack of real text layers, each one a <pre>. One line per row, no positioned spans. Select it, copy it, or take this snippet and drop it anywhere HTML is allowed.

—

Embedding copies the font data into the snippet. With it off, the snippet references family names only, so those fonts must already be loaded on the page. Check the bundled font's license before sharing it publicly.

Helper snippets

01 Shrink to fit a narrow screen

Scale the whole block down so it never overflows. The wrapper takes on the scaled height, so the page layout stays honest.

<div class="gg-fit">
  <div class="gg-art"> …paste export here… </div>
</div>

<script>
  const fit = () => {
    const wrap = document.querySelector('.gg-fit');
    const art = wrap.firstElementChild;
    const w = art.offsetWidth;
    const h = art.offsetHeight;
    const s = Math.min(1, wrap.clientWidth / w);
    art.style.transformOrigin = 'top left';
    art.style.transform = `scale(${s})`;
    wrap.style.height = `${h * s}px`;
  };
  addEventListener('resize', fit);
  fit();
</script>
02 Centre it without a sideways scrollbar

The art stays centred and any overflow can still be reached, but the scrollbar itself is hidden. Use overflow-x: hidden if you want to clip the overflow instead.

.gg-stage {
  display: flex;
  justify-content: center;
  justify-content: safe center;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.gg-stage::-webkit-scrollbar {
  display: none;
}
.gg-stage > .gg-art {
  flex: none;
}
03 Swap art at a breakpoint

Export a wide and a narrow version at different canvas sizes, then show only the one that fits. The hidden block is never painted.

<div class="gg-art gg-wide"> …wide art… </div>
<div class="gg-art gg-narrow"> …narrow art… </div>

<style>
  .gg-narrow { display: none; }
  @media (max-width: 700px) {
    .gg-wide { display: none; }
    .gg-narrow { display: block; }
  }
</style>
04 Shield it from global CSS

Load this after your global stylesheet. It re-asserts only the properties that commonly leak in. Leave font-family,font-size,color, andletter-spacing alone: the per-layer rules need them.

/* place last in the cascade */
.gg-art {
  position: relative !important;
  margin: 0 !important;
  border: 0 !important;
  isolation: isolate !important;
}
.gg-art .gg-l {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  white-space: pre !important;
  text-transform: none !important;
  font-kerning: none !important;
  font-variant-ligatures: none !important;
}