added word rendering comparision

src/components/Verse/index.js

@@ -131,7 +131,7 @@ export default class Verse extends Component {
     // NOTE: Some 'word's are glyphs (jeem). Not words and should not be clicked for audio
     let wordAudioPosition = -1;
 
-    const text = verse.words.map(word => ( // eslint-disable-line
+    const textCode = verse.words.map(word => ( // eslint-disable-line
       <Word
         word={word}
         key={`${word.position}-${word.code}-${word.lineNum}`}
@@ -141,18 +141,43 @@ export default class Verse extends Component {
         audioActions={audioActions}
         audioPosition={word.wordId ? wordAudioPosition += 1 : null}
         isSearched={isSearched}
+        useTextFont={false}
+      />
+    ));
+
+    const textText = verse.words.map(word => ( // eslint-disable-line
+      <Word
+        word={word}
+        key={`${word.position}-${word.code}-${word.lineNum}`}
+        currentVerse={currentVerse}
+        tooltip={tooltip}
+        isPlaying={isPlaying}
+        audioActions={audioActions}
+        audioPosition={word.wordId ? wordAudioPosition += 1 : null}
+        isSearched={isSearched}
+        useTextFont={true}
       />
     ));
 
     return (
       <h1 className={`${styles.font} text-right text-arabic`}>
-        {text}
-        <p
-          dir="rtl"
-          lang="ar"
-          className={`text-tashkeel text-p${verse.pageNumber}`}
-          dangerouslySetInnerHTML={{ __html: verse.textMadani }}
-        />
+        <p>
+          <small>WORD CODE</small>
+          <br/>
+          {textCode}
+        </p>
+
+        <p>
+          <small>WORD TEXT</small>
+          <br/>
+          {textText}
+        </p>
+
+        <p className={`text-p${verse.pageNumber}`}>
+          <small>VERSE TEXT</small>
+          <br/>
+          {verse.textMadani}
+        </p>
       </h1>
     );
   }

src/components/Verse/style.scss

@@ -106,6 +106,14 @@
     }
   }
 
+  p{
+    display: block;
+    clear: both;
+    text-align: right;
+    direction: rtl;
+    float: right;
+  }
+
   @media (max-width: $screen-xs-max) {
     font-size: 300%;
     line-height: 130%;
@@ -134,3 +142,4 @@
   width: 100%;
   margin: 0px auto;
 }
+

src/components/Word/index.js

@@ -15,7 +15,8 @@ export default class Word extends Component {
     audioPosition: PropTypes.number,
     currentVerse: PropTypes.string.isRequired,
     isPlaying: PropTypes.bool,
-    isSearched: PropTypes.bool
+    isSearched: PropTypes.bool,
+    useTextFont: PropTypes.bool // tmp change to compare text and code based rendering
   };
 
   buildTooltip = (word, tooltip) => {
@@ -58,11 +59,11 @@ export default class Word extends Component {
   }
 
   render() {
-    const { tooltip, word, currentVerse, isPlaying, audioPosition } = this.props;
+    const { tooltip, word, currentVerse, isPlaying, audioPosition, useTextFont } = this.props;
 
     let id = null;
     const highlight = currentVerse === word.verseKey && isPlaying ? 'highlight' : '';
-    const className = `${word.className} ${highlight} ${word.highlight ? word.highlight : ''}`;
+    const className = `${useTextFont ? 'text-' : ''}${word.className} ${highlight} ${word.highlight ? word.highlight : ''}`;
 
     if (word.charType === CHAR_TYPE_WORD) {
       id = `word-${word.verseKey.replace(/:/, '-')}-${audioPosition || word.position}`;
@@ -77,7 +78,7 @@ export default class Word extends Component {
         onClick={this.handleWordPlay}
         className={`${className} pointer`}
         title={this.buildTooltip(word, tooltip)}
-        dangerouslySetInnerHTML={{ __html: word.code }}
+        dangerouslySetInnerHTML={{ __html: useTextFont ? word.textMadani : word.code }}
       />
     );
   }

src/containers/App/index.js

@@ -58,7 +58,6 @@ class App extends Component {
     return (
       <div>
         <Helmet {...config.app.head} />
-        <FontStyles />
         <NoScript>
           <div className="row noscript-warning">
             <div className="col-md-12">

src/styles/fonts/_fonts.scss

@@ -1,3 +1,39 @@
+@mixin word_font($page) {
+  @font-face {
+    font-family: p#{$page};
+    src: url('../../static/fonts/ttf/p#{$page}.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: text#{$page};
+    src: url('../../static/fonts/embed_ttf/tp#{$page}.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+  }
+
+  .p#{$page} {
+    font-family: p#{$page};
+  }
+
+  .text-p#{$page} {
+    font-family: text#{$page};
+    float: right;
+  }
+}
+
+@for $i from 1 through 604 {
+  @include word_font($i);
+}
+
+@font-face {
+  font-family: quran-common;
+  src: url('../../static/fonts/quran-common/quran_common.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
 @font-face {
   font-family: 'Montserrat';
   src: url('../../static/fonts/montserrat/Montserrat-Regular.otf');
@@ -666,7 +702,7 @@ html:hover [class^="ss-"] {
 }
 
 .ss-plus:before, .ss-plus.right:after {
-  content: '+'
+  content: ''
 }
 
 .ss-hyphen:before, .ss-hyphen.right:after {