Vue Mazeletter background - css

Question

I am trying to use Mazeletter to create a background for every page on an app that I am building. However, I haven't done anything like this before and I would like some help with this. I have a basic test component which works as the background, and I can successfully place elements over it.
However, I want to make this a little more dynamic. One the text should be dynamic (i.e. passed in via props) and there should be enough text to have the background for as much content is present on the page (this would also be dynamic).
Here is the test component that I am currently working with:
<template>
<div id="mz-background">
<p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
<p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
<p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
<p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
<p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
<p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
<p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
<p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
<p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
<p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
<p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
<p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
<p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
<p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
</div>
</template>
<script>
export default {
name: "UnderworldPattern",
};
</script>
<style scoped>
#mz-background {
z-index: 0;
position: fixed;
overflow: hidden;
width: 100vw;
height: 100vh;
}
.mz-text {
line-height: 89.5px;
font-family: "mazeletter-underworld"; // imported in project css
font-size: 90px;
z-index: 1;
color: #000000;
user-select: none;
text-align: left;
letter-spacing: -0.409091px;
}
</style>
If someone could help me out in making this more dynamic I would be very grateful
Thanks for your time

Answer 1

Maybe something like following:
Define long set of chars and set overflow: hidden; on #mz-background.
Add listener on created hook, to detect window resize and call method to calculate nr of lines depending on ˙font-size˙. Then in template loop over calculated nr of lines.(rough solution)
export default {
name: "UnderworldPattern",
data() {
return {
textToShow: 'ThisIsATestThisIsATestThisIsATestThisIsATestThisIsATestThisIsATestThisIsATestThisIsATest',
nrOfLines: 0
}
},
methods: {
getNrOfLines() {
this.nrOfLines = parseInt(document.documentElement.clientHeight / 90)
}
},
mounted() {
this.getNrOfLines()
},
created() {
window.addEventListener("resize", this.getNrOfLines);
},
unmounted() {
window.removeEventListener("resize", this.getNrOfLines);
},
};
#mz-background {
z-index: 0;
position: fixed;
overflow: hidden;
width: 100vw;
height: 100vh;
}
.mz-text {
line-height: 89.5px;
font-family: "mazeletter-underworld"; // imported in project css
font-size: 90px;
z-index: 1;
color: black;
user-select: none;
text-align: left;
letter-spacing: -0.409091px;
overflow: hidden;
margin: 0;
}
<div id="app">
<template>
<div id="mz-background">
<p class="mz-text" v-for="index in nrOfLines" :key="index">{{ textToShow }}</p>
</div>
</template>
</div>