seepur/resources/scripts/applications/shared/components/SidewayText/SidewayText.vue

<template>
  <div class="sideway-text m-b-lg m-t-lg">
    <div
      v-for="letter in text.split('').slice().reverse()"
      :class="[{'has-text-weight-bold':bold}, textSize, 'sideway-letter', 'has-text-centered']"
    >{{letter === ' ' ? '&nbsp;': letter}}</div>
  </div>
  <!-- <div class="sideway-text">

    <div class="continer sideway-letter-container" >
      <div class="container sideway-letter">{{letter}}</div>
    </div>
  </div>-->
</template>

<script lang="ts"  >
export interface ISidewayText {
  class: string;
}
export default {
  name: "SidewayText",
  props: ["text", "bold", "textSize"],
  data: () => ({})
};
</script>