Layout Breakout container

Available standalone  ›

Demo

Break out a wide image from the text flow:

Or table:

Imagine
 a
 really
 wide
 table
 here
...

Or code block:

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.</p>

Or anything else:

Using .breakout-item and .breakout-item-max helpers

.breakout-all also visually breaks out headings and horizontal rules:

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

How it works

/anyblades/blades/refs/heads/main/src/breakout.css :

.breakout,
.breakout-all {
  /* Prepare the container for breakout elements */
  padding-inline: 10%;
  max-width: calc(10% + 65ch + 10%);
  @media (width < 768px) {
    padding-inline: 1rem;
    max-width: calc(1rem + 65ch + 1rem);
  }

  /* Breakout direct children only */
  & > * {
    &:is(
      table,
      pre,
      figure, video, iframe, canvas,
      img, picture,
      /* Custom utility classes for other tags that need to be broken out */
      .breakout-item,
      .breakout-item-max
    ) {
      width: fit-content;
      min-width: 100%;
      max-width: min(125%, 100dvw);
      margin-left: 50%;
      transform: translateX(-50%);
    }

    /* Respect img/picture min-width */
    &:is(img, picture):not(.does-not-exist) /* soft win specificity over .breakout-item above */ {
      min-width: auto;
    }

    /* Max out the width of the element */
    &.breakout-item-max {
      width: min(125%, 100dvw) !important; /* !important is for cases like figure.breakout-item-max @TODO */
    }
  }
}

.breakout-all > * {
  &:is(h2, h3, h4, h5, h6, hr):not([class]) {
    position: relative;

    &::before {
      content: "";
      display: block;
      position: absolute;
      background: gray;
      opacity: 12.5%;
    }
  }

  &:is(h2, h3, h4, h5, h6):not([class]) {
    &::before {
      width: 10em;
      right: 100%;
      margin-right: 0.8ch;
      height: 0.25em;
      top: 50%;
      transform: translateY(-50%);
      background: linear-gradient(to left, gray, transparent);
    }

    /* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
    &:where(hr + *) {
      &::before {
        display: none !important;
      }
    }
  }
  &:is(hr) {
    height: 0.5rem;
    border: none;
    overflow: visible;

    &::before {
      width: 100dvw;
      left: 50%;
      height: 100%;
      transform: translateX(-50%);
    }
  }
}