diff --git a/src/app/markup-text-component/markup-text-component.component.ts b/src/app/markup-text-component/markup-text-component.component.ts
index 2b7c2aa..fa3c52c 100644
--- a/src/app/markup-text-component/markup-text-component.component.ts
+++ b/src/app/markup-text-component/markup-text-component.component.ts
@@ -1,100 +1,102 @@
 import {Component, OnInit, Input, OnChanges} from '@angular/core';
 
 @Component({
   selector: 'app-markup-text-component',
   templateUrl: './markup-text-component.component.html',
   styleUrls: ['./markup-text-component.component.scss'],
   // preserveWhitespaces: true
 })
 export class MarkupTextComponentComponent implements OnInit {
   @Input() markupData;
 
-  word = 'bold italicbold italic';
+  word = 'bold italicbold italic normal hence there is nothing more defined';
 
   ranges: Array<Array<any>> = [
     [0, 15, "font-weight: bold;"],
     [5, 22, "font-style: italic;"],
     [5, 6, "text-decoration: underline;" ],
     [9, 10, "color: blue;"],
     [8, 10, "text-decoration: line-through;"],
     [10, 13, "text-decoration: underline;"]];
 
-  indexList: Array<number> = []; //  [0, 5, 5, 6, 7, 8, 10, 10, 13, 15, 22];  distinct list of all indices
+  startIndices: Array<number> = []; //  startindices
   lastSegmentStartIndex: number;
   styleSegments: Array<any> = [];
   ready = false;
 
 
   constructor() {
     // this.word = this.replaceSpaces(this.word);
-    this.indexList = this.getStartIndices();
+    this.startIndices = this.getStartIndices();
     this.createSegments();
     this.addFinalSegment();
   }
 
 
   ngOnInit() {
   }
 
 // this method is creating segments with their styles according to the indices of the indexList.
   private createSegments() {
     let c = 1;
-    for (const startIndex of this.indexList) {
+    for (const startIndex of this.startIndices) {
       const styles = this.getStyles(startIndex);
-      this.styleSegments.push([this.word.substring(startIndex, this.indexList[c]), styles ]);
+      this.styleSegments.push([this.word.substring(startIndex, this.startIndices[c]), styles ]);
       c += 1;
       }
   }
 
   private getStyles(startIndex) {
     // HENCE the styles of a segment apply to every character within that segment we only need to get the styles of the startindex
     // and the styles apply to the whole segment correctly.
     const styles = {};
     for (const entry of this.ranges) {
       // if our startIndex is within a given range, the style of that range will be added to styles.
       if (entry[0] <= startIndex && startIndex <= entry[1]) {
         // Adds css property/value as an object: Splits the style string at ':',
         // removes leading and ending spaces, deletes ";" and assigns it as an object as css property:"value"
         styles[entry[2].split(':')[0].trim()] = entry[2].split(':')[1].trim().replace(';', '');
       }
      }
     if (Object.keys(styles).length === 0 && styles.constructor === Object) {
       // If there is no range applying, e.g. no style at all defined for our startindex we simply define font-style: normal.
       return {'font-style': 'normal'} ;
       } else { return styles; }
     }
 
   private getStartIndices() {
 
     const startIndices: Array<number> = [];
     // Push every startindex to startIndices if not yet there (distinct).
     // Hence every endIndex is itself a startIndex -1 of sth new, we simply add also every endIndex +1 to
     // the Array of startIndices if there is not yet a start defined.
 
     this.ranges.forEach(range => {
       if (startIndices.indexOf(range[0]) === -1) {startIndices.push(range[0]); }
       if (startIndices.indexOf(range[1] + 1) === -1) {startIndices.push(range[1] + 1); }
     });
     // sort it
     startIndices.sort((n1, n2) => n1 - n2);
-    console.log('startIndices: ', startIndices);
-    // If the last endindex is not a start of a new style at all, but simply the very last character, we can not just define this end
-    // as a start of another style plus one!, so
-    // we have to pop that from our startIndices.
+    // If the last endIndex is the very last character of the string to style, we must not generate a startIndex at endIndex+1.
+    // In any other case we have to start a new style.
+    // If the last generated startIndex is bigger than this.word.length
+    // we have to pop that last startIndex (from the right) from our startIndices.
+    // If the word.length is bigger or equals the last startIndex, that last startIndex simply means the end of the style
+    // one character before. In any case a last style range with font style:normal has to start, so the last end ist defined.
     if (this.word.length < startIndices[startIndices.length - 1]) {
       startIndices.pop();
-      console.log('startIndices-popped: ', startIndices);
     }
+    this.lastSegmentStartIndex = startIndices[startIndices.length - 1];
     return startIndices;
   }
 
   private addFinalSegment() {
     // Hence the end of the text to style might not have any style information defined by this.ranges,
     // a last segment of our text is not yet part of stylesegments.
     // In this case we must add it in the end and set ready to true, so ngfor loop is starting (ngif).
-    if (this.lastSegmentStartIndex < this.word.length) {
+    if (this.lastSegmentStartIndex) {
       this.styleSegments.push([this.word.substr(this.lastSegmentStartIndex), {'font-style': 'normal'}]);
     }
     this.ready = true;
   }
 }