Как динамично изменять font-size, чтобы одно слово (повернутое на 90 градусов) занимало всю высоту экрана?

Question

Нужно чтобы при изменении высоты экрана, повернутое слово всегда оставалось растянуто относительно его краев, за счет изменения шрифта. Как это можно сделать? Желательно без JS, но думаю тут без него не обойтись.

.bgString {
    font-size: 100vh;
    height: 0;
    transform: rotate(90deg);
}

<div class="bgString">
  HELLO
</div>

Answer 1

* {
  padding: 0;
  margin: 0;
}

svg {
  height: 100vh;
  font-family: roboto, sans-serif;
}

<svg viewBox="0 0 12 75">
  <text transform="rotate(90 0 0)">Some Text</text>
</svg>

БЛОГ НА HUSL

Как динамично изменять font-size, чтобы одно слово (повернутое на 90 градусов) занимало всю высоту экрана?

Ответы (1 шт):