<!DOCTYPE html>
<html>
<head>
  <title>Notebook Example</title>
  <style>
    #app {
      border: black dashed 1px;
      width: 300px;
      padding: 20px;
    }
    #app > div {
      width: 100%;
      position: relative;
      margin-top: 10px;
      aspect-ratio: 1;
      background-image: url("img_notebook.jpg");
      background-size: 340%;
      background-position: -345px 0;
      overflow: hidden;
    }
    #app span {
      width: 80%;
      font-weight: bold;
      font-family: 'Courier New', Courier, monospace;
      line-height: 1.2em;
      transform-origin: 0 0;
      rotate: 33deg;
      position: absolute;
      top: 50px;
      left: 70px;
	  color: red;
    }
    #app textarea {
      width: 100%;
      box-sizing: border-box;
    }
  </style>
</head>
<body>

<h1>Example: Notebook</h1>

<div id="app">
  <textarea v-on:input="writeText" rows="8" cols="30" placeholder="Start writing.."></textarea>
  <div>
    <span v-if="numOfLetters > 29"><br>{{ text }}</span>
	<span v-else="numOfLetters < 29">{{ text }}</span>
  </div>
    <p v-if="numOfLetters > 29">{{ numOfLetters }} bigger than 29</p>
    <p v-else>{{ numOfLetters }} less than 29 </p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        text: '',
		numOfLetters: 0
      }
    },
    methods: {
      writeText(event) {
        this.text = event.target.value
		this.numOfLetters = this.numOfLetters + 1
      }
    }
  })
 app.mount('#app')
</script>

</body>
</html>