Добавил сдвиг текста от метрики на глаз

client/components/Reader/TextPage/DrawHelper.js

@@ -3,7 +3,7 @@ export default class DrawHelper {
         return `${size}px ${this.fontName}`;
     }
 
-    drawPercentBar(x, y, w, h, font, bookPos, textLength) {
+    drawPercentBar(x, y, w, h, font, fontSize, bookPos, textLength) {
         const pad = 3;
         const fh = h - 2*pad;
         const fh2 = fh/2;
@@ -17,7 +17,7 @@ export default class DrawHelper {
 
         let out = '';
         if (w1 + w2 <= w)
-            out += this.fillText(t1, x, y, font);
+            out += this.fillTextShift(t1, x, y, font, fontSize);
         
         if (w1 + w2 + w3 <= w && w3 > (10 + fh2)) {
             const barWidth = w - w1 - w2 - fh2;
@@ -26,7 +26,7 @@ export default class DrawHelper {
         }
 
         if (w1 <= w)
-            out += this.fillText(t2, x + w1 + w3, y, font);
+            out += this.fillTextShift(t2, x + w1 + w3, y, font, fontSize);
 
         return out;
     }
@@ -45,11 +45,11 @@ export default class DrawHelper {
         const date = new Date();
         const time = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
         const timeW = this.measureTextFont(time, font);
-        out += this.fillText(time, this.realWidth - timeW - fontSize, 3, font);
+        out += this.fillTextShift(time, this.realWidth - timeW - fontSize, 2, font, fontSize);
 
-        out += this.fillText(this.fittingString(title, this.realWidth/2 - fontSize - 3, font), fontSize, 3, font);
+        out += this.fillTextShift(this.fittingString(title, this.realWidth/2 - fontSize - 3, font), fontSize, 2, font, fontSize);
 
-        out += this.drawPercentBar(this.realWidth/2, 3, this.realWidth/2 - timeW - 2*fontSize, statusBarHeight, font, bookPos, textLength);
+        out += this.drawPercentBar(this.realWidth/2, 2, this.realWidth/2 - timeW - 2*fontSize, statusBarHeight, font, fontSize, bookPos, textLength);
         
         out += '</div>';
         return out;
@@ -71,17 +71,21 @@ export default class DrawHelper {
         }
     }
 
+    fillTextShift(text, x, y, font, size) {
+        return this.fillText(text, x, y + size*this.fontShift, font);        
+    }
+
     fillText(text, x, y, font) {
-        return `<div style="position: absolute; border: 1px solid black; left: ${x}px; top: ${y}px; font: ${font}">${text}</div>`;
+        return `<div style="position: absolute; left: ${x}px; top: ${y}px; font: ${font}">${text}</div>`;
     }
 
     fillRect(x, y, w, h, color) {
-        return `<div style="margin: 0; padding: 0; position: absolute; left: ${x}px; top: ${y}px; ` +
+        return `<div style="position: absolute; left: ${x}px; top: ${y}px; ` +
             `width: ${w}px; height: ${h}px; background-color: ${color}"></div>`; 
     }
 
     strokeRect(x, y, w, h, color) {
-        return `<div style="margin: 0; padding: 0; position: absolute; left: ${x}px; top: ${y}px; ` +
+        return `<div style="position: absolute; left: ${x}px; top: ${y}px; ` +
             `width: ${w}px; height: ${h}px; border: 1px solid ${color}"></div>`; 
     }
 }

client/components/Reader/TextPage/TextPage.vue

@@ -119,6 +119,7 @@ class TextPage extends Vue {
         this.statusBarColor = this.hex2rgba(this.textColor, this.statusBarColorAlpha);
         this.currentTransition = '';
         this.pageChangeDirectionDown = true;
+        this.fontShift = (this.fontShifts[this.fontName] ? this.fontShifts[this.fontName] : 0)/100;
 
         //drawHelper
         this.drawHelper.realWidth = this.realWidth;
@@ -127,6 +128,7 @@ class TextPage extends Vue {
         this.drawHelper.backgroundColor = this.backgroundColor;
         this.drawHelper.statusBarColor = this.statusBarColor;
         this.drawHelper.fontName = this.fontName;
+        this.drawHelper.fontShift = this.fontShift;
         this.drawHelper.measureText = this.measureText;
         this.drawHelper.measureTextFont = this.measureTextFont;
 
@@ -164,8 +166,21 @@ class TextPage extends Vue {
         this.linesDown = null;
 
         //preloaded fonts
-        this.fontList = ['12px ReaderDefault', '12px Arial', '12px ComicSansMS', '12px OpenSans', '12px Roboto', '12px ArialNarrow',
-            '12px Georgia', '12px Tahoma', '12px Helvetica', '12px CenturySchoolbook'];
+        this.fontShifts = {//%
+            ReaderDefault: 0,
+            Arial: 5,
+            ComicSansMS: -10,
+            OpenSans: 0,
+            Roboto: 0,
+            ArialNarrow: 0,
+            Georgia: 0,
+            Tahoma: 0,
+            Helvetica: 0,
+            CenturySchoolbook: 0,
+        }
+        this.fontList = [];
+        for (let fontName in this.fontShifts)
+            this.fontList.push(`12px ${fontName}`);
 
         //default draw props
         this.textColor = '#000000';
@@ -305,7 +320,7 @@ class TextPage extends Vue {
             this.linesUpNext = this.parsed.getLines(bookPos, -2*this.pageLineCount);
         }
 
-        let y = -this.lineInterval/2 + (this.h - this.pageLineCount*this.lineHeight)/2;
+        let y = -this.lineInterval/2 + (this.h - this.pageLineCount*this.lineHeight)/2 + this.fontSize*this.fontShift;
         if (this.showStatusBar)
             y += this.statusBarHeight*(this.statusBarTop ? 1 : 0);