Mirrors/audiobookshelf
Mirrors/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2024-12-20 19:06:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update font settings in EpubReader and Reader components to include a "Font Boldness" slider which applies a stroke to the text

Browse Source
This commit is contained in:
Faizan Zafar 2024-06-03 18:32:10 -07:00
parent 9c33446449
commit 0715de8147
3 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/components/readers/EpubReader.vue
View File

@ -46,7 +46,8 @@ export default {
font: 'serif', font: 'serif',
fontScale: 100, fontScale: 100,
lineSpacing: 115, lineSpacing: 115,
spread: 'auto' spread: 'auto',
textStroke: 0
} }
} }
}, },
@ -109,11 +110,14 @@ export default {
const fontScale = this.ereaderSettings.fontScale / 100 const fontScale = this.ereaderSettings.fontScale / 100
const textStroke = this.ereaderSettings.textStroke / 100
return { return {
'*': { '*': {
color: `${fontColor}!important`, color: `${fontColor}!important`,
'background-color': `${backgroundColor}!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: { a: {
color: `${fontColor}!important` color: `${fontColor}!important`

12
client/components/readers/Reader.vue
View File

@ -98,6 +98,12 @@
</div> </div>
<ui-range-input v-model="ereaderSettings.lineSpacing" :min="100" :max="300" :step="5" @input="settingsUpdated" /> <ui-range-input v-model="ereaderSettings.lineSpacing" :min="100" :max="300" :step="5" @input="settingsUpdated" />
</div> </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="flex items-center">
<div class="w-40"> <div class="w-40">
<p class="text-lg">{{ $strings.LabelLayout }}:</p> <p class="text-lg">{{ $strings.LabelLayout }}:</p>
@ -130,7 +136,9 @@ export default {
font: 'serif', font: 'serif',
fontScale: 100, fontScale: 100,
lineSpacing: 115, lineSpacing: 115,
spread: 'auto' fontBoldness: 100,
spread: 'auto',
textStroke: 0
} }
} }
}, },
@ -416,4 +424,4 @@ export default {
height: 100%; height: 100%;
} }
} }
</style> </style>

1
client/strings/en-us.json
View File

@ -307,6 +307,7 @@
"LabelFolder": "Folder", "LabelFolder": "Folder",
"LabelFolders": "Folders", "LabelFolders": "Folders",
"LabelFontBold": "Bold", "LabelFontBold": "Bold",
"LabelFontBoldness": "Font Boldness",
"LabelFontFamily": "Font family", "LabelFontFamily": "Font family",
"LabelFontItalic": "Italic", "LabelFontItalic": "Italic",
"LabelFontScale": "Font scale", "LabelFontScale": "Font scale",