Центрируйте текст по вертикали вдоль плавающего пути многоугольных элементов «формы снаружи». ⇐ CSS

[Anonymous]

Я хочу использовать фигуру для управления потоком текста. Итак, я добавил плавающий div (

Код: Выделить всё

.cutout

) с определенными внешней формой и контуром обрезки. Строка содержимого соседнего элемента div разрывается по этому пути, как и ожидалось (

Код: Выделить всё

.innertext

).
Проблема в том, что я хочу, чтобы текст располагался по центру вертикально вдоль этого пути. Я пробовал трюки с позиционированием и отступами, но они нарушают поток встроенных элементов по пути многоугольников.
Есть ли способ вертикально выровнять группу встроенных элементов по высоте родительский контейнер выреза, сохраняя при этом способность элемента внутреннего текста разрывать строку в соответствии с контуром многоугольника вне фигуры?

Код: Выделить всё

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;
}

Код: Выделить всё

Lorem Ipsum


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.

Подробнее здесь: https://stackoverflow.com/questions/782 ... ments-path