Center text vertically along a floating "shape-outside" polygon elements path [duplicate]

Question

I want to use a shape to control the flow of text. So I've added a floating div (.cutout) with a shape-outside and clip-path defined. The neighboring div's inline content line breaks along this path as expected (.innertext).

The problem is I want that text to be centered vertically along side this path. I've tried positioning tricks and margin tricks but these break the flow of the inline elements along the polygons path.

Is there any way to vertically align a group of inline elements within the height of the cutout's parent container while keeping the innertext element's ability to line break respective to the shape-outside polygon path?

html,body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100%;
}

.cutout {
  float: right;
  background-color: #faa;
  width: 80%;
  height: 100%;
  shape-outside: polygon(0 100%, 100% 0%, 100% 100%);
  clip-path: polygon(0 100%, 100% 0%, 100% 100%);
}

.innertext {
  margin: auto;
}

<div class="container">
  <div class="cutout">
  </div>
  
  <div class="innertext">
    <h1>
      Lorem Ipsum
    </h1>
    <p>
      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.  
    </p>
  </div>
</div>

Answer 1

I'm afraid I can't find a CSS/HTML only solution that would fit any shape.

So this snippet takes a simplistic approach - keeps moving the text down until the space below and above can be made equal with padding.

This ensures that any adjustment in height of the text element due to wrapping around the shape are taken into account.

const container = document.querySelector('.container');
const innerText = document.querySelector('.innertext');
const containerStyle = getComputedStyle(container);
const innerTextStyle = getComputedStyle(innerText);

function reposition() {
  const height = Number(containerStyle.height.slice(0, -2));
  let innerHeight = Number(innerTextStyle.height.slice(0, -2));
  let paddingTop = 0;
  while (((paddingTop * 2) + innerHeight) < height) {
    paddingTop++;
    innerText.style.paddingTop = paddingTop + 'px';
    innerHeight = Number(getComputedStyle(innerText).height.slice(0, -2));
  }
  innerText.style.paddingTop = (paddingTop - 1) + 'px';
}
window.onresize = reposition;
reposition();

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100%;
}

.innerText :first-child {
  margin-top: 0;
}

.cutout {
  float: right;
  background-color: #faa;
  width: 80%;
  height: 100%;
  shape-outside: polygon(0 100%, 100% 0%, 100% 100%);
  clip-path: polygon(0 100%, 100% 0%, 100% 100%);
}

<div class="container">
  <div class="cutout">
  </div>

  <div class="innertext">
    <h1>
      Lorem Ipsum
    </h1>
    <p>
      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.
    </p>
  </div>
</div>