Изменение drawPage - теперь не позиционирует каждое слово отдельно,

вместо этого используются возможности CSS

client/components/Reader/TextPage/DrawHelper.js

@@ -23,17 +23,17 @@ export default class DrawHelper {
         if (!this.lastBook || this.pageLineCount < 1 || !this.book || !lines || !this.parsed.textLength)
             return '';
 
-        const spaceWidth = this.measureText(' ', {});
+        const font = this.fontByStyle({});
+        const justify = (this.textAlignJustify ? 'text-align: justify; text-align-last: justify;' : '');
 
-        let out = `<div class="layout" style="width: ${this.realWidth}px; height: ${this.realHeight}px;` + 
-            ` color: ${this.textColor}">`;
+        let out = `<div class="layout" style="width: ${this.w}px; height: ${this.h}px;` + 
+            ` position: absolute; top: ${this.fontSize*this.textShift}px; color: ${this.textColor}; font: ${font}; ${justify}` +
+            ` line-height: ${this.lineHeight}px;">`;            
 
         let len = lines.length;
         const lineCount = this.pageLineCount + (isScrolling ? 1 : 0);
         len = (len > lineCount ? lineCount : len);
 
-        let y = this.fontSize*this.textShift;
-
         for (let i = 0; i < len; i++) {
             const line = lines[i];
             /* line:
@@ -48,76 +48,26 @@ export default class DrawHelper {
                 }
             }*/
 
-            let indent = line.first ? this.p : 0;
-
             let lineText = '';
             let center = false;
-            let centerStyle = {};
             for (const part of line.parts) {
-                lineText += part.text;
+                let tOpen = (part.style.bold ? '<b>' : '');
+                tOpen += (part.style.italic ? '<i>' : '');
+                let tClose = (part.style.italic ? '</i>' : '');
+                tClose += (part.style.bold ? '</b>' : '');
+
+                lineText += `${tOpen}${part.text}${tClose}`;
+
                 center = center || part.style.center;
-                if (part.style.center)
-                    centerStyle = part.style;
             }
 
-            let filled = false;
-            // если выравнивание по ширине включено
-            if (this.textAlignJustify && !line.last && !center) {
-                const words = lineText.split(' ');
-
-                if (words.length > 1) {
-                    const spaceCount = words.length - 1;
-
-                    const space = (this.w - line.width + spaceWidth*spaceCount)/spaceCount;
-
-                    let x = indent;
-                    for (const part of line.parts) {
-                        const font = this.fontByStyle(part.style);
-                        let partWords = part.text.split(' ');
-
-                        for (let j = 0; j < partWords.length; j++) {
-                            let f = font;
-                            let style = part.style;
-                            let word = partWords[j];
-                            if (i == 0 && this.searching && word.toLowerCase().indexOf(this.needle) >= 0) {
-                                style = Object.assign({}, part.style, {bold: true});
-                                f = this.fontByStyle(style);
-                            }
-                            out += this.fillText(word, x, y, f);
-                            x += this.measureText(word, style) + (j < partWords.length - 1 ? space : 0);
-                        }
-                    }
-                    filled = true;
-                }
-            }
+            const centerStyle = (center ? `text-align: center; text-align-last: center; width: ${this.w}px` : '')
+            if (line.first)
+                lineText = `<span style="display: inline-block; margin-left: ${this.p}px"></span>${lineText}`;
+            if (line.last || center)
+                lineText = `<span style="display: inline-block; ${centerStyle}">${lineText}</span>`;
 
-            // просто выводим текст
-            if (!filled) {
-                let x = indent;
-                x = (center ? (this.w - this.measureText(lineText, centerStyle))/2 : x);
-                for (const part of line.parts) {
-                    let font = this.fontByStyle(part.style);
-
-                    if (i == 0 && this.searching) {//для поиска, разбивка по словам
-                        let partWords = part.text.split(' ');
-                        for (let j = 0; j < partWords.length; j++) {
-                            let f = font;
-                            let style = part.style;
-                            let word = partWords[j];
-                            if (word.toLowerCase().indexOf(this.needle) >= 0) {
-                                style = Object.assign({}, part.style, {bold: true});
-                                f = this.fontByStyle(style);
-                            }
-                            out += this.fillText(word, x, y, f);
-                            x += this.measureText(word, style) + (j < partWords.length - 1 ? spaceWidth : 0);
-                        }
-                    } else {
-                        out += this.fillText(part.text, x, y, font);
-                        x += this.measureText(part.text, part.style);
-                    }
-                }
-            }
-            y += this.lineHeight;
+            out += (i > 0 ? '<br>' : '') + lineText;
         }
 
         out += '</div>';