feat(reader): external font support in webview

Ashinch · Nov 16, 2024 · 820e4e8 · 820e4e8
1 parent 5944ec2
commit 820e4e8
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 4 deletions.
diff --git a/app/src/main/java/me/ash/reader/ui/component/webview/RYWebView.kt b/app/src/main/java/me/ash/reader/ui/component/webview/RYWebView.kt
@@ -28,6 +28,8 @@ import me.ash.reader.infrastructure.preference.LocalReadingTextFontSize
 import me.ash.reader.infrastructure.preference.LocalReadingTextHorizontalPadding
 import me.ash.reader.infrastructure.preference.LocalReadingTextLetterSpacing
 import me.ash.reader.infrastructure.preference.LocalReadingTextLineHeight
+import me.ash.reader.infrastructure.preference.ReadingFontsPreference
+import me.ash.reader.ui.ext.ExternalFonts
 import me.ash.reader.ui.ext.openURL
 import me.ash.reader.ui.ext.surfaceColorAtElevation
 import me.ash.reader.ui.theme.palette.alwaysLight
@@ -84,6 +86,11 @@ fun RYWebView(
         )
     }
 
+    val fontPath =
+        if (readingFonts is ReadingFontsPreference.External) ExternalFonts.FontType.ReadingFont.toPath(
+            context
+        ) else null
+
     AndroidView(
         modifier = modifier,
         factory = { webView },
@@ -98,6 +105,7 @@ fun RYWebView(
                     WebViewHtml.HTML.format(
                         WebViewStyle.get(
                             fontSize = fontSize,
+                            fontPath = fontPath,
                             lineHeight = lineHeight,
                             letterSpacing = letterSpacing,
                             textMargin = textMargin,

diff --git a/app/src/main/java/me/ash/reader/ui/component/webview/WebViewLayout.kt b/app/src/main/java/me/ash/reader/ui/component/webview/WebViewLayout.kt
@@ -23,11 +23,18 @@ object WebViewLayout {
         isVerticalScrollBarEnabled = true
         setBackgroundColor(Color.TRANSPARENT)
         with(this.settings) {
+
             standardFontFamily = when (readingFontsPreference) {
                 ReadingFontsPreference.Cursive -> "cursive"
                 ReadingFontsPreference.Monospace -> "monospace"
                 ReadingFontsPreference.SansSerif -> "sans-serif"
                 ReadingFontsPreference.Serif -> "serif"
+                ReadingFontsPreference.External -> {
+                    allowFileAccess = true
+                    allowFileAccessFromFileURLs = true
+                    "sans-serif"
+                }
+
                 else -> "sans-serif"
             }
             domStorageEnabled = true

diff --git a/app/src/main/java/me/ash/reader/ui/component/webview/WebViewStyle.kt b/app/src/main/java/me/ash/reader/ui/component/webview/WebViewStyle.kt
@@ -4,8 +4,24 @@ object WebViewStyle {
 
     private fun argbToCssColor(argb: Int): String = String.format("#%06X", 0xFFFFFF and argb)
 
+    private fun applyFontFace(
+        fontPath: String? = null
+    ): String = if (fontPath != null) """
+        @font-face {
+            font-family: external;
+            src: url("file://$fontPath")
+        }
+    """.trimIndent() else ""
+
+    private fun applyFontFamily(
+        fontPath: String? = null
+    ): String = if (fontPath != null) """
+        --font-family: external;
+    """.trimIndent() else ""
+
     fun get(
         fontSize: Int,
+        fontPath: String? = null,
         lineHeight: Float,
         letterSpacing: Float,
         textMargin: Int,
@@ -24,21 +40,22 @@ object WebViewStyle {
         selectionTextColor: Int,
         selectionBgColor: Int,
     ): String = """
+${applyFontFace(fontPath)}
 :root {
-    /* --font-family: Inter; */
+    ${applyFontFamily(fontPath)}
     --font-size: ${fontSize}px;
     --line-height: ${lineHeight * 1.5f};
     --letter-spacing: ${letterSpacing}px;
     --text-margin: ${textMargin}px;
     --text-color: ${argbToCssColor(textColor)};
-    --text-bold: ${if(textBold) "600" else "normal"};
+    --text-bold: ${if (textBold) "600" else "normal"};
     --text-align: ${textAlign};
     --bold-text-color: ${argbToCssColor(boldTextColor)};
     --link-text-color: ${argbToCssColor(linkTextColor)};
     --selection-text-color: ${argbToCssColor(selectionTextColor)};
     --selection-bg-color: ${argbToCssColor(selectionBgColor)};
-    --subhead-bold: ${if(subheadBold) "600" else "normal"};
-    --subhead-upper-case: ${if(subheadUpperCase) "uppercase" else "none"};
+    --subhead-bold: ${if (subheadBold) "600" else "normal"};
+    --subhead-upper-case: ${if (subheadUpperCase) "uppercase" else "none"};
     --img-margin: ${imgMargin}px;
     --img-border-radius: ${imgBorderRadius}px;
     --content-padding;