Dynamically stretch words to any screen height

user_13883897 0
Viewed 64

There is such a small program that dynamically changes a word inside svg. It is necessary to achieve such an effect that, regardless of the word or group of words, they are always stretched along the entire height (since they are rotated 90 degrees) by changing the font size (not changing the distance between the letters).

let text = document.getElementById("text");
let input = document.getElementById("input");

function changeWord() {
    text.innerHTML = input.value;
}
* {
  padding: 0;
  margin: 0;
}

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

input {
  position: fixed;
  top: 0;
  right: 0;
  border: 2px solid red;
}
<svg viewBox="0 0 12 75">
  <text id="text" transform="rotate(90 0 0)">Skibidi</text>
</svg>

<input value="Skibidi" oninput="changeWord()" id="input" type="text">

svg html javascript
1 Answers

Instead of changing the font-size you can change the viewBox attribute so that the height of the viewBox is the same as the computed text length:

let text = document.getElementById("text");
let input = document.getElementById("input");
let svg = document.querySelector("svg");
function changeWord() {
  text.innerHTML = input.value;
  svg.setAttributeNS(null, "viewBox", `-4 0 16 ${text.getComputedTextLength()}`);
}
* {
  padding: 0;
  margin: 0;
}

svg {
  height: 100vh;
  font-family: roboto, sans-serif;
  font-size:16px;
  border:1px solid;
}

input {
  position: fixed;
  top: 0;
  right: 0;
  border: 2px solid red;
}
<svg viewBox="-4 0 16 75">
  <g transform="rotate(90 0 0)">
  <text id="text">Skibpidi</text>
  </g>
</svg>

<input value="Skibidi" oninput="changeWord()" id="input" type="text">

Please observe that in order to allow space for descendants (p) I've changed the initial viewBox to -4 0 16 75

user_78973950
Related