How to fix text position when horizontal line is on the left side?

We use Vue.js with OpenLayers 4.6.5. The issue looks like the following:

How does it work? The user draws the first line, for example, from the bottom upward and makes a click to finish the first line. Then he draws a horizontal line and makes the last click to finish it. At that moment, it opens up a modal dialog with a text area, and the user can enter single or multiline text. It looks as following:

When he clicks the blue button, the modal dialog closes, and text appears above the horizontal line. Everything is ok when the horizontal line is on the right, but when it is on the left, it’s not.

The code looks as following.

The style function:

getCallOutStyle (feature, title, zIndex) {
  if (title) {
    const styles = []
    const geometry = feature.getGeometry()

    geometry.forEachSegment(function (start, end) {
      styles.push(new Style({
        geometry: new LineString([start, end]),
        stroke: new Stroke({ color: 'black', width: 1 }),
        text: new Text({
          text: title.toString(),
          font: '17px "Roboto", Helvetica Neue, Helvetica, Arial, sans-serif',
          textAlign: 'left',
          overflow: true,
          placement: 'line',
          textBaseline: 'bottom',
          stroke: new Stroke({ color: 'black', width: 1 })
        }),
        zIndex
      }))
    })

    if (styles.length >= 2) {
      styles[0].text_.setText('')
      styles.splice(styles.length)
    }

    return styles
  }
},

The modal dialog:

<template>
  <modal-dialog
    title="Выноска"
    v-model="visible"
    @hide="onHide"
    :backdrop="false"
    ref="modal"
  >
    <form-row>
      <form-group :columns="12" title="Значение" required :hasError="!callOut">
        <text-area
          :cols="1"
          :rows="3"
          v-model="callOut"
          @keyup.enter="onHide('ok')"
          :title="!callOut ? 'Укажите значение' : ''"
          ref="callOut"
        />
      </form-group>
    </form-row>
    <div slot="footer">
      <button class="btn btn-link" type="button" @click="onHide('cancel')">Отмена</button>
      <button class="btn btn-primary" type="button" @click="onHide('ok')" :disabled="!callOut">Подтвердить</button>
    </div>
  </modal-dialog>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      callOut: '',
      closed: false
    }
  },
  methods: {
    open () {
      this.callOut = ''
      this.visible = true
      this.closed = false
      if (this.visible) {
        this.$nextTick()
          .then(() => {
            this.$refs.callOut.$el.focus()
          })
      }
    },
    onHide (message) {
      if (message === 'ok') {
        this.$emit('callOutSet', this.callOut)
        this.closed = true
        this.visible = false
      } else if (message === 'cancel') {
        this.$emit('callOutCancel')
        this.closed = true
        this.visible = false
      } else {
        if (!this.closed) {
          this.$emit('callOutCancel')
        }
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
</style>

Text area component:

<template lang="pug">
textarea.form-control(
  :value="value"
  :rows="rows"
  :cols="cols"
  :readonly="readonly"
  :title="title"
  :placeholder="placeholder"
  @input="$emit('input', $event.target.value)"
  )
</template>

<script>

export default {
  props: ['placeholder', 'value', 'readonly', 'cols', 'rows', 'title']
}
</script>

Drawing:

callOut (callOut) {
  if (!callOut) {
    this.callOutDraw.un('drawend', this.onCallOutDrawEnd)
    this.map.removeInteraction(this.callOutDraw)
    this.currentDrawType = null
    return
  }

  const draw = new Draw({
    source: this.vectorLayer.getSource(),
    type: 'LineString',
    maxPoints: 3
  })
  this.callOutDraw = draw
  this.map.addInteraction(this.callOutDraw)

  draw.on('drawend', this.onCallOutDrawEnd)
},
onCallOutDrawEnd (event) {
  this.callOutFeature = event.feature
  this.$refs.setCallOutDialog.open()
},
async onCallOutSet (title) {
  if (!title) {
    this.vectorLayer.getSource().removeFeature(this.callOutFeature)
    return
  }

  this.callOutFeature.set('graphics', true)
  this.callOutFeature.set('movable', false)
  this.callOutFeature.set('style', callOutStyleId)
  this.callOutFeature.set('title', title)
  this.setFeatureStyle(this.callOutFeature)
  await this.customApi.developedDocuments.saveDrawingGraphics(this.currentDocument.id, this.updateGraphicsObjList())
},
onCallOutCancel () {
  this.vectorLayer.getSource().removeFeature(this.callOutFeature)
},

The question is how to fix text position?

The acceptable solution could be allow drawing horizontal line in the right direction only.