akai/readest
2
1
Fork 1
Code Issues Pull Requests Actions 10 Packages Projects Releases Wiki Activity

Mount additional fonts when loading documents

Browse Source
This commit is contained in:
chrox
2024-12-11 02:31:39 +01:00
parent fb31212005
commit 5a521b6e6f
3 changed files with 40 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/readest-app/src/app/reader/components/FoliateViewer.tsx
+4 -1
View File
@@ -5,7 +5,7 @@ import { useReaderStore } from '@/store/readerStore';
import { useParallelViewStore } from '@/store/parallelViewStore';
import { useFoliateEvents } from '../hooks/useFoliateEvents';
import { getOSPlatform } from '@/utils/misc';
import { getStyles } from '@/utils/style';
import { getStyles, mountAdditionalFonts } from '@/utils/style';
import { useTheme } from '@/hooks/useTheme';
import { ONE_COLUMN_MAX_INLINE_SIZE } from '@/services/constants';
import {
@@ -127,6 +127,9 @@ const FoliateViewer: React.FC<{
if (viewSettings.scrolled && shouldAutoHideScrollbar) {
handleScrollbarAutoHide(detail.doc);
}
mountAdditionalFonts(detail.doc);
if (!detail.doc.isEventListenersAdded) {
detail.doc.isEventListenersAdded = true;
detail.doc.addEventListener('keydown', handleKeydown.bind(null, bookKey));
apps/readest-app/src/libs/document.ts
-1
View File
@@ -170,7 +170,6 @@ export class DocumentLoader {
export const getDirection = (doc: Document) => {
const { defaultView } = doc;
const { writingMode, direction } = defaultView!.getComputedStyle(doc.body);
console.log('direction', writingMode, direction);
const vertical = writingMode === 'vertical-rl' || writingMode === 'vertical-lr';
const rtl = doc.body.dir === 'rtl' || direction === 'rtl' || doc.documentElement.dir === 'rtl';
return { vertical, rtl };
apps/readest-app/src/utils/style.ts
+36
View File
@@ -29,6 +29,36 @@ const getFontStyles = (
return fontStyles;
};
const getAdditionalFontFaces = () => `
@font-face {
font-family: "FangSong";
src: url("https://db.onlinewebfonts.com/t/2ecbfe1d9bfc191c6f15c0ccc23cbd43.eot");
src: url("https://db.onlinewebfonts.com/t/2ecbfe1d9bfc191c6f15c0ccc23cbd43.eot?#iefix") format("embedded-opentype"),
url("https://db.onlinewebfonts.com/t/2ecbfe1d9bfc191c6f15c0ccc23cbd43.woff2") format("woff2"),
url("https://db.onlinewebfonts.com/t/2ecbfe1d9bfc191c6f15c0ccc23cbd43.woff") format("woff"),
url("https://db.onlinewebfonts.com/t/2ecbfe1d9bfc191c6f15c0ccc23cbd43.ttf") format("truetype"),
url("https://db.onlinewebfonts.com/t/2ecbfe1d9bfc191c6f15c0ccc23cbd43.svg#FangSong") format("svg");
}
@font-face {
font-family: "Kaiti";
src: url("https://db.onlinewebfonts.com/t/1ee9941f1b8c128110ca4307dda59917.eot");
src: url("https://db.onlinewebfonts.com/t/1ee9941f1b8c128110ca4307dda59917.eot?#iefix")format("embedded-opentype"),
url("https://db.onlinewebfonts.com/t/1ee9941f1b8c128110ca4307dda59917.woff2")format("woff2"),
url("https://db.onlinewebfonts.com/t/1ee9941f1b8c128110ca4307dda59917.woff")format("woff"),
url("https://db.onlinewebfonts.com/t/1ee9941f1b8c128110ca4307dda59917.ttf")format("truetype"),
url("https://db.onlinewebfonts.com/t/1ee9941f1b8c128110ca4307dda59917.svg#STKaiti")format("svg");
}
@font-face {
font-family: "Heiti";
src: url("https://db.onlinewebfonts.com/t/881ef4472a9f34e6d8beb1cad649d168.eot");
src: url("https://db.onlinewebfonts.com/t/881ef4472a9f34e6d8beb1cad649d168.eot?#iefix")format("embedded-opentype"),
url("https://db.onlinewebfonts.com/t/881ef4472a9f34e6d8beb1cad649d168.woff2")format("woff2"),
url("https://db.onlinewebfonts.com/t/881ef4472a9f34e6d8beb1cad649d168.woff")format("woff"),
url("https://db.onlinewebfonts.com/t/881ef4472a9f34e6d8beb1cad649d168.ttf")format("truetype"),
url("https://db.onlinewebfonts.com/t/881ef4472a9f34e6d8beb1cad649d168.svg#STHeiti SC Medium")format("svg");
}
`;
const getLayoutStyles = (
spacing: number,
justify: boolean,
@@ -147,3 +177,9 @@ export const getStyles = (viewSettings: ViewSettings, themeCode: ThemeCode) => {
const userStylesheet = viewSettings.userStylesheet!;
return `${layoutStyles}\n${fontStyles}\n${fontfacesCSS}\n${userStylesheet}`;
};
export const mountAdditionalFonts = (document: Document) => {
const style = document.createElement('style');
style.textContent = getAdditionalFontFaces();
document.head.appendChild(style);
};