From 0715de814710ca6d40b46c5b6a97af0bef4ff2ee Mon Sep 17 00:00:00 2001
From: Faizan Zafar <faizan.zafar01@student.csulb.edu>
Date: Mon, 3 Jun 2024 18:32:10 -0700
Subject: [PATCH] Update font settings in EpubReader and Reader components to
 include a "Font Boldness" slider which applies a stroke to the text

---
 client/components/readers/EpubReader.vue |  8 ++++++--
 client/components/readers/Reader.vue     | 12 ++++++++++--
 client/strings/en-us.json                |  1 +
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/client/components/readers/EpubReader.vue b/client/components/readers/EpubReader.vue
index de31a8d5..8945bd19 100644
--- a/client/components/readers/EpubReader.vue
+++ b/client/components/readers/EpubReader.vue
@@ -46,7 +46,8 @@ export default {
         font: 'serif',
         fontScale: 100,
         lineSpacing: 115,
-        spread: 'auto'
+        spread: 'auto',
+        textStroke: 0
       }
     }
   },
@@ -109,11 +110,14 @@ export default {
 
       const fontScale = this.ereaderSettings.fontScale / 100
 
+      const textStroke = this.ereaderSettings.textStroke / 100
+
       return {
         '*': {
           color: `${fontColor}!important`,
           'background-color': `${backgroundColor}!important`,
-          'line-height': lineSpacing * fontScale + 'rem!important'
+          'line-height': lineSpacing * fontScale + 'rem!important',
+          '-webkit-text-stroke': textStroke + 'px ' + fontColor + '!important'
         },
         a: {
           color: `${fontColor}!important`
diff --git a/client/components/readers/Reader.vue b/client/components/readers/Reader.vue
index 5ee85182..5529ee9b 100644
--- a/client/components/readers/Reader.vue
+++ b/client/components/readers/Reader.vue
@@ -98,6 +98,12 @@
           </div>
           <ui-range-input v-model="ereaderSettings.lineSpacing" :min="100" :max="300" :step="5" @input="settingsUpdated" />
         </div>
+        <div class="flex items-center mb-4">
+          <div class="w-40">
+            <p class="text-lg">{{ $strings.LabelFontBoldness }}:</p>
+          </div>
+          <ui-range-input v-model="ereaderSettings.textStroke" :min="0" :max="300" :step="0.1" @input="settingsUpdated" />
+        </div>
         <div class="flex items-center">
           <div class="w-40">
             <p class="text-lg">{{ $strings.LabelLayout }}:</p>
@@ -130,7 +136,9 @@ export default {
         font: 'serif',
         fontScale: 100,
         lineSpacing: 115,
-        spread: 'auto'
+        fontBoldness: 100,
+        spread: 'auto',
+        textStroke: 0
       }
     }
   },
@@ -416,4 +424,4 @@ export default {
     height: 100%;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/client/strings/en-us.json b/client/strings/en-us.json
index 04cd90d1..15d90c02 100644
--- a/client/strings/en-us.json
+++ b/client/strings/en-us.json
@@ -307,6 +307,7 @@
   "LabelFolder": "Folder",
   "LabelFolders": "Folders",
   "LabelFontBold": "Bold",
+  "LabelFontBoldness": "Font Boldness",
   "LabelFontFamily": "Font family",
   "LabelFontItalic": "Italic",
   "LabelFontScale": "Font scale",