Merge pull request #2253 from MxMarx/add-epub-font-selector

Option to change the font family in epub viewer

client/components/readers/EpubReader.vue

@@ -42,6 +42,7 @@ export default {
       rendition: null,
       ereaderSettings: {
         theme: 'dark',
+        font: 'serif',
         fontScale: 100,
         lineSpacing: 115,
         spread: 'auto'
@@ -130,6 +131,7 @@ export default {
 
       const fontScale = settings.fontScale || 100
       this.rendition.themes.fontSize(`${fontScale}%`)
+      this.rendition.themes.font(settings.font)
       this.rendition.spread(settings.spread || 'auto')
     },
     prev() {

client/components/readers/Reader.vue

@@ -63,7 +63,13 @@
           <div class="w-40">
             <p class="text-lg">{{ $strings.LabelTheme }}:</p>
           </div>
-          <ui-toggle-btns v-model="ereaderSettings.theme" :items="themeItems" @input="settingsUpdated" />
+          <ui-toggle-btns v-model="ereaderSettings.theme" :items="themeItems.theme" @input="settingsUpdated" />
+        </div>
+        <div class="flex items-center mb-4">
+          <div class="w-40">
+            <p class="text-lg">{{ $strings.LabelFontFamily }}:</p>
+          </div>
+          <ui-toggle-btns v-model="ereaderSettings.font" :items="themeItems.font" @input="settingsUpdated" />
         </div>
         <div class="flex items-center mb-4">
           <div class="w-40">
@@ -103,6 +109,7 @@ export default {
       showSettings: false,
       ereaderSettings: {
         theme: 'dark',
+        font: 'serif',
         fontScale: 100,
         lineSpacing: 115,
         spread: 'auto'
@@ -142,16 +149,28 @@ export default {
       ]
     },
     themeItems() {
-      return [
-        {
-          text: this.$strings.LabelThemeDark,
-          value: 'dark'
-        },
-        {
-          text: this.$strings.LabelThemeLight,
-          value: 'light'
-        }
-      ]
+      return {
+        theme: [
+          {
+            text: this.$strings.LabelThemeDark,
+            value: 'dark'
+          },
+          {
+            text: this.$strings.LabelThemeLight,
+            value: 'light'
+          }
+        ],
+        font: [
+          {
+            text: 'Sans',
+            value: 'sans-serif',
+          },
+          {
+            text: 'Serif',
+            value: 'serif',
+          }
+        ]
+      }
     },
     componentName() {
       if (this.ebookType === 'epub') return 'readers-epub-reader'

client/strings/da.json

@@ -260,6 +260,7 @@
   "LabelFinished": "Færdig",
   "LabelFolder": "Mappe",
   "LabelFolders": "Mapper",
+  "LabelFontFamily": "Fontfamilie",
   "LabelFontScale": "Skriftstørrelse",
   "LabelFormat": "Format",
   "LabelGenre": "Genre",

client/strings/de.json

@@ -260,6 +260,7 @@
   "LabelFinished": "beendet",
   "LabelFolder": "Ordner",
   "LabelFolders": "Verzeichnisse",
+  "LabelFontFamily": "Schriftfamilie",
   "LabelFontScale": "Schriftgröße",
   "LabelFormat": "Format",
   "LabelGenre": "Kategorie",

client/strings/en-us.json

@@ -260,6 +260,7 @@
   "LabelFinished": "Finished",
   "LabelFolder": "Folder",
   "LabelFolders": "Folders",
+  "LabelFontFamily": "Font family",
   "LabelFontScale": "Font scale",
   "LabelFormat": "Format",
   "LabelGenre": "Genre",

client/strings/es.json

@@ -260,6 +260,7 @@
   "LabelFinished": "Terminado",
   "LabelFolder": "Carpeta",
   "LabelFolders": "Carpetas",
+  "LabelFontFamily": "Familia tipográfica",
   "LabelFontScale": "Tamaño de Fuente",
   "LabelFormat": "Formato",
   "LabelGenre": "Genero",

client/strings/fr.json

@@ -260,6 +260,7 @@
   "LabelFinished": "Fini(e)",
   "LabelFolder": "Dossier",
   "LabelFolders": "Dossiers",
+  "LabelFontFamily": "Famille de polices",
   "LabelFontScale": "Taille de la police de caractère",
   "LabelFormat": "Format",
   "LabelGenre": "Genre",

client/strings/gu.json

@@ -260,6 +260,7 @@
   "LabelFinished": "Finished",
   "LabelFolder": "Folder",
   "LabelFolders": "Folders",
+  "LabelFontFamily": "ફોન્ટ કુટુંબ",
   "LabelFontScale": "Font scale",
   "LabelFormat": "Format",
   "LabelGenre": "Genre",

client/strings/hi.json

@@ -260,6 +260,7 @@
   "LabelFinished": "Finished",
   "LabelFolder": "Folder",
   "LabelFolders": "Folders",
+  "LabelFontFamily": "फुहारा परिवार",
   "LabelFontScale": "Font scale",
   "LabelFormat": "Format",
   "LabelGenre": "Genre",

client/strings/lt.json

@@ -260,6 +260,7 @@
   "LabelFinished": "Baigta",
   "LabelFolder": "Aplankas",
   "LabelFolders": "Aplankai",
+  "LabelFontFamily": "Famiglia di font",
   "LabelFontScale": "Šrifto mastelis",
   "LabelFormat": "Formatas",
   "LabelGenre": "Žanras",

client/strings/nl.json

@@ -260,6 +260,7 @@
   "LabelFinished": "Voltooid",
   "LabelFolder": "Map",
   "LabelFolders": "Mappen",
+  "LabelFontFamily": "Lettertypefamilie",
   "LabelFontScale": "Lettertype schaal",
   "LabelFormat": "Formaat",
   "LabelGenre": "Genre",

client/strings/no.json

@@ -260,6 +260,7 @@
   "LabelFinished": "Fullført",
   "LabelFolder": "Mappe",
   "LabelFolders": "Mapper",
+  "LabelFontFamily": "Fontfamilie",
   "LabelFontScale": "Font størrelse",
   "LabelFormat": "Format",
   "LabelGenre": "Sjanger",

client/strings/pl.json

@@ -260,6 +260,7 @@
   "LabelFinished": "Zakończone",
   "LabelFolder": "Folder",
   "LabelFolders": "Foldery",
+  "LabelFontFamily": "Rodzina czcionek",
   "LabelFontScale": "Font scale",
   "LabelFormat": "Format",
   "LabelGenre": "Gatunek",

client/strings/ru.json

@@ -260,6 +260,7 @@
   "LabelFinished": "Закончен",
   "LabelFolder": "Папка",
   "LabelFolders": "Папки",
+  "LabelFontFamily": "Семейство шрифтов",
   "LabelFontScale": "Масштаб шрифта",
   "LabelFormat": "Формат",
   "LabelGenre": "Жанр",

client/strings/zh-cn.json

@@ -260,6 +260,7 @@
   "LabelFinished": "已听完",
   "LabelFolder": "文件夹",
   "LabelFolders": "文件夹",
+  "LabelFontFamily": "字体系列",
   "LabelFontScale": "字体比例",
   "LabelFormat": "编码格式",
   "LabelGenre": "流派",