v1.4.9

[+] add 方正楷体 as the fallback font [*] update LXWK font to the latest version [*] adjust TOC font size [+] optimize for ultrawide monitors [*] update no-ui version accordingly
henryxrl · Dec 16, 2023 · 8e2abc2 · 8e2abc2
1 parent 6c20de1
commit 8e2abc2
Show file tree

Hide file tree

Showing 35 changed files with 212 additions and 111 deletions.
diff --git a/README.md b/README.md
@@ -96,7 +96,9 @@
 
     [1] 当阅读书籍时界面语言为书籍语言以获得更好的用户体验
 
-3. 其他稳定性更新若干
+3. 针对超宽屏优化
+
+4. 其他稳定性更新若干
 
 ***注意：书架无法在火狐隐私浏览模式下启动，会被自动禁用。***
 
@@ -111,15 +113,15 @@
 
 火狐插件：
 
-1. [易笺正常版 (v1.4.8.2)](https://addons.mozilla.org/zh-CN/firefox/addon/yijian/)
+1. [易笺正常版 (v1.4.9)](https://addons.mozilla.org/zh-CN/firefox/addon/yijian/)
 
-2. [易笺无界面版 (v1.2.6)](https://addons.mozilla.org/zh-CN/firefox/addon/yijian_nogui/)
+2. [易笺无界面版 (v1.2.8)](https://addons.mozilla.org/zh-CN/firefox/addon/yijian_nogui/)
 
 Chrome插件：
 
-1. [易笺正常版 (v1.4.8.2)](https://chrome.google.com/webstore/detail/%E6%98%93%E7%AC%BA/dbanahlbopbjpgdkecmclbbonhpohcaf?hl=en&authuser=0)
+1. [易笺正常版 (v1.4.9)](https://chrome.google.com/webstore/detail/%E6%98%93%E7%AC%BA/dbanahlbopbjpgdkecmclbbonhpohcaf?hl=en&authuser=0)
 
-2. [易笺无界面版 (v1.2.6)](https://chrome.google.com/webstore/detail/%E6%98%93%E7%AC%BA%EF%BC%88%E6%97%A0%E7%95%8C%E9%9D%A2%E7%89%88%EF%BC%89/mifnkjlmnnaamfgmhmjdjiplaaladjlo?hl=en&authuser=0)
+2. [易笺无界面版 (v1.2.8)](https://chrome.google.com/webstore/detail/%E6%98%93%E7%AC%BA%EF%BC%88%E6%97%A0%E7%95%8C%E9%9D%A2%E7%89%88%EF%BC%89/mifnkjlmnnaamfgmhmjdjiplaaladjlo?hl=en&authuser=0)
 
 ---
 

diff --git a/README_EN.md b/README_EN.md
@@ -96,7 +96,9 @@ Support for customized settings such as font size, line height, theme colors and
 
     [1] When reading, the UI language is set to match the language of the book for better reading experience.
 
-3. Other stability bug fixes.
+3. Optimized for ultrawide monitors.
+
+4. Other stability bug fixes.
 
 ***NOTE: The bookshelf feature is incompatible with Firefox's private browsing mode and will be automatically deactivated.***
 
@@ -113,15 +115,15 @@ Support for customized settings such as font size, line height, theme colors and
 
 Firefox:
 
-1. [Regular (v1.4.8.2)](https://addons.mozilla.org/en-US/firefox/addon/yijian/)
+1. [Regular (v1.4.9)](https://addons.mozilla.org/en-US/firefox/addon/yijian/)
 
-2. [No-UI (v1.2.6)](https://addons.mozilla.org/en-US/firefox/addon/yijian_nogui/)
+2. [No-UI (v1.2.8)](https://addons.mozilla.org/en-US/firefox/addon/yijian_nogui/)
 
 Chrome:
 
-1. [Regular (v1.4.8.2)](https://chrome.google.com/webstore/detail/%E6%98%93%E7%AC%BA/dbanahlbopbjpgdkecmclbbonhpohcaf?hl=en&authuser=0)
+1. [Regular (v1.4.9)](https://chrome.google.com/webstore/detail/%E6%98%93%E7%AC%BA/dbanahlbopbjpgdkecmclbbonhpohcaf?hl=en&authuser=0)
 
-2. [No-UI (v1.2.6)](https://chrome.google.com/webstore/detail/%E6%98%93%E7%AC%BA%EF%BC%88%E6%97%A0%E7%95%8C%E9%9D%A2%E7%89%88%EF%BC%89/mifnkjlmnnaamfgmhmjdjiplaaladjlo?hl=en&authuser=0)
+2. [No-UI (v1.2.8)](https://chrome.google.com/webstore/detail/%E6%98%93%E7%AC%BA%EF%BC%88%E6%97%A0%E7%95%8C%E9%9D%A2%E7%89%88%EF%BC%89/mifnkjlmnnaamfgmhmjdjiplaaladjlo?hl=en&authuser=0)
 
 ---
 

diff --git a/css/ui.css b/css/ui.css
@@ -1,5 +1,9 @@
 @charset "UTF-8";
 /* General UI */
+html {
+    margin: 0 auto;
+    max-width: var(--ui_maxWidth);
+}
 body {
     min-width: 500px;
     font-size: 100% !important;
@@ -193,6 +197,7 @@ To Offset the anchor link to clear fixed header
     opacity: 1;
 }
 .jumpInput {
+    text-align: center;
     color: var(--paginationFontColor);
     font-family: var(--fontFamily_ui);
     border: 0;
@@ -206,11 +211,6 @@ To Offset the anchor link to clear fixed header
 
 
 /* TOC */
-#tocWrapper {
-    position: relative;
-    /* width: 16%; */
-    /* height: 50%; */
-}
 #tocContent {
     /* border: var(--mainColor_active) solid 1px; */
     /* width: 16%; */
@@ -221,7 +221,7 @@ To Offset the anchor link to clear fixed header
     transform: translate(0%, -50%);
     -webkit-transform: translate(0%, -50%);
     line-height: 1em;
-    font-size: 1em;
+    font-size: 1.2em;
     overflow-x: hidden;
     overflow-y: auto;
     font-family:var(--fontFamily_title);
@@ -298,7 +298,7 @@ a.toc-active::before {
     /* margin: 0 0 0 3%; */
     color: var(--fontInfoColor);
     /* top: 75%; */
-    font-size: 0.8em;
+    font-size: 0.9em;
     z-index: 101;
 }
 
@@ -688,7 +688,8 @@ input[type="color"]:not(:hover) {
     width: var(--ui_bookCoverWidth);
     height: var(--ui_bookContainerHeight);
     color: var(--fontColor);
-    margin: 2.5vw;
+    /* margin: 2.5vw; */
+    margin: 3em;
     overflow: visible;
 }
 /* .bookshelf .book:hover > .infoContainer .dot-menu__label {
@@ -950,8 +951,9 @@ input[type="color"]:not(:hover) {
     display: block;
     float: right;
     cursor: pointer;
-    font-size: 1.5rem;
+    /* font-size: 1.5rem; */
     /* padding: 6px 8px; */
+    padding: 2px 0px;
     z-index: 2;
     color: var(--fontInfoColor);
     width: 1.25rem;

diff --git a/css/ui_variables.css b/css/ui_variables.css
@@ -18,8 +18,9 @@
 }
 @font-face {
     font-family:"body";
-    src:local("方正宋刻本秀楷_GBK"), local("FZSongKeBenXiuKai-R-GBK"), local("FZSongKeBenXiuKaiJF"), local("FZSongKeBenXiuKaiS-R-JF"),
-    url(../fonts/FZSKBXKK.woff2) format('woff2');
+    src:local("方正宋刻本秀楷简体"), local("方正宋刻本秀楷简繁"), local("方正宋刻本秀楷_GBK"), local("FZSongKeBenXiuKai-R-GBK"), local("FZSongKeBenXiuKaiJF"), local("FZSongKeBenXiuKaiS-R-JF"), local("FZSongKeBenXiuKaiS-R-GB"), local("FZSongKeBenXiuKaiF"),
+    url(../fonts/FZSKBXKK.woff2) format('woff2'),
+    url(../fonts/FZKTK.woff2) format('woff2');  /* Fallback */
     font-display: swap;
 }
 /* @font-face {
@@ -39,6 +40,7 @@
 
 :root {
     /* UI variables */
+    --ui_maxWidth: 0px;
     --ui_scrollBarWidth: 15px;
     --ui_btnOffset: 0px;
     --ui_btnGap: 1rem;

diff --git a/fonts/FZKTK.woff2 b/fonts/FZKTK.woff2
diff --git a/fonts/LXGWWenKai-Regular.woff2 b/fonts/LXGWWenKai-Regular.woff2
diff --git a/index.html b/index.html
@@ -2,6 +2,7 @@
 <html data-lang="zh">
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title></title>
         <link rel="preload" href="./fonts/qiji-combo.woff" as="font" type="font/woff" crossorigin="anonymous" />
         <link rel="preload" href="./fonts/FZSKBXKK.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
@@ -41,7 +42,7 @@ <h3 id="dropZoneText" class="uifont prevent-select"></h3>
         </div>
 
         <!-- Table of contents -->
-        <div id="tocWrapper"><div id="tocContent"></div></div>
+        <div id="tocContent"></div>
         <div id="progress" class="uifont prevent-select">
             <span id="progress-title"></span>
             <br />

diff --git a/manifests/Chrome/regular/manifest.json b/manifests/Chrome/regular/manifest.json
@@ -2,7 +2,7 @@
     "manifest_version": 3,
     "name": "易笺",
     "description": "txt（小说）阅读器：支持秒开本地的所有txt文件，自动排版，自动分页，自动生成目录，记录阅读进度。",
-    "version": "1.4.8.2",
+    "version": "1.4.9",
     "background": {
         "service_worker": "scripts_extension/Chrome/regular/activate.js"
     },

diff --git a/manifests/Firefox/regular/manifest.json b/manifests/Firefox/regular/manifest.json
@@ -2,7 +2,7 @@
     "manifest_version": 2,
     "name": "易笺",
     "description": "txt（小说）阅读器：支持秒开本地的所有txt文件，自动排版，自动分页，自动生成目录，记录阅读进度。",
-    "version": "1.4.8.2",
+    "version": "1.4.9",
     "background": {
         "scripts": [
             "scripts_extension/Firefox/regular/activate.js"

diff --git a/publish_extension.py b/publish_extension.py
@@ -12,7 +12,7 @@ def get_version(unqiue_combinations):
         if version == 'no-ui':
             # no-ui version doesn't receive updates any more
             continue
-        with open(f'manifests/{browser}/{version}/manifest.json') as f:
+        with open(f'manifests/{browser}/{version}/manifest.json', encoding='utf-8') as f:
             manifest = json.load(f)
             version_strs.append(manifest['version'])
     assert all(x == version_strs[0] for x in version_strs), 'Version numbers are not the same across all browsers and versions. Please fix this before publishing.'
@@ -65,7 +65,7 @@ def validate_version_str(version_str):
             continue
 
         # modify the version field of manifest.json file
-        with open(f'manifests/{browser}/{version}/manifest.json', 'r+') as f:
+        with open(f'manifests/{browser}/{version}/manifest.json', 'r+', encoding='utf-8') as f:
             data = json.load(f)
             data['version'] = new_version_str
             f.seek(0)

diff --git a/scripts/ui_helpers.js b/scripts/ui_helpers.js
@@ -25,11 +25,17 @@ function setMainContentUI() {
     }, 1000);
 
     // UI calculations
+    // var maxWidth = sh(100)/9*16;
+    const maxWidth = sh(100)*2;
+    style.ui_maxWidth = `${maxWidth}px`;
     // windowWith = windowLeftRightMargin + tocWidth + gapWidth + contentWidth + windowLeftRightMargin;
     style.ui_contentMarginLeft = (100 - parseInt(style.ui_contentWidth) - parseInt(style.ui_windowLeftRightMargin)).toString();
     // console.log("IN SETMAINCONTENTUI: style.ui_contentMarginLeft: " + style.ui_contentMarginLeft);
     style.ui_tocWidth = (100 - parseInt(style.ui_contentWidth) - parseInt(style.ui_windowLeftRightMargin) * 2 - parseInt(style.ui_gapWidth)).toString();
-    style.ui_paginationCenter = (parseInt(style.ui_contentWidth) / 2 + parseInt(style.ui_contentMarginLeft)).toString();
+
+    const paginationLeftPercent = parseInt(style.ui_contentWidth) / 2 + parseInt(style.ui_contentMarginLeft);
+    const paginationLeft = vw(100) <= maxWidth ? paginationLeftPercent : (paginationLeftPercent * maxWidth / 100 + (vw(100) - maxWidth) / 2) / vw(100) * 100;
+    style.ui_paginationCenter = paginationLeft.toString();
 
     // Main content
     if (isVariableDefined(contentContainer)) {
@@ -41,17 +47,13 @@ function setMainContentUI() {
     }
 
     // TOC
-    if (isVariableDefined(tocWrapper)) {
-        tocWrapper.style.width = style.ui_tocWidth + '%';
-        tocWrapper.style.height = style.ui_tocHeight + '%';
-        tocWrapper.style.marginTop = '0px';
-        tocWrapper.style.marginRight = '0px';
-        tocWrapper.style.marginBottom = '0px';
-        tocWrapper.style.marginLeft = style.ui_windowLeftRightMargin + '%';
-    }
     if (isVariableDefined(tocContainer)) {
         tocContainer.style.width = style.ui_tocWidth + '%';
-        tocContainer.style.height = 'auto';
+        tocContainer.style.height = style.ui_tocHeight + '%';
+        tocContainer.style.marginTop = '0px';
+        tocContainer.style.marginRight = '0px';
+        tocContainer.style.marginBottom = '0px';
+        tocContainer.style.marginLeft = style.ui_windowLeftRightMargin + '%';
     }
 
     // Pagination
@@ -71,11 +73,8 @@ function setMainContentUI() {
 }
 
 function updateTOCUI(isIncreasing) {
-    if (isVariableDefined(tocWrapper)) {
-        tocWrapper.style.height = style.ui_tocHeight + '%';
-    }
     if (isVariableDefined(tocContainer)) {
-        tocContainer.style.height = 'auto';
+        tocContainer.style.height = style.ui_tocHeight + '%';
         if (tocContainer.scrollHeight > (window.innerHeight * 0.5)) {
             tocContainer.style.height = '50%';
         }
@@ -95,6 +94,12 @@ function updateTOCUI(isIncreasing) {
                 generatePagination();
             }
         }
+
+        const maxWidth = parseFloat(style.ui_maxWidth);
+        const paginationLeftPercent = parseInt(style.ui_contentWidth) / 2 + parseInt(style.ui_contentMarginLeft);
+        const paginationLeft = vw(100) <= maxWidth ? paginationLeftPercent : (paginationLeftPercent * maxWidth / 100 + (vw(100) - maxWidth) / 2) / vw(100) * 100;
+        style.ui_paginationCenter = paginationLeft.toString();
+        paginationContainer.style.left = style.ui_paginationCenter + '%';
     }
 }
 

diff --git a/scripts/ui_variables.js b/scripts/ui_variables.js
@@ -29,7 +29,6 @@ var dropZoneTextImgWrapper = document.getElementById("dropZoneTextImgWrapper");
 var dropZoneText = document.getElementById("dropZoneText");
 var dropZoneImg = document.getElementById("dropZoneImg");
 var contentContainer = document.getElementById("content");
-var tocWrapper = document.getElementById("tocWrapper");
 var tocContainer = document.getElementById("tocContent");
 var paginationContainer = document.getElementById("pagination");
 var progressContainer = document.getElementById("progress");

diff --git a/scripts/utilities.js b/scripts/utilities.js
@@ -554,4 +554,24 @@ async function URLToFileObject(url, filename) {
     const response = await fetch(url);
     const data = await response.blob();
     return new File([data], filename, { type: data.type });
+}
+
+function vh(percent) {
+    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+    return (percent * h) / 100;
+}
+
+function vw(percent) {
+    var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+    return (percent * w) / 100;
+}
+
+function sh(percent) {
+    var h = Math.max(screen.height || 0);
+    return (percent * h) / 100;
+}
+
+function sw(percent) {
+    var w = Math.max(screen.width || 0);
+    return (percent * w) / 100;
 }
diff --git a/scripts_extension/Chrome/no-ui/css/ui.css b/scripts_extension/Chrome/no-ui/css/ui.css
@@ -1,6 +1,11 @@
 @charset "UTF-8";
 /* General UI */
+html {
+    margin: 0 auto;
+    max-width: var(--ui_maxWidth);
+}
 body {
+    min-width: 500px;
     font-size: 100% !important;
     background-color: var(--bgColor) !important;
     scrollbar-color: var(--fontInfoColor) var(--bgColor) !important;
@@ -191,9 +196,11 @@ To Offset the anchor link to clear fixed header
     border-radius: 5px;
 }
 .jumpInput {
+    text-align: center;
     color: black;
+    font-family: var(--fontFamily_ui);
     border:0;
-    /* outline:0; */
+    outline:0;
     background-color: var(--bgColor) !important;
 }
 .disabledbutton {
@@ -203,11 +210,6 @@ To Offset the anchor link to clear fixed header
 
 
 /* TOC */
-#tocWrapper {
-    position: relative;
-    /* width: 16%; */
-    /* height: 50%; */
-}
 #tocContent {
     /* border: var(--mainColor_active) solid 1px; */
     /* width: 16%; */
@@ -218,7 +220,7 @@ To Offset the anchor link to clear fixed header
     transform: translate(0%, -50%);
     -webkit-transform: translate(0%, -50%);
     line-height: 1em;
-    font-size: 1em;
+    font-size: 1.2em;
     overflow-x: hidden;
     overflow-y: auto;
     font-family:var(--fontFamily_title);
@@ -295,7 +297,7 @@ a.toc-active::before {
     /* margin: 0 0 0 3%; */
     color: var(--fontInfoColor);
     /* top: 75%; */
-    font-size: 0.8em;
+    font-size: 0.9em;
     z-index: 101;
 }
 

diff --git a/scripts_extension/Chrome/no-ui/css/ui_variables.css b/scripts_extension/Chrome/no-ui/css/ui_variables.css
@@ -18,8 +18,9 @@
 }
 @font-face {
     font-family:"body";
-    src:local("方正宋刻本秀楷_GBK"), local("FZSongKeBenXiuKai-R-GBK"), local("FZSongKeBenXiuKaiJF"),
-    url(../fonts/FZSKBXKK.woff2) format('woff2');
+    src:local("方正宋刻本秀楷简体"), local("方正宋刻本秀楷简繁"), local("方正宋刻本秀楷_GBK"), local("FZSongKeBenXiuKai-R-GBK"), local("FZSongKeBenXiuKaiJF"), local("FZSongKeBenXiuKaiS-R-JF"), local("FZSongKeBenXiuKaiS-R-GB"), local("FZSongKeBenXiuKaiF"),
+    url(../fonts/FZSKBXKK.woff2) format('woff2'),
+    url(../fonts/FZKTK.woff2) format('woff2');  /* Fallback */
     font-display: swap;
 }
 /* @font-face {
@@ -39,6 +40,7 @@
 
 :root {
     /* UI variables */
+    --ui_maxWidth: 0px;
     --ui_Mode: light;
     --ui_LANG: CN;
     --ui_title_CN: 易笺;

diff --git a/scripts_extension/Chrome/no-ui/fonts/FZKTK.woff2 b/scripts_extension/Chrome/no-ui/fonts/FZKTK.woff2
diff --git a/scripts_extension/Chrome/no-ui/fonts/LXGWWenKai-Regular.woff2 b/scripts_extension/Chrome/no-ui/fonts/LXGWWenKai-Regular.woff2
diff --git a/scripts_extension/Chrome/no-ui/index.html b/scripts_extension/Chrome/no-ui/index.html
@@ -2,6 +2,7 @@
 <html>
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title></title>
         <link rel="preload" href="./fonts/qiji-combo.woff" as="font" type="font/woff" crossorigin="anonymous" />
         <link rel="preload" href="./fonts/FZSKBXKK.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
@@ -33,7 +34,7 @@ <h3 id="dropZoneText" class="uifont prevent-select"></h3>
         </div>
 
         <!-- Table of contents -->
-        <div id="tocWrapper"><div id="tocContent"></div></div>
+        <div id="tocContent"></div>
         <div id="progress" class="uifont prevent-select">
             <span id="progress-title"></span>
             <br />