Выровнять по вертикали многострочный текст рядом с плавающим братом

Question

У меня есть два родных брата.Один занимает 70% ширины родительского элемента и перемещается влево.Он имеет clip-path для создания неправильного многоугольника.У родного брата есть ширина 100% родителя.Я поместил свойство shape-outside в плавающий элемент div, чтобы позволить тексту в элементе-брате переноситься так, чтобы он повторял диагональ многоугольника.

Моя проблема, с которой я сталкиваюсь, заключается в том, что текст в неплавающем элементе-брате является динамическим и может быть либо однострочным, либо многострочным.Я хотел бы убедиться, что текст остается вертикально по центру в неплавающем элементе div и следует за строкой shape-outside.

Сгибание, сетка и таблица, по-видимому, нарушают способность текста следовать за shape-outside линия. Вот ссылка на кодовое перо с тем, что в данный момент установлено.

main {
  height: 25rem;
  width: 95vw;
  margin: auto;
}

#main-left {
  background-image: url('https://drive.google.com/uc?id=1NeUyxUgp7I56mTpmzYIUXbQilRnd0dAK');
  background-size: cover;
  background-position: center;
  width: 75%;
  height: 100%;
  float: left;
  -webkit-clip-path: polygon(0 0, 95% 0, 50% 100%, 0% 100%);
  clip-path: polygon(0 0, 95% 0, 50% 100%, 0% 100%);
  shape-outside: polygon(0 0, 97% 0, 50% 100%, 0% 100%);
}

#main-right {
  width: 100%;
  height: 100%;
}

<main>
  <div id="main-left"></div>
  <div id="main-right">
    <p>Play with the angles. This is unplanned it really just happens. A fan brush is a fantastic piece of equipment. Use it. Make friends with it. We have no limits to our world. We're only limited by our imagination. The very fact that you're aware of
      suffering is enough reason to be overjoyed that you're alive and can experience it. We don't have anything but happy trees here. This painting comes right out of your heart. Any little thing can be your friend if you let it be. Learn when to stop.
      You can create beautiful things - but you have to see them in your mind first. There's not a thing in the world wrong with washing your brush. These little son of a guns hide in your brush and you just have to push them out.</p>
  </div>
</main>

Answer 1

Мы можем рассмотреть хитрость использования position:absolute, но с relative, так как абсолютный не будет работать, а относительный будет делать то же самое здесь, потому что ваш элемент уже расположен сверху, поэтому при использовании top:50%;transform:translateY(-50%) у нас будет частичное вертикальное центрирование, как показано ниже:

main {
  height: 25rem;
  margin: auto;
}

#main-left {
  background-image: url('https://drive.google.com/uc?id=1NeUyxUgp7I56mTpmzYIUXbQilRnd0dAK');
  background-size: cover;
  background-position: center;
  width: 75%;
  height: 100%;
  float: left;
  -webkit-clip-path: polygon(0 0, 95% 0, 50% 100%, 0% 100%);
  clip-path: polygon(0 0, 95% 0, 50% 100%, 0% 100%);
  shape-outside: polygon(0 0, 97% 0, 50% 100%, 0% 100%);
}

#main-right {
  width: 100%;
  height: 100%;
}

p {
  position:relative;
  top:50%;
  transform:translateY(-50%);
}

<main>
  <div id="main-left"></div>
  <div id="main-right">
    <p>Play with the angles. This is unplanned it really just happens. A fan brush is a fantastic piece of equipment. Use it. Make friends with it. We have no limits to our world. We're only limited by our imagination. The very fact that you're aware of
      suffering is enough reason to be overjoyed that you're alive and can experience it. We don't have anything but happy trees here. This painting comes right out of your heart. Any little thing can be your friend if you let it be. Learn when to stop.
      You can create beautiful things - but you have to see them in your mind first. There's not a thing in the world wrong with washing your brush. These little son of a guns hide in your brush and you just have to push them out.</p>
  </div>
</main>

Теперь проблема в том, что перевод создаст смещение, которое вам нужно исправить с другим переводом. Вот иллюстрация, чтобы лучше понять, как к вопросу и какой перевод мы должны применить:

Красная стрелка - это перевод, который мы сделали, top:50%;transform:translateY(-50%). top относится к высоте контейнера (25rem) и преобразуется в высоту элемента, поэтому у нас будет 12.5rem - h/2

Если мы рассмотрим угол, определенный синей линией, у нас будет tan(angle) = G/R, где G - это расстояние, которое мы ищем, а R - это то, что мы уже определили.

Для того же угла у нас также есть tan(angle) = W / H, где H - высота контейнера, а W - нижняя часть, удаленная clip-path, которая составляет 50% ширины (немного меньше, но давайте сделай это проще) так что у нас будет 50% от 75% всей ширины экрана. Мы можем присвоить его 37.5vw, таким образом tan(angle) = 37.5vw / 25rem.

Итак G = (37.5vw/25rem)*(12.5rem - h/2) = 18.75vw - (18.75vw/25rem)*h = 18.75vw*(1 - h/25rem).

Понятно, что у нас нет способа представить это значение с использованием чистого CSS, поэтому вам нужно будет рассмотреть вопрос JS для динамического обновления значения translateX, чтобы исправить выравнивание:

// to make it easy we will consider font-size: 16px thus 25rem = 400px
var p= document.querySelector('p');
var h = (p.offsetHeight/400 - 1); /*we need a negative translation*/
var translateX = "calc(18.75vw * "+h+")";  
p.style.transform="translate("+translateX+",-50%)";

window.onresize = function(event) {
   
  h = (p.offsetHeight/400 - 1);
  translateX = "calc(18.75vw * "+h+")";  
  p.style.transform="translate("+translateX+",-50%)";
  
};

main {
  height: 25rem;
  margin: auto;
}

#main-left {
  background-image: url('https://drive.google.com/uc?id=1NeUyxUgp7I56mTpmzYIUXbQilRnd0dAK');
  background-size: cover;
  background-position: center;
  width: 75%;
  height: 100%;
  float: left;
  -webkit-clip-path: polygon(0 0, 95% 0, 50% 100%, 0% 100%);
  clip-path: polygon(0 0, 95% 0, 50% 100%, 0% 100%);
  shape-outside: polygon(0 0, 97% 0, 50% 100%, 0% 100%);
}

#main-right {
  width: 100%;
  height: 100%;
}

p {
  position:relative;
  top:50%;
  transform:translateY(-50%);
}

<main>
  <div id="main-left"></div>
  <div id="main-right">
    <p>Play with the angles. This is unplanned it really just happens. A fan brush is a fantastic piece of equipment. Use it. Make friends with it. We have no limits to our world. We're only limited by our imagination. The very fact that you're aware of
      suffering is enough reason to be overjoyed that you're alive and can experience it. We don't have anything but happy trees here. This painting comes right out of your heart. Any little thing can be your friend if you let it be. Learn when to stop.
      You can create beautiful things - but you have to see them in your mind first. There's not a thing in the world wrong with washing your brush. These little son of a guns hide in your brush and you just have to push them out.</p>
  </div>
</main>