<!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;
      white-space: pre-line;
    }

    #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>
      <template v-for="(line, index) in wrappedLines" :key="index">
        {{ line }}<br>
      </template>
    </span>
  </div>

  <p v-if="text.length > 29">{{ text.length }} characters (more than 29)</p>
  <p v-else>{{ text.length }} characters (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: ''
      }
    },
    computed: {
      wrappedLines() {
        const numOfMaxChars = 29
        const lines = []
        
		for (let i = 0; i < this.text.length; i += numOfMaxChars) {
          lines.push(this.text.slice(i, i + numOfMaxChars))
        }
		
        return lines
      }
    },
    methods: {
      writeText(event) {
        this.text = event.target.value
      }
    }
  })
  app.mount('#app')
</script>

</body>
</html>
