scribe.js-ocr 0.7.2 → 0.7.4

package/cli/cli.js

@@ -1,3 +1,4 @@
+import { detectPDFType } from './detectPDFType.js';
 import { extract } from './extract.js';
 import {
   check,
@@ -36,7 +37,7 @@ export const evalInternalCLI = async (pdfFile, ocrFile, options) => {
  * @param {string} pdfFile - Path to PDF file.
  * @param {?string} [outputDir='.'] - Output directory.
  * @param {Object} [options]
- * @param {'txt'} [options.format]
+ * @param {"pdf" | "hocr" | "docx" | "xlsx" | "txt" | "text" | "html"} [options.format]
  * @param {boolean} [options.reflow]
  */
 export const extractCLI = async (pdfFile, outputDir, options) => {
@@ -44,6 +45,16 @@ export const extractCLI = async (pdfFile, outputDir, options) => {
   process.exitCode = 0;
 };
 
+/**
+ *
+ * @param {string} pdfFile - Path to PDF file.
+ * @param {string} [outputPath] - Output file path.
+ */
+export const detectPDFTypeCLI = async (pdfFile, outputPath) => {
+  await detectPDFType(pdfFile, outputPath);
+  process.exitCode = 0;
+};
+
 /**
  *
  * @param {string} pdfFile - Path to PDF file.

package/cli/detectPDFType.js

@@ -1,20 +1,17 @@
-// Code for adding visualization to OCR output
-
 import fs from 'fs';
-import { createRequire } from 'module';
-import Worker from 'web-worker';
-import { initMuPDFWorker } from '../mupdf/mupdf-async.js';
-
-globalThis.Worker = Worker;
-globalThis.require = createRequire(import.meta.url);
+import scribe from '../scribe.js';
 
-const args = process.argv.slice(2);
+/**
+ *
+ * @param {string} pdfFile - Path to PDF file.
+ * @param {string} [outputPath] - Output file path.
+ *    If provided, the text will be extracted and saved to this path.
+ */
+export const detectPDFType = async (pdfFile, outputPath) => {
+  const mupdfScheduler = await scribe.data.image.getMuPDFScheduler(1);
+  const w = mupdfScheduler.workers[0];
 
-async function main() {
-  const w = await initMuPDFWorker();
-  const fileData = await fs.readFileSync(args[0]);
-
-  const outputPath = args[1];
+  const fileData = await fs.readFileSync(pdfFile);
 
   const pdfDoc = await w.openDocument(fileData, 'file.pdf');
   w.pdfDoc = pdfDoc;
@@ -32,10 +29,6 @@ async function main() {
 
   console.log('PDF Type:', type);
 
-  // Terminate all workers
-  w.terminate();
-
-  process.exitCode = 0;
-}
+  mupdfScheduler.scheduler.terminate();
 
-main();
+};

package/cli/extract.js

@@ -7,7 +7,7 @@ import scribe from '../scribe.js';
  * @param {string} pdfFile - Path to PDF file.
  * @param {?string} [output='.'] - Output file or directory.
  * @param {Object} [options]
- * @param {'txt'} [options.format]
+ * @param {Parameters<typeof scribe.download>[0]} [options.format]
  * @param {boolean} [options.reflow]
  */
 export const extract = async (pdfFile, output, options) => {
@@ -18,7 +18,9 @@ export const extract = async (pdfFile, output, options) => {
   const outputFile = outputDir === output ? `${path.basename(pdfFile).replace(/\.\w{1,5}$/i, `.${format}`)}` : path.basename(output);
   const outputPath = `${outputDir}/${outputFile}`;
 
-  scribe.setOptions({ reflow: true, extractText: true });
+  scribe.opt.reflow = true;
+  scribe.opt.extractText = true;
+
   await scribe.init();
   await scribe.importFiles([pdfFile]);
 

package/cli/scribe.js

@@ -4,6 +4,7 @@ import {
   checkCLI,
   confCLI,
   debugCLI,
+  detectPDFTypeCLI,
   evalInternalCLI, extractCLI, overlayCLI, recognizeCLI,
 } from './cli.js';
 
@@ -35,7 +36,7 @@ program
   .command('extract')
   .argument('<pdf_file>', 'Input PDF file.')
   .argument('[output]', 'Output directory or file to save results.', '.')
-  .addOption(new Option('-f, --format <ext>', 'Output format.').choices(['txt']).default('txt'))
+  .addOption(new Option('-f, --format <ext>', 'Output format.').choices(['pdf', 'hocr', 'docx', 'xlsx', 'txt', 'text', 'html']).default('txt'))
   .option('-r, --reflow', 'Reflow text by combining lines into paragraphs.')
   .description('Extract text from PDF file and save in requested format.')
   .action(extractCLI);
@@ -61,6 +62,13 @@ program
   .option('-w, --workers <number>', 'Number of workers to use. Default is up to 8.')
   .action(recognizeCLI);
 
+program
+  .command('type')
+  .argument('<pdf_file>', 'Input PDF file.')
+  .argument('[output]', 'Output file path to save text.')
+  .description('Detect PDF file type (\'Text native\', \'Image + OCR text\', or \'Image native\').')
+  .action(detectPDFTypeCLI);
+
 program
   .command('debug')
   .argument('<pdf_file>', 'Input PDF file.')

package/js/containers/app.js

@@ -1,5 +1,5 @@
 export class opt {
-  static ligatures = true;
+  static ligatures = false;
 
   static kerning = true;
 

package/js/containers/fontContainer.js

@@ -5,7 +5,7 @@
 
 // Node.js case
 import opentype from '../../lib/opentype.module.js';
-import { determineSansSerif } from '../utils/miscUtils.js';
+import { determineSansSerif, getStyleLookup } from '../utils/miscUtils.js';
 import { ca } from '../canvasAdapter.js';
 
 if (typeof process === 'object') {
@@ -104,26 +104,26 @@ export function loadFontFace(fontFamily, fontStyle, fontWeight, src) {
  * Load font from source and return a FontContainerFont object.
  * This function is used to load the Chinese font.
  * @param {string} family
- * @param {string} style
+ * @param {StyleLookup} styleLookup
  * @param {("sans"|"serif")} type
  * @param {ArrayBuffer} src
  * @param {boolean} opt
  *
  */
-export async function loadFont(family, style, type, src, opt) {
+export async function loadFont(family, styleLookup, type, src, opt) {
   const fontObj = await loadOpentype(src);
-  return new FontContainerFont(family, style, src, opt, fontObj);
+  return new FontContainerFont(family, styleLookup, src, opt, fontObj);
 }
 
 /**
  *
  * @param {string} family
- * @param {string} style
+ * @param {StyleLookup} styleLookup
  * @param {ArrayBuffer} src
  * @param {boolean} opt
  * @param {opentype.Font} opentypeObj - Kerning paris to re-apply
  * @property {string} family -
- * @property {string} style -
+ * @property {StyleLookup} style -
  * @property {ArrayBuffer} src
  * @property {opentype.Font} opentype -
  * @property {string} fontFaceName -
@@ -135,7 +135,7 @@ export async function loadFont(family, style, type, src, opt) {
  * First, it is not necessary.  Setting the font on a canvas (the only reason loading a `FontFace` is needed) is done through refering `fontFaceName` and `fontFaceStyle`.
  * Second, it results in errors being thrown when used in Node.js, as `FontFace` will be undefined in this case.
  */
-export function FontContainerFont(family, style, src, opt, opentypeObj) {
+export function FontContainerFont(family, styleLookup, src, opt, opentypeObj) {
   // As FontFace objects are included in the document FontFaceSet object,
   // they need to all have unique names.
   let fontFaceName = family;
@@ -143,8 +143,8 @@ export function FontContainerFont(family, style, src, opt, opentypeObj) {
 
   /** @type {string} */
   this.family = family;
-  /** @type {string} */
-  this.style = style;
+  /** @type {StyleLookup} */
+  this.style = styleLookup;
   /** @type {boolean} */
   this.opt = opt;
   /** @type {ArrayBuffer} */
@@ -154,9 +154,9 @@ export function FontContainerFont(family, style, src, opt, opentypeObj) {
   /** @type {string} */
   this.fontFaceName = fontFaceName;
   /** @type {('normal'|'italic')} */
-  this.fontFaceStyle = this.style === 'italic' ? 'italic' : 'normal';
+  this.fontFaceStyle = ['italic', 'boldItalic'].includes(this.style) ? 'italic' : 'normal';
   /** @type {('normal'|'bold')} */
-  this.fontFaceWeight = this.style === 'bold' ? 'bold' : 'normal';
+  this.fontFaceWeight = ['bold', 'boldItalic'].includes(this.style) ? 'bold' : 'normal';
   /** @type {("sans"|"serif")} */
   this.type = determineSansSerif(this.family) === 'SansDefault' ? 'sans' : 'serif';
   this.smallCapsMult = 0.75;
@@ -185,27 +185,27 @@ export async function loadFontContainerFamily(family, src, opt = false) {
     normal: null,
     italic: null,
     bold: null,
+    boldItalic: null,
   };
 
   /**
    *
-   * @param {('normal'|'bold'|'italic')} type
+   * @param {StyleLookup} styleLookup
    * @returns
    */
-  const loadType = (type) => new Promise((resolve) => {
-    const srcType = (src[type]);
+  const loadType = (styleLookup) => new Promise((resolve) => {
+    const srcType = (src[styleLookup]);
     if (!srcType) {
       resolve(false);
       return;
     }
-    // const scrNormal = typeof srcType === 'string' ? getFontAbsPath(srcType) : srcType;
     loadOpentype(srcType).then((font) => {
-      res[type] = new FontContainerFont(family, type, srcType, opt, font);
+      res[styleLookup] = new FontContainerFont(family, styleLookup, srcType, opt, font);
       resolve(true);
     });
   });
 
-  Promise.allSettled([loadType('normal'), loadType('italic'), loadType('bold')]);
+  Promise.allSettled([loadType('normal'), loadType('italic'), loadType('bold'), loadType('boldItalic')]);
 
   return res;
 }
@@ -300,11 +300,13 @@ export class FontCont {
 
     const fontNameEmbedded = fontObj.names.postScriptName.en;
 
-    let fontStyle = 'normal';
-    if (fontNameEmbedded.match(/italic/i)) {
-      fontStyle = 'italic';
+    let styleLookup = /** @type {StyleLookup} */ ('normal');
+    if (fontNameEmbedded.match(/boldit|bdit/i)) {
+      styleLookup = 'boldItalic';
+    } else if (fontNameEmbedded.match(/italic/i)) {
+      styleLookup = 'italic';
     } else if (fontNameEmbedded.match(/bold/i)) {
-      fontStyle = 'bold';
+      styleLookup = 'bold';
     }
 
     // mupdf makes changes to font names, so we need to do the same.
@@ -312,9 +314,9 @@ export class FontCont {
     // Spaces are replaced with underscores.
     const fontName = fontNameEmbedded.replace(/[^+]+\+/g, '').replace(/\s/g, '_');
 
-    if (!FontCont.doc?.[fontName]?.[fontStyle]) {
+    if (!FontCont.doc?.[fontName]?.[styleLookup]) {
       try {
-        const fontContainer = new FontContainerFont(fontName, fontStyle, fontData, false, fontObj);
+        const fontContainer = new FontContainerFont(fontName, styleLookup, fontData, false, fontObj);
 
         if (!FontCont.doc) {
           FontCont.doc = {};
@@ -324,12 +326,12 @@ export class FontCont {
           FontCont.doc[fontName] = {};
         }
 
-        FontCont.doc[fontName][fontStyle] = fontContainer;
+        FontCont.doc[fontName][styleLookup] = fontContainer;
       } catch (error) {
-        console.error(`Error loading font ${fontName} ${fontStyle}.`);
+        console.error(`Error loading font ${fontName} ${styleLookup}.`);
       }
     } else {
-      console.warn(`Font ${fontName} ${fontStyle} already exists.`);
+      console.warn(`Font ${fontName} ${styleLookup} already exists.`);
     }
   };
 
@@ -368,14 +370,17 @@ export class FontCont {
    * Gets a font object.  Unlike accessing the font containers directly,
    * this method allows for special values 'Default', 'SansDefault', and 'SerifDefault' to be used.
    *
-   * @param {('Default'|'SansDefault'|'SerifDefault'|string)} family - Font family name.
-   * @param {('normal'|'italic'|'bold'|string)} [style='normal']
+   * @param {Partial<Style>} style
    * @param {string} [lang='eng']
    * @returns {FontContainerFont}
    */
-  static getFont = (family, style = 'normal', lang = 'eng') => {
-    if (FontCont.doc?.[family]?.[style] && !FontCont.doc?.[family]?.[style]?.disable) {
-      return FontCont.doc[family][style];
+  static getFont = (style, lang = 'eng') => {
+    let family = style.font || FontCont.defaultFontName;
+
+    const styleLookup = getStyleLookup(style);
+
+    if (FontCont.doc?.[family]?.[styleLookup] && !FontCont.doc?.[family]?.[styleLookup]?.disable) {
+      return FontCont.doc[family][styleLookup];
     }
 
     if (lang === 'chi_sim') {
@@ -387,7 +392,7 @@ export class FontCont {
 
     // Option 1: If we have access to the font, use it.
     // Option 2: If we do not have access to the font, but it closely resembles a built-in font, use the built-in font.
-    if (!FontCont.raw?.[family]?.[style]) {
+    if (!FontCont.raw?.[family]?.[styleLookup]) {
       if (/NimbusRom/i.test(family)) {
         family = 'NimbusRoman';
       } else if (/Times/i.test(family)) {
@@ -416,7 +421,7 @@ export class FontCont {
     }
 
     // Option 3: If the font still is not identified, use the default sans/serif font.
-    if (!FontCont.raw?.[family]?.[style]) {
+    if (!FontCont.raw?.[family]?.[styleLookup]) {
       family = determineSansSerif(family);
     }
 
@@ -427,10 +432,10 @@ export class FontCont {
     if (family === 'SansDefault') family = FontCont.sansDefaultName;
 
     /** @type {FontContainerFont} */
-    let fontRes = FontCont.raw?.[family]?.[style];
-    if (!fontRes) throw new Error(`Font container does not contain ${family} (${style}).`);
+    let fontRes = FontCont.raw?.[family]?.[styleLookup];
+    if (!fontRes) throw new Error(`Font container does not contain ${family} (${styleLookup}).`);
 
-    const opt = FontCont.opt?.[family]?.[style];
+    const opt = FontCont.opt?.[family]?.[styleLookup];
     const useOpt = FontCont.useOptFamily(family);
     if (opt && useOpt) fontRes = opt;
 
@@ -441,10 +446,7 @@ export class FontCont {
    *
    * @param {OcrWord} word
    */
-  static getWordFont = (word) => {
-    const wordFontFamily = word.font || FontCont.defaultFontName;
-    return FontCont.getFont(wordFontFamily, word.style, word.lang);
-  };
+  static getWordFont = (word) => FontCont.getFont(word.style, word.lang);
 
   /**
    * Reset font container to original state but do not unload default resources.

package/js/export/export.js

@@ -207,7 +207,7 @@ export async function exportData(format = 'txt', minPage = 0, maxPage = -1) {
 /**
  * Runs `exportData` and saves the result as a download (browser) or local file (Node.js).
  * @public
- * @param {'pdf'|'hocr'|'docx'|'xlsx'|'txt'|'text'} format
+ * @param {'pdf'|'hocr'|'docx'|'xlsx'|'txt'|'text'|'html'} format
  * @param {string} fileName
  * @param {number} [minPage=0] - First page to export.
  * @param {number} [maxPage=-1] - Last page to export (inclusive). -1 exports through the last page.

package/js/export/writeHocr.js

@@ -75,38 +75,40 @@ export function writeHocr(ocrData, minValue, maxValue) {
         hocrOut += `bbox ${Math.round(wordObj.bbox.left)} ${Math.round(wordObj.bbox.top)} ${Math.round(wordObj.bbox.right)} ${Math.round(wordObj.bbox.bottom)}`;
         hocrOut += `;x_wconf ${wordObj.conf}`;
 
-        if (wordObj.font && wordObj.font !== 'Default') {
-          hocrOut += `;x_font ${wordObj.font}`;
+        if (wordObj.style.font && wordObj.style.font !== 'Default') {
+          hocrOut += `;x_font ${wordObj.style.font}`;
         }
 
-        if (wordObj.size) {
-          hocrOut += `;x_fsize ${wordObj.size}`;
+        if (wordObj.style.size) {
+          hocrOut += `;x_fsize ${wordObj.style.size}`;
         }
 
         hocrOut += "'";
 
         // Tesseract HOCR specifies default language for a paragraph in the "ocr_par" element,
         // however as ScribeOCR does not currently have a paragarph object, every word must have its language specified.
-        hocrOut += ` lang='${wordObj.lang}'`;
+        if (wordObj.lang) hocrOut += ` lang='${wordObj.lang}'`;
 
         // TODO: Why are we representing font family and style using the `style` HTML element here?
         // This is not how Tesseract does things, and our own parsing script does not appear to be written to re-import it properly.
         // Add "style" attribute (if applicable)
-        if (['italic', 'bold'].includes(wordObj.style) || wordObj.smallCaps || (wordObj.font && wordObj.font !== 'Default')) {
+        if (wordObj.style.bold || wordObj.style.italic || wordObj.style.smallCaps || (wordObj.style.font && wordObj.style.font !== 'Default')) {
           hocrOut += ' style=\'';
 
-          if (wordObj.style === 'italic') {
+          if (wordObj.style.italic) {
             hocrOut += 'font-style:italic;';
-          } else if (wordObj.style === 'bold') {
+          }
+
+          if (wordObj.style.bold) {
             hocrOut += 'font-weight:bold;';
           }
 
-          if (wordObj.smallCaps) {
+          if (wordObj.style.smallCaps) {
             hocrOut += 'font-variant:small-caps;';
           }
 
-          if (wordObj.font && wordObj.font !== 'Default') {
-            hocrOut += `font-family:${wordObj.font}`;
+          if (wordObj.style.font && wordObj.style.font !== 'Default') {
+            hocrOut += `font-family:${wordObj.style.font}`;
           }
 
           hocrOut += '\'>';
@@ -115,9 +117,9 @@ export function writeHocr(ocrData, minValue, maxValue) {
         }
 
         // Add word text, along with any formatting that uses nested elements rather than attributes
-        if (wordObj.sup) {
+        if (wordObj.style.sup) {
           hocrOut += `<sup>${ocr.escapeXml(wordObj.text)}</sup>`;
-        } else if (wordObj.dropcap) {
+        } else if (wordObj.style.dropcap) {
           hocrOut += `<span class='ocr_dropcap'>${ocr.escapeXml(wordObj.text)}</span>`;
         } else {
           hocrOut += ocr.escapeXml(wordObj.text);

package/js/export/writeHtml.js

@@ -5,6 +5,31 @@ import { assignParagraphs } from '../utils/reflowPars.js';
 import { pageMetricsArr } from '../containers/dataContainer.js';
 import ocr from '../objects/ocrObjects.js';
 
+/**
+ * Calculate the font metrics for a given font and font size.
+ * This is used to get metrics that match `ctx.measureText`, but without requiring a canvas.
+ * @param {FontContainerFont} fontI
+ * @param {number} fontSize
+ */
+const calcFontMetrics = (fontI, fontSize) => {
+  const os2 = fontI.opentype.tables.os2;
+  const unitsPerEm = fontI.opentype.unitsPerEm;
+
+  // Bit 7: Use_Typo_Metrics (1 = Yes)
+  // eslint-disable-next-line no-bitwise
+  if (os2.fsSelection >> 7 & 1) {
+    return {
+      fontBoundingBoxAscent: Math.round(os2.sTypoAscender * (fontSize / unitsPerEm)),
+      fontBoundingBoxDescent: Math.round(os2.sTypoDescender * (fontSize / unitsPerEm)),
+    };
+  }
+
+  return {
+    fontBoundingBoxAscent: Math.round(os2.usWinAscent * (fontSize / unitsPerEm)),
+    fontBoundingBoxDescent: Math.round(os2.usWinDescent * (fontSize / unitsPerEm)),
+  };
+};
+
 /**
  *
  * @param {string} text
@@ -33,18 +58,11 @@ const makeSmallCapsDivs = (text, fontSizeHTMLSmallCaps) => {
  *    If omitted, all words are included.
  */
 export function writeHtml(ocrCurrent, minpage = 0, maxpage = -1, reflowText = false, removeMargins = false, wordIds = null) {
-  if (!(typeof process === 'undefined')) {
-    throw new Error('HTML exports are not supported in Node.js');
-  }
-
-  const canvas = new OffscreenCanvas(1, 1);
-  const ctx = /** @type {OffscreenCanvasRenderingContext2D} */ (canvas.getContext('2d'));
-
   const fontsUsed = new Set();
 
   const pad = 5;
 
-  let bodyStr = '<body>';
+  let bodyStr = '<body>\n';
 
   if (maxpage === -1) maxpage = ocrCurrent.length - 1;
 
@@ -71,7 +89,7 @@ export function writeHtml(ocrCurrent, minpage = 0, maxpage = -1, reflowText = fa
       }
     }
 
-    bodyStr += `<div class="scribe-page" id="page${g}" style="position:absolute;top:${top}px;">`;
+    bodyStr += `  <div class="scribe-page" id="page${g}" style="position:absolute;top:${top}px;">\n`;
     if (removeMargins) {
       top += Math.min((maxBottom - minTop) + 200, pageMetricsArr[g].dims.height + 10);
     } else {
@@ -130,9 +148,7 @@ export function writeHtml(ocrCurrent, minpage = 0, maxpage = -1, reflowText = fa
 
         const fontSizeHTML = fontSize * scale;
 
-        ctx.font = `${fontI.fontFaceStyle} ${fontI.fontFaceWeight} ${fontSizeHTML}px ${fontI.fontFaceName}`;
-
-        const metrics = ctx.measureText(wordStr);
+        const metrics = calcFontMetrics(fontI, fontSizeHTML);
 
         const fontSizeHTMLSmallCaps = fontSize * scale * fontI.smallCapsMult;
 
@@ -159,7 +175,7 @@ export function writeHtml(ocrCurrent, minpage = 0, maxpage = -1, reflowText = fa
         // Therefore, we handle small caps by making all text print as uppercase using the `text-transform` CSS property,
         // and then wrapping each letter in a span with a smaller font size.
         let innerHTML;
-        if (wordObj.smallCaps) {
+        if (wordObj.style.smallCaps) {
           styleStr += 'text-transform:uppercase;';
           innerHTML = makeSmallCapsDivs(wordStr, fontSizeHTMLSmallCaps);
         } else {
@@ -174,29 +190,29 @@ export function writeHtml(ocrCurrent, minpage = 0, maxpage = -1, reflowText = fa
         // Line height must match the height of the font bounding box for the font metrics to be accurate.
         styleStr += `line-height:${metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent}px;`;
 
-        bodyStr += `<span class="scribe-word" id="${wordObj.id}" style="${styleStr}">${innerHTML}</span>`;
+        bodyStr += `    <span class="scribe-word" id="${wordObj.id}" style="${styleStr}">${innerHTML}</span>`;
       }
     }
 
-    bodyStr += '</div>';
+    bodyStr += '\n  </div>\n';
 
     opt.progressHandler({ n: g, type: 'export', info: { } });
   }
 
-  let styleStr = '<style>.scribe-word {';
+  let styleStr = '<style>\n  .scribe-word {\n';
 
-  styleStr += 'position:absolute;';
-  styleStr += `padding-left:${pad}px;`;
-  styleStr += `padding-right:${pad}px;`;
-  styleStr += 'z-index:1;';
-  styleStr += 'white-space:nowrap;';
+  styleStr += '    position:absolute;\n';
+  styleStr += `    padding-left:${pad}px;\n`;
+  styleStr += `    padding-right:${pad}px;\n`;
+  styleStr += '    z-index:1;\n';
+  styleStr += '    white-space:nowrap;\n';
   if (opt.kerning) {
-    styleStr += 'font-kerning:normal;';
+    styleStr += '    font-kerning:normal;\n';
   } else {
-    styleStr += 'font-kerning:none;';
+    styleStr += '    font-kerning:none;\n';
   }
 
-  styleStr += '}';
+  styleStr += '  }\n';
 
   for (const fontI of fontsUsed) {
     const cdnPath = 'https://cdn.jsdelivr.net/npm/scribe.js-ocr@0.7.1/fonts/all/';
@@ -205,19 +221,19 @@ export function writeHtml(ocrCurrent, minpage = 0, maxpage = -1, reflowText = fa
     const fontName = `${fontI.family}-${styleTitleCase}.woff`;
     const fontPath = cdnPath + fontName;
 
-    styleStr += `@font-face {
+    styleStr += `  @font-face {
     font-family: '${fontI.fontFaceName}';
     font-style: ${fontI.fontFaceStyle};
     font-weight: ${fontI.fontFaceWeight};
     src: url('${fontPath}');
-}\n`;
+  }\n`;
   }
 
-  styleStr += '</style>';
+  styleStr += '</style>\n';
 
-  bodyStr += '</body>';
+  bodyStr += '</body>\n';
 
-  const htmlStr = `<html><head>${styleStr}</head>${bodyStr}</html>`;
+  const htmlStr = `<html>\n<head>\n${styleStr}</head>\n${bodyStr}</html>`;
 
   return htmlStr;
 }