Make lyrics automagically fit to size

app/src/components/Lyrics.vue

@@ -1,20 +1,48 @@
 <template>
-  <p class="lyrics" v-html="lyrics">}</p>
+  <p class="lyrics fit-text" v-html="lyrics"></p>
 </template>
 
 <script>
+import FitText from "@/helpers/FitText";
+let f;
 export default {
   props: [
     'lyrics'
-  ]
+  ],
+  mounted() {
+    f = new FitText(document.querySelector(".fit-text"), 4, 0.1);
+    f.fit();
+    window.addEventListener('resize', this.fit);
+  },
+  watch: {
+    lyrics: function () {
+      this.$nextTick(function () {
+        f.fit();
+      });
+    }
+  },
+  methods: {
+    fit: function () {
+      f.fit();
+    }
+  }
 }
 </script>
 
 <style>
 .lyrics {
-  font-size: 5em;
+  font-size: 4rem;
   font-weight: 800;
   text-align: center;
+  overflow: hidden;
   text-shadow: 2px 2px 5px rgba(0,0,0,0.6);
 }
+.bible {
+  display: block;
+  /* font-size: 0.5em; */
+  /* line-height: 1.5em; */
+}
+.bible sup {
+  font-size: 0.5em;
+}
 </style>

app/src/helpers/FitText.js

@@ -0,0 +1,17 @@
+export default class FitText {
+  constructor(el, defaultSize, increment) {
+    this.element = el;
+    this.defaultSize = defaultSize;
+    this.increment = increment;
+  }
+  fit() {
+    this.element.style.fontSize = this.defaultSize + "rem";
+    this.recalc();
+  }
+  recalc(shouldRecalc) {
+    if (shouldRecalc || this.element.clientHeight < this.element.scrollHeight) {
+      this.element.style.fontSize = (parseFloat(this.element.style.fontSize.replace(/[^0-9.]/g,'')) - this.increment) + "rem";
+      this.recalc();
+    }
+  }
+}